实例一
通过代码创建渐变颜色的shape
GradientDrawable shape = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT, bgColor);//设置渐变从左到右
shape.setShape(GradientDrawable.RECTANGLE);//设置为矩形
shape.setCornerRadius(radius);//设置圆角
一个相对复杂的demo
比如模仿ios的onOffButton,但是产品经理要求改变选中时候的颜色,本来我们是用图片做的,现在只好用shap自己画了。
比如下图:
通过xml来做
bg_switch_on.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle">
<corners android:radius="18dp"/>
<solid android:color="@color/atom_flight_blue_common_color" />
<!--<size-->
<!--android:height="34dp"-->
<!--android:width="52dp" />-->
</shape>
</item>
<item android:left="18dp">
<shape
android:shape="oval">
<solid android:color="@color/atom_browser_common_color_white"/>
<size android:height="30dp" android:width="30dp"/>
</shape>
</item>
</layer-list>
bg_switch_off.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle">
<corners android:radius="18dp"/>
<solid android:color="#FFAAAAAA" />
</shape>
</item>
<item android:right="18dp">
<shape
android:shape="oval">
<solid android:color="#ffffffff"/>
<size android:height="30dp" android:width="30dp"/>
</shape>
</item>
</layer-list>
selector_switch.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/bg_switch_on" android:state_checked="true" />
<item android:drawable="@drawable/bg_switch_off" android:state_checked="false" />
</selector>
在style中添加button的style
<style name="MySwitch" parent="@android:style/Widget.CompoundButton">
<item name="android:button">@drawable/selector_switch</item>
</style>
在toogleButton中引用:
<ToggleButton
android:id="@+id/mock_tb_total_switch"
style="@style/MySwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:background="#00000000"
android:checked="true"
android:gravity="center"
android:textOff="@null"
android:textOn="@null"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
这样就可以成功改变toogleButton按钮的样式了,但是过于麻烦了,也可以直接使用Android本身自带的Switch,Switch还是很好看的。
而且这种方式有一个问题是长度和高度要成比例,不然很难看。
通过代码实现这个layer-list
我们也可以通过代码把上面的layer-list写出来:
public static StateListDrawable genOnoffButtonSelector(int color, Context context) {
StateListDrawable res = new StateListDrawable();
res.addState(new int[]{android.R.attr.state_checked}, genCheckedDrawable(color));
res.addState(new int[]{}, context.getResources().getDrawable(R.drawable.atom_flight_toggle_btn_unchecked));
return res;
}
public static Drawable genCheckedDrawable(int color) {
GradientDrawable roundRect = new GradientDrawable();
roundRect.setShape(GradientDrawable.RECTANGLE);
roundRect.setSize(BitmapHelper.dip2px(52), BitmapHelper.dip2px(30));
roundRect.setCornerRadius(BitmapHelper.dip2px(16));
roundRect.setColor(color);
GradientDrawable circle = new GradientDrawable();
circle.setShape(GradientDrawable.OVAL);
circle.setSize(BitmapHelper.dip2px(24), BitmapHelper.dip2px(24));
circle.setColor(Color.parseColor("#ffffff"));
InsetDrawable insetLayer2 = new InsetDrawable(circle, BitmapHelper.dip2px(23), 4, 3, 4);
return new LayerDrawable(new Drawable[]{roundRect, insetLayer2});
}
这里第二个,没有点击的状态是一张图片,因为设计师说那个有阴影效果我画不出来,所以就直接用的图片,如果想要做也是一样的。