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>这样我们就可以使用我们新建的模板控件了，效果如下：
再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow