Android笔记之UI篇

Posted wkw1125

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Android笔记之UI篇相关的知识,希望对你有一定的参考价值。

android开发UI相关知识点,陆续更新中。

drawable文件夹

放大变小;放小变大:图片放到比自身高dpi的文件夹里,效果是被缩小。

EditText获得焦点时自动全选:

布局文件:android:selectAllOnFocus="true"
或代码设置:setOnFocusChangeListener

selector样式层叠顺序

用selector作为按钮样式时,各个状态在xml中的先后顺序会影响实际效果,如:

<item android:drawable="@mipmap/btn_record"/>
<item android:drawable="@mipmap/btn_record_disabled" android:state_enabled="false"/>
<item android:drawable="@mipmap/btn_record_pressed" android:state_pressed="true"/>

正常图片btn_record在第一行,所以第2、3行的按下状态,始终处理不到。因此正常状态的按钮图片必须在最后一行。
此外,selector需设置为:background,不能设置为:src,否则png的透明失效。

一张图片实现selector的多种样式

参考这里。思路是用遮罩层selector作为:src,图片作为:background。其中selector使用shape画不同状态的样式。
好处是只需1张图片资源,可以减小apk大小;缺点是ImageButton才有src属性,普通Button无法使用该方法。而ImageButton设置:text无效,因此也只能用于显示不带文字的情况。

用shape画圆角矩形

drawable/corner_rect.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 内部颜色 -->
    <solid
        android:color="#ffffff" />
    <!-- 边缘线条颜色 -->
    <stroke
        android:width="1dp"
        android:color="@color/rgb53_99" />
    <!-- 圆角的幅度 -->
    <corners
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp"
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp" />
</shape>

FrameLayout click不穿透

参考这里。在xml中越靠后的FrameLayout的层级越在上方,若其中没有view接收click事件,那么FrameLayout默认会将click“穿透”传递到底下的view。可以通过设置:clickable=”true”来强制接收click事件,从而不进行穿透。
技巧:可以用该方法实现大面积的组件“禁用/开启”效果,而不必对各组件一一设置:enabled:用一个clickable=”true”的FrameLayout,设置透明度后置于最顶层。

用RadioButton实现Tab多选一效果

参考这里。综合使用RadioGroup、RadioButton、selector即可不用java代码实现tab多选一的效果:将RadioButton的:button=”@null”(必须),并设置:background为selector即可。

ListView和RecyclerView去掉滚动条和边界阴影

参考这里。ListView和RecycrView滑动到边界时继续滑动(overScroll)会出现边界特效,具体效果由系统定制。

  • ListView/RecyclerView禁用overScroll:
android:overScrollMode="never"
  • ListView设置overScroll时顶部底部样式:
android:overScrollFooter="@android:color/transparent"
android:overScrollHeader="@android:color/transparent"
  • ListView/RecyclerView禁用滚动条/水平/垂直:
android:scrollbars="none|horizontal|vertical"

RecyclerView局部刷新闪烁问题

参考这里。RecyclerView.Adapter局部刷新的做法通常是在Adapter中重写onBindViewHolder(Holder, int)并在外部调用notifyItemChanged(int position)position这项进行局部刷新。确实,这个方法是只刷新了其中的一个item(其他项不刷新)。但有时候一个Item是由多个子view组成,我们可能希望之只刷新一个item的一个子view。比如:

朋友圈照片、点赞按钮等组成了一个朋友圈item,当我们点赞时只希望更新点赞数量,而不希望重新加载朋友圈照片(造成闪烁)。

上述方法只能达到局部刷新一个item的需求,用这种方式必然导致照片的重新载入造成闪烁。
对于这种需求,RecyclerView也提供了解决方案:在Adapter中重写onBindViewHolder(Holder holder, int position, List<Object> payloads)并在外部调用notifyItemChanged(int position, Object payload)对进行局部刷新

@Override
public void onBindViewHolder(Holder holder, int position, List<Object> payloads) 
    if (payloads == null || payloads.isEmpty()) 
        onBindViewHolder(holder, position);//原来的整个item更新
        return;
    

    //根据payload针对性更新item的子view
    if (payloads.get(0).equals(PAY_LOAD1)) 
        //如点赞UI
        return;
    

    if (payloads.get(0).equals(PAY_LOAD2)) 
         //如评论UI
        return;
    

PS.notifyItemChanged(position) 实际上等价于notifyItemChanged(position, null)

8种scaleType效果

参考这里。当图片尺寸与容器尺寸不同时,scaleType决定图片的展示行为,容器大小始终不变。

scaleType作用
fitXY将图片拉伸/挤压(不保持比例),使图片填满容器
fit[Position]:
fitStart
fitCenter
fitEnd
将图片等比例缩放,使图片的长边撑满容器,短边进行留白,而[Position]决定了留白的位置,具体效果见参考链接
matrix将图片与容器左上角对齐,保持图片长宽不变,进行裁剪或留白
center将图片与容器的中心对齐,保持图片长宽不变,进行裁剪或留白
centerCrop将图片与容器的中心对齐,再将图片等比例缩放,使图片的短边撑满容器,超出部分进行裁剪
centerInside将图片与容器的中心对齐,再将图片等比例缩小到可以完整显示。若图片本身小于容器,不会进行放大

PS.加粗为常用的居中、不裁剪效果。

自定义Toast

参考这里。可以自定义Toast位置、UI。

Toast toast=Toast.makeText(getApplicationContext(), "自定义显示位置的Toast", Toast.LENGTH_SHORT); 
toast.setGravity(Gravity.TOP|Gravity.CENTER, -50, 100); 
//toast.setGravity(Gravity.CENTER, 0, 0); //居中
toast.show();

以上是关于Android笔记之UI篇的主要内容,如果未能解决你的问题,请参考以下文章

ReactiveCocoa之UI篇

Android开发怎么让自己的APP UI漂亮大方(规范篇一)

前端的UI设计与交互之字体篇

Android之Notification的多种用法

Android 高级UI设计笔记20:RecyclerView 的详解之RecyclerView添加Item点击事件

Sass学习笔记之入门篇