Android学习之UI模板设计

思路：

在系统的UI，LinearLayout继承自ViewGroup，查看源码可知layou_width等由attrs.xml设置，故仿照系统的方法，首先定义attrs文件，配置我们需要的属性，重写控件，在xml中使用我们的控件。
在示例中我们自定义一个Topbar的UI模板，即常见的APP界面的顶部一栏，左右各一按钮，中间一个TextView显示标题。

一、设计我们需要的属性

在res/values/attrs.xml定义声明我们需要的属性，如果没有attrs文件则新建一个xml文件，命名为attrs.xml 。<?xml version="1.0" encoding="utf-8"?>
<resources>
<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="reference|color"/>
<attr name="leftText" format="string"/>
<attr name="rightTextColor" format="color"/>
<attr name="rightBackground" format="reference|color"/>
<attr name="rightText" format="string"/>
//reference类型不固定，可以引用资源文件@drawable
</declare-styleable>

</resources>

二、实现一个我们的“view”

新建Topbar.class，继承自RelativeLayout，添加具有自定义属性参数attrs的构造方法，声明按钮和TextView控件，在构造方法中通过context.obtainStyledAttributes()获取我们在xml中定义的属性，获取完成后记得调用TypedArray的recycle（）方法结束属性的获取。
①声明控件和属性：private Button leftButton,rightButton;
private TextView tvTitle;

private int leftTextColor;
private Drawable leftBackground;
private String leftText;②获取自定义属性： public Topbar(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.Topbar);

leftTextColor = ta.getColor(R.styleable.Topbar_leftTextColor,0);
leftBackground = ta.getDrawable(R.styleable.Topbar_leftBackground);
leftText = ta.getString(R.styleable.Topbar_leftText);

/**
* 省略rightButton，titleText部分的属性获取
*/

ta.recycle();
}以LayoutParams的形式将控件加入到ViewGroup中。
①声明LayoutPrams:private LayoutParams leftParams,rightParams,titleParams;②设置LayoutPrams的宽高和位置，并将其加入到ViewGroup中。leftParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);//设置左按钮的布局宽高大小
leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT,TRUE);//居左对齐

addView(leftButton,leftParams);//左按钮以leftparams的形式加入到viewgroup中

//省略rightButton tvTitle的设置

三、使用我们的“view”

参考系统在xml中引用控件，声明方式，自定义控件的使用方式如下：
①添加第三方名字空间： xmlns:custom="http://schemas.android.com/apk/res-auto"②使用自定义属性：<com.example.app.Topbar
       android:id="@+id/topbar"
       android:layout_width="match_parent"
       android:layout_height="40dp"
       custom:leftBackground = "@drawable/ic_launcher_background"
       custom:leftText="Back"
       custom:leftTextColor="#FFFFFF" >
       <!--省略其余两个控件部分-->
   </com.example.app.Topbar>
③动态控制Topbar:
给按钮添加点击事件，仿照系统实现接口回调机制（实现模板功能），
在类Topbar.class中定义接口和方法，实现接口回调： private topbarClickListener listener;

public interface topbarClickListener{
public void leftClick();
public void rightClick();
}

public void setOnTopbarClickListener(topbarClickListener listener)
{
this.listener = listener;
}

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

具体的方法实现由调用者MainActivity.class决定：

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Topbar topbar = findViewById(R.id.topbar);
topbar.setOnTopbarClickListener(new Topbar.topbarClickListener() {
@Override
public void leftClick() {
Toast.makeText(MainActivity.this,"left",Toast.LENGTH_SHORT).show();
}
});

}}

同时还可以将模板中的部分控件应实际需求进行隐藏：
在Topbar.class中定义隐藏的方法： public void setLeftIsVisable(boolean flag)
{
if(flag)
{
leftButton.setVisibility(View.VISIBLE);
}else{
leftButton.setVisibility(View.GONE);
}
}调用者中使用此方法：topbar.setLeftIsVisable(false);所以，现在可以通过模板复用，接口回调来提高开发效率。