Android UI 模板设计

很多程序界面中，顶部 TopBar 是不变的。因此，我们可以做一个公用的控件模板，每次使用时，只要设置相应的参数，就能生成这样一个TopBar。

本文主要讲解如何复用一些模板类控件，从而简化 UI 的开发。

1. 自定义属性

在 values 文件夹下新建 atts.xml 文件，定义控件的属性，代码如下：

<?xml version="1.0" encoding="utf-8"?><resources><!-- declare-styleable：自定义属性的值     name：属性名     format：属性类型 -->    <declare-styleable name="TopBar">        <attr name="title1" format="string"/>        <attr name="titleTextSize" format="dimension"/>        <attr name="titleTextColor" format="color"/>        <attr name="leftText" format="string"/>        <attr name="leftBackground" format="reference|color"/>        <attr name="leftTextColor" format="color"/>        <attr name="rightText" format="string"/>        <attr name="rightBackground" format="reference|color"/>        <attr name="rightTextColor" format="color"/>    </declare-styleable></resources>

PS: 此处 Android Studio 有相关代码提示，而 Eclipse 则没有。

2. 自定义 View

新建 TopBar 类，继承自 RelativeLayout，代码如下：

public class TopBar extends RelativeLayout {    private Button leftButton;// 声明变量    private Button rightButton;    private TextView tvTitle;    private int leftTextColor;// 声明左侧按钮属性    private Drawable leftBackground;    private String leftText;    private int rightTextColor;// 声明右侧按钮属性    private Drawable rightBackground;    private String rightText;    private float titleTextSize;// 声明标题栏属性    private int titleTextColor;    private String title;    // 声明参数    private LayoutParams leftParams, rightParams, titleParams;    private topbarClickListener listener;    // 通过接口回调抽象所定义的方法，让调用者具体实现    public interface topbarClickListener {        public void leftClick();        public void rightClick();    }    public void setOnClickListener(topbarClickListener listener) {        this.listener = listener;    }    public TopBar(Context context, AttributeSet attrs) {        super(context, attrs);        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TopBar);// 通过 TypedArray 获取自定义属性值        // 给变量赋值        leftText = ta.getString(R.styleable.TopBar_leftText);        leftTextColor = ta.getColor(R.styleable.TopBar_leftTextColor, 0);// 第二个为默认参数        leftBackground = ta.getDrawable(R.styleable.TopBar_leftBackground);                rightText = ta.getString(R.styleable.TopBar_rightText);        rightTextColor = ta.getColor(R.styleable.TopBar_rightTextColor, 0);        rightBackground = ta.getDrawable(R.styleable.TopBar_rightBackground);        title = ta.getString(R.styleable.TopBar_title1);        titleTextSize = ta.getDimension(R.styleable.TopBar_titleTextSize, 0);        titleTextColor = ta.getColor(R.styleable.TopBar_titleTextColor, 0);        ta.recycle();// 对 TypedArray 进行回收。目的：1. 避免浪费资源 2. 避免由于缓存带来的错误        // 实例化        leftButton = new Button(context);        rightButton = new Button(context);        tvTitle = new TextView(context);        leftButton.setText(leftText);        leftButton.setTextColor(leftTextColor);        leftButton.setBackground(leftBackground);                rightButton.setText(rightText);        rightButton.setTextColor(leftTextColor);        rightButton.setBackground(leftBackground);                tvTitle.setText(title);        tvTitle.setTextColor(titleTextColor);        tvTitle.setTextSize(titleTextSize);                tvTitle.setGravity(Gravity.CENTER);// 设置 title 居中        setBackgroundColor(0xaabb5678);// 设置标题栏背景色        // 添加左 Button 到 ViewGroup        leftParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);// 定义宽高        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);// true 是 RelativeLayout 中的一个常量        addView(leftButton, leftParams);        // 添加右 Button 到 ViewGroup        rightParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);        addView(rightButton, rightParams);        // 添加 title 到 ViewGroup        titleParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);        titleParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);        addView(tvTitle, titleParams);        // 点击事件        leftButton.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                listener.leftClick();            }        });        rightButton.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                listener.rightClick();            }        });    }    // 自定义方法（设置左 Button 的可见性）    public void setLeftVisible(boolean flag) {        if(flag) {            leftButton.setVisibility(View.VISIBLE);        }else{            leftButton.setVisibility(View.GONE);        }    }}

3. 使用自定义 View

在 activity_main.xml 中引用模板的布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:custom="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity">    <!-- 一定要加入引用 xmlns:custom="http://schemas.android.com/apk/res-auto"  -->    <com.example.jaxer.topbar.TopBar        android:id="@+id/topbar"        android:layout_width="match_parent"        android:layout_height="40dp"        custom:leftBackground="@drawable/blue_button"        custom:leftText="Back"        custom:leftTextColor="#FFFFFF"        custom:rightBackground="@drawable/blue_button"        custom:rightText="More"        custom:rightTextColor="#FFFFFF"        custom:title1="自定义标题"        custom:titleTextColor="#12CC12"        custom:titleTextSize="10sp" >    </com.example.jaxer.topbar.TopBar></RelativeLayout>

注意这些属性的位置（PS: 自己因为在 AS 中写错位置，导致一直不出结果）。

测试类 MainActivity 代码（此处为方便仅打印一句话）：

public class MainActivity extends Activity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);// 隐藏系统标题栏        setContentView(R.layout.activity_main);        TopBar topBar = (TopBar) findViewById(R.id.topbar);        topBar.setOnClickListener(new TopBar.topbarClickListener() {            @Override            public void leftClick() {                Toast.makeText(MainActivity.this, "you clicked Back!", Toast.LENGTH_SHORT).show();            }            @Override            public void rightClick() {                Toast.makeText(MainActivity.this, "you clicked More!", Toast.LENGTH_SHORT).show();            }        });        topBar.setLeftVisible(true);// 设置左边按钮可见性    }}

运行程序，效果如下图所示：

主要内容来自：慕课网
参考：Android UI开发详解之模板控件的复用