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

所以，现在可以通过模板复用，接口回调来提高开发效率。