自定义ActionBar

发表于 | 分类于 | 阅读次数

自定义ActionBar

在项目开发中，我们经常要用到ActionBar，今天和大家讲解一下将ActionBar写成自定义view的写法，废话不多说，直接上真活。

分析问题：市面上的都是左边一个返回按钮，中间标题，右边是一个图标／文字直接显示

大致思路：自定义组合控件来达到ActionBar的效果，然后将颜色、字体、文字设置都写成动态设置／xml设置的，点击事件的设置，以此来达到自定义ActionBar的效果

1.自定义ActionBar xml布局

左边一个icon，中间文字，右边icon／文字

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
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/action_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="@dimen/dp44"
    android:orientation="vertical">
    <TextView
        android:id="@+id/txt_title"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp44"
        android:gravity="center"
        android:singleLine="true" />
    <ImageView
        android:id="@+id/img_left"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_centerVertical="true"
        android:contentDescription="@null"
        android:gravity="center"
        android:paddingLeft="@dimen/dp10"
        android:paddingStart="@dimen/dp10"
        android:paddingRight="@dimen/dp10"
        android:paddingEnd="@dimen/dp10"
        android:scaleType="centerInside"
        android:src="@mipmap/btn_return" />
    <ImageView
        android:id="@+id/img_right"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="@dimen/dp10"
        android:layout_marginLeft="@dimen/dp10"
        android:layout_marginRight="@dimen/dp10"
        android:layout_marginStart="@dimen/dp10"
        android:contentDescription="@null"
        android:gravity="center"
        android:src="@mipmap/message" />
    <TextView
        android:id="@+id/txt_right"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:gravity="center"
        android:paddingEnd="@dimen/dp10"
        android:paddingLeft="@dimen/dp10"
        android:paddingRight="@dimen/dp10"
        android:paddingStart="@dimen/dp10"
        android:visibility="gone" />
</RelativeLayout>

2.自定义ActionBar java代码

自定义ActionBar整体布局是RelativeLayout，所以我们的组合控件要继承RelativeLayout：

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
/**
 * Created by wujun on 2017/7/18.
 *
 * ActionBar
 *
 * @author madreain
 * @desc ActionBar支持监听方法的监听、文字的设置
 */
public class ActionBarView extends RelativeLayout {
    private RelativeLayout action_bar_layout;
    private TextView txt_title;
    private ImageView img_left;
    private ImageView img_right;
    private TextView txt_right;
    private int mBackgroudColor= getResources().getColor(R.color.colorAccent);
    private int mTextColor= Color.WHITE;
    private int mTitleSize= 20;
    private int mTextSize= 16;
    public ActionBarView(Context context) {
        super(context);
        initView(context);
    }
    public ActionBarView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }
    public ActionBarView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
    }
    private void initView(Context context) {
        LayoutInflater.from(context).inflate(R.layout.actionbar, this, true);
        txt_title= (TextView) findViewById(R.id.txt_title);
        img_left= (ImageView) findViewById(R.id.img_left);
        img_right= (ImageView) findViewById(R.id.img_right);
        txt_right= (TextView) findViewById(R.id.txt_right);
        action_bar_layout= (RelativeLayout) findViewById(R.id.action_bar_layout);
        action_bar_layout.setBackgroundColor(mBackgroudColor);
        txt_title.setTextColor(mTextColor);
        txt_right.setTextColor(mTextColor);
        txt_title.setTextSize(mTitleSize);
        txt_right.setTextSize(mTextSize);
    }
    public void setTitle(String title){
        if(!TextUtils.isEmpty(title)){
            txt_title.setText(title);
        }
    }
    public void setLeftListener(OnClickListener onClickListener){
        img_left.setOnClickListener(onClickListener);
    }
    public void setRightListener(OnClickListener onClickListener){
        img_right.setOnClickListener(onClickListener);
    }
    public void setRightTextListener(OnClickListener onClickListener){
        txt_right.setOnClickListener(onClickListener);
    }
    public void setRightText(boolean isshow,String text){
        if(isshow){
            txt_right.setVisibility(VISIBLE);
            img_right.setVisibility(GONE);
            if(!TextUtils.isEmpty(text)){
                txt_right.setText(text);
            }
        }
    }
}

3.自定义属性

values目录下创建 attrs.xml：

1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ActionBarView">
        <attr name="background_color" format="color"/>
        <attr name="txt_color" format="color"/>
        <attr name="title_size" format="integer"/>
        <attr name="txt_size" format="integer"/>
    </declare-styleable>
</resources>

这里我定义来四个属性，分别是背景颜色、文字颜色、标题字体大小、字体大小，为了引入自定义的属性，我们需要在
ActionBarView的构造函数中解析自定义属性的值：（我这里吧解析自定义属性的值单独写方法写出来的，便于代码的查看）

