android自定義UI模板圖文詳解

時間 2019-11-16

原文原文鏈接

不知道你們在實際開發中有沒有自定義過UI模板？今天花時間研究了一下android中自定義UI模板，與你們分享一下。
每一個設計良好的App都是自定義標題欄，在自定義標題欄的過程當中大部分人可能都是自定義一個標題的xml文件，而後在須要的地方直接經過include來引用，這比起在每一個佈局文件中寫標題欄已經進化不少了，但仍然不是最簡單有效的方法，咱們爲何不能自定義一個標題控件呢？今天就帶你們本身作一個標題欄控件。效果圖以下：android

開始啦：eclipse

第一步：自定義xml屬性ide

新建一個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（位或運算）。this

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

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

/**
     * 標題欄的三個控件
     */
    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方法，添加控件。orm

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中添加一句：xml

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) {
        this.listener = listener;
    }

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

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();
            }
        });
    }
}

這段代碼相信你們都能看懂：
咱們直接看效果圖吧：

關於android自定義UI模板就給你們介紹到這裏，有問題請留言。本項目完整代碼下載。