微信扫一扫

028-83195727 , 15928970361
business@forhy.com

Android之ToolBar项目封装,踩坑过河

2016-06-23

一、简介

继承关系:

java.lang.Object
   ↳    android.view.View
       ↳    android.view.ViewGroup
           ↳    android.widget.Toolbar

其实toolbar就是一个封装好的ViewGroup
其子View如下:

private ActionMenuView mMenuView;
    private TextView mTitleTextView;
    private TextView mSubtitleTextView;
    private ImageButton mNavButtonView;
    private ImageView mLogoView;

二、项目封装

1.配置theme,为了适配5.0之后安卓的设计,做起statusbar的颜色适配

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimaryDark">@color/main_dark</item>
        <item name="colorPrimary">@color/main</item>
        <item name="colorAccent">@color/strong</item>
        <item name="android:textColorPrimary">@android:color/white</item>
        <item name="android:actionBarSize">@dimen/nav_bar_height</item>
    </style>

关于各个字段的描述看谷歌官方图,如下:

或者看谷歌文档:Material Theme
由于我们项目里设定了toobar的高度,这里指定了actionBarSize,然后通过设置toolbar高度为这个值;

2.由于项目中toolbar归于fragment管理,这里通过各个fragment的xml添加<include layout="@layout/toolbar_layout"/>toolbar_layout.xml如下:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="1dp"
    app:titleTextAppearance="@style/Toolbar.TitleText">
    <TextView
        android:id="@+id/nav_left_text"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:drawableLeft="@drawable/nav_back_light"
        android:drawableStart="@drawable/nav_back_light"
        android:layout_gravity = "start"
        android:gravity="center"
        android:minWidth="50dp"
        android:text="返回"
        android:textColor="@android:color/white"
        android:textSize="@dimen/font_title"
        android:visibility="gone"/>
    <TextView
        android:id="@+id/center_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity = "center"
        android:textColor="@android:color/white"
        android:textSize="@dimen/font_large"
        tools:text="标题" />
    <TextView
        android:id="@+id/nav_right_text_button"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity = "end"
        android:gravity="center"
        android:minWidth="50dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:textColor="@color/color_999"
        android:textSize="@dimen/font_normal"
        android:visibility="gone" />
</android.support.v7.widget.Toolbar>

toolbar上的东西被我分成五种:

1.navigationicon:通过.setNavigationIcon去处理

3.title与subtitle:通过.setTitle与setSubtitle去处理

4.自定义部分:这里也分成左中右三个部分,可以看上面布局文件,通过标签android:layout_gravity 来指定位置,这里有坑,自定义部分布局最左边有间隙,如果要去掉,可以设置:contentInset 这个标签去除

5.menu:menu的显示方式可以自行设置

这样来看,基本所有的需求都能满足了;

3.fragment中抽象封装:

这里要看各个项目需求,由于我们公司项目中对最右边图标灵活度要求并不高,我一般使用menu就可以解决了,故在baseFragment中做了如下封装:

首先注入除最右边图标的控件:

 @BindView(R.id.toolbar)
    protected Toolbar mToolBar;
    @BindView(R.id.center_title)
    TextView mCenterTitle;
    @BindView(R.id.nav_left_text)
    TextView mNavLeftText;

然后在初始化view时候传入必要控件给其子fragment使用:

这里的initview是我封装好的在fragment的OncreateView时候调用的,详细封装请看:浅谈Activity,Fragment模块化封装

@Override
    protected void initView(View view, Bundle savedInstanceState) {
        mUnbinder = ButterKnife.bind(this, view);
        initToolBar(mToolBar, mCenterTitle, mNavLeftText);
    }

初始化toobar

这里的popFragment也是我封装好的,从任务栈中推出fragment

protected void initToolBar(Toolbar toolbar, TextView centerTitle, TextView navLeftText){
        ((AppCompatActivity)getActivity()).setSupportActionBar(toolbar);
        ((AppCompatActivity)getActivity()).getSupportActionBar().setDisplayShowTitleEnabled(false);
        toolbar.setNavigationIcon(R.drawable.nav_back_light);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                popFragment();
            }
        });
    }

这里有个坑:

((AppCompatActivity)getActivity()).getSupportActionBar().setDisplayShowTitleEnabled(false);

必须设置这个,不然默认的title一直在。。。

还剩最后一个东西没有定制:menu

这个很简单,不过也要注意下,必须在fragment中设置:

setHasOptionsMenu(true);

关于源码,可以去看下,比较简单,然后处理方式很简单了:

@Override
    public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
        inflater.inflate(R.menu.search, menu);
        super.onCreateOptionsMenu(menu, inflater);
    }

这里也有个坑:如果你没有设置:

((AppCompatActivity)getActivity()).setSupportActionBar(toolbar);

那么onCreateOptionsMenu 并不会被回调

最后做下menu的监听即可:

toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()){
                    }
                return true;
            }
        });

如有不足之处还请多多指正!