Android 自定义shape、selector、layer-list样式

本篇记录下几种常见的自定义样式。

1.设置视图的圆角

Android中的设置圆角跟iOS中不太一样，但是我感觉，Android自定义shape 应该类似于给视图设置一个底层背景的layer。怎么做呢？

首先创建一个自定义的drawable文件，New --> Drawable resource file，使用默认的country code，创建出来的是selector，将selector改为 shape即可。

示例源码如下：

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

    <!-- 视图边框的宽度和颜色 -->
    <stroke android:width="1dp" android:color="#AAA" />

    <!-- 填充颜色 -->
    <solid android:color="#FFF" />

    <!-- 设置圆角 如果只设置radius，则表示四个圆角都为5dp-->
    <corners android:radius="10dp" />

    // 当然也可以单独设置某个圆角的半径
    <!--<corners android:topLeftRadius="10dp"-->
        <!--android:bottomRightRadius="10dp" />-->

</shape>

然后，将drawable文件设置为视图的背景即可。

   <TextView
        android:layout_marginTop="100dp"
        android:layout_marginLeft="20dp"
        android:padding="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textSize="40sp"
        android:textStyle="bold"
        android:background="@drawable/view_corner_shape" />

2.自定义控件在某种状态下的背景效果

如果想要自定义某个控件，比如按钮在某种状态下的背景，则可以使用SelectorDrawable。

首先，创建一个Selector文件，New --> Drawable resource file，使用默认的country code，创建出来的就是Selector。

selector有如下：Pressed、Focused、Hovered、Selected、Checked、Enabled、Activated等状态可以设置。

新创建出来的selector 如下：

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

</selector>

然后，将要按钮对应状态下的图片添加到工程中。

我利用按钮做一个类似Switch的效果。

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

    <item android:state_selected="true" android:drawable="@drawable/on" />

    <item android:drawable="@drawable/off" />

</selector>

这里一定要将普通状态下的样式放在最后，否则样式会不起作用。

最后，将该selector设置为按钮的背景色即可。

<Button
        android:id="@+id/register_majar_btn"
        android:layout_width="56dp"
        android:layout_height="16dp"
        android:layout_marginLeft="8dp"
        android:onClick="switchClick"
        android:background="@drawable/btn_state_bg"/>

3.自定义视图不同图层下的样式

这个其实是指Layerlist，目前大多是自定义进度条控件样式时会用到。

首先，依然是创建一个Drawable文件，，New --> Drawable resource file，使用默认的country code，创建出来的就是selector，然后将selector改为layer-list。

刚创建出来的layer-list源码：

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

</layer-list>

然后，添加两种进度条图片到工程中。

比如，进度条初始背景图片为progress_bar_bg，进度条进度图片为progress_bar_selected_bg。

再然后，设置layer-list 的item，表示初始状态和进度状态。

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

    <item android:drawable="@drawable/progress_bar_bg" android:id="@android:id/background" />
    <item android:drawable="@drawable/progress_bar_selected_bg" android:id="@android:id/progress" />

</layer-list>

最后，将该drawable 设置为控件的背景即可。

<ProgressBar
            android:id="@+id/register_completion"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:layout_gravity="center_vertical"
            android:progressDrawable="@drawable/progress_drawble"
            android:max="5"
            android:progress="1"
            style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"/>