Toolbar 使用姿势

image.png

听说菜鸟都是这么过来的,没事多写总结。希望能记录自己的实践过程,同时能帮助到又需要的朋友。

简单使用

直接使用ToolBar 布局,在ToolBar布局里添加子布局

  • 使用前的准备

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    1. 添加依赖
    compile 'com.android.support:appcompat-v7:25.3.1'

    2. 隐藏原有的ActionBar,两步,有可能会出现 Theme.AppCompat 北京找不到,说明你的support库版本太低了,需要去SDK manager 去升级那个库。

    ① 在 res/values/styles.xml中
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    </style>

    ② 在 /res/values-v21/styles.xml中
    <resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:navigationBarColor">@android:color/white</item>
    </style>
    </resources>
  • ToolBar布局直接使用

1
2
3
4
5
6
7
8
9
10
11
12
13
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
/>

android:layout_height="?attr/actionBarSize" 设置高度
android:background="@color/colorPrimary" 设置背景色
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 设置顶部的淡色主题
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 设置弹出框的主题为淡色主题
  • Java 代码中使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    mToolbar = (Toolbar) findViewById(R.id.toolbar);

    mToolbar.setTitle("DemoToolbar");
    setSupportActionBar(mToolbar);
    //设置字的颜色
    mToolbar.setTitleTextColor(Color.WHITE);
    //显示NavigationIcon

    mToolbar.setOnMenuItemClickListener(this);

    //设置返回的图标
    mToolbar.setNavigationIcon(getResources().getDrawable(R.mipmap.slide));
    //设置监听
    mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
    finish();
    }
    });
  • menu 创建和点击

    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
    ① 在activity下重写 onCreateOptionsMenu 方法,获取到 menu 布局
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
    //写一个menu的资源文件.然后创建就行了.
    getMenuInflater().inflate(R.menu.menu,menu);
    return super.onCreateOptionsMenu(menu);
    }

    在res目录先新建一个menu目录,创建一个menu文件

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:id="@+id/action_edit"
    android:title="@string/action_edit"
    android:orderInCategory="80"
    android:icon="@mipmap/message"
    app:showAsAction="ifRoom" />

    <item android:id="@+id/action_share"
    android:title="@string/action_share"
    android:orderInCategory="90"
    android:icon="@mipmap/add"
    app:showAsAction="ifRoom" />

    <item android:id="@+id/action_settings"
    android:title="@string/action_settings"
    android:orderInCategory="10"
    app:showAsAction="never"/>
    </menu>

    //1、always:使菜单项一直显示在ToolBar上。
    //2、ifRoom:如果有足够的空间,这个值会使菜单项显示在ToolBar上。
    //3、never:使菜单项永远都不出现在ToolBar上,在…的子项中显示。
    //4、 xmlns:app="http://schemas.android.com/apk/res-auto" 记得导入

    ② menu 点击事件
    1、implement Toolbar.OnMenuItemClickListener
    2、设置监听 mToolbar.setOnMenuItemClickListener(this);
    3、实现接口 onMenuItemClick

    @Override
    public boolean onMenuItemClick(MenuItem item) {
    switch (item.getItemId()) {
    case R.id.menu1:
    Toast.makeText(this, "menu1", Toast.LENGTH_SHORT).show();
    break;
    case R.id.menu2:
    Toast.makeText(this, "menu2", Toast.LENGTH_SHORT).show();
    break;
    case R.id.menu3:
    Toast.makeText(this, "menu3", Toast.LENGTH_SHORT).show();
    break;
    default:
    break;
    }
    return false;
    }
  • 听说没图都不敢出来发文

image.png

ToolBar的封装

为什么要封装?
产品想要这种效果(等我拿起桌上的大刀,奈何他手里拿着手枪)。

