Android之shap、selector和layer-list

最新推荐文章于 2024-08-18 03:39:11 发布

what小白

最新推荐文章于 2024-08-18 03:39:11 发布

阅读量384

点赞数 1

一、设置按钮或者文本框的样式：

本段借鉴于：https://blog.csdn.net/u012910985/article/details/21553591

shap的使用：

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
     //共有4种类型，矩形（默认）/椭圆形/直线形/环形
    android:shape=["rectangle" | "oval" | "line" | "ring"]     
    // 以下4个属性只有当类型为环形时才有效
    android:innerRadius="dimension"     //内环半径
    //内环半径相对于环的宽度的比例，比如环的宽度为50,比例为2.5,那么内环半径为20
     android:innerRadiusRatio="float"    
    android:thickness="dimension"   //环的厚度
    android:thicknessRatio="float"     //环的厚度相对于环的宽度的比例
    //如果当做是LevelListDrawable使用时值为true，否则为false.
    android:useLevel="boolean">    

    <corners    //定义圆角
        android:radius="dimension"      //全部的圆角半径
        android:topLeftRadius="dimension"   //左上角的圆角半径
        android:topRightRadius="dimension"  //右上角的圆角半径
        android:bottomLeftRadius="dimension"    //左下角的圆角半径
        android:bottomRightRadius="dimension" />    //右下角的圆角半径

    <gradient   //定义渐变效果
        //共有3中渐变类型，线性渐变（默认）/放射渐变/扫描式渐变
        android:type=["linear" | "radial" | "sweep"]  
         //渐变角度，必须为45的倍数，0为从左到右，90为从上到下
        android:angle="integer"    
        android:centerX="float"     //渐变中心X的相当位置，范围为0～1
        android:centerY="float"     //渐变中心Y的相当位置，范围为0～1
        android:startColor="color"      //渐变开始点的颜色
        android:centerColor="color"     //渐变中间点的颜色，在开始与结束点之间
        android:endColor="color"    //渐变结束点的颜色
        android:gradientRadius="float"  //渐变的半径，只有当渐变类型为radial时才能使用
        android:useLevel=["true" | "false"] />  //使用LevelListDrawable时就要设置为true。设为false时才有渐变效果

    <padding    //内部边距
        android:left="dimension"
        android:top="dimension"
        android:right="dimension"
        android:bottom="dimension" />

    <size   //自定义的图形大小
        android:width="dimension"
        android:height="dimension" />

    <solid  //内部填充颜色
        android:color="color" />

    <stroke     //描边
        android:width="dimension"   //描边的宽度
        android:color="color"   //描边的颜色
        // 以下两个属性设置虚线
        android:dashWidth="dimension"   //虚线的宽度，值为0时是实线
        android:dashGap="dimension" />      //虚线的间隔
</shape>

在res/drawable下新建一个xml文件：shap_test.xml

布局调用如下：

<TextView
    android:layout_gravity="center_horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="提交订单"
    android:gravity="center"
    android:background="@drawable/shap_test"
    />

1.设置实线边框：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--stroke描边，width为描边的宽度，color为边框的颜色-->
    <stroke android:width="0.5dp" android:color="@color/black"/>
    <!--padding文本内容与边框的距离-->
    <padding
    android:left="30dp"
    android:top="10dp"
    android:right="30dp"
    android:bottom="10dp" />

</shape>

效果如下：

2.设置虚线边框：

在stroke里面，添加 android:dashWidth="5dp"和android:dashGap="5dp"属性就可以

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--stroke描边，width为描边的宽度，color为边框的颜色-->
    <!--dashWidth虚线的宽度，值为0时是实线，dashGap虚线的间隔-->
    <stroke
        android:width="0.5dp"
        android:color="@color/black"
        android:dashWidth="5dp"
        android:dashGap="5dp"
        />
    <!--padding文本内容与边框的距离-->
    <padding
    android:left="30dp"
    android:top="10dp"
    android:right="30dp"
    android:bottom="10dp" />

</shape>

效果如下：

3.设置圆角矩形实线边框：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--stroke描边，width为描边的宽度，color为边框的颜色-->
    <stroke android:width="0.5dp" android:color="@color/black"/>
    <!--padding文本内容与边框的距离-->
    <padding
    android:left="30dp"
    android:top="10dp"
    android:right="30dp"
    android:bottom="10dp" />
    <!--corner定义圆角-->
    <!--radius全部的圆角半径，bottomLeftRadius为左上角的圆角半径，其他依次-->
     <corners
         android:radius="10dp"
         android:bottomLeftRadius="5dp"
         android:bottomRightRadius="5dp"
         android:topLeftRadius="5dp"
         android:topRightRadius="5dp"
         />
