【Android实战之旅 003】Android(安卓)UI模板设计

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

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

新建MyTopBar工程

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

<?xml version="1.0" encoding="utf-8"?>

(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"?>

(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模板设计效果

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

更多相关文章

随机推荐