打造一个通用的TitleBar
2017-05-21 本文已影响964人
尹star
虽然google先后出了ActionBar，Toolbar等各种bar,但实际开发中产品的设计很多时候还是ios化，一方面让这些官方控件无用武之地，另一方面这些各种bar还是存在着局限性，用起来不是很方便，所以我们这里自己打造一个通用的TitleBar，基本上能满足日常开发中的大部分需求。
先分析下我们日常开发中经常用到的TitleBar有哪些样式：
文字形菜单按钮
左右按钮都是文字
左右文字.jpg
图标形菜单按钮
左右按钮都是图标Icon
左右图标.jpg
图文混排行菜单按钮
按钮为图片加文字的排列方式
图文混排.jpg
多图标形菜单按钮
有多个图标按钮
多图标.jpg
以上这些基本上能涵盖日常开发中的大部分需求，当然如果cover不到也可以在本文的基础上添加自定义需求，这里主要讲一下封装思想。
首先，我们写一个TitleBar的布局，这个很easy，直接上代码：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/bar_layout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@color/colorPrimary">
<TextView
android:id="@+id/tvLeftTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:textColor="@color/colorPrimary" />
<TextView
android:id="@+id/tvMiddleTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:gravity="center"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/tvRightTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="16dp"
android:gravity="center"
android:textColor="@android:color/white"
android:visibility="visible" />
</RelativeLayout>
左中右三个控件我们都采用TextView，布局采用相对布局。对于适配第一种样式，左按钮右按钮都是文本的样式就很简单了；关键是我们的TextView怎么去兼容ImageView。TextView有个属性：drawRight，这个时候如果文本为"",那么drawRight就只剩下图片而没有文本了，那么我就完美适配了第二种样式；那第三种样式图片加文本的显示方式，我们仍然采用这种方案，水到渠成；第四种显示方式主要是右边有两个图片，这样我们仍然把文本设置为"",然后分别设置drawLeft，drawRight，这样就有两张图片了。
完美，通过上面的分析，我们把这几种显示样式的TitleBar都完美适配了，但是但是，有个问题，第四种样式右边的两个图标的点击事件怎么获取，TextView对于drawLeft和drawRight的图片并没有提供点击监听，怎么破？没有提供，我们就自己实现吧，我们计算好触摸位置，然后拦截ACTION_UP事件，就能完美解决问题。于是，对于这种右按钮有两个图标的样式，我们还要先自定义一个TextView来解决点击事件分发的事。代码如下：
public class CustomTextView extends android.support.v7.widget.AppCompatTextView {
private DrawableLeftListener mLeftListener;
private DrawableRightListener mRightListener;
final int DRAWABLE_LEFT = 0;
final int DRAWABLE_TOP = 1;
final int DRAWABLE_RIGHT = 2;
final int DRAWABLE_BOTTOM = 3;
public CustomTextView(Context context) {
super(context);
}
public CustomTextView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public void setDrawableLeftListener(DrawableLeftListener listener) {
this.mLeftListener = listener;
}
public void setDrawableRightListener(DrawableRightListener listener) {
this.mRightListener = listener;
}
public interface DrawableLeftListener {
void onDrawableLeftClick(View view);
}
public interface DrawableRightListener {
void onDrawableRightClick(View view);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_UP:
if (mRightListener != null) {
Drawable drawableRight = getCompoundDrawables()[DRAWABLE_RIGHT];
if (drawableRight != null && event.getRawX() >= (getRight() - drawableRight.getBounds().width())) {
mRightListener.onDrawableRightClick(this);
return true;
}
}
if (mLeftListener != null) {
Drawable drawableLeft = getCompoundDrawables()[DRAWABLE_LEFT];
if (drawableLeft != null && event.getRawX() <= (getLeft() + drawableLeft.getBounds().width()))
mLeftListener.onDrawableLeftClick(this);
return true;
}
break;
}
return super.onTouchEvent(event);
}
}
同样上面布局中的
<TextView
android:id="@+id/tvRightTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="16dp"
android:gravity="center"
android:textColor="@android:color/white"
android:visibility="visible" />
要替换成
<CustomTextView
android:id="@+id/tvRightTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="16dp"
android:gravity="center"
android:textColor="@android:color/white"
android:visibility="visible" />
好了，方案上我们算是基本走通了，下面就是自定义一个TittleBar，暴露一些接口API和属性，供调用的地方设置属性。然后我们再分析下这个TitleBar有哪些属性可以设置：
1：左按钮文本（图片）
2：右按钮文本（图片）
3：中间Title
4：左按钮文本颜色
5：右按钮文本颜色
6：中间Title颜色
7：左按钮文字大小
8：右按钮文字大小
9：中间Title颜色
总结下来基本就是图片，文字，文字大小，文字颜色，当然还有一个最重要的：点击事件。这里先加这么多，当然有更多需求，都可以在此基础上加。所以，基于上面的分析，我们写出了CustomTitleBar：
public class CustomTitleBar extends RelativeLayout implements View.OnClickListener {
private String leftTitle;
private String middleTitle;
private String rightTitle;
private int leftTextColor;
private int middleTextColor;
private int rightTextColor;
private float leftTextSize;
private float rightTextSize;
private float middleTextSize;
private TextView tvLeft;
private TextView tvMiddle;
private CustomTextView tvRight;
private int leftImage;
private int rightImage;
private int rightImage2;
private TitleClickListener listener;
public CustomTitleBar(Context context) {
this(context, null);
}
public CustomTitleBar(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public CustomTitleBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.CustomTitleBar, defStyleAttr, 0);
initView(array);
array.recycle();
}
private void initView(TypedArray array) {
LayoutInflater.from(getContext()).inflate(R.layout.titlebar_layout, this);
tvLeft = (TextView) findViewById(R.id.tvLeftTitle);
tvLeft.setOnClickListener(this);
tvMiddle = (TextView) findViewById(R.id.tvMiddleTitle);
tvMiddle.setOnClickListener(this);
tvRight = (CustomTextView) findViewById(R.id.tvRightTitle);
tvRight.setOnClickListener(this);
leftTitle = array.getString(R.styleable.CustomTitleBar_leftTitle);
middleTitle = array.getString(R.styleable.CustomTitleBar_middleTitle);
rightTitle = array.getString(R.styleable.CustomTitleBar_rightTitle);
leftTextColor = array.getColor(R.styleable.CustomTitleBar_leftTextColor, Color.GRAY);
middleTextColor = array.getColor(R.styleable.CustomTitleBar_middleTextColor, Color.TRANSPARENT);
rightTextColor = array.getColor(R.styleable.CustomTitleBar_rightTextColor, Color.GRAY);
leftImage = array.getResourceId(R.styleable.CustomTitleBar_leftImage, 0);
rightImage = array.getResourceId(R.styleable.CustomTitleBar_rightImage, 0);
rightImage2 = array.getResourceId(R.styleable.CustomTitleBar_rightImage2, 0);
leftTextSize = array.getDimension(R.styleable.CustomTitleBar_leftTextSize, DensityUtil.dip2px(getContext(), 15));
rightTextSize = array.getDimension(R.styleable.CustomTitleBar_rightTextSize, DensityUtil.dip2px(getContext(), 17));
middleTextSize = array.getDimension(R.styleable.CustomTitleBar_middleTextSize, DensityUtil.dip2px(getContext(), 15));
if (leftImage > 0) {
setLeftImage(leftImage);
} else {
setLeftTitle(leftTitle);
}
if (rightImage > 0) {
setRightImage(rightImage);
} else {
setRightTitle(rightTitle);
}
if (rightImage > 0 && rightImage2 > 0) {
setRightImage(rightImage, rightImage2);
}
tvLeft.setTextSize(TypedValue.COMPLEX_UNIT_PX, leftTextSize);
tvRight.setTextSize(TypedValue.COMPLEX_UNIT_PX, rightTextSize);
tvMiddle.setTextSize(TypedValue.COMPLEX_UNIT_PX, middleTextSize);
tvRight.setDrawableLeftListener(new CustomTextView.DrawableLeftListener() {
@Override
public void onDrawableLeftClick(View view) {
listener.onRightButton1Click();
}
});
tvRight.setDrawableRightListener(new CustomTextView.DrawableRightListener() {
@Override
public void onDrawableRightClick(View view) {
listener.onRightButton2Click();
}
});
setMiddleTitle(middleTitle);
setLeftTextColor(leftTextColor);
setMiddleTextColor(middleTextColor);
setRightTextColor(rightTextColor);
}
/**
* @param size 单位sp
*/
public void setLeftTextSize(float size) {
tvLeft.setTextSize(size);
}
/**
* @param size 单位sp
*/
public void setMiddleTextSize(float size) {
tvMiddle.setTextSize(size);
}
/**
* @param size 单位sp
*/
public void setRightTextSize(float size) {
tvRight.setTextSize(size);
}
public void setLeftTextColor(int color) {
tvLeft.setTextColor(color);
}
public void setMiddleTextColor(int color) {
tvMiddle.setTextColor(color);
}
public void setRightTextColor(int color) {
tvRight.setTextColor(color);
}
public void setLeftTitle(String title) {
tvLeft.setText(title);
}
public void setRightTitle(String title) {
tvRight.setText(title);
}
public void setMiddleTitle(int titleId) {
tvMiddle.setText(titleId);
}
public void setMiddleTitle(String title) {
tvMiddle.setText(title);
}
public void setLeftImage(int leftImage) {
setLeftTitle(leftTitle);
Drawable drawable = getResources().getDrawable(leftImage);
drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
tvLeft.setCompoundDrawablePadding(DensityUtil.dip2px(getContext(), 8));
tvLeft.setCompoundDrawables(drawable, null, null, null);
}
public void setRightImage(int rightImage) {
setRightTitle(rightTitle);
Drawable drawable = getResources().getDrawable(rightImage);
drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
tvRight.setCompoundDrawablePadding(DensityUtil.dip2px(getContext(), 8));
tvRight.setCompoundDrawables(null, null, drawable, null);
}
public void setRightImage(int rightImage1, int rightImage2) {
setRightTitle(rightTitle);
Drawable drawable1 = getResources().getDrawable(rightImage1);
Drawable drawable2 = getResources().getDrawable(rightImage2);
drawable1.setBounds(0, 0, drawable1.getMinimumWidth(), drawable1.getMinimumHeight());
drawable2.setBounds(0, 0, drawable2.getMinimumWidth(), drawable2.getMinimumHeight());
tvRight.setCompoundDrawablePadding(DensityUtil.dip2px(getContext(), 8));
tvRight.setCompoundDrawables(drawable1, null, drawable2, null);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.tvLeftTitle:
if (listener != null) {
listener.onLeftClick();
}
break;
case R.id.tvRightTitle:
if (listener != null) {
listener.onRightClick();
}
break;
}
}
public void setTitleClickListener(TitleClickListener listener) {
this.listener = listener;
}
public interface TitleClickListener {
void onLeftClick();
void onRightClick();
void onRightButton1Click();
void onRightButton2Click();
}
}
attrs.xml里是这么写的：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CustomTitleBar">
<attr name="leftTitle" format="string" />
<attr name="middleTitle" format="string" />
<attr name="rightTitle" format="string" />
<attr name="leftTextSize" format="dimension" />
<attr name="middleTextSize" format="dimension" />
<attr name="rightTextSize" format="dimension" />
<attr name="leftTextColor" format="color" />
<attr name="middleTextColor" format="color" />
<attr name="rightTextColor" format="color" />
<attr name="leftImage" format="integer" />
<attr name="rightImage" format="integer" />
<attr name="rightImage2" format="integer" />
</declare-styleable>
</resources>
到这里我们已经完成了这个通用TitleBar的封装工作，下面我们就写个测试类来调用下，先上xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
tools:context="com.star.titlebar.MainActivity">
<com.star.titlebar.CustomTitleBar
android:id="@+id/titleBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="true"
app:leftTextColor="@android:color/white"
app:leftTextSize="15sp"
app:leftTitle="返回"
app:middleTextColor="@color/colorAccent"
app:middleTextSize="20sp"
app:middleTitle="样式一"
app:rightTextColor="@android:color/white"
app:rightTitle="确定" />
<com.star.titlebar.CustomTitleBar
android:id="@+id/titleBar2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
app:leftImage="@mipmap/tbar_return_white"
app:leftTextColor="@android:color/white"
app:middleTextColor="@color/colorAccent"
app:middleTextSize="20sp"
app:middleTitle="样式二"
app:rightImage="@mipmap/home_video_complete" />
<com.star.titlebar.CustomTitleBar
android:id="@+id/titleBar3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:clipToPadding="true"
app:leftImage="@mipmap/tbar_return_white"
app:leftTextColor="@android:color/white"
app:leftTextSize="15sp"
app:leftTitle="返回"
app:middleTextColor="@color/colorAccent"
app:middleTextSize="20sp"
app:middleTitle="样式三"
app:rightImage="@mipmap/home_video_complete"
app:rightTextColor="@android:color/white"
app:rightTitle="确定" />
<com.star.titlebar.CustomTitleBar
android:id="@+id/titleBar4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:clipToPadding="true"
app:leftImage="@mipmap/tbar_return_white"
app:leftTextColor="@android:color/white"
app:leftTextSize="15sp"
app:leftTitle="返回"
app:middleTextColor="@color/colorAccent"
app:middleTextSize="20sp"
app:middleTitle="样式四"
app:rightImage="@mipmap/home_video_complete"
app:rightImage2="@mipmap/resume_rerecording"
app:rightTextColor="@android:color/white" />
</LinearLayout>
xml里我们只需要根据自己需要的样式来设置对应的属性就可以了，当然这些属性也可以在代码里设置，运行出来的效果是这样的：
test
关于按钮的点击事件，只要在代码里调用setTitleClickListener即可
titleBar.setTitleClickListener(new CustomTitleBar.TitleClickListener() {
@Override
public void onLeftClick() {
//左按钮
}
@Override
public void onRightClick() {
//右按钮
}
@Override
public void onRightButton1Click() {
//右边第一个按钮（右边俩按钮）
}
@Override
public void onRightButton2Click() {
//右边第一个按钮（右边俩按钮）
}
});
好了，这里主要还是提供一个思路，完整代码：GitHub
