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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

android 沉浸式之改变小米状态栏颜色

这个是基于SystemBarTintManager更改的 增加一个方法:用于更改MIUIV6系统上的状态栏字体颜色 ,目前我仅仅只发现MIUIV6上可以更改,在android5.0上以及其它4.4以...

toolbar的使用姿势

toolbar的使用姿势 Toolbar作为替代ActionBar的控件,Toolbar没有ActionBar所让人诟病的使用不方便 初步使用Toolbar的使用非常简单。只要在我的布局文件中把T...

Android炫酷的Toolbar+Bottom+Fab悬浮按钮显示、隐藏、渐变的各种实现姿势

前言  由于手机屏幕大小的限制,各种控件需要根据需求进行显示,隐藏,移动等,以增加视觉效果,用户体验。就拿目前市场上常见的APP如知乎、QQ、淘宝、美团等来说,在他们的APP里面随处可见一些比较优美的...

Log.isLoggable之一正确的使用姿势

  • 2017年06月05日 14:58
  • 58KB
  • 下载

java 同步锁(synchronized)的正确使用姿势

关于线程安全,线程锁的使用

toolbar 和SwipeBackLayout使用

  • 2016年03月15日 17:04
  • 5.71MB
  • 下载

Android应用性能优化系列视图篇——LayoutInflater使用的正确姿势

LayoutInflater是Android开发者接触最多的一个类之一,主要作用是用来解析layout资源文件,将其实例化成一个View对象。LayoutInflater的API非常非常简单,对开发者...

OpenEIM 使用云计算的正确姿势是什么?

原文:OpenEIM 使用云计算的正确姿势是什么? 【OpenEIM 云计算的服务形式】 其实这是作为普通用户,或者从业人员更关心的话题:使用云计算的正确姿势是什么? 云计算提供的服务目...
  • mynote
  • mynote
  • 2014年07月10日 11:25
  • 406
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ToolBar 使用姿势
举报原因:
原因补充:

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