实现一个高度可定制化的Titlebar

86 阅读 0 评论 57 点赞

我是靠谱客的博主贤惠玉米，这篇文章主要介绍实现一个高度可定制化的Titlebar，现在分享给大家，希望可以做个参考。

在android开发中，TItleBar 应该算是使用频率最高的控件之一了，虽然google也给开发者们提供了好用的ToolBar，但是鉴于目前国内一切向ios看齐的android开发环境，我们拿到的设计稿往往都是按照ios风格来设计的，当然一般公司的设计师不可能给android和ios各设计一套UI，所以…希望国内的android环境越来越好吧…

之前也在到处找过别人实现好的Titlebar控件，但是没有发现很合适的，那么就自己来造一个轮子吧！

一般项目所需要的Titlebar总结起来有以下这么几种：

返回键、title、右侧菜单
返回键、搜索框、右侧菜单
“返回”字样(带图标或者不带图标)、title或者搜索框、图标菜单或者文字“菜单”
图标和文字的大小、颜色、padding值、排版等等

接下来我们就来自定义一个满足上述需求的通用Titlebar.

1.定义titlebar的布局

采用权重的方式，合理分配屏幕空间，为了满足需求多样化而使用多个控件，控制显隐状态。

复制代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:weightSum="7">
<RelativeLayout

android:id="@+id/view_left"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<TextView

android:id="@+id/tv_title_left"
android:gravity="center"
android:padding="5dp"
android:layout_width="match_parent"
android:layout_height="match_parent"></TextView>
<ImageView

android:id="@+id/iv_title_left"
android:padding="10dp"
android:layout_width="match_parent"
android:layout_height="match_parent"></ImageView>
</RelativeLayout>
<RelativeLayout

android:id="@+id/view_title"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="5">
<TextView

android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="20sp"></TextView>
<EditText

android:id="@+id/et_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp"
android:drawablePadding="10dp"
android:padding="0dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"></EditText>
</RelativeLayout>
<RelativeLayout

android:id="@+id/view_right"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<TextView

android:id="@+id/tv_title_right"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:gravity="center"></TextView>
<ImageView

android:id="@+id/iv_title_right"
android:padding="10dp"
android:layout_width="match_parent"
android:layout_height="match_parent"></ImageView>
</RelativeLayout>
</LinearLayout>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:weightSum="7">
<RelativeLayout

android:id="@+id/view_left"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<TextView

android:id="@+id/tv_title_left"
android:gravity="center"
android:padding="5dp"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<ImageView

android:id="@+id/iv_title_left"
android:padding="10dp"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
<RelativeLayout

android:id="@+id/view_title"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="5">
<TextView

android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="20sp"/>
<EditText

android:id="@+id/et_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp"
android:drawablePadding="10dp"
android:padding="0dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"/>
</RelativeLayout>
<RelativeLayout

android:id="@+id/view_right"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<TextView

android:id="@+id/tv_title_right"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:gravity="center"/>
<ImageView

android:id="@+id/iv_title_right"
android:padding="10dp"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
</LinearLayout>

2.自定义样式列表

自定义一些必要的可扩展属性

复制代码

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

<attr name="title_bar_height" format="dimension|reference"></attr>

<attr name="title_bar_background" format="color|reference"></attr>

<attr name="left_view_visibility" format="boolean"></attr>

<attr name="left_textView_visibility" format="boolean"></attr>

<attr name="left_imageView_visibility" format="boolean"></attr>

<attr name="left_view_background" format="color|reference"></attr>

<attr name="left_text" format="string|dimension"></attr>

<attr name="left_textView_drawable" format="reference"></attr>

<attr name="left_text_size" format="dimension|reference"></attr>

<attr name="left_text_color" format="color|reference"></attr>

<attr name="left_textView_background" format="color|reference"></attr>

<attr name="left_image" format="reference"></attr>

<attr name="right_view_background" format="color|reference"></attr>

<attr name="right_view_visibility" format="boolean"></attr>

<attr name="right_textView_visibility" format="boolean"></attr>

<attr name="right_imageView_visibility" format="boolean"></attr>

<attr name="right_text" format="string|dimension"></attr>

