Android通用标题栏

    标题栏在Android中很常用，实现起来也是很简单的，无非就是一个相对布局或者线性布局，然后在布局中加上返回按钮，标题，右边再放个按钮等等。但是我们的app中需要用到的标题栏的地方很多，几乎每个页面都会用到，但每个标题栏可能不会完全一样，可能会有一些小的变化，有人说，我写一个layout，在布局中include进去，然后再根据实际情况修改内容或者按钮。这样是一种方式，但是我还是觉得这种方式很麻烦，也不够通用。

   今天我们通过自定义控件的方式，教大家一个更加简单，更通用的方法。

   我们看一下效果图：



   废话不多说，上代码。

  

/**
* 自定义title，包含绝大部分title的适用
*
*/
public class TitleView extends LinearLayout {
public TitleView(Context context) {
super(context);
init(context, null);
}

public TitleView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}

@SuppressLint("NewApi")
public TitleView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
}

@SuppressLint("NewApi")
public TitleView(Context context, AttributeSet attrs, int defStyleAttr,
int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init(context, attrs);
}

/** 最左边title是否显示 */
private boolean titleLeftImgVisiable = true;
/** 右边第二个边title是否显示 */
private boolean titleRightImg2Visiable = false;
/** 最又边title是否显示 */
private boolean titleRightImgVisiable = false;
/** 最右边title 文字是否显示 */
private boolean titleRightTextVisiable = false;

/** 中间文字是否显示 */
private boolean titleVisiable = true;

/** 最左边title img */
private int titleLeftImgRes = R.drawable.arrow_left_2;
/** 右二边title img */
private int titleRightImg2Res = R.drawable.arrow_left_2;
/** 最右边title img */
private int titleRightImgRes = R.drawable.img_1;

/** title背景色 */
private int titleBbgColor = -1;
/** 右边文字title色 */
private int titleRightTextColor = 0xff475c;

/** 右边文字 */
private String titleRight_Text = "";

/** 中间文字title色 */
private int titleTextColor = 0xff000000;
/** 中间文字 */
private String titleText = "";

@SuppressLint("Recycle")
private void init(Context context, AttributeSet attrs) {
if (attrs != null) {
TypedArray a = context.obtainStyledAttributes(attrs,
R.styleable.title);

titleLeftImgVisiable = a.getBoolean(
R.styleable.title_left_img_visiable, true);
titleRightImg2Visiable = a.getBoolean(
R.styleable.title_right_img2_visiable, false);
titleRightImgVisiable = a.getBoolean(
R.styleable.title_right_img_visiable, false);
titleRightTextVisiable = a.getBoolean(
R.styleable.title_right_text_visiable, false);
titleVisiable = a
.getBoolean(R.styleable.title_title_visiable, true);

titleLeftImgRes = a.getResourceId(R.styleable.title_left_img,
R.drawable.arrow_left_2);
titleRightImg2Res = a.getResourceId(R.styleable.title_right_img2,
R.drawable.img_1);
titleRightImgRes = a.getResourceId(R.styleable.title_right_img,
R.drawable.img_1);

titleBbgColor = a.getColor(R.styleable.title_bg_color, -1);
titleRightTextColor = a.getColor(
R.styleable.title_right_text_color, 0xff475c);
titleRight_Text = a.getString(R.styleable.title_right_text);

titleTextColor = a.getColor(R.styleable.title_title_text_color,
0xff000000);
titleText = a.getString(R.styleable.title_title_text);

a.recycle();
}
LayoutInflater.from(context).inflate(R.layout.public_title, this, true);
title_bg = (RelativeLayout) findViewById(R.id.title_bg);
title_back = (ImageView) findViewById(R.id.title_back);
title_right_img = (ImageView) findViewById(R.id.title_right_img);
title_right2_img = (ImageView) findViewById(R.id.title_right2_img);
title = (CustomFontTextView) findViewById(R.id.title);
title_right_text = (CustomFontTextView) findViewById(R.id.title_right_text);

setAttrs();

setListener();

}

