Android app开发学习笔记——通过xml文件修饰View

一、shapes（设置圆角、边框、填充色、渐变色）

1.总体功能

shapes用来控制控件的几何形状，又六个子标签

• corners: 圆角
• solid: 填充颜色
• stroke: 描边
• padding: 内边距
• size: 宽高
• gradien: 渐变
  在res/drawable目录下新建一个文件tv_shape.xml:
  例如

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--圆角-->
    <corners android:radius="10dp"/>
    <!--宽高-->
    <size
        android:width="100dp"
        android:height="100dp"/>
    <!--填充颜色-->
    <solid android:color="@color/浅蓝"/>
    <!--描边-->
    <stroke
        android:width="2dp"
        android:color="@color/black"/>
    <!--内边距-->
    <padding android:top="10dp" android:bottom="10dp"
        android:left="10dp" android:right="10dp"/>
</shape>

然后在布局文件为TextView设置background,引用我们写的shape即可android:background="@drawable/tv_shape"

有时会出现右侧的预览无法显示，解决参考：
android studio 出现： Design editor is unavailable until a successful build 问题的处理

下面详细介绍每个子标签的用法

2.corners(圆角)

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

若radius与其他四个同时使用，以写在后面的为标准执行

3.solid(填充颜色)

这个标签只有一个color标签，填入自己建立的颜色就行了

    <solid android:color="@color/浅蓝"/>

4.stroke(描边）

stroke标签内可以定义描边的宽度，颜色，虚实线等

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

可以形象的理解为下图

5.size(宽高)

size就两个属性，设置宽度和高度

    <size
        android:width="100dp"
        android:height="100dp"/>

6.padding(内边距)

padding有四个属性，分别设置上下左右四个内边距

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

7.gradient(渐变)

首先注意渐变和填充色不能同时使用

android:startColor 和 android:endColor 分别为起始和结束颜色，
android:angle 是变角度，必须为45的整数倍,仅对线性渐变有效，
另外，渐变默认的模式为 android:type=“linear”’ ,即线性渐变。
可以指定渐变为径向渐变，android:type=“radial”, 径向渐变需要指定半径
android:gradientRadius=“50”.
它还具有如下属性：

    <gradient  
    android:type=["linear" | "radial" | "sweep"]    //共有3中渐变类型，线性渐变（默认）/放射渐变/扫描式渐变   
    android:angle="integer"     //渐变角度，必须为45的倍数，0为从左到右，90为从上到下   
    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时才有渐变效果   

useLevel属性通常不使用。该属性用于指定是否将该shape当成一个LevelListDrawable来使用，默认值为false,可以参考:android levellistdrawable 基本使用

8.shape自身的属性

shape除了可以设置成上述默认情况下的矩形还可以设置成椭圆，线型，环形。
其中

• rectangle的属性：
  首先，ractangle是默认值
  其没有额外的属性
• oval的属性：
  其表示控件大小的矩形所对应的椭圆
• line
  其表示线型
• ring的属性：
  相对默认属性还增加了
  innerRadius 内环的半径
  innerRadiusRatio 浮点，以环的宽度比率来表示内环的半径
  thickness 环的厚度
  thicknessRatio 以环的宽度比率来表示环的厚度

部分内容参考自:Android中的shape属性详解

二、selector(设置点击选中效果)

1.android:state_pressed属性

在drawable目录下新建一个selector_test.xml文件

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <!--按住时背景颜色-->
    <item android:drawable="@color/浅蓝" android:state_pressed="true"/>
    <!--默认背景颜色-->
    <item android:drawable="@color/white"/>
</selector>

给按钮设置背景颜色为android:background="@drawable/selector_test"
注意：
1.带android:state_pressed="true"的子标签要写在，不带有这个属性的上面才会有效
2.想要给TextView添加如下效果应加上android:clickable="true"

2.android:state_checked属性

在drawable目录下新建一个selector_test2.xml文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--选中时的显示图片-->
    <item android:drawable="@color/浅蓝" android:state_checked="true"/>
    <!--未选中时的显示图片-->
    <item android:drawable="@color/white" android:state_checked="false"/>
</selector>

上述设置的背景不仅可以是颜色还可以是图片之类的东西
接着给Checkbox控件设置背景颜色为android:background="@drawable/selector_test2"

3.android state_selected

选中状态和未选中状态其实与android:state_checked类似。这个属性好处在于大部分控件都能使用，一般需要自己在代码中设置选中和未选中状态。
新建一个文件 selector_test3.xml,引用的图片与上一个属性图片一样。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--选中时的显示图片-->
    <item android:drawable="@mipmap/ic_launcher" android:state_selected="false"/>
    <!--未选中时的显示图片-->
    <item android:drawable="@color/white" android:state_selected="true"/>
</selector>

给ImageView 控件设置 android:background: android:background="@drawable/selector_test3"
在MainActivity 中设置ImageView点击事件，在点击事件设置选中状态。

@Override
public void onClick(View v) {
//获取状态，取反，设置取反后的状态
imageView.setSelected(!imageView.isSelected());
}

效果图和CheckBox的勾选效果一样，只不过用的控件以及selector的属性不一样，它的应用范围更广。

三、layer-list(把item按照顺序层叠显示)

使用layer-list可以将多个drawable按照顺序层叠显示在一起。最先定义的在最下方显示，后面的依次往上叠放

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

    <item android:width="300dp" android:height="300dp">
        <shape android:shape="oval" >
            <solid android:color="#0000ff"/>
        </shape>
    </item>

    <item android:bottom="25dp" android:top="25dp" android:left="25dp" android:right="25dp">
        <shape android:shape="oval" >
            <solid android:color="#00ff00"/>
        </shape>
    </item>

    <item android:bottom="50dp" android:top="50dp" android:left="50dp" android:right="50dp">
        <shape android:shape="oval" >
            <solid android:color="#ff0000" />
        </shape>
    </item>
</layer-list>

效果如图