Android UI開發詳解之模板控件的複用

本文轉自：http://blog.csdn.net/eclipsexys/article/details/8681353

Android的UI設計一直是Android程序員比較苦惱的一件事，本文主要講解如何將一些模板類控件進行復用，從而簡化UI的開發。

如圖：

我們很多程序的界面中，頂部的TopBar是不變的，所以，我們可以做一個公用的控件模板，每次使用時，只要設置相應的參數，就能生成這樣一個TopBar。

模板控件實現方法：

package com.xys.multiplexedmodule;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.text.TextUtils.TruncateAt;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class MultipleTopBar extends RelativeLayout{

    private Button btn_left;
    private Button btn_right;
    private TextView tv_title;

    private TopBarClickListener topBarClickListener;
    private String str_title;

    private RelativeLayout.LayoutParams leftButtonLayoutParams;
    private RelativeLayout.LayoutParams rightButtonLayoutParams;
    private RelativeLayout.LayoutParams tvTitleLayoutParams;

    private static int leftBtnId=1;
    private static int titleTvId=2;
    private static int rightBtnId=3;

    private Drawable leftBtnBackground;
    private Drawable rightBtnBackground;

    private String str_LeftBtn;
    private String str_RightBtn;
    private int leftBtnColor;
    private int rightBtnColor;
    private int titleTvColor;

    private float titleTextSize;

    public MultipleTopBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
        //從參數列表中獲取參數
        //TypedArray實例是個屬性的容器，context.obtainStyledAttributes()方法返回得到。AttributeSet是節點的屬性集合
        //第二個參數爲 爲獲取到值時的默認值
        TypedArray ta=context.obtainStyledAttributes(attrs,R.styleable.TopBar);
        this.str_title=ta.getString(R.styleable.TopBar_title);
        this.leftBtnBackground=ta.getDrawable(R.styleable.TopBar_leftBackground);
        this.rightBtnBackground=ta.getDrawable(R.styleable.TopBar_rightBackground);
        this.str_LeftBtn=ta.getString(R.styleable.TopBar_leftText);
        this.str_RightBtn=ta.getString(R.styleable.TopBar_rightText);
        this.leftBtnColor=ta.getColor(R.styleable.TopBar_leftTextColor, 0);
        this.rightBtnColor=ta.getColor(R.styleable.TopBar_rightTextColor, 0);
        this.titleTextSize=ta.getDimension(R.styleable.TopBar_titleTextSize, 14);
        this.titleTvColor=ta.getColor(R.styleable.TopBar_titleTextColor, 0);

        ta.recycle();

        btn_left=new Button(context);
        btn_right=new Button(context);
        tv_title=new TextView(context);

        btn_left.setId(leftBtnId);
        btn_right.setId(rightBtnId);
        tv_title.setId(titleTvId);

        //爲組件配置佈局參數
        leftButtonLayoutParams=new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);
        rightButtonLayoutParams=new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);
        tvTitleLayoutParams=new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);

        leftButtonLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT,RelativeLayout.TRUE);
        leftButtonLayoutParams.setMargins(12, 0, 0, 0);//左上右下
        leftButtonLayoutParams.addRule(RelativeLayout.CENTER_VERTICAL, RelativeLayout.TRUE);

        rightButtonLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT,RelativeLayout.TRUE);
        rightButtonLayoutParams.setMargins(0, 0, 12, 0);//左上右下
        rightButtonLayoutParams.addRule(RelativeLayout.CENTER_VERTICAL, RelativeLayout.TRUE);

        tvTitleLayoutParams.setMargins(12, 0, 12, 0);//左上右下
        tvTitleLayoutParams.addRule(RelativeLayout.CENTER_VERTICAL, RelativeLayout.TRUE);
        tvTitleLayoutParams.addRule(RelativeLayout.LEFT_OF, rightBtnId);
        tvTitleLayoutParams.addRule(RelativeLayout.RIGHT_OF, leftBtnId);
        //tvTitleLayoutParams.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
        tv_title.setGravity(Gravity.CENTER);
        tv_title.setBackgroundColor(leftBtnColor);

        addView(btn_left, leftButtonLayoutParams);
        addView(btn_right,rightButtonLayoutParams);
        addView(tv_title,tvTitleLayoutParams);

        //btn_left.setBackgroundDrawable(leftBtnBackground);
        btn_left.setText(str_LeftBtn);
        btn_left.setTextColor(leftBtnColor);
        //btn_right.setBackgroundDrawable(rightBtnBackground);
        btn_right.setText(str_RightBtn);
        btn_right.setTextColor(rightBtnColor);

        tv_title.setTextSize(22.0f);
        tv_title.setTextColor(Color.BLUE);
        tv_title.setEllipsize(TruncateAt.MIDDLE);
        tv_title.setGravity(Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL);
        tv_title.setSingleLine(true);
        tv_title.setText(str_title);
        tv_title.setTextSize(titleTextSize);
        tv_title.setTextColor(titleTvColor);

        btn_left.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    // TODO Auto-generated method stub
                    if(topBarClickListener!=null){
                        topBarClickListener.leftBtnClick();
                }
                }
        });

        btn_right.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                        if(topBarClickListener!=null){
                                topBarClickListener.rightBtnClick();
                        }
                }
        });

    }

    /*
     * 單擊監聽事件
     */
    public void setTopBarClickListener(TopBarClickListener topBarClickListener){
        this.topBarClickListener=topBarClickListener;
    }
}

