Android自定義UI模板

第一步：自定義xml屬性

新建一個android項目，在values文件夾中新建一個atts.xml的文件，在這個xml文件中聲明我們一會在使用自定義控件時候需要指明的屬性。
atts.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="ToolBar">
        <attr name="title" format="string" />
        <attr name="titleTextSize" format="dimension" />
        <attr name="titleTextColor" format="color" />
        <attr name="leftBackground" format="reference|color" />
        <attr name="leftText" format="string" />
        <attr name="leftTextColor" format="reference|color" />
        <attr name="rightBackground" format="reference|color" />
        <attr name="rightText" format="string" />
        <attr name="rightTextColor" format="reference|color" />
    </declare-styleable>

</resources>

 

前面的name是我們要使用的屬性名稱，后面的format表示該屬性接受的值的格式，string表示該屬性的值是一個字符串，color表示該 屬性的值是一個顏色值，dimension表示該屬性的值是一個尺寸，reference表示該屬性的值可以參考某一個資源id，其他常見的format 值還有：boolean（布爾值）、float（浮點值）、integer（整型值）、fraction（百分數）、enum（枚舉值）、flag（位或 運算）。

---

第二步：自定義標題類
在Java文件中自定義一個類繼承RelativeLayout，並實現它的構造方法，我們的標題欄由三部分組成，左右兩邊各是一個Button，中間是一個TextView，因此我們在這個布局文件中要做的事就是對這三個控件進行處理。

先聲明標題欄的三個空間及相關參數，這些參數都是根據atts.xml中來設置的，因為我們在引用自定義控件的時候是從xml中引用的，屬性的設置都在xml文件中，我們從xml文件中拿到屬性的值后再對控件設置賦值。

/**
     * 標題欄的三個控件
     */
    private Button leftBtn, rightBtn;
    private TextView title;

    /**
     * 左邊按鈕的屬性
     */
    private int leftTextColor;
    private Drawable leftBackground;
    private String leftText;

    /**
     * 右邊按鈕的屬性
     */
    private int rightTextColor;
    private Drawable rightBackground;
    private String rightText;

    /**
     * 中間TextView的屬性
     */
    private int titleTextColor;
    private String titleText;
    private float titleTextSize;

    /**
     * 三個控件的布局參數
     */
    private LayoutParams leftParams, rightParams, titleParams;

 

下面是構造方法，構造方法傳入兩個參數，一個是上下文參數，另外一個是AttributeSet，AttributeSet是一個屬性的集合，用它 可以處理一組xml標簽集合。使用ta.getXXX方法，我們可以先從xml文件獲得屬性的值，然后把這些值設置給控件。最后通過 LayoutParams來設置控件的寬高，設置好寬高之后，調用addView方法，添加控件。

public MyToolBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray ta = context.obtainStyledAttributes(attrs,
                R.styleable.ToolBar);

        leftTextColor = ta.getColor(R.styleable.ToolBar_leftTextColor, 0);
        leftBackground = ta.getDrawable(R.styleable.ToolBar_leftBackground);
        leftText = ta.getString(R.styleable.ToolBar_leftText);

        rightTextColor = ta.getColor(R.styleable.ToolBar_rightTextColor, 0);
        rightBackground = ta.getDrawable(R.styleable.ToolBar_rightBackground);
        rightText = ta.getString(R.styleable.ToolBar_rightText);

        titleText = ta.getString(R.styleable.ToolBar_title);
        titleTextColor = ta.getColor(R.styleable.ToolBar_titleTextColor, 0);
        titleTextSize = ta.getDimension(R.styleable.ToolBar_titleTextSize, 0);


        //對ta進行回收
        ta.recycle();

        leftBtn = new Button(context);
        rightBtn = new Button(context);
        title = new TextView(context);

        /**
         * 設置屬性
         */
        leftBtn.setText(leftText);
        leftBtn.setTextColor(leftTextColor);
        leftBtn.setBackground(leftBackground);

        rightBtn.setText(rightText);
        rightBtn.setTextColor(rightTextColor);
        rightBtn.setBackground(rightBackground);

        title.setText(titleText);
        title.setTextColor(titleTextColor);
        title.setTextSize(titleTextSize);
        title.setGravity(Gravity.CENTER);

        //設置整體背景顏色
        setBackgroundColor(0x7CFC0055);

        leftParams = new LayoutParams(
                android.view.ViewGroup.LayoutParams.WRAP_CONTENT,
                android.view.ViewGroup.LayoutParams.WRAP_CONTENT);
        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
        //添加控件
        addView(leftBtn, leftParams);

        rightParams = new LayoutParams(
                android.view.ViewGroup.LayoutParams.WRAP_CONTENT,
                android.view.ViewGroup.LayoutParams.WRAP_CONTENT);
        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
        addView(rightBtn, rightParams);

        titleParams = new LayoutParams(
                android.view.ViewGroup.LayoutParams.WRAP_CONTENT,
                android.view.ViewGroup.LayoutParams.MATCH_PARENT);
        titleParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);
        addView(title, titleParams);

    }

 

