Android控件形状

有时候原生安卓控件的外观难以满足我们的要求，我们可以通过一些简单的配置得到好看的形状，主要有以下几类。

种类	含义
stroke	实心
gradient	渐变
stroke	描边
corner	圆角
padding	边距
size	大小

• solid， 即颜色填充

 <solid android:color="#ff9d77"/>   

• gradient，颜色渐变，主要有linear（线性渐变），radial（径向渐变），sweep（扫描线渐变）

    <gradient          
    	android:style="linear"
        android:startColor="#ff8c00"          
        android:endColor="#FFFFFF"          
        android:angle="270" />    

• stroke， 边框颜色、宽度、线型等

   <stroke          
        android:width="2dp"          
        android:color="#dcdcdc" 
        android:dashWidth="5dp"
		android:dashGap="3dp" />     

• corner 圆角，可以指定四个角的弧度

   <corners          
        android:radius="2dp" /> 

或者单独指定

<corners          
    android:topRightRadius="20dp"    右上角          
    android:bottomLeftRadius="20dp"    右下角          
    android:topLeftRadius="1dp"    左上角          
    android:bottomRightRadius="0dp"    左下角          
/>

• padding，边距

    <padding          
        android:left="10dp"          
        android:top="10dp"          
        android:right="10dp"          
        android:bottom="10dp" /> 

具体使用的时候，不需要全部写出来，只需要根据需求部分指定即可。下面看几个例子

1. 圆形按钮

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid android:color="#38EC3F"/>
    <stroke android:color="@color/black"
        android:width="3dp"/>
    <corners android:radius="360dp"/>
    <padding android:bottom="10dp"
        android:top="10dp"
        android:left="10dp"
        android:right="10dp"/>
    <size
        android:height="60dp"
        android:width="60dp"/>
</shape>

然后将Button的background指定为以上样式即可，需要注意的是”因为高版本的AS继承了主题的缘故，要改成非继承指定background才能起作用“，需要修改主题为
”<style name="Theme.Demo4" parent="Theme.MaterialComponents.DayNight.NoActionBar.Bridge">“
效果如下

2. 滑动条
滑动条相对复杂一些，需要指定background, progress等属性

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="10dp"/>
            <solid android:color="#673AB8"/>
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dp"/>
                <solid android:color="#fff"/>
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dp"/>
                <solid android:color="#6FC01D"/>
            </shape>
        </clip>
    </item>
</layer-list>

然后指定progressDrawable属性即可

android:progressDrawable="@drawable/seekbarbg"

最终效果如下

如果想要设置垂直方向上的，可以通过继承Seekbar, 将画布旋转90°即可。

public class MySeekbar extends androidx.appcompat.widget.AppCompatSeekBar {
    public MySeekbar(Context context) {
        super(context);
    }
    protected void onDraw(Canvas c){
        c.rotate(-90);
        c.translate(-getHeight(),0);
        super.onDraw(c);
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (!isEnabled()) {
            return false;
        }
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_UP:
                int i=0;
                //获取滑动的距离
                i=getMax() - (int) (getMax() * event.getY() / getHeight());
                //设置进度
                setProgress(i);
                //每次拖动SeekBar都会调用
                onSizeChanged(getWidth(), getHeight(), 0, 0);
                break;
            case MotionEvent.ACTION_CANCEL:
                break;
        }
        return true;
    }
}

其他的设置和上面相似，效果如下

selector选择器

选择器可以用来根据控件的状态显示不同的背景效果，每个控件的状态有很多，这里简单的列举两个

android:state_checked
android:state_focused
android:state_selected
android:state_active

具体还有很多，使用selector和shape的结合使用，很容易就制作出按钮的动态点击效果

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <!-- 定义当button 处于pressed 状态时的形态。-->
        <shape>
            <gradient android:startColor="#8600ff" /><!--内容实现渐变-->
            <stroke android:width="2dp" android:color="#000000" /><!--边框宽度和颜色-->
            <corners android:radius="5dp" /><!--圆弧半径-->
            <padding android:left="10dp" android:top="10dp"
                android:bottom="10dp" android:right="10dp" />
        </shape>
    </item>
    <item android:state_focused="true">
        <!-- 定义当button获得focus时的形态-->
        <shape>
            <gradient android:endColor="#eac100" />
            <stroke android:width="2dp" android:color="#333333"  />
            <corners android:radius="8dp" />
            <padding android:left="10dp" android:top="10dp"
                android:bottom="10dp" android:right="10dp" />
        </shape>
    </item>
    <item android:state_checked="false">
        <shape>
            <gradient android:endColor="#eac100" />
            <stroke android:width="2dp" android:color="#333333"  />
            <corners android:radius="8dp" />
            <solid android:color="@color/teal_200"/>
            <padding android:left="10dp" android:top="10dp"
                android:bottom="10dp" android:right="10dp" />
        </shape>
    </item>
</selector>