实现的效果是左边一个图标,右边一个图标,中间显示文字或者搜索框。

  • 写一个自定义的Toolbar,就叫 CustomToolbar 吧

    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
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    public class CustomToolbar extends Toolbar {

    private LayoutInflater mInflater;
    private View mView;

    private TextView mLeftButtonText;
    private TextView mTitleText;
    private TextView mRightButtonText;
    private EditText mSearchView;


    public CustomToolbar(Context context) {
    this(context,null) ;
    }

    public CustomToolbar(Context context, @Nullable AttributeSet attrs) {
    this(context,attrs,0) ;
    }

    public CustomToolbar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    initView() ;

    if (attrs != null){
    final TintTypedArray tintTypedArray = TintTypedArray.obtainStyledAttributes(getContext(), attrs,
    R.styleable.CustomToolbar, defStyleAttr, 0);

    CharSequence leftText = tintTypedArray.getText(R.styleable.CustomToolbar_leftButtonText);
    if (leftText != null){
    setLeftButtonText(leftText) ;
    }

    final Drawable leftIcon = tintTypedArray.getDrawable(R.styleable.CustomToolbar_leftIcon);
    if (leftIcon != null) {
    //setNavigationIcon(navIcon);
    setLeftIcon(leftIcon);
    }

    final Drawable rightIcon = tintTypedArray.getDrawable(R.styleable.CustomToolbar_rightButtonIcon);
    if (rightIcon != null) {
    //setNavigationIcon(navIcon);
    setRightButtonIcon(rightIcon);
    }


    boolean isShowSearchView = tintTypedArray.getBoolean(R.styleable.CustomToolbar_isShowSearchView,false);

    if(isShowSearchView){

    showSearchView();
    hideTitleView();

    }

    CharSequence rightButtonText = tintTypedArray.getText(R.styleable.CustomToolbar_rightButtonText);
    if(rightButtonText !=null){
    setRightButtonText(rightButtonText);
    }

    tintTypedArray.recycle();
    }



    }

    public void setLeftIcon(Drawable leftIcon) {
    // 默认显示返回箭头,文字先不需要
    mLeftButtonText.setVisibility(VISIBLE);
    mLeftButtonText.setCompoundDrawablesWithIntrinsicBounds(leftIcon, null, null, null);
    }

    public void setLeftButtonText(CharSequence leftButtonText) {
    mLeftButtonText.setVisibility(VISIBLE);
    mLeftButtonText.setText(leftButtonText);
    }

    public void setRightTextOnClickListener(OnClickListener li){

    mRightButtonText.setOnClickListener(li);
    }
    public void setLeftTextOnClickListener(OnClickListener li){

    mLeftButtonText.setOnClickListener(li);
    }

    public void setRightButtonText(CharSequence text){
    mRightButtonText.setVisibility(VISIBLE);
    mRightButtonText.setText(text);
    }

    public void setRightButtonText(int id){
    setRightButtonText(getResources().getString(id));
    }


    public TextView getRightButtonText(){

    return this.mRightButtonText;
    }

    public TextView getLeftButton(){

    return this.mLeftButtonText;
    }

    @Override
    public void setTitle(int resId) {

    setTitle(getContext().getText(resId));
    }

    @Override
    public void setTitle(CharSequence title) {

    initView();
    if(mTitleText !=null) {
    showTitleView();
    mTitleText.setText(title);
    }

    }

    public void showTitleView(){
    if(mTitleText !=null)
    mTitleText.setVisibility(VISIBLE);
    }

    public void hideTitleView() {
    if (mTitleText != null)
    mTitleText.setVisibility(GONE);
    }

    public void showSearchView() {
    if(mSearchView !=null)
    mSearchView.setVisibility(VISIBLE);
    }

    public void hideSearchView(){
    if(mSearchView !=null)
    mSearchView.setVisibility(GONE);
    }

    public void setRightButtonIcon(Drawable rightIcon) {
    if(mRightButtonText !=null){

    mRightButtonText.setVisibility(VISIBLE);
    mRightButtonText.setCompoundDrawablesWithIntrinsicBounds(null, null, rightIcon, null);
    }
    }

    public void setRightButtonIcon(int icon){

    setRightButtonIcon(getResources().getDrawable(icon));
    }

    private void initView() {
    if(mView == null) {

    mInflater = LayoutInflater.from(getContext());

    mView = mInflater.inflate(R.layout.custom_toolbar, null);

    mSearchView = (EditText) mView.findViewById(R.id.toolbar_searchview);
    mLeftButtonText = (TextView) mView.findViewById(R.id.lt_main_title_left);
    mTitleText = (TextView) mView.findViewById(R.id.lt_main_title);
    mRightButtonText = (TextView) mView.findViewById(R.id.lt_main_title_right);

    LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT, Gravity.CENTER_HORIZONTAL);

    addView(mView, lp);
    }
    }
    }

    代码很简单,就是自定义一个继承自 Toolbar 的自定义View
    创建一个布局文件,然后读取布局文件中的内容
    设置对应的方法,用于在Java代码使用中添加内容和隐藏内容
    布局中利用 TextView 去显示图片,利用到了 mRightButtonText.setCompoundDrawablesWithIntrinsicBounds(null, null, rightIcon, null); 这是对应的TextView中设置的drawableRight,如果不想显示图片,则参数全部设置为null即可。
  • 布局文件

    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
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minHeight="?attr/actionBarSize"
    >
    <EditText
    android:id="@+id/toolbar_searchview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_centerVertical="true"
    android:gravity="center"
    android:drawableLeft="@mipmap/icon_search"
    style="@style/search_view"
    android:hint="请输入搜索内容"
    android:visibility="gone"
    />
    <TextView
    android:id="@+id/lt_main_title_left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:singleLine="true"
    android:layout_centerInParent="true"
    android:layout_alignParentLeft="true"
    android:layout_marginLeft="20dp"
    android:gravity="center_vertical"
    android:textColor="@color/white"
    android:textSize="16dp"
    />
    <TextView
    android:id="@+id/lt_main_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:layout_centerInParent="true"
    android:singleLine="true"
    android:ellipsize="end"
    android:textColor="@android:color/white"
    android:textSize="20dp"
    />
    <TextView
    android:id="@+id/lt_main_title_right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_alignParentRight="true"
    android:layout_marginRight="20dp"
    android:textSize="16dp"
    />
    </RelativeLayout>
  • 显示左边文字,右边图片,中间居中的文字

image.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
CustomToolbar customToolbar = (CustomToolbar) findViewById(R.id.custom_toolbar);
customToolbar.setLeftButtonText("返回");
customToolbar.setTitle("我是居中标题");
customToolbar.setRightButtonIcon(R.drawable.add);
customToolbar.setRightTextOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent(RxJavaTestActivity.this, MActivity.class));
Toast.makeText(RxJavaTestActivity.this, "hello", Toast.LENGTH_SHORT).show();
}
});
customToolbar.setLeftTextOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
  • 显示搜索框

image.png

1
2
3
4
5
6
7
8
9
直接在布局文件中设置
<com.xxxx.demo.CustomToolbar
android:id="@+id/m_custom_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorAccent"
app:isShowSearchView="true"
>
</com.xxxx.demo.CustomToolbar>
小额支持我写出更好的文章~