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　，　接下來的項目代碼我都會放在上面，爭取做一個類型工具的庫。