1
2
3
4
5
6
7
8
9
private void initTypedArray(Context context, AttributeSet attrs) {
        TypedArray mTypedArray=context.obtainStyledAttributes(attrs,R.styleable.ActionBarView);
        mBackgroudColor=mTypedArray.getColor(R.styleable.ActionBarView_background_color,getResources().getColor(R.color.colorAccent));
        mTextColor=mTypedArray.getColor(R.styleable.ActionBarView_txt_color, Color.WHITE);
        mTextSize=mTypedArray.getInteger(R.styleable.ActionBarView_txt_size,16);
        mTitleSize=mTypedArray.getInteger(R.styleable.ActionBarView_title_size,20);
        //获取资源后要及时回收
        mTypedArray.recycle();
    }

然后贴出自定义ActionBarView的全部代码；

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
91
92
93
94
95
96
97
98
/**
 * Created by wujun on 2017/7/18.
 *
 * ActionBar
 *
 * @author madreain
 * @desc ActionBar支持监听方法的监听、文字的设置
 */
public class ActionBarView extends RelativeLayout {
    private RelativeLayout action_bar_layout;
    private TextView txt_title;
    private ImageView img_left;
    private ImageView img_right;
    private TextView txt_right;
    private int mBackgroudColor= getResources().getColor(R.color.colorAccent);
    private int mTextColor= Color.WHITE;
    private int mTitleSize= 20;
    private int mTextSize= 16;
    public ActionBarView(Context context) {
        super(context);
        initView(context);
    }
    public ActionBarView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initTypedArray(context,attrs);
        initView(context);
    }
    public ActionBarView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initTypedArray(context,attrs);
        initView(context);
    }
    private void initTypedArray(Context context, AttributeSet attrs) {
        TypedArray mTypedArray=context.obtainStyledAttributes(attrs,R.styleable.ActionBarView);
        mBackgroudColor=mTypedArray.getColor(R.styleable.ActionBarView_background_color,getResources().getColor(R.color.colorAccent));
        mTextColor=mTypedArray.getColor(R.styleable.ActionBarView_txt_color, Color.WHITE);
        mTextSize=mTypedArray.getInteger(R.styleable.ActionBarView_txt_size,16);
        mTitleSize=mTypedArray.getInteger(R.styleable.ActionBarView_title_size,20);
        //获取资源后要及时回收
        mTypedArray.recycle();
    }
    private void initView(Context context) {
        LayoutInflater.from(context).inflate(R.layout.actionbar, this, true);
        txt_title= (TextView) findViewById(R.id.txt_title);
        img_left= (ImageView) findViewById(R.id.img_left);
        img_right= (ImageView) findViewById(R.id.img_right);
        txt_right= (TextView) findViewById(R.id.txt_right);
        action_bar_layout= (RelativeLayout) findViewById(R.id.action_bar_layout);
        action_bar_layout.setBackgroundColor(mBackgroudColor);
        txt_title.setTextColor(mTextColor);
        txt_right.setTextColor(mTextColor);
        txt_title.setTextSize(mTitleSize);
        txt_right.setTextSize(mTextSize);
    }
    public void setTitle(String title){
        if(!TextUtils.isEmpty(title)){
            txt_title.setText(title);
        }
    }
    public void setLeftListener(OnClickListener onClickListener){
        img_left.setOnClickListener(onClickListener);
    }
    public void setRightListener(OnClickListener onClickListener){
        img_right.setOnClickListener(onClickListener);
    }
    public void setRightTextListener(OnClickListener onClickListener){
        txt_right.setOnClickListener(onClickListener);
    }
    public void setRightText(boolean isshow,String text){
        if(isshow){
            txt_right.setVisibility(VISIBLE);
            img_right.setVisibility(GONE);
            if(!TextUtils.isEmpty(text)){
                txt_right.setText(text);
            }
        }
    }
}

4.xml中引用自定义ActionBarView

自定义的属性xml里都能设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<com.actionbarview.ActionBarView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/action_barview"
    app:background_color="@color/colorAccent"
    app:txt_color="@android:color/white"
    app:title_size="20"
    app:txt_size="14"
    tools:context="com.actionbarview.Demo1Activity">
</com.actionbarview.ActionBarView>

5.项目中的调用

1.左边icon，中间标题，右边icon

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
public class Demo1Activity extends AppCompatActivity {
    private ActionBarView action_barview;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_demo1);
        initView();
    }
    private void initView() {
        action_barview = (ActionBarView) findViewById(R.id.action_barview);
        action_barview.setTitle("demo1 标题");
        action_barview.setLeftListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                finish();
            }
        });
        action_barview.setRightListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(Demo1Activity.this, "进入到新的界面", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

2.左边icon，中间标题，右边文字

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
public class Demo2Activity extends AppCompatActivity {
    private ActionBarView action_barview;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_demo2);
        initView();
    }
    private void initView() {
        action_barview = (ActionBarView) findViewById(R.id.action_barview);
        action_barview.setTitle("demo2标题");
        action_barview.setLeftListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                finish();
            }
        });
        action_barview.setRightText(true,"消息");
        action_barview.setRightTextListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(Demo2Activity.this, "进入消息界面", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

这是我根据我实际项目中的去自定义的ActionBar，你也可以根据自己的实际项目去更改符合你项目的。

最后附上GitHub demo地址

坚持原创技术分享，您的支持将鼓励我继续创作！
Fork me on GitHub