</shape>

效果如下:

4.设置圆角矩形实线边框，并且添加背景颜色：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--stroke描边，width为描边的宽度，color为边框的颜色-->
    <stroke android:width="2dp" android:color="@color/ll_clicked"/>
    <!--padding文本内容与边框的距离-->
    <padding
        android:left="30dp"
        android:top="10dp"
        android:right="30dp"
        android:bottom="10dp" />
    <!--corner定义圆角-->
    <!--radius全部的圆角半径，bottomLeftRadius为左上角的圆角半径，其他依次-->
    <corners
        android:radius="10dp"
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp"
        />
    <!--solid内部填充颜色-->
    <solid android:color="@color/text_red"/>

</shape>

效果如下：

你可以把设置stroke 边框的颜色和solid 的填充颜色设置一样，或者去掉stroke 也可以

如下效果：

5.设置渐变颜色：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--stroke描边，width为描边的宽度，color为边框的颜色-->
    <stroke android:width="2dp" android:color="@color/white"/>
    <!--padding文本内容与边框的距离-->
    <padding
        android:left="30dp"
        android:top="10dp"
        android:right="30dp"
        android:bottom="10dp" />
    <!--corner定义圆角-->
    <!--radius全部的圆角半径，bottomLeftRadius为左上角的圆角半径，其他依次-->
    <corners
        android:radius="10dp"
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp"
        />
    <!--gradient定义渐变效果-->
    <!--type有三种渐变类型，linear线性渐变（默认），radial放射渐变，sweep扫描式渐变-->
    <!--startColor渐变开始颜色，centerColor渐变中间颜色，endColor渐变结束颜色，useLevel设为false时才有渐变效果-->
    <gradient
        android:type="linear"
        android:startColor="@color/ll_clicked"
        android:centerColor="@color/text_red"
        android:endColor="@color/black"
        android:useLevel="false"
        />

</shape>

效果如下：

6.设置其他形状的，属性用法和其他一样

设置椭圆：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >
    <!--stroke描边，width为描边的宽度，color为边框的颜色-->
    <stroke android:width="0.5dp" android:color="@color/black"/>
    <!--padding文本内容与边框的距离-->
    <padding
    android:left="30dp"
    android:top="10dp"
    android:right="30dp"
    android:bottom="10dp" />

</shape>

在shap里面添加 android:shape="oval"就行

效果如下;

其他的两种和这个差不多，就不写了

二，按钮点击的样式（状态选择器）：

本段借鉴于： https://blog.csdn.net/qq_20451879/article/details/80340823

selector的使用：

以Xml方式写出状态选择器，然后将我们写好的selector状态器存在放res - drawable 或 res - color 文件夹下，较为常用

设置 bankgrpud的时候，我们的selector状态选择器存放在res - drawable 下！！！

设置TextColor属性的时候，我们的selector状态选择器存放在res - color 下！！！

设置drawble可以是颜色，也可以是图片，随需求而定！！！

状态设置类型：

常用类型：

//设置是否按压状态，一般在true时设置该属性，表示已按压状态，默认为false
android:state_pressed
//设置是否选中状态，true表示已选中，false表示未选中
android:state_selected
//设置是否勾选状态，主要用于CheckBox和RadioButton，true表示已被勾选，false表示未被勾选
android:state_checked
//设置勾选是否可用状态，类似state_enabled，只是state_enabled会影响触摸或点击事件，state_checkable影响勾选事件
android:state_checkable
//设置是否获得焦点状态，true表示获得焦点，默认为false，表示未获得焦点
android:state_focused
//设置触摸或点击事件是否可用状态，一般只在false时设置该属性，表示不可用状态
android:state_enabled

不常用类型：

