給自定義View新增xml屬性

許佳佳233發表於2016-08-04

筆者之前已經寫過了一些自定義View的文章,在此對其也就不從頭說起了,如有興趣的讀者可以看一下筆者的前兩篇文章。
android 自定義view的使用(最佳demo——返回標題欄)
android 自定義控制元件(底部icon點選效果)

筆者之前的文章中僅僅介紹了如何使用自定義View以及為什麼要使用自定義View等等,但是在實際操作中,我們還是希望自定義View之後,直接能夠在xml中就對其進行操作,如下圖:
這裡寫圖片描述

這裡寫圖片描述

那麼如何操作呢?主要是三個步驟:

1、自定義屬性名稱

2、將屬性名稱與控制元件關聯

3、從第三方名稱空間獲取到自定義屬性名稱

主要程式碼:
這裡寫圖片描述

1、自定義屬性名稱

首先要在values檔案中建立一個xml檔案,並且在其中寫上你需要的自定義屬性的名稱以及型別。
這裡寫圖片描述

atts.xml中程式碼如下:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyTitle">
        <attr name="textColor" format="color"/>
        <attr name="titleText" format="string"/>
        <attr name="leftText" format="string"/>
        <attr name="rightText" format="string"/>
    </declare-styleable>
</resources>

2、將屬性名稱與控制元件關聯

此點比較簡單,直接看程式碼:
MyView.java

package com.example.double2.viewxmltest;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * 專案名稱:ViewXmlTest
 * 建立人:Double2號
 * 建立時間:2016/8/4 10:23
 * 修改備註:
 */
public class MyView extends LinearLayout {

    private int colorText;
    private String textLeft;
    private String textTitle;
    private String textRight;
    private TextView tvLeft;
    private TextView tvTitle;
    private TextView tvRight;

    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        //從xml的屬性中獲取到字型顏色與string
        TypedArray ta=context.obtainStyledAttributes(attrs,R.styleable.MyTitle);
        colorText=ta.getColor(R.styleable.MyTitle_textColor,Color.BLACK);
        textLeft=ta.getString(R.styleable.MyTitle_leftText);
        textTitle=ta.getString(R.styleable.MyTitle_titleText);
        textRight=ta.getString(R.styleable.MyTitle_rightText);
        ta.recycle();

        //獲取到控制元件
        //載入佈局檔案,與setContentView()效果一樣
        LayoutInflater.from(context).inflate(R.layout.my_view, this);
        tvLeft=(TextView)findViewById(R.id.tv_left);
        tvTitle=(TextView)findViewById(R.id.tv_title);
        tvRight=(TextView)findViewById(R.id.tv_right);

        //將控制元件與設定的xml屬性關聯
        tvLeft.setTextColor(colorText);
        tvLeft.setText(textLeft);
        tvTitle.setTextColor(colorText);
        tvTitle.setText(textTitle);
        tvRight.setTextColor(colorText);
        tvRight.setText(textRight);

    }


}

my_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:orientation="horizontal"
              android:padding="10dp"
              tools:background="@android:color/holo_blue_dark">

    <TextView
        android:id="@+id/tv_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        tools:text="left"
        tools:textColor="#fff"/>

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:textSize="23sp"
        tools:text="title"
        tools:textColor="#fff"/>

    <TextView
        android:id="@+id/tv_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        tools:text="right"
        tools:textColor="#fff"/>
</LinearLayout>

3、從第三方名稱空間獲取到自定義屬性名稱

此處要注意在activity_main.xml要申明第三方名稱空間(在android studio中只需要用res-auto,在eclipse中就需要加上完整的包名,如下圖)
注:my_view只是使用時的一個名稱而已,後方的“http://schemas.android.com/apk/res-auto”才是真正有用的。
這裡寫圖片描述

這裡寫圖片描述

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:my_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <com.example.double2.viewxmltest.MyView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_blue_dark"
        my_view:leftText="Back"
        my_view:rightText="Go"
        my_view:textColor="#fff"
        my_view:titleText="MyViewTest"
        />

</RelativeLayout>

最後附上原始碼:http://download.csdn.net/detail/double2hao/9594621

相關文章