<attr name="right_text_size" format="dimension|reference"></attr>

<attr name="right_text_color" format="color|reference"></attr>

<attr name="right_textView_background" format="color|reference"></attr>

<attr name="right_image" format="reference"></attr>

<attr name="middle_view_background" format="color|reference"></attr>

<attr name="title_visibility" format="boolean"></attr>

<attr name="search_visibility" format="boolean"></attr>

<attr name="title_text" format="string|reference"></attr>

<attr name="title_text_size" format="dimension|reference"></attr>

<attr name="title_text_color" format="color|reference"></attr>

<attr name="title_text_background" format="color|reference"></attr>

<attr name="title_search_hint" format="string|reference"></attr>

<attr name="title_search_hint_color" format="color|reference"></attr>

<attr name="title_search_text" format="string|reference"></attr>

<attr name="title_search_paddingLeft" format="dimension|reference"></attr>
<attr name="title_search_paddingTop" format="dimension|reference"></attr>
<attr name="title_search_paddingRight" format="dimension|reference"></attr>
<attr name="title_search_paddingBottom" format="dimension|reference"></attr>

<attr name="title_search_drawableLeft" format="reference"></attr>
<attr name="title_search_drawableRight" format="reference"></attr>

<attr name="title_search_text_color" format="color|reference"></attr>

<attr name="title_search_text_size" format="dimension|reference"></attr>

<attr name="title_search_background" format="color|reference"></attr>

<attr name="title_search_text_gravity">

<enum name="center" value="17"></enum>

<enum name="left" value="19"></enum>

<enum name="right" value="21"></enum>
</attr>
</declare-styleable>
</resources>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="common_title_bar">
<!--标题栏高度-->
<attr name="title_bar_height" format="dimension|reference"/>
<!--标题栏整体背景-->
<attr name="title_bar_background" format="color|reference"/>
<!--左侧View容器是否显示-->
<attr name="left_view_visibility" format="boolean"/>
<!--左侧TextView是否显示-->
<attr name="left_textView_visibility" format="boolean"/>
<!--左侧ImageView是否显示-->
<attr name="left_imageView_visibility" format="boolean"/>
<!--左侧View容器背景色-->
<attr name="left_view_background" format="color|reference"/>
<!--返回键文字-->
<attr name="left_text" format="string|dimension"/>
<!--返回键TextView左侧图标-->
<attr name="left_textView_drawable" format="reference"/>
<!--返回键文字字号-->
<attr name="left_text_size" format="dimension|reference"/>
<!--返回键文字颜色-->
<attr name="left_text_color" format="color|reference"/>
<!--返回键TextView背景色-->
<attr name="left_textView_background" format="color|reference"/>
<!--返回键图标-->
<attr name="left_image" format="reference"/>
<!--右侧View容器背景色-->
<attr name="right_view_background" format="color|reference"/>
<!--右侧View容器是否显示-->
<attr name="right_view_visibility" format="boolean"/>
<!--右侧TextView是否显示-->
<attr name="right_textView_visibility" format="boolean"/>
<!--右侧ImageView是否显示-->
<attr name="right_imageView_visibility" format="boolean"/>
<!--菜单键文字-->
<attr name="right_text" format="string|dimension"/>
<!--菜单键文字字号-->
<attr name="right_text_size" format="dimension|reference"/>
<!--菜单键文字颜色-->
<attr name="right_text_color" format="color|reference"/>
<!--菜单键TextView背景色-->
<attr name="right_textView_background" format="color|reference"/>
<!--菜单键图标-->
<attr name="right_image" format="reference"/>
<!--中间View容器背景色-->
<attr name="middle_view_background" format="color|reference"/>
<!--title是否显示-->
<attr name="title_visibility" format="boolean"/>
<!--搜索框是否显示-->
<attr name="search_visibility" format="boolean"/>
<!--标题文字-->
<attr name="title_text" format="string|reference"/>
<!--标题字号-->
<attr name="title_text_size" format="dimension|reference"/>
<!--标题文字颜色-->
<attr name="title_text_color" format="color|reference"/>
<!--标题TextView背景色-->
<attr name="title_text_background" format="color|reference"/>
<!--搜索框hint-->
<attr name="title_search_hint" format="string|reference"/>
<!--搜索框hint颜色-->
<attr name="title_search_hint_color" format="color|reference"/>
<!--搜索框文字-->
<attr name="title_search_text" format="string|reference"/>
<!--搜索框padding-->
<attr name="title_search_paddingLeft" format="dimension|reference"/>
<attr name="title_search_paddingTop" format="dimension|reference"/>
<attr name="title_search_paddingRight" format="dimension|reference"/>
<attr name="title_search_paddingBottom" format="dimension|reference"/>
<!--搜索框小图标-->
<attr name="title_search_drawableLeft" format="reference"/>
<attr name="title_search_drawableRight" format="reference"/>
<!--搜索框文字颜色-->
<attr name="title_search_text_color" format="color|reference"/>
<!--搜索框文字字号-->
<attr name="title_search_text_size" format="dimension|reference"/>
<!--搜索框背景-->
<attr name="title_search_background" format="color|reference"/>
<!--搜索框文字排版-->
<attr name="title_search_text_gravity">
<!--居中-->
<enum name="center" value="17"/>
<!--居左-->
<enum name="left" value="19"/>
<!--居右-->
<enum name="right" value="21"/>
</attr>
</declare-styleable>
</resources>

