Android自定义View之TopBar
一、先看下效果图(平板上实验不是很清晰)：
左边是“Back”按钮，中间是“自定义标题"，右边是"More"，点击会弹出相应的提示，这里使用Toast提示一个简单的信息作为实例。
二、开发流程：
1、自定义View的属性设置，要在values目录下建立attrs.xml文件，添加属性内容，代码实现如下：
<?xml version="1.0" encoding="utf-8"?> <resources> <!-- declare-styleable自定义属性值 --> <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" /> </declare-styleable> </resources>
以上配置文件声明了，标题，左button，右button的相关属性
2、在布局文件TopBar.java里添加这些属性：
public class TopBar extends RelativeLayout {
private Button leftButton, rightButton;// 控件的左右边按钮
private TextView titleText;// 标题文字
private String leftText;// 左边的button属性
private int leftTextColor;
private Drawable leftBackground;
private String rightText;// 右边的button属性
private int rightTextColor;
private Drawable rightBackground;
private String title;// 中间标题属性
private int titleTextColor;
private float titleTextSize;
private static int leftBtnId = 1;
private static int titleId = 2;
private static int righBtntId = 3;
TopBarClickListener topBarClickListener;
private LayoutParams leftParams, rightParams, titleParams;// 三个控件的LayoutParams
public TopBar(Context context, AttributeSet attrs) {
super(context, attrs);
// 从参数列表中获取参数
// TypedArray实例是个属性的容器，context.obtainStyledAttributes()方法返回得到。AttributeSet是节点的属性集合
// 第二个参数为 为获取到值时的默认值
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_title);
titleTextSize = ta.getDimension(R.styleable.TopBar_titleTextSize, 14);
titleTextColor = ta.getColor(R.styleable.TopBar_titleTextColor, 0);
ta.recycle();
leftButton = new Button(context);
rightButton = new Button(context);
titleText = new TextView(context);
leftButton.setId(leftBtnId);
rightButton.setId(righBtntId);
titleText.setId(titleId);
// 为组件配置布局参数
leftParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
rightParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
titleParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
//
leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, RelativeLayout.TRUE);
addView(leftButton, leftParams);
rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
addView(rightButton, rightParams);
titleParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);
addView(titleText, titleParams);
leftButton.setTextColor(leftTextColor);
leftButton.setBackgroundDrawable(leftBackground);
leftButton.setText(leftText);
rightButton.setTextColor(rightTextColor);
rightButton.setBackgroundDrawable(rightBackground);
rightButton.setText(rightText);
titleText.setTextColor(titleTextColor);
titleText.setTextSize(titleTextSize);
titleText.setText(title);
titleText.setGravity(Gravity.CENTER);
setBackgroundColor(0xff70A0E9);
leftButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (topBarClickListener != null) {
topBarClickListener.leftBtnClick();
}
}
});
rightButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (topBarClickListener != null) {
topBarClickListener.rightBtnClick();
}
}
});
titleText.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (topBarClickListener != null) {
topBarClickListener.titleClick();
}
}
});
}
/**
* 单击事件监听
*
* @param topBarClickListener
*/
public void setTopBarClickListener(TopBarClickListener topBarClickListener) {
this.topBarClickListener = topBarClickListener;
}
}
上面的文件，添加了声明的各个属性，生成了一个TopBar模版，现在看下这个模版怎么使用。
3、在布局文件里使用设计好的TopBar UI模版：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:custom="http://schemas.android.com/apk/res/com.example.topbarmodle" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="5dp" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <com.example.topbarmodle.TopBar android:id="@+id/topBar" android:layout_width="match_parent" android:layout_height="40dp" custom:leftText="Back" custom:leftTextColor="@android:color/black" custom:rightText="More" custom:rightTextColor="@android:color/black" custom:title="自定义标题" custom:titleTextColor="@android:color/black" custom:titleTextSize="20sp" > </com.example.topbarmodle.TopBar> </RelativeLayout>
注意：(1)在布局文件的xml中com.example.topbarmodle.TopBar显示控件代表的类； (2) xmlns:custom=http://schemas.android.com/apk/res/com.example.topbarmodle是必须添加的，其中com.example.topbarmodle是类的包名，添加后，在custom中添加使用alt+/会自动添加我们定义的相关属性。
4、实现自定义的模版相关属性的监听，这里监听两个button,和title：
public interface TopBarClickListener {
void leftBtnClick();
void titleClick();
void rightBtnClick();
}
这个已经在TopBar.java里已经设置监听相关方法。
5、实现测试类，测试设计效果：
public class MainActivity extends Activity {
private TopBar topBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
topBar = (TopBar) findViewById(R.id.topBar);
topBar.setTopBarClickListener(new TopBarClickListener() {
@Override
public void titleClick() {
Toast.makeText(MainActivity.this, "title", Toast.LENGTH_SHORT).show();
}
@Override
public void rightBtnClick() {
Toast.makeText(MainActivity.this, "More", Toast.LENGTH_SHORT).show();
}
@Override
public void leftBtnClick() {
Toast.makeText(MainActivity.this, "Back", Toast.LENGTH_SHORT).show();
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
整个开发过程到此为止，已经基本实现了相关功能。源码下载：http://download.csdn.net/detail/shizhao0716/8382125