Android笔记之UI篇

Posted 2022-11-27 wkw1125

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

• • • drawable文件夹
    • EditText获得焦点时自动全选：
    • selector样式层叠顺序
    • 一张图片实现selector的多种样式
    • 用shape画圆角矩形
    • FrameLayout click不穿透
    • 用RadioButton实现Tab多选一效果
    • ListView和RecyclerView去掉滚动条和边界阴影
    • RecyclerView局部刷新闪烁问题
    • 8种scaleType效果
    • 自定义Toast

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();