内容简介:原生的Toolbar的title是居右显示的,而大多数情况下UI设计的图title是居中。另外默认的返回按钮间隙是16dp,而设计图上面是按照iOS来设计,所以返回按钮是8dp,本篇就此进行适配。先看看原来的样式,我这里为了演示,特地换了一个返回箭头。
引言
原生的Toolbar的title是居右显示的,而大多数情况下UI设计的图title是居中。另外默认的返回按钮间隙是16dp,而设计图上面是按照iOS来设计,所以返回按钮是8dp,本篇就此进行适配。
正文
NavigationIcon间隙
先看看原来的样式,我这里为了演示,特地换了一个返回箭头。
修改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" />
看看改进后的效果:
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,所以我们像以下这样写就行,为了后面方便,我已经将样式抽取出来了。
<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(); } }); } } }
来看看效果吧:
结束
总结
本章的东西很少,基本上都是从style中进行配置,涉及的代码量并不是很多,起码初步达到了我们想要的效果。
问题
这种在xml中修改style的情况来适配会有一点问题,那就是每次我们新建Activity的时候都需要手动的更改 them、style,这比较繁琐、也没什么意义,所以下章我们就着手解决这个问题。
软广
一个痴心妄想想成为一个全屏(栈)工程师的程序猿。
来来,关注一下吧!
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。