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

栏目: IOS · Android · 发布时间: 5年前

内容简介:原生的Toolbar的title是居右显示的,而大多数情况下UI设计的图title是居中。另外默认的返回按钮间隙是16dp,而设计图上面是按照iOS来设计,所以返回按钮是8dp,本篇就此进行适配。先看看原来的样式,我这里为了演示,特地换了一个返回箭头。

引言

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

正文

NavigationIcon间隙

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

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

修改BaseToolbarStyle

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

<!--标题栏的样式-->
    <style name="BaseToolbarStyle" parent="Widget.AppCompat.Toolbar">
        <!--内容距离开始 边距-->
        <item name="contentInsetStart">8dp</item>
        <!--内容距离 导航按钮 边距-->
        <item name="contentInsetStartWithNavigation">8dp</item>
        <!--使自定义view可以贴左右的边,多数版本的系统不要下面两句也可以,但少量版本必须加下面的两句-->
        <item name="android:paddingLeft">8dp</item>
        <!--右内边距-->
        <item name="android:paddingRight">0dp</item>
        <!--最小高度-->
        <item name="android:minHeight">?actionBarSize</item> 
        <!--高度-->
        <item name="android:layout_height">?actionBarSize</item>
        <!--id-->
        <item name="android:id">@id/base_toolbar</item>
        <!--宽度-->
        <item name="android:layout_width">match_parent</item>
        <item name="actionMenuTextColor">#000</item>
    </style>

新增ToolbarNavigationButtonStyle

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

<!--标题栏返回按钮样式-->
<style name="ToolbarNavigationButtonStyle" parent="Widget.AppCompat.Toolbar.Button.Navigation">
	<item name="android:minWidth">16dp</item>
</style>

AppTheme.ToolbarHeight

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

<style name="AppTheme.ToolbarHeight">
        <!--修改了标题栏默认样式的样式
        修改了返回按钮的边距
        -->
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="toolbarNavigationButtonStyle">@style/ToolbarNavigationButtonStyle</item>
        <!--NavigationIcon的宽度-->
        <item name="toolbarStyle">@style/BaseToolbarStyle</item>
    </style>

修改AndroidManifest

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

<activity
            android:name=".module.example.DialogExampleActivity"
            android:label="@string/title_activity_dialog_example"
            android:theme="@style/AppTheme.ToolbarHeight" />

看看改进后的效果:

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

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之前调用,否则将不起作用。

看看效果:

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

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

新增Title和BackText

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

<android.support.design.widget.AppBarLayout style="@style/BaseAppBarLayoutStyle">
        <android.support.v7.widget.Toolbar
            style="@style/BaseToolbarStyle"
            app:popupTheme="@style/AppTheme.PopupOverlay">

            <TextView
                style="@style/ToolBarNavTextStyle"
                android:text="返回" />

            <TextView
                style="@style/ToolBarTitleStyle"
                android:text="Toast示例" />
        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

另外两个样式:

<style name="ToolBarNavTextStyle">
        <!--标题栏返回文字样式-->
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">match_parent</item>
        <!--返回按钮和返回文字之间的间隔-->
        <item name="android:layout_marginLeft">2dp</item>
        <item name="android:gravity">center</item>
        <item name="android:layout_alignParentBottom">true</item>
        <item name="android:textColor">@color/ToolbarNavTextColor</item>
        <item name="android:textSize">@dimen/ToolbarNavTextSize</item>
        <item name="android:id">@id/toolbar_nav_text</item>
    </style>
 <style name="ToolBarTitleStyle">
        <!--标题栏 标题样式-->
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:layout_gravity">center</item>
        <item name="android:background">@null</item>
        <item name="android:textSize">18sp</item>
        <item name="android:layout_centerInParent">true</item>
        <item name="android:id">@id/tv_toolbar_title</item>
    </style>

值得注意的是,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();
                    }
                });
            }
        }
    }

来看看效果吧:

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

结束

总结

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

源码-tag-v0.08

问题

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

软广

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

来来,关注一下吧!

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

离散数学及其应用(原书第7版)

离散数学及其应用(原书第7版)

Kenneth H. Rosen / 徐六通、杨娟、吴斌 / 机械工业出版社 / 2015-1-1 / 129

《计算机科学丛书:离散数学及其应用(原书第7版)》是介绍离散数学理论和方法的经典教材,已经成为采用率最高的离散数学教材,被美国众多名校用作教材,获得了极大的成功。中文版也已被国内大学广泛采用为教材。作者参考使用教师和学生的反馈,并结合自身对教育的洞察,对第7版做了大量的改进,使其成为更有效的教学工具。《计算机科学丛书:离散数学及其应用(原书第7版)》可作为1至2个学期的离散数学课入门教材,适用于数......一起来看看 《离散数学及其应用(原书第7版)》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

URL 编码/解码
URL 编码/解码

URL 编码/解码