private void setAttrs() {
if(titleBbgColor==-1){
title_bg.setBackgroundColor(this.getResources().getColor(R.color.bg_light));
}else{
title_bg.setBackgroundColor(titleBbgColor);
}

if (titleVisiable) {
title.setText(titleText);
title.setTextColor(titleTextColor);
} else {
title.setVisibility(View.GONE);
}

if (titleLeftImgVisiable) {
title_back.setVisibility(View.VISIBLE);
title_back.setImageResource(titleLeftImgRes);
} else {
title_back.setVisibility(View.GONE);
}
if (titleRightImg2Visiable) {
title_right2_img.setVisibility(View.VISIBLE);
title_right2_img.setImageResource(titleRightImg2Res);
} else {
title_right2_img.setVisibility(View.GONE);
}

if (titleRightImgVisiable) {
title_right_img.setVisibility(View.VISIBLE);
title_right_img.setImageResource(titleRightImgRes);
} else {
title_right_img.setVisibility(View.GONE);
}

if (titleRightTextVisiable) {
title_right_text.setVisibility(View.VISIBLE);
title_right_text.setText(titleRight_Text);
title_right_text.setTextColor(titleRightTextColor);
} else {
title_right_text.setVisibility(View.GONE);
}

}

private void setListener() {
title_back.setOnClickListener(new OnClick());
title_right_img.setOnClickListener(new OnClick());
title_right2_img.setOnClickListener(new OnClick());
title_right_text.setOnClickListener(new OnClick());
}

private RelativeLayout title_bg;
private ImageView title_back;
private ImageView title_right_img;
private ImageView title_right2_img;

private CustomFontTextView title;
private CustomFontTextView title_right_text;

private class OnClick implements View.OnClickListener {
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.title_back:
if (leftImgeOnClickListener != null) {
leftImgeOnClickListener.onLeftImgeOnClick();
}
break;
case R.id.title_right_img:
if (rigthImgeOnClickListener != null)
rigthImgeOnClickListener.onRigthImgeOnClick();
break;
case R.id.title_right2_img:
if (rigthImge2OnClickListener != null)
rigthImge2OnClickListener.onRigthImge2OnClick();
break;
case R.id.title_right_text:
if (rigthTitleOnClickListener != null)
rigthTitleOnClickListener.onRigthTextOnClick();
break;
default:
break;
}
}
}

private onLeftImgeOnClickListener leftImgeOnClickListener;

public interface onLeftImgeOnClickListener {
void onLeftImgeOnClick();
}

private onRigthImgeOnClickListener rigthImgeOnClickListener;

public interface onRigthImgeOnClickListener {
void onRigthImgeOnClick();
}

private onRigthImge2OnClickListener rigthImge2OnClickListener;

public interface onRigthImge2OnClickListener {
void onRigthImge2OnClick();
}

private onRigthTitleOnClickListener rigthTitleOnClickListener;

public interface onRigthTitleOnClickListener {
void onRigthTextOnClick();
}

public void setLeftImgeOnClickListener(
onLeftImgeOnClickListener leftImgeOnClickListener) {
this.leftImgeOnClickListener = leftImgeOnClickListener;
}

public void setRigthImgeOnClickListener(
onRigthImgeOnClickListener rigthImgeOnClickListener) {
this.rigthImgeOnClickListener = rigthImgeOnClickListener;
}

public void setRigthImge2OnClickListener(
onRigthImge2OnClickListener rigthImge2OnClickListener) {
this.rigthImge2OnClickListener = rigthImge2OnClickListener;
}

public void setRigthTitleOnClickListener(
onRigthTitleOnClickListener rigthTitleOnClickListener) {
this.rigthTitleOnClickListener = rigthTitleOnClickListener;
}

public void setTitleText(String str) {
if (!StringUtils.isEmpty(str)) {
title.setText(str);
}
}

public void setRightImg(int rightImg) {
title_right_img.setImageResource(rightImg);
}

public View getRightImg() {
return title_right_img;
}

public View getRightImage(){
return title_right_img ;
}