監聽接口：

package com.xys.multiplexedmodule;

public interface TopBarClickListener {

    void leftBtnClick();
    void rightBtnClick();
}

對我們自定義的模板控件，我們需要設定他的一些參數，在Values下新建attrs.xml：

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--declare-styleable：自定義屬性的值  -->
    <declare-styleable name="TopBar">
        <attr name="title" format="string" />
        <attr name="titleTextSize" format="dimension" />
        <attr name="titleTextColor" format="color" />
        <attr name="leftTextColor" format="color" />
        <attr name="leftBackground" format="string" />
        <attr name="leftText" format="string" />
        <attr name="rightTextColor" format="color" />
        <attr name="rightBackground" format="string" />
        <attr name="rightText" format="string" />
    </declare-styleable>

</resources>

現在我們就已經做好了一個模板，我們要如何使用他呢，很簡單：

測試類：

package com.xys.multiplexedmodule;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.Toast;

public class TestActivity extends Activity {

    private MultipleTopBar topBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        topBar=(MultipleTopBar)findViewById(R.id.topBar);
        topBar.setTopBarClickListener(new TopBarClickListener() {

            @Override
            public void rightBtnClick() {
                // TODO Auto-generated method stub
                Toast.makeText(TestActivity.this, "你點擊的是右邊的按鈕", Toast.LENGTH_LONG).show();
            }

            @Override
            public void leftBtnClick() {
                // TODO Auto-generated method stub
                Toast.makeText(TestActivity.this, "你點擊的是左邊的按鈕", Toast.LENGTH_LONG).show();
            }
        });
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

引用模板的佈局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:custom="http://schemas.android.com/apk/res/com.xys.multiplexedmodule"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".TestActivity" >
    <!--一定要加入引用 xmlns:custom="http://schemas.android.com/apk/res/com.xys.multiplexedmodule"  -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:orientation="vertical" >

        <com.xys.multiplexedmodule.MultipleTopBar
            android:id="@+id/topBar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            custom:leftBackground="@drawable/ic_launcher"
            custom:leftText="左側"
            custom:leftTextColor="#ff0000"
            custom:rightBackground="@drawable/ic_launcher"
            custom:rightText="右側"
            custom:rightTextColor="#ff0000"
            custom:title="自定義標題"
            custom:titleTextColor="#123412"
            custom:titleTextSize="14.0sp" >
        </com.xys.multiplexedmodule.MultipleTopBar>
    </LinearLayout>

</RelativeLayout>

這樣我們就可以使用我們新建的模板控件了，效果如下：