Toolbar 设置标题居中的另外一种方法

6,125 阅读2分钟

先来了解常规的Toolbar设置标题居中的方法,一般是在布局文件套多一个Textview来解决:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_top"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="@color/action_bar_bkgnd"
    app:theme="@style/ToolBarTheme" >


     <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Toolbar Title"
        android:layout_gravity="center"
        android:id="@+id/toolbar_title" />


    </android.support.v7.widget.Toolbar>
    

这种实现方法改变了原来通过activity.setTitle('标题')就可以轻松设置的途径,则需要另外修改设置标题的方法来实现。今天来研究一下如何在不修改原来的Toolbar定义的调用方法来实现标题居中。

通过阅读源码发现,其实Toolbar是通过添个子View来布局的,在字段里面就定义了很明显了:

public class Toolbar extends ViewGroup {
    private static final String TAG = "Toolbar";
    private ActionMenuView mMenuView;
    private TextView mTitleTextView;
    private TextView mSubtitleTextView;
    private ImageButton mNavButtonView;
    private ImageView mLogoView;
    private Drawable mCollapseIcon;
    // ... 省略其他代码
}

这一看,咱们思路很清晰了,接下就是拿到标题的View来改变布局参数就行,在activity.setSupportActionBar() 之后我们进行以下处理:

 protected void onCreate(@Nullable Bundle savedInstanceState) {
        // ...省略其他代码
        setSupportActionBar(mToolbar);

        // 设置标题居中
        int childCount = mToolbar.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View view = mToolbar.getChildAt(i);
            // 拿到导航按钮(也叫返回按钮)
            if (view instanceof ImageButton) {
                //  布局发生改变的时候拿到导航的宽度
                //  因为标题设置居中的时候会偏向右边
                view.addOnLayoutChangeListener((v, left, top, right, bottom, oldLeft, oldTop, oldRight, oldBottom) -> {
                    if (mTitleView != null) {
                        //  把标题的右边也进行一个padding 导航的宽度,让标题显得在整个屏幕中间
                        mTitleView.setPadding(0, 0, v.getWidth(), 0);
                    }
                });
            }
            
            //  找到标题的View
            if (view instanceof TextView) {
                mTitleView = (TextView) view;
                // 设置居中
                mTitleView.setGravity(Gravity.CENTER);
                mTitleView.getLayoutParams().width = ViewGroup.LayoutParams.MATCH_PARENT;
                break;
            }
        }

    }

最后看看我们的布局边界:

布局边界

关掉布局边界:

发现了吧,是个横向布局,如果标题没有加多一个right padding 的话整个标题会偏向右边。

OK,到这里结束了。