【Android实战之旅 003】Android UI模板设计

我们先来看一下Google是如何实现一个控件的，它首先是定义一个atts.xml文件用来配置我们所需要的自定义属性，然后重写控件满足我们的要求，最后在xml中使用我们的控件。

大致过程为首先设计需要的属性-->实现一个我们的View(将定义的TopBar继承自RelativeLayout)-->引用我们的View

新建MyTopBar工程

(1) 先来创建我们需要的属性，在values目录下新建atts.xml内容为

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="Topbar">
        <attr name="myTitle" format="string"/>
        <attr name="mytitleTextSize" format="dimension"/>
        <attr name="mytitleTextColor" format="color"/>
        <attr name="leftText" format="string"/>
        <attr name="leftTextColor" format="color"/>
        <attr name="leftBackground" format="reference|color"/>
        <attr name="rightText" format="string"/>
        <attr name="rightTextColor" format="color"/>
        <attr name="rightBackground" format="reference|color"/>
    </declare-styleable>
</resources>

(2) 创建一个我们自己的View，在源代码目录，新建TopBar继承自RelativeLayout

package com.davebobo.mytopbar;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
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;
import android.widget.Toast;

/**
 * Created by DaveBobo on 2016/9/28.
 */
public class Topbar extends RelativeLayout{

    private Button leftButton,rightButton;
    private TextView tvTitile;

    private  String leftText;
    private int leftTextColor;
    private Drawable leftBackground;

    private  String rightText;
    private int rightTextColor;
    private Drawable rightBackground;

    private  String title;
    private float titleTextSize;
    private int titleTextColor;

    private LayoutParams leftParams,rightParams,titleParams;

    private topbarClickListener listener;

    public interface topbarClickListener{
        public  void leftClick();
        public  void rightClick();
    }
    //通过接口和方法将调用者和模板联系在一起
    public void setOnTopbarClickListener(topbarClickListener listener){
        this.listener = listener;
    }
    //将控件和属性关联
    public Topbar(final Context context, AttributeSet attrs) {
        super(context, attrs);

        TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.Topbar);

        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_myTitle);
        titleTextSize = ta.getDimension(R.styleable.Topbar_mytitleTextSize, 0);
        titleTextColor = ta.getColor(R.styleable.Topbar_mytitleTextColor, 0);

        ta.recycle();//避免浪费资源 避免由于缓存所引起的错误

        //属性值获取完毕,处理我们所使用的控件
        leftButton = new Button(context);
        rightButton = new Button(context);
        tvTitile = new TextView(context);

        leftButton.setText(leftText);
        leftButton.setTextColor(leftTextColor);
        leftButton.setBackground(leftBackground);

        rightButton.setText(rightText);
        rightButton.setTextColor(rightTextColor);
        rightButton.setBackground(rightBackground);

        tvTitile.setText(title);
        tvTitile.setTextColor(titleTextColor);
        tvTitile.setTextSize(titleTextSize);
        tvTitile.setGravity(Gravity.CENTER);

        setBackgroundColor(0xFFF59563);//设置背景颜色
        //将控件放到Layout中
        leftParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);

        addView(leftButton, leftParams);

        rightParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);

        addView(rightButton, rightParams);

        titleParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        titleParams.addRule(RelativeLayout.CENTER_IN_PARENT,TRUE);

        addView(tvTitile, 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();
            }
        });

    }

    public void setLeftIsvisable(boolean flag){
     if (flag)
         leftButton.setVisibility(View.VISIBLE);
         else
         leftButton.setVisibility(View.GONE);
    }
}

(3) 引用自定的TopBar控件，打开layout下面的activity_main.xml修改其内容为

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:padding="5dp"
    tools:context="com.davebobo.mytopbar.MainActivity">

   <com.davebobo.mytopbar.Topbar
       android:id="@+id/topbar"
       android:layout_width="match_parent"
       android:layout_height="40dp"
       custom:leftText="Back"
       custom:leftTextColor="#FFFFFF"
       custom:leftBackground="@drawable/blue_button"
       custom:rightText="More"
       custom:rightTextColor="#FFFFFF"
       custom:rightBackground="@drawable/blue_button"
       custom:myTitle="自定义标题"
       custom:mytitleTextSize="10sp"
       custom:mytitleTextColor="#123412">
   </com.davebobo.mytopbar.Topbar>
</RelativeLayout>

(4) 在MainActivity中获得Topbar引用并使用它

package com.davebobo.mytopbar;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

            @Override
            public void rightClick() {
                Toast.makeText(MainActivity.this, "BOBO RIGHT", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

UI模板设计效果

体会、思考经典的设计模式,在编程的道路上，只有理解思想才能将其成为自己的东西。