3.CommonTitleBar自定义ViewGroup的实现

3.1 自定义属性

复制代码

//代码片段
public CommonTitleBar(Context context)
{
this(context, null, 0);
}
public CommonTitleBar(Context context, AttributeSet attrs)
{
this(context, attrs, 0);
}
public CommonTitleBar(Context context, AttributeSet attrs, int defStyleAttr)
{
super(context, attrs, defStyleAttr);
this.context = context;
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.common_title_bar);
titleBarHeight = typedArray.getDimension(R.styleable.common_title_bar_title_bar_height, dip2px(context, DEFAULT_TITLE_BAR_HEIGHT));
titleBarBackground = typedArray.getColor(R.styleable.common_title_bar_title_bar_background, ContextCompat.getColor(context, android.R.color.white));
leftViewVisibility = typedArray.getBoolean(R.styleable.common_title_bar_left_view_visibility, true);
leftTextViewVisibility = typedArray.getBoolean(R.styleable.common_title_bar_left_textView_visibility, false);
leftImageViewVisibility = typedArray.getBoolean(R.styleable.common_title_bar_left_imageView_visibility, true);
leftViewBackground = typedArray.getColor(R.styleable.common_title_bar_left_view_background, getTitleBarBackground());
leftText = typedArray.getString(R.styleable.common_title_bar_left_text);
leftTextViewDrawable = typedArray.getResourceId(R.styleable.common_title_bar_left_textView_drawable, 0);
leftTextSize = typedArray.getDimension(R.styleable.common_title_bar_left_text_size, dip2px(context,16));
leftTextColor = typedArray.getColor(R.styleable.common_title_bar_left_text_color, ContextCompat.getColor(context, android.R.color.black));
leftTextViewBackground = typedArray.getColor(R.styleable.common_title_bar_left_textView_background, getTitleBarBackground());
leftImageDrawable = typedArray.getResourceId(R.styleable.common_title_bar_left_image, R.drawable.ic_back);
rightViewBackground = typedArray.getColor(R.styleable.common_title_bar_right_view_background, getTitleBarBackground());
rightViewVisibility = typedArray.getBoolean(R.styleable.common_title_bar_right_view_visibility, true);
rightTextViewVisibility = typedArray.getBoolean(R.styleable.common_title_bar_right_textView_visibility, false);
rightImageViewVisibility = typedArray.getBoolean(R.styleable.common_title_bar_right_imageView_visibility, false);
rightText = typedArray.getString(R.styleable.common_title_bar_right_text);
rightTextSize = typedArray.getDimension(R.styleable.common_title_bar_right_text_size, dip2px(context,16));
rightTextColor = typedArray.getColor(R.styleable.common_title_bar_right_text_color, ContextCompat.getColor(context, android.R.color.black));
rightTextViewBackground = typedArray.getColor(R.styleable.common_title_bar_right_textView_background, getTitleBarBackground());
rightImageDrawable = typedArray.getResourceId(R.styleable.common_title_bar_right_image, R.drawable.ic_menu);
middleViewBackground = typedArray.getColor(R.styleable.common_title_bar_middle_view_background, getTitleBarBackground());
titleTextViewVisibility = typedArray.getBoolean(R.styleable.common_title_bar_title_visibility, true);
searchVisibility = typedArray.getBoolean(R.styleable.common_title_bar_search_visibility, false);
titleText = typedArray.getString(R.styleable.common_title_bar_title_text);
titleTextSize = typedArray.getDimension(R.styleable.common_title_bar_title_text_size, dip2px(context,20));
titleTextColor = typedArray.getColor(R.styleable.common_title_bar_title_text_color, ContextCompat.getColor(context, android.R.color.black));
titleTextViewBackground = typedArray.getColor(R.styleable.common_title_bar_title_text_color, ContextCompat.getColor(context, android.R.color.black));
searchHint = typedArray.getString(R.styleable.common_title_bar_title_search_hint);
searchHintColor = typedArray.getColor(R.styleable.common_title_bar_title_search_hint_color, ContextCompat.getColor(context, android.R.color.darker_gray));
titleSearchText = typedArray.getString(R.styleable.common_title_bar_title_search_text);
etSearchPaddingLeft = typedArray.getDimension(R.styleable.common_title_bar_title_search_paddingLeft, 10);
etSearchPaddingTop = typedArray.getDimension(R.styleable.common_title_bar_title_search_paddingTop, 0);
etSearchPaddingRight = typedArray.getDimension(R.styleable.common_title_bar_title_search_paddingRight, 10);
etSearchPaddingBottom = typedArray.getDimension(R.styleable.common_title_bar_title_search_paddingBottom, 0);
etDrawableLeft = typedArray.getResourceId(R.styleable.common_title_bar_title_search_drawableLeft, 0);
etDrawableRight = typedArray.getResourceId(R.styleable.common_title_bar_title_search_drawableRight, 0);
titleSearchTextColor = typedArray.getColor(R.styleable.common_title_bar_title_search_text_color, ContextCompat.getColor(context, android.R.color.black));
titleSearchTextSize = typedArray.getDimension(R.styleable.common_title_bar_title_search_text_size, dip2px(context,16));
titleSearchBackground = typedArray.getResourceId(R.styleable.common_title_bar_title_search_background, R.drawable.bg_title_search);
titleSearchTextGravity = typedArray.getInt(R.styleable.common_title_bar_title_search_text_gravity, 19);
typedArray.recycle();
initView();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
//代码片段
public CommonTitleBar(Context context)
{
this(context, null, 0);
}
public CommonTitleBar(Context context, AttributeSet attrs)
{
this(context, attrs, 0);
}
public CommonTitleBar(Context context, AttributeSet attrs, int defStyleAttr)
{
super(context, attrs, defStyleAttr);
this.context = context;
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.common_title_bar);
titleBarHeight = typedArray.getDimension(R.styleable.common_title_bar_title_bar_height, dip2px(context, DEFAULT_TITLE_BAR_HEIGHT));
titleBarBackground = typedArray.getColor(R.styleable.common_title_bar_title_bar_background, ContextCompat.getColor(context, android.R.color.white));
leftViewVisibility = typedArray.getBoolean(R.styleable.common_title_bar_left_view_visibility, true);
leftTextViewVisibility = typedArray.getBoolean(R.styleable.common_title_bar_left_textView_visibility, false);
leftImageViewVisibility = typedArray.getBoolean(R.styleable.common_title_bar_left_imageView_visibility, true);
leftViewBackground = typedArray.getColor(R.styleable.common_title_bar_left_view_background, getTitleBarBackground());
leftText = typedArray.getString(R.styleable.common_title_bar_left_text);
leftTextViewDrawable = typedArray.getResourceId(R.styleable.common_title_bar_left_textView_drawable, 0);
leftTextSize = typedArray.getDimension(R.styleable.common_title_bar_left_text_size, dip2px(context,16));
leftTextColor = typedArray.getColor(R.styleable.common_title_bar_left_text_color, ContextCompat.getColor(context, android.R.color.black));
leftTextViewBackground = typedArray.getColor(R.styleable.common_title_bar_left_textView_background, getTitleBarBackground());
leftImageDrawable = typedArray.getResourceId(R.styleable.common_title_bar_left_image, R.drawable.ic_back);
rightViewBackground = typedArray.getColor(R.styleable.common_title_bar_right_view_background, getTitleBarBackground());
rightViewVisibility = typedArray.getBoolean(R.styleable.common_title_bar_right_view_visibility, true);
rightTextViewVisibility = typedArray.getBoolean(R.styleable.common_title_bar_right_textView_visibility, false);
rightImageViewVisibility = typedArray.getBoolean(R.styleable.common_title_bar_right_imageView_visibility, false);
rightText = typedArray.getString(R.styleable.common_title_bar_right_text);
rightTextSize = typedArray.getDimension(R.styleable.common_title_bar_right_text_size, dip2px(context,16));
rightTextColor = typedArray.getColor(R.styleable.common_title_bar_right_text_color, ContextCompat.getColor(context, android.R.color.black));
rightTextViewBackground = typedArray.getColor(R.styleable.common_title_bar_right_textView_background, getTitleBarBackground());
rightImageDrawable = typedArray.getResourceId(R.styleable.common_title_bar_right_image, R.drawable.ic_menu);
middleViewBackground = typedArray.getColor(R.styleable.common_title_bar_middle_view_background, getTitleBarBackground());
titleTextViewVisibility = typedArray.getBoolean(R.styleable.common_title_bar_title_visibility, true);
searchVisibility = typedArray.getBoolean(R.styleable.common_title_bar_search_visibility, false);
titleText = typedArray.getString(R.styleable.common_title_bar_title_text);
titleTextSize = typedArray.getDimension(R.styleable.common_title_bar_title_text_size, dip2px(context,20));
titleTextColor = typedArray.getColor(R.styleable.common_title_bar_title_text_color, ContextCompat.getColor(context, android.R.color.black));
titleTextViewBackground = typedArray.getColor(R.styleable.common_title_bar_title_text_color, ContextCompat.getColor(context, android.R.color.black));
searchHint = typedArray.getString(R.styleable.common_title_bar_title_search_hint);
searchHintColor = typedArray.getColor(R.styleable.common_title_bar_title_search_hint_color, ContextCompat.getColor(context, android.R.color.darker_gray));
titleSearchText = typedArray.getString(R.styleable.common_title_bar_title_search_text);
etSearchPaddingLeft = typedArray.getDimension(R.styleable.common_title_bar_title_search_paddingLeft, 10);
etSearchPaddingTop = typedArray.getDimension(R.styleable.common_title_bar_title_search_paddingTop, 0);
etSearchPaddingRight = typedArray.getDimension(R.styleable.common_title_bar_title_search_paddingRight, 10);
etSearchPaddingBottom = typedArray.getDimension(R.styleable.common_title_bar_title_search_paddingBottom, 0);
etDrawableLeft = typedArray.getResourceId(R.styleable.common_title_bar_title_search_drawableLeft, 0);
etDrawableRight = typedArray.getResourceId(R.styleable.common_title_bar_title_search_drawableRight, 0);
titleSearchTextColor = typedArray.getColor(R.styleable.common_title_bar_title_search_text_color, ContextCompat.getColor(context, android.R.color.black));
titleSearchTextSize = typedArray.getDimension(R.styleable.common_title_bar_title_search_text_size, dip2px(context,16));
titleSearchBackground = typedArray.getResourceId(R.styleable.common_title_bar_title_search_background, R.drawable.bg_title_search);
titleSearchTextGravity = typedArray.getInt(R.styleable.common_title_bar_title_search_text_gravity, 19);
typedArray.recycle();
initView();
}

3.2 高度的测量和设置

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//代码片段
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = MeasureSpec.getSize(widthMeasureSpec);
//title高度的测量和设置
setMeasuredDimension(width, (int) titleBarHeight);
}
private int dip2px(Context context, float dpValue)
{
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}