---

第三步：引用我們定義的控件
自定義好控件之后，我們就可以使用自定義的控件了，在主布局的xml文件中 引用我們自定義的控件。自定義控件的前三個屬性都是以android:開頭，這表示這些屬性都是系統的，后面的屬性以custombar開頭，表示這些屬 性都是我們自定義的，為了能夠使用自定義的custombar，我們需要在RelativeLayout中添加一句：

xmlns:custombar="http://schemas.android.com/apk/res/com.example.mytoolbar"

注意后面的com.example.mytoolbar是你應用的包名稱。如果閣下使用的不是eclipse而是android studio，那么這一行不用這么麻煩，只需要寫上：

xmlns:custombar="http://schemas.android.com/apk/res-auto"

我們自定義的屬性就是我們在atts.xml中聲明的要設置的屬性。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custombar="http://schemas.android.com/apk/res/com.example.mytoolbar"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.example.mytoolbar.MyToolBar
        android:id="@+id/mytoolbar"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        custombar:leftBackground="@android:color/holo_blue_light"
        custombar:leftText="返回"
        custombar:leftTextColor="@android:color/black"
        custombar:rightBackground="@android:color/holo_blue_light"
        custombar:rightText="更多"
        custombar:rightTextColor="@android:color/black"
        custombar:title="標題欄"
        custombar:titleTextColor="@android:color/black"
        custombar:titleTextSize="18sp" >
    </com.example.mytoolbar.MyToolBar>

</RelativeLayout>

 

做完這些工作之后，運行你的項目，就能看到我們在文章開頭給出的那個畫面了。

---

第四步：為自定義控件添加事件

好像還少點什么，是的，我們的控件都還沒有點擊事件。要給事件設置點擊事件，需要先在自定義控件中聲明一個事件接口，並聲明一個接口的實例：

private OnToolBarClickListener listener;
    public interface OnToolBarClickListener {
        /**
         * 左邊按鈕點擊事件
         */
        public void leftClick();

        /**
         * 右邊按鈕點擊事件
         */
        public void rightClick();
    }

 

然后暴露出來一個方法給其他類調用，這個方法的參數就是這個接口：

	 public void setOnToolBarClickListener(OnToolBarClickListener listener) { 2 this.listener = listener; 3 } 

最后在左右兩個按鈕的點擊事件中調用接口中的方法即可，聰明的看官猜猜這是什么模式？

leftBtn.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                listener.leftClick();
            }
        });
        rightBtn.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                listener.rightClick();
            }
        });

 

方法寫好了，我們在MainActivity中調用看看：

public class MainActivity extends Activity {

    private MyToolBar toolBar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getActionBar().hide();
        this.toolBar = (MyToolBar) this.findViewById(R.id.mytoolbar);
        toolBar.setOnToolBarClickListener(new OnToolBarClickListener() {
            
            @Override
            public void rightClick() {
                Toast.makeText(MainActivity.this,"右邊點擊", Toast.LENGTH_LONG).show();
            }
            
            @Override
            public void leftClick() {
                Toast.makeText(MainActivity.this,"左邊點擊", Toast.LENGTH_LONG).show();
            }
        });
    }
}

效果圖：