引言
原生的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,這比較繁瑣、也沒什么意義,所以下章我們就著手解決這個問題。
微信公眾號
來都來了,就給個關注吧,時不時會悄悄的推送一些小技巧的文章~~