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,大功告成！