Android自定义View——自定义样式

上一节《 Android自定义View——可设置形状(圆形、圆角矩形)的ImageView，抗锯齿》讲解了第一个自定义View，现在以上一节的例子讲解自定义样式的使用，方便在xml布局文件中直接设置自定义View的属性。

首先在res/values/目录下创建attrs.xml（文件名可自定义），内容如下：

<!-- res/values/attrs.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
  <declare-styleable name="ShapeImageView">
    <attr name="shape" format="enum">
      <enum name="rect" value="1"/>
      <enum name="circle" value="2"/>
    </attr>
    <attr name="round_radius" format="dimension"/>
    <attr name="border_size" format="dimension"/>
    <attr name="border_color" format="color"/>
  </declare-styleable>
</resources>

declare-styleable标签的format属性的值可以为：

• reference  参考某一资源id
• color  颜色值，#000000
• boolean  布尔值，true
• dimension  尺寸值，12dp
• float  浮点数，0.1
• integer  整型，12
• string  字符串，abc
• fraction  百分数，50%
• enum  枚举值
• flag  位或运算

format可以指定多种类型，如<attr name = "background" format = "reference|color"/>，这样background可以指定某一图片资源id，也可以直接设置颜色。

写好样式后，接下来就要在代码中获取这些样式的值，并进行设置：

public class ShapeImageView extends ImageView {

    public static int SHAPE_REC = 1; // 矩形
    public static int SHAPE_CIRCLE = 2; // 圆形

    private float mBorderSize = 0; // 边框大小,默认为０，即无边框
    private int mBorderColor = Color.WHITE; // 边框颜色，默认为白色
    private int mShape = SHAPE_REC; // 形状，默认为直接矩形
    private float mRoundRadius = 0; // 矩形的圆角半径,默认为０，即直角矩形

    public ShapeImageView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ShapeImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(attrs);

    }

// 根据xml布局文件设置相关属性
    private void init(AttributeSet attrs) {

        TypedArray a = getContext().obtainStyledAttributes(attrs,
                R.styleable.ShapeImageView);

        mShape = a.getInt(R.styleable.ShapeImageView_shape, mShape);
        mRoundRadius = a.getDimension(R.styleable.ShapeImageView_round_radius, mRoundRadius);
        mBorderSize = a.getDimension(R.styleable.ShapeImageView_border_size, mBorderSize);
        mBorderColor = a.getColor(R.styleable.ShapeImageView_border_color, mBorderColor);

        a.recycle();
    }
｝

之后我们就可以直接在布局文件中对自定义View进行配置：

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

     <!-- xmlns:app="http://schemas.android.com/apk/res/com.example.androidsdemo" -->

     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:background="#ffffff"
     android:padding="5dp"
     android:orientation="vertical">
              <LinearLayout
                    android:layout_marginTop="10dp"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal">
                <cn.forward.androids.views.ShapeImageView
                        android:layout_width="110dp"
                        android:layout_height="110dp"
                        android:scaleType="fitXY"
                        app:shape="circle"
                        app:border_size="2dp"
                        app:border_color="#000000"
                        android:src="@drawable/chatplane_main_bg"/>
                <cn.forward.androids.views.ShapeImageView
                        android:layout_marginLeft="5dp"
                        android:layout_width="110dp"
                        android:layout_height="110dp"
                        android:scaleType="fitXY"
                        app:shape="rect"
                        app:round_radius="15dp"
                        app:border_size="2dp"
                        app:border_color="#000000"
                        android:src="@drawable/chatplane_main_bg"/>

                <TextView android:layout_width="match_parent" android:layout_height="wrap_content"
                          android:layout_gravity="center"
                          android:gravity="center"
                          android:textColor="#000000"
                          android:textSize="20dp"
                          android:text="黑色边框，无锯齿，边缘平滑"/>
            </LinearLayout>

</FrameLayout>

在布局文件中应用自定义样式有两种方式：

1. xmlns:app="http://schemas.android.com/apk/res/com.example.androidsdemo"　最后一个 / 后面跟着的是应用包名
   
2. xmlns:app="http://schemas.android.com/apk/res-auto" 自动引入自定义样式
   

如果你的项目是作为库工程给他人引用，建议采用第２钟方式。app是自定义样式的别名，可自定义。引入自定义样式后，通过 别名:属性名＝"value" 的形式设置属性，如app:shape="rect"。

相关代码我放在了github上：https://github.com/1993hzw/Androids　，　接下来的项目代码我都会放在上面，争取做一个类型工具的库。