Android 之路 (8) – Toolbar – NavigationIcon间隙、Title居中、BackText适配

引言

原生的Toolbar的title是居右显示的,而大多数情况下UI设计的图title是居中。另外默认的返回按钮间隙是16dp,而设计图上面是按照iOS来设计,所以返回按钮是8dp,本篇就此进行适配。

正文

NavigationIcon间隙

先看看原来的样式,我这里为了演示,特地换了一个返回箭头。

修改BaseToolbarStyle

然后我们在原本定义号的BaseToolbarStyle中在增加一些样式配置:


    

新增ToolbarNavigationButtonStyle

再新增一个 ToolbarNavigationButtonStyle 作为返回按钮的样式:


AppTheme.ToolbarHeight

新建一个 AppTheme.ToolbarHeight 作为Activity的样式:

修改AndroidManifest

最后将 AndroidManifest 中Activity的 them 替换成 AppTheme.ToolbarHeight

看看改进后的效果:

Title居中、BackText

清除默认Title

Toolbar在不设置Title的情况下默认是以 label 作为Title 的,所以第一步需要将Title设置为””,刚好前面我们封装了 initToolbar这个方法,我们在里面加上就行。

/**
 * 初始化toolbar
 */
private void initToolbar() {
    Toolbar mToolbar = findViewById(R.id.base_toolbar);
    if (null != mToolbar) {
        // 清除标题 
        mToolbar.setTitle("");
        setSupportActionBar(mToolbar);
        mToolbar.setBackgroundColor(getToolbarBackground());
        //设置返回按钮
        mToolbar.setNavigationIcon(getNavigationIcon());
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onNavigationOnClickListener();
            }
        });
        isInitToolbar = true;
    }
}

需要注意的是setTitle必需要在setSupportActionBar之前调用,否则将不起作用。

看看效果:

可以看到,原本的默认标题已经没有了。

新增Title和BackText

其实这一步比较简单,现在的Toolbar是继承至ViewGroup,这就意味着Toolbar能放子View,所以我们像以下这样写就行,为了后面方便,我已经将样式抽取出来了。


        

            

            
        

    

另外两个样式:


 

值得注意的是,BackText也是需要做点击事件的,所以我给他加了个id,然后再initToolbar中进行事件监听:

/**
     * 初始化toolbar
     */
    private void initToolbar() {
       ...
        if (null != mToolbar) {
          ...
            //返回文字按钮
            View navText = findViewById(R.id.toolbar_nav_text);
            if (null != navText) {
                navText.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        onNavigationOnClickListener();
                    }
                });
            }
        }
    }

来看看效果吧:

结束

总结

本章的东西很少,基本上都是从style中进行配置,涉及的代码量并不是很多,起码初步达到了我们想要的效果。

源码-tag-v0.08

问题

这种在xml中修改style的情况来适配会有一点问题,那就是每次我们新建Activity的时候都需要手动的更改 them、style,这比较繁琐、也没什么意义,所以下章我们就着手解决这个问题。

软广

一个痴心妄想想成为一个全屏(栈)工程师的程序猿。

来来,关注一下吧!