ToolBar 使用姿势

原创 2017年08月19日 23:08:34

首发于个人技术博客

简单使用

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

  • 使用前的准备
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布局直接使用
<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 代码中使用
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 创建和点击
① 在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 吧
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即可。
  • 布局文件
<?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

 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

直接在布局文件中设置
<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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

toolbar的使用姿势

toolbar的使用姿势 Toolbar作为替代ActionBar的控件,Toolbar没有ActionBar所让人诟病的使用不方便 初步使用Toolbar的使用非常简单。只要在我的布局文件中把T...
  • u010846177
  • u010846177
  • 2017年01月12日 00:10
  • 148

关于Toolbar和FragmentActivity的问题

今天在工作中遇到用Fragment搭Tab框架时,FragmentActivity无法使用Toolbar的问题。查了许多资料,其实AppComponent继承自FragmentActivity,所以A...
  • qq_23589445
  • qq_23589445
  • 2015年10月22日 23:16
  • 2038

分分钟教你学会 ToolBar 的使用

1.和平常一样,新建一个Moudle 在xml布局文件中使用 Toolbar 控件
  • itguangit
  • itguangit
  • 2016年07月27日 09:19
  • 7465

Toolbar NavigationIcon正确的使用姿势

最近一直子在忙着开发公司的一款管理软件,用到了当下比较好用的NavigationView搭配DrawerLayout与Toolbar实现了比较好效果的抽屉式效果,也比较的实用简便,但是在实用的过程中还...
  • u011125199
  • u011125199
  • 2016年10月28日 23:24
  • 3137

Android ToolBar 使用完全解析

ToolBar简介ToolBar是Android 5.0推出的一个新的导航控件用于取代之前的ActionBar,由于其高度的可定制性、灵活性、具有Material Design风格等优点,越来越多的应...
  • a553181867
  • a553181867
  • 2016年05月07日 11:12
  • 18283

使用Toolbar遇到的问题

我们在开发中,对Toolbar已经非常熟悉了,这个东西已经取代了ActionBar了,我们在以往的开发中使用Toolbar的时候,否会遇到一个错误,本人老是犯这个错误,所以写个笔记,记录一下,下面是报...
  • liwei123liwei123
  • liwei123liwei123
  • 2016年08月31日 14:58
  • 622

eclipse下使用toolbar

使用 support-v7 的几个步骤: 导入 appcompat_v7 项目(android-sdk\extras\android\support\v7\appcompat)修改 appcom...
  • CSDN_LQR
  • CSDN_LQR
  • 2016年03月13日 09:47
  • 1832

在Fragment中如何使用Toolbar

这个Toolbar实在折磨了我好几天。。。知道看到下面这个提醒然后出去吹了吹风,终于弄出来了....其实跟提醒无关。我卡在这句上了.... toolbar.inflateMenu(R.m...
  • tiramisu_ljh
  • tiramisu_ljh
  • 2016年01月08日 15:21
  • 6301

android之Toolbar使用详解

Toolbar简介Toolbar是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 ,Google 非常推荐大家使用 Toolbar 来作为Android客户...
  • listeners_Gao
  • listeners_Gao
  • 2016年10月04日 23:09
  • 4854

关于Toolbar的折腾(结合Fragment使用)

Toolbar 是谷歌推出在 android 5.0 版本以后取代 ActionBar 的一个东西 先说我折腾的环境: 我用的是android Studio 2.0 如果你的app 是在acti...
  • u013984533
  • u013984533
  • 2016年06月06日 17:19
  • 8884
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ToolBar 使用姿势
举报原因:
原因补充:

(最多只允许输入30个字)