有时候原生安卓控件的外观难以满足我们的要求,我们可以通过一些简单的配置得到好看的形状,主要有以下几类。
种类 | 含义 |
---|---|
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" />
具体使用的时候,不需要全部写出来,只需要根据需求部分指定即可。下面看几个例子
- 圆形按钮
<?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>