public void setRightTextVis(boolean show){
if(show){
title_right_text.setVisibility(View.VISIBLE);
}else{
title_right_text.setVisibility(View.GONE);
}
}
public void setLeftImgVis(boolean show){
if(show){
title_back.setVisibility(View.VISIBLE);
}else{
title_back.setVisibility(View.GONE);
}
}

public void setRight2ImgVis(boolean show) {
if (show) {
title_right2_img.setVisibility(View.VISIBLE);
} else {
title_right2_img.setVisibility(View.GONE);
}
}

}

在init方法中，通过TypeArray这个类，把我们在attr文件中自定义的title属性读取进来，然后把attr中自定义的属性跟TitleView中的变量对应起来，建立关联关系，并设置默认的属性，接着，我们实例化一个title的布局文件，并把布局里的属性跟我们自己定义的控件简历起一一对应的关系，最后别忘了要把TypeArray释放掉。

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="title">

<!-- 左右图片的可见和图片设置属性 -->
<attr name="left_img" format="reference" />
<attr name="right_img" format="reference" />
<attr name="right_img2" format="reference" />
<attr name="left_img_visiable" format="boolean" />
<attr name="right_img_visiable" format="boolean" />
<attr name="right_img2_visiable" format="boolean" />
<attr name="title_visiable" format="boolean" />
<!-- 整个title的背景属性 -->
<attr name="bg_color" format="color" />
<!-- 右侧的文字颜色 -->
<attr name="right_text_visiable" format="boolean" />
<attr name="right_text_color" format="color" />
<attr name="right_text" format="string" />
<attr name="title_text_color" format="color" />
<attr name="title_text" format="string" />
</declare-styleable>
<declare-styleable name="NumberProgressBar">
<attr name="progress" format="integer" />
<attr name="max" format="integer" />
<attr name="progress_unreached_color" format="color" />
<attr name="progress_reached_color" format="color" />
<attr name="progress_reached_bar_height" format="dimension" />
<attr name="progress_unreached_bar_height" format="dimension" />
<attr name="progress_text_size" format="dimension" />
<attr name="progress_text_color" format="color" />
<attr name="progress_text_offset" format="dimension" />
<attr name="progress_text_visibility" format="enum">
<enum name="visible" value="0" />
<enum name="invisible" value="1" />
</attr>
</declare-styleable>
<declare-styleable name="Themes">
<attr name="numberProgressBarStyle" format="reference" />
</declare-styleable>

</resources>

这个是attr文件，就不多解释了。

接下来看一下布局文件，也是非常简单的。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/title_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/bg_light"
android:orientation="vertical">

<ImageView
android:id="@+id/title_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:paddingBottom="8dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingTop="8dp"
android:scaleType="matrix"
android:src="@drawable/arrow_left_2" />

<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:ellipsize="middle"
android:maxLength="10"
android:singleLine="true"
android:text=""
android:textColor="@color/black"
android:textSize="18sp" />

<ImageView
android:id="@+id/title_right_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="5dp"
android:padding="10dp"
android:scaleType="matrix"
android:src="@drawable/img_1"
android:visibility="gone" />

<TextView
android:id="@+id/title_right_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:padding="10dp"
android:text="右边选项"
android:textColor="@color/textcolor_red"
android:textSize="15sp"
android:visibility="gone" />

<ImageView
android:id="@+id/title_right2_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="45dp"
android:padding="10dp"
android:scaleType="matrix"
android:src="@drawable/img_1"
android:visibility="gone" />

</RelativeLayout>

经过以上的步骤，标题栏控件就写完了，下面我们来看一下怎么用。

这里只贴出关键的代码了。

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.setContentView(R.layout.activity_main);

TitleView titleView = (TitleView) findViewById(R.id.titleview);

titleView.setLeftImgeOnClickListener(new onLeftImgeOnClickListener() {
@Override
public void onLeftImgeOnClick() {
finish();
}
});
titleView.setRigthImgeOnClickListener(new onRigthImgeOnClickListener() {
@Override
public void onRigthImgeOnClick() {
//你要做的逻辑
}
});
}

当然了，你还可以设置图标的显示或者隐藏，设置图片，设置相应的点击事件。