Android中实现UI模板-topbar

在Android的app开发中，我们经常可以看到多类app的顶部导航栏基本是大同小异的。那么我们有木有一种方式可以写一个模板，然后自己定义并重复使用呢？显然，这个问题是可以解决的。

下面，我大概分享下实现思路:

1.首先，我们需要定义一个自己的布局，此时我们继承自RelativeLayout。

2.然后我们自定义属性来控制布局中的按钮和标题：导航栏一般都是分三个部分，即：左边按钮，中间标题，右边按钮。

3.在自定义的布局中，通过TypedArray来获取自定义属性，并设置按钮和标题的位置，颜色，字体大小等。

4.因为按钮有单击事件，所以在布局中，我们自定义一个事件接口，接口中有两个方法，分别对应左边按钮单击事件和右边按钮单击事件。

5.开发者自己实现该接口来实现按钮单击事件的处理。这样，我们就轻松的实现了一个自定义UI模板-顶部导航栏。

下面看代码：

package com.example.uitemplate;

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;

/**

* UI template -- TopBar

* @author 宋小亮

*

*/

public class TopBar extends RelativeLayout{

private Button btnLeft,btnRight;

private TextView tvTitle;

/**标题**/

private String title;

private float titleTextSize;

private int titleTextColor;

/**左边按钮**/

private String leftText;

private Drawable leftBackground;

private int leftTextColor;

/**右边按钮**/

private String rightText;

private Drawable rightBackground;

private int rightTextColor;

private LayoutParams lpLeftBtn,lpRightBtn,lpTVTitle;

private TypedArray ta;

private ClickListener clickListener;

public TopBar(Context context) {

super(context);

}

public TopBar(Context context, AttributeSet attrs) {

super(context, attrs);

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

//左边按钮

initBtnLeft(context);

//右边按钮

initBtnRight(context);

//中间标题

initTvTitle(context);

/**避免缓存产生的错误和浪费资源**/

ta.recycle();

//设置布局背景色

setBackgroundColor(0xFFF59563);

//设置单击事件

setOnClickListener();

}

/**

* 中间标题

* @param context

*/

private void initTvTitle(Context context) {

title = ta.getString(R.styleable.TopBar_title);

titleTextColor = ta.getColor(R.styleable.TopBar_titleTextColor, 0);

titleTextSize = ta.getDimension(R.styleable.TopBar_titleTextSize, 0);

tvTitle = new TextView(context);

tvTitle.setText(title);

tvTitle.setTextColor(titleTextColor);

tvTitle.setTextSize(titleTextSize);

/**标题文字居中**/

tvTitle.setGravity(Gravity.CENTER);

lpTVTitle = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);

lpTVTitle.addRule(RelativeLayout.CENTER_IN_PARENT,TRUE);

addView(tvTitle,lpTVTitle);

}

/**

* 右边按钮

* @param context

*/

private void initBtnRight(Context context) {

rightText = ta.getString(R.styleable.TopBar_rightText);

rightTextColor = ta.getColor(R.styleable.TopBar_rightTextColor, 0);

rightBackground = ta.getDrawable(R.styleable.TopBar_rightBackground);

btnRight = new Button(context);

btnRight.setText(rightText);

btnRight.setBackground(rightBackground);

btnRight.setTextColor(rightTextColor);

lpRightBtn = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);

lpRightBtn.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);

addView(btnRight,lpRightBtn);

}

/**

* 左边按钮

* @param context

*/

private void initBtnLeft(Context context) {

leftText = ta.getString(R.styleable.TopBar_leftText);

leftTextColor = ta.getColor(R.styleable.TopBar_leftTextColor, 0);

leftBackground = ta.getDrawable(R.styleable.TopBar_leftBackground);

btnLeft = new Button(context);

btnLeft.setText(leftText);

btnLeft.setBackground(leftBackground);

btnLeft.setTextColor(leftTextColor);

lpLeftBtn = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);

lpLeftBtn.addRule(RelativeLayout.ALIGN_PARENT_LEFT);

addView(btnLeft,lpLeftBtn);

}

/**

* 设置按钮单击事件

*/

private void setOnClickListener() {

btnLeft.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

clickListener.leftBtnClick();

}

});

btnRight.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

clickListener.rightBtnClick();

}

});

}

/**

* 单击事件回调接口

*/

public interface ClickListener{

public void leftBtnClick();

public void rightBtnClick();

}

/**

* 设置事件对象

*/

public void setCLickListener(ClickListener clickListener){

this.clickListener = clickListener;

}

}

Activity中实现：

package com.example.uitemplate;

import com.example.uitemplate.TopBar.ClickListener;

import android.app.Activity;

import android.os.Bundle;

import android.widget.Toast;

/**

* MainActivity

* @author 宋小亮

*

*/

public class MainActivity extends Activity {

private TopBar topBar;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

/**初始化Views**/

initViews();

/**设置按钮单击事件**/

topBar.setCLickListener(new ClickListener() {

@Override

public void rightBtnClick() {

// TODO Auto-generated method stub

Toast.makeText(MainActivity.this, "右边的按", Toast.LENGTH_SHORT).show();

}

@Override

public void leftBtnClick() {

// TODO Auto-generated method stub

Toast.makeText(MainActivity.this, "左边的按钮", Toast.LENGTH_SHORT).show();

}

});

}

/**

* 初始化Views

*/

private void initViews() {

topBar = (TopBar)findViewById(R.id.topBar);

}

}

OK,大功告成！