//设置当前窗口是否获得焦点状态，true表示获得焦点,false 表示未获得焦点，例如拉下通知栏或弹出对话框时， 当前界面就会失去焦点；另外，ListView的ListItem获得焦点时也会触发true状态，可以理解为当前窗口就是ListItem本身
android:state_window_focused       
//设置是否被激活状态，true表示被激活，false表示未激活，API Level 11及以上才支持，可通过代码调用控件的
android:state_activated             
//方法设置是否激活该控件
setActivated(boolean)
//设置是否鼠标在上面滑动的状态**，true表示鼠标在上面滑动，默认为false，API Level 14及以上才支持
//补充：selector标签下有两个比较有用的属性要说一下，添加了下面两个属性之后，则会在状态改变时出现淡入淡出效果，
//但必须在API Level 11及以上才支持
android:state_hovered     
//状态改变时，旧状态消失时的淡出时间，以毫秒为单位
android:exitFadeDuration      
//状态改变时，新状态展示时的淡入时间，以毫秒为单位
android:enterFadeDuration

样式一：改变按钮字体颜色：

前面说过------->设置TextColor属性的时候，我们的selector状态选择器存放在res - color 下！！！

然后在color里面新建btn_selector_textcolor1.xml

代码中引用为：

<Button
    android:layout_marginTop="20dp"
    android:layout_gravity="center"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="提交订单"
    android:gravity="center"
    android:textColor="@color/btn_selector_textcolor1"
    />

btn_selector.xml如下：

！！！注意：颜色的位置必须有顺序，按下的颜色在前

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item  android:color="@color/text_red_pressed" android:state_pressed="true"/>
    <item  android:color="@color/text_blue" />
</selector>

效果如下：

默认颜色是text_blue，然后按钮的颜色是text_red_pressed

样式二：点击改变按钮的背景颜色

设置 bankgrpud的时候，我们的selector状态选择器存放在res - drawable 下！！！

在drawble/res下新建btn_selector_bg1.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item  android:drawable="@color/text_red_pressed" android:state_pressed="true"/>
<item  android:drawable="@color/text_blue" />
</selector>

颜色设置再不是color了，是drawble

效果如下：

默认颜色是text_blue，然后按钮的颜色是text_red_presse

样式三：同时设置字体颜色和背景颜色：

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="提交订单"
    android:textColor="@color/btn_selector_textcolor1"
    android:background="@drawable/btn_selector_bg1"
    />

用的还是上面的selector。

效果如下：

样式四： android:state_checked (勾选状态)

给checkBox或者其他的控件有勾选的时候可以用：

<CheckBox
    android:layout_marginTop="20dp"
    android:background="@drawable/btn_selector_checked_bg2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Checked：点击后背景状态长存"
    android:gravity="center"
    />

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item  android:drawable="@color/text_red_pressed" android:state_checked="true"/>
<item  android:drawable="@color/text_blue" />
</selector>

设置android:state_checked="true"

效果如下：

其他的什么焦点state_focused="true"等等可以自己需要的时候去设置

三、layer-list的使用

借鉴来自于：https://blog.csdn.net/weixin_40797204/article/details/78832640

layer-list就像framelayout一样，一层被一层遮住

1.创建带有蓝色顶部边线的 layer-list 图

在res/drawble下新建一个btn_selector_bg3.xml,然后在background引用

<TextView
    android:layout_marginTop="20dp"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:background="@drawable/btn_selector_bg3"
    android:gravity="center"
    android:text="单一边线效果"/>

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--底层使用蓝色填充色-->
    <item>
       <shape>
            <solid android:color="@color/text_blue"/>
         </shape>
    </item>
    <!--上面一层距离底层的顶部1dp,类似marginTop,填充色为白色，这样就形成了一个带有蓝色顶部边线的白色背景的图-->
    <item android:top="1dp">
        <shape>
            <solid android:color="@color/white"/>
        </shape>
    </item>
</layer-list>

效果如下：

2.上下左右添加实线：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--底层使用蓝色填充色-->
    <item>
       <shape>
            <solid android:color="@color/text_blue"/>
         </shape>
    </item>
    <!--上面一层距离底层的顶部1dp,类似marginTop,填充色为白色，这样就形成了一个带有蓝色顶部边线的白色背景的图-->
    <item android:top="1dp" android:bottom="1dp" android:left="1dp" android:right="1dp">
        <shape>
            <solid android:color="@color/white"/>
        </shape>
    </item>
</layer-list>

其实就是添加了top，bottom，left，right

效果如下：

3.创建阴影效果：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:left="3dp" android:top="6dp">
       <shape>
            <solid android:color="#b4b5b6"/>
         </shape>
    </item>
    <item  android:bottom="6dp"  android:right="3dp">
        <shape>
            <solid android:color="@color/white"/>
        </shape>
    </item>
</layer-list>

效果如下：

还有什么图片叠加和缩放的，可以去链接里面