很多应用都用到了顶部导航栏,且形式极度相似,如果为每个Activity都配置一次不仅费时费力,而且统一性还得不到很好的保证,因此如果能够通过自定义View来将我们做好的一个可自定义的顶部导航栏控件做成像系统提供的TextView等控件那样可以直接在xml文件中引用的话,刚才提到的问题就能够很好的解决。
·首先需要在res目录下的values文件下创建一个atts.xml文件,该文件用于定义自定义控件的属性。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="TopBar">
<attr name="titleText" format="string" />
<attr name="tilteTextSize" format="dimension" />
<attr name="tilteTextColor" format="color" />
<attr name="leftText" format="string" />
<attr name="leftTextColor" format="color" />
<attr name="leftBackground" format="reference|color" />
<attr name="leftTextSize" format="dimension" />
<attr name="rightText" format="string" />
<attr name="rightTextColor" format="color" />
<attr name="rightBackground" format="reference|color" />
<attr name="rightTextSize" format="dimension" />
</declare-styleable>
</resources>
通过设置declare-styleable标签下的attr标签的name属性和format属性来设置我们自定义控件的属性和相应类型,format属性点可以理解为我们要自定义的控件的属性的类型。比如titleText(标题文字)属性的类型显然是String类型,而当给属性赋值时若需要@+id或者@drawable则要用到reference类型,例如leftBackground的类型应为reference或者color类型。
·定义好自定义控件的属性值及类型后,需要新建一个继承RelativeLayout的类,由这个类完成我们自定义的属性的调用并生成自定义控件,填充到Activity中。
package com.example.topbardemo;
import android.annotation.SuppressLint;
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.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;
@SuppressLint({ "Recycle", "NewApi" })
public class TopBar extends RelativeLayout {
//控件
private Button leftButton,rightButton;
private TextView tvTitle;
//属性
private String titleText;
private int titleTextColor;
private float titleTextSize;
private String leftText;
private int leftTextColor;
private float leftTextSize;
private Drawable leftBacakaground;
private String rightText;
private int rightTextColor;
private float rightTextSize;
private Drawable rightBacakaground;
private LayoutParams leftParams,rightParams,titleParams;
@SuppressLint("NewApi")
public TopBar(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TopBar);
titleText = ta.getString(R.styleable.TopBar_titleText);
titleTextColor = ta.getColor(R.styleable.TopBar_tilteTextColor, 0);
titleTextSize = ta.getDimension(R.styleable.TopBar_tilteTextSize, 0);
leftText = ta.getString(R.styleable.TopBar_leftText);
leftTextColor = ta.getColor(R.styleable.TopBar_leftTextColor, 0);
leftTextSize =ta.getDimension(R.styleable.TopBar_leftTextSize, 0);
leftBacakaground = ta.getDrawable(R.styleable.TopBar_leftBackground);
rightText = ta.getString(R.styleable.TopBar_rightText);
rightTextColor = ta.getColor(R.styleable.TopBar_rightTextColor, 0);
rightTextSize = ta.getDimension(R.styleable.TopBar_rightTextSize, 0);
rightBacakaground = ta.getDrawable(R.styleable.TopBar_rightBackground);
//回收
ta.recycle();
tvTitle = new TextView(context);
leftButton = new Button(context);
rightButton = new Button(context);
tvTitle.setText(titleText);
tvTitle.setTextSize(titleTextSize);
tvTitle.setTextColor(titleTextColor);
tvTitle.setGravity(Gravity.CENTER);
leftButton.setText(leftText);
leftButton.setTextColor(leftTextColor);
leftButton.setBackground(leftBacakaground);
leftButton.setTextSize(leftTextSize);
rightButton.setText(rightText);
rightButton.setTextColor(rightTextColor);
rightButton.setBackground(rightBacakaground);
rightButton.setTextSize(rightTextSize);
setBackgroundColor(0xff59563);
leftParams = new LayoutParams(android.view.ViewGroup.LayoutParams.WRAP_CONTENT, android.view.ViewGroup.LayoutParams.WRAP_CONTENT);
leftParams.addRule(ALIGN_PARENT_LEFT, TRUE);
addView(leftButton, leftParams);
rightParams = new LayoutParams(android.view.ViewGroup.LayoutParams.WRAP_CONTENT, android.view.ViewGroup.LayoutParams.WRAP_CONTENT);
rightParams.addRule(ALIGN_PARENT_RIGHT, TRUE);
addView(rightButton, rightParams);
titleParams = new LayoutParams(android.view.ViewGroup.LayoutParams.WRAP_CONTENT, android.view.ViewGroup.LayoutParams.MATCH_PARENT);
titleParams.addRule(CENTER_IN_PARENT, TRUE);
addView(tvTitle, titleParams);
leftButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
barBtnClick.leftBtnClick();
}
});
rightButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
barBtnClick.rightBtnClick();
}
});
}
private OnTopBarBtnClick barBtnClick;
public interface OnTopBarBtnClick{
public void leftBtnClick();
public void rightBtnClick();
}
public void SetOnTopBarBtnClick(OnTopBarBtnClick barBtnClick){
this.barBtnClick = barBtnClick;
}
//设置左右按钮是否可见
public void setLeftBtnVisibled(boolean flag){
if (flag) {
leftButton.setVisibility(View.VISIBLE);
}else {
leftButton.setVisibility(View.GONE);
}
}
public void setRightBtnVisibled(boolean flag){
if (flag) {
rightButton.setVisibility(View.VISIBLE);
}else {
rightButton.setVisibility(View.GONE);
}
}
}
这个类中先是利用了context的obtainStyledAttributes (AttributeSet set, int[] attrs) 方法,取出了我们先前在atts.xml文件中定义的自定义控件的属性(注意是一个typedArray),然后利用了typedArray的getString,getDimension等方法将我呢边定义的属性按类型取出(注意取出时的名字命名规则为自定义控件的名称_属性名称,例如getString(R.styleable.TopBar_titleText))。
然后就是声明了Button,TextView等原生控件,并将自定义的属性赋予给他们。又用到了LayoutParams,利用其addRule,addView等方法将控件添加到Activity界面中去。至此,自定义的TopBar已经有了初步的样子。但是还缺少Button的相应的点击事件的处理,因此我们模仿系统的setOnclickListener(new OnClickListener{})方法(即接口回调的原则)设计了相应的接口,即
public interface OnTopBarBtnClick{
public void leftBtnClick();
public void rightBtnClick();
}
public void SetOnTopBarBtnClick(OnTopBarBtnClick barBtnClick){
this.barBtnClick = barBtnClick;
}
这样,只需要在用到了这个空间的Activity中调用topBar的SetOnTopBarBtnClick(OnTopBarBtnClick barBtnClick)方法,并实现相应的leftBtnClick(),rightBtnClick()即可。
package com.example.topbardemo;
import android.app.Activity;
import android.os.Bundle;
import android.widget.Toast;
import com.example.topbardemo.TopBar.OnTopBarBtnClick;
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.SetOnTopBarBtnClick(new OnTopBarBtnClick() {
@Override
public void rightBtnClick() {
// TODO Auto-generated method stub
Toast.makeText(getApplicationContext(), "确认", Toast.LENGTH_SHORT).show();
}
@Override
public void leftBtnClick() {
// TODO Auto-generated method stub
Toast.makeText(getApplicationContext(), "取消", Toast.LENGTH_SHORT).show();
}
});
}
}
·接下来我们说一下如何在xml文件中调用自定义的控件,先贴代码。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res/com.example.topbardemo"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<com.example.topbardemo.TopBar
android:id="@+id/topBar"
android:layout_width="match_parent"
android:layout_height="60dp"
app:leftBackground="#555555"
app:leftText="返回"
app:leftTextColor="#000000"
app:leftTextSize="12sp"
app:rightBackground="#555555"
app:rightText="确认"
app:rightTextColor="#000000"
app:rightTextSize="12sp"
app:tilteTextColor="#000000"
app:tilteTextSize="12sp"
app:titleText="标题" >
</com.example.topbardemo.TopBar>
</RelativeLayout>
可以看出只要调用名称为:包名加类型的标签即可调用我们自定义的控件,那如何调用我们自定义的属性呢,同样先看看系统是 如何调用的,不难发现调用系统的原声控件时都会有android:开头,而xml文件开始的时候也有xmlns:android=”http://schemas.android.com/apk/res/android”,其实这类似于java代码中要使用一个类,必须要先进行声明,而这句话就相当于声明了,那如果我们要声明自定义的控件,eclipse中只需将res/后面的android换成控件的包名+类名即可,然后在使用定义的名称(这里是app)引用相应的属性就行了。
此为相应视频教程的学习笔记,若有不妥之处,欢迎提出,以做到及时改正。
完整代码下载:http://download.csdn.net/detail/u012483425/8515197
该视频教程地址为:http://www.imooc.com/learn/247