轉載請注明出處,感謝您的支持。同時,歡迎加入移動開發學習交流qq群 : 450302004,互相學習。
文章來源:【chenyk的簡書】http://www.lxweimin.com/p/527dbe07fd8f
簡單介紹
Toolbar 是 Material Design 風格中的一個導航控件 ,Google 也大力推薦大家使用 Toolbar,以此來取代先前推出的 Actionbar 。Toolbar不僅包含了ActionBar最近添加的大多數特性,同時添加推出了兼容庫,使得在低版本設備上也可以使用Toolbar。與 Actionbar 相比,Toolbar 明顯要靈活的多。它不像 Actionbar 一樣,一定要固定在Activity的頂部,而是可以放到界面的任意位置。除此之外,在設計 Toolbar 的時候,Google也留給了開發者很多可定制修改的屬性。
Translucent System Bar 其叫法很有歧義,叫其沉浸式狀態欄也好,半透明狀態欄也罷。怎么開心怎么叫,在這里暫且稱之為半透明狀態欄,畢竟目的是讓其改變顏色,改變那千年不變的黑色背景。
在Android 4.4之后便引入了半透明狀態欄的概念,此時狀態欄最頂層有一層陰影,也就是平時我們所說的漸變效果。而在5.0以上谷歌又做了調整,不僅支持設置漸變效果,還是支持設置完全純色的效果。
Toolbar
根據google提供的api,這里主要說下toolbar常用的一些可定制的屬性和使用方法,其效果圖如下圖所示:
兼容包支持
Toolbar的使用需要v7包的支持,需在build.gradle文件中添加如下代碼即可使用,代碼如下:
compile 'com.android.support:appcompat-v7:23.4.0'
toolbar控件添加
新建資源布局文件,添加toolbar控件。按照以往習慣,大多數app的頁面標題內容會設置在標題欄的中間位置,然而toolbar控件并沒有提供相關Api設置居中的標題,這里可以采用以下的方式添加自定義標題。
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize">
<TextView
android:id="@+id/toolbar_title_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="自定義"
android:textColor="#ffffff"
android:textSize="18sp" />
</android.support.v7.widget.Toolbar>
注:筆者在toolbar的中間放置了一個textview,但textview的位置不是一定居中的,這取決于toolbar給予textview的位置大小。
屬性定制
1 . navigation button(導航欄圖標)
//設置圖標資源
toolbar.setNavigationIcon(iconRes);
//點擊事件監聽回調
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//do something
}
});
2 . logo icon(app logo)
toolbar.setLogo(resId);//設置圖標資源
3 . title and subtitle(主標題和子標題)
toolbar.setTitle(title);//設置主標題內容
toolbar.setTitle(subtitle);//設置子標題內容
toolbar.setTitleTextColor(color);//設置主標題字體顏色
toolbar.setSubtitleTextColor(color);//設置子標題字體顏色
4 . action menu(動作菜單)
//設置menu資源
toolbar.inflateMenu(R.menu.menu_main);
//右邊菜單item監聽回調
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_test:
ToastTool.showNativeShortToast(ToolbarActivity.this, "測試");
return true;
case R.id.menu_search:
ToastTool.showNativeShortToast(ToolbarActivity.this, "搜索");
return true;
case R.id.menu_settings:
ToastTool.showNativeShortToast(ToolbarActivity.this, "設置");
return true;
case R.id.menu_check_update:
ToastTool.showNativeShortToast(ToolbarActivity.this, "檢查更新");
return true;
case R.id.menu_about:
ToastTool.showNativeShortToast(ToolbarActivity.this, "關于");
return true;
default:
return super.onOptionsItemSelected(item);
}
}
});
菜單資源文件menu_main.xml,定義了幾個動作,其內容如下:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/menu_test"
android:title="測試"
app:showAsAction="ifRoom" />
<item
android:id="@+id/menu_search"
android:icon="@mipmap/tool_search"
android:title="搜索"
app:showAsAction="always" />
<item
android:id="@+id/menu_settings"
android:title="設置"
app:showAsAction="never" />
<item
android:id="@+id/menu_check_update"
android:title="檢查更新"
app:showAsAction="never" />
<item
android:id="@+id/menu_about"
android:title="關于"
app:showAsAction="never" />
</menu>
注:action menu共兩部分,一部分為操作欄,另一部分為溢出菜單。這里定義了五個item選項,其中app:showAsAction屬性是用來指定這個item是放置在操作欄上,還是溢出菜單中。它的值主要有以下三種:
a. 當值為“ifRoom”時,如果操作欄有空間放置,則item放置在操作欄上,否則放置到溢出菜單中。
b. 當值為“always”時,item將總是放置在操作欄上。
c. 當值為“never”時,item將總是放置在溢出菜單中。
5 . 其他樣式修改
a.背景顏色
toolbar.setBackgroundColor(bgColor);//修改toolbar背景顏色
b.字體顏色和字體大小
通過style.xml資源文件自定義相關樣式,即可更改toolbar控件相關屬性,代碼如下:
<!-- toolbar主題樣式 -->
<style name="ToolbarTheme" parent="@style/ThemeOverlay.AppCompat.ActionBar">
<!-- menu中showAsAction設置為ifRoom和always的item項(即操作欄上)字體顏色 -->
<item name="actionMenuTextColor">#00ad56</item>
<!-- menu中showAsAction設置為ifRoom和always的item項(即操作欄上)字體大小 -->
<item name="actionMenuTextAppearance">@style/ToolbarMenuTextSize</item>
<!-- 設置標題、menu中所有item字體顏色 -->
<item name="android:textColorPrimary">@android:color/white</item>
<!-- 設置子標題字體顏色 -->
<!--<item name="android:textColorSecondary">#ffad56</item>-->
</style>
c.溢出菜單背景顏色、字體顏色
通過style.xml資源文件自定義相關樣式,即可更改toolbar控件相關屬性,代碼如下:
<!-- toolbar菜單中showAsAction為ifRoom的item項的文字尺寸 -->
<style name="ToolbarMenuTextSize" parent="@style/TextAppearance.AppCompat.Menu">
<item name="android:textSize">16sp</item>
</style>
<!-- toolbar標題字體樣式 -->
<style name="ToolbarTitleStyle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">16sp</item>
</style>
<!-- toolbar彈出菜單樣式 -->
<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat">
<item name="android:colorBackground">#ffffaa</item>
<item name="android:textColor">#fa4081</item>
<item name="android:textSize">20sp</item>
</style>
注:其使用方式為,在toolbar布局中添加如下代碼即可,不過需要注意的是,還需要再根布局中添加代碼xmlns:app="http://schemas.android.com/apk/res-auto"
以下代碼設置才會生效。
app:popupTheme="@style/ToolbarPopupTheme"
app:subtitleTextAppearance="@style/ToolbarTitleStyle"
app:theme="@style/ToolbarTheme"
app:titleTextAppearance="@style/ToolbarTitleStyle"
Translucent System Bar
不同版本具有的特點
關于半透明狀態欄,在不用的Android版本之間也有著不同的效果。其特點如下所示:
1 . Android 4.4以下不支持半透明狀態欄效果
2 . Android 4.4以上5.0以下(不包括5.0)可使狀態欄變色,效果為顏色漸變,可設置透明度
3 . Android5.0以上可使狀態欄變色,即可設置漸變效果,亦可讓其顯示純色效果,同時支持透明度設置
Android 4.4效果圖:
Android 5.0以上效果圖
下面看下動圖的效果,如下所示:
代碼實現
1 . 新建狀態欄管理類StatusBarManager,定義枚舉類型TintType,編寫帶四參數的構造方法,同時根據Andorid版本的不同對窗口進行配置
public enum TintType {
GRADIENT, PURECOLOR //漸變,純色 ps:純色效果僅適用于android 5.0以上
}
/**
* 構造函數
* @param activity
* @param tintType
* @param alpha
* @param statusBarColor
*/
private StatusBarManager(Activity activity, TintType tintType, int alpha, int statusBarColor) {
this.mActivity = activity;
this.mTintType = tintType;
this.mAlpha = alpha;
this.mStatusBarColor = CommTool.getResultColor(mActivity, statusBarColor);
windowConfig();
}
/**
* 窗口相關配置
*/
private void windowConfig() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
//透明狀態欄
if (TintType.PURECOLOR == mTintType) {
mActivity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
mActivity.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
mActivity.getWindow().setStatusBarColor(CommTool.calculateColorWithAlpha(mStatusBarColor, mAlpha));//設置狀態欄顏色
} else if (TintType.GRADIENT == mTintType) {
mActivity.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
mActivity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
addStatusBarView(mActivity, CommTool.calculateColorWithAlpha(mStatusBarColor, mAlpha));
}
//透明底部導航欄
// activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
} else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
mActivity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
addStatusBarView(mActivity, CommTool.calculateColorWithAlpha(mStatusBarColor, mAlpha));
}
}
注:4.4以上需要自己繪制一個與狀態欄同高的矩形條,并通過addview的方法添加至屏幕上,同時設置其背景顏色達到預期的效果。而5.0以上api中提供了setStatusBarColor(int color)的方法可直接設置狀態的顏色。
2 . 新建StatusBarView視圖類,主要生成一個與狀態欄同等大小的視圖并添加至頂部和顏色的設置,代碼如下:
/**
* 生成一個和狀態欄大小相同的矩形條
*
* @return 狀態欄矩形條
*/
private static StatusBarView createStatusBarView(Activity activity, int color) {
StatusBarView statusBarView = new StatusBarView(activity);
statusBarView.setLayoutParams(new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT, CommTool.getStatusBarHeight(activity)));
statusBarView.setBackgroundColor(color);
return statusBarView;
}
/**
* 添加狀態欄
*
* @param activity
* @param color
*/
public static void addStatusBarView(Activity activity, int color) {
ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();
if (decorView.getChildAt(0) instanceof StatusBarView) {
decorView.getChildAt(0).setBackgroundColor(color);
} else {
StatusBarView statusView = createStatusBarView(activity, color);
decorView.addView(statusView);
}
}
3 . 定義builder配置內部類,根據實際情況對狀態欄屬性進行自由組裝,代碼如下:
/**
* builder配置類
*/
public static class builder {
private static final int DEFAULT_ALPHA = 60; //默認透明度數值
private Activity activity;
private TintType tintType = TintType.PURECOLOR; //默認純色效果
private int alpha = DEFAULT_ALPHA;
private int statusBarColor;
/**
* 構造方法
*
* @param activity
*/
public builder(Activity activity) {
this.activity = activity;
}
/**
* 設置色彩類型
*
* @param tintType
* @return
*/
public builder setTintType(TintType tintType) {
this.tintType = tintType;
return this;
}
/**
* 設置透明度
*
* @param alpha
* @return
*/
public builder setAlpha(int alpha) {
if (alpha >= 0 & alpha <= 255)
this.alpha = alpha;
return this;
}
/**
* 設置狀態欄背景顏色
*
* @param StatusBarColor
* @return
*/
public builder setStatusBarColor(int StatusBarColor) {
this.statusBarColor = StatusBarColor;
return this;
}
/**
* 創建StatusBarManager對象并返回
*
* @return
*/
public StatusBarManager create() {
return new StatusBarManager(activity, tintType, alpha, statusBarColor);
}
}
最后通過鏈式調用的方式自由組裝配置,支持純色和漸變效果設置、支持設置透明度等,調用方式如下代碼所示:
new StatusBarManager.builder(this)
.setStatusBarColor(mStatusBarColor)//狀態欄顏色
.setTintType(mTintType)//色彩類型:純色、漸變
.setAlpha(mAlpha)//不透明度
.create();
注:最終效果展示時,會發現布局內容已浸入到狀態欄中,這是個需要注意的地方,我們只需在布局文件的根布局中添加android:fitsSystemWindows="true"
即可。當然如果把圖片當背景的話,可將其設置為false,這個視情況而定。
當然到這里,肯定會有人會說github上的開源庫SystemBarTint,這個庫也很不錯,在這里我也沒有使用到,也就不討論了的。關于toolbar和Translucent System Bar就介紹到這里,下面是將兩者進行配套使用,并進行了封裝,以便在以后的開發過程中快速調用。
封裝調用
1 . 新建base_activity_layout.xml資源布局文件,頁面由toolbar和正文內容兩部分組成,代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/base_ll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:popupTheme="@style/ToolbarPopupTheme"
app:subtitleTextAppearance="@style/ToolbarTitleStyle"
app:theme="@style/ToolbarTheme"
app:titleTextAppearance="@style/ToolbarTitleStyle">
<TextView
android:id="@+id/toolbar_title_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="自定義"
android:textColor="#ffffff"
android:textSize="18sp" />
</android.support.v7.widget.Toolbar>
<FrameLayout
android:id="@+id/base_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#ffffff" />
</LinearLayout>
2 . 新建基類BaseActivtiy,主要提供的功能有:
a . Navigation Button監聽回調,這里默認操作為返回并銷毀當前頁面。如需定義其他操作,則callbackOnClickNavigationAction(View v)方法即可
//左邊Navigation Button監聽回調
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
callbackOnClickNavigationAction(v);
}
});
/**
* Navigation Button點擊回調,默認回退銷毀頁面,其他操作子類可重寫
*
* @param view
*/
protected void callbackOnClickNavigationAction(View view) {
onBackPressed();
}
b . Action menu布局添加以及監聽回調,默認無menu選項
//右邊菜單item監聽回調
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
return callbackOnMenuAction(item);
}
});
/**
* menu點擊回調,默認無,子類可重寫
*
* @param item
* @return
*/
protected boolean callbackOnMenuAction(MenuItem item) {
return false;
}
/**
* 為toolbar設置menu項
*/
private void setInflateMenu() {
if (getMenuLayoutId() > 0)
toolbar.inflateMenu(getMenuLayoutId());
}
c . 各種set操作,如標題、子標題、自定義標題字體顏色設置、圖標設置、menu布局設置等
/**
* 為toolbar設置menu項
*/
private void setInflateMenu() {
if (getMenuLayoutId() > 0)
toolbar.inflateMenu(getMenuLayoutId());
}
/**
* 設置主標題
*
* @param object
*/
public void setMainTitle(Object object) {
toolbar.setTitle(CommTool.getResultString(this, object));
}
/**
* 設置子類標題
*
* @param object
*/
public void setSubTitle(Object object) {
toolbar.setSubtitle(CommTool.getResultString(this, object));
}
/**
* 設置主標題字體顏色
*
* @param object
*/
public void setMainTitleColor(Object object) {
toolbar.setTitleTextColor(CommTool.getResultColor(this, object));
}
/**
* 設置子標題字體顏色
*
* @param object
*/
public void setSubTitleColor(Object object) {
toolbar.setSubtitleTextColor(CommTool.getResultColor(this, object));
}
/**
* 設置logoIcon
*
* @param resId
*/
public void setLogoIcon(int resId) {
toolbar.setLogo(resId);
}
/**
* 設置中間標題
*
* @param object
*/
public void setToolbarTitleTv(Object object) {
toolbarTitleTv.setText(CommTool.getResultString(this, object));
}
/**
* 設置標題欄背景顏色
*
* @param color
*/
protected void setTitleBgColor(int color) {
toolbar.setBackgroundColor(CommTool.getResultColor(this, color));
//狀態欄背景相關配置
new StatusBarManager.builder(this)
.setStatusBarColor(color)
.create();
}
/**
* 設置左邊標題圖標
*
* @param iconRes
*/
public void setTitleNavigationIcon(int iconRes) {
toolbar.setNavigationIcon(iconRes);
}
d . 根據實際情況隱藏toolbar、獲取toolbar控件設置屬性
/**
* 隱藏標題欄
*/
protected void hideToolbar() {
if (toolbar.getVisibility() == View.VISIBLE)
toolbar.setVisibility(View.GONE);
}
/**
* 獲取toolbar
*
* @return
*/
public Toolbar getToolbar() {
return toolbar;
}
3 . 調用方法
a . 子類繼承BaseActivity基類,實現抽象方法getContentViewID()和initViews()
b . 根據實際情況設置相關屬性,如標題、導航圖標等
c . 如果需要設置action menu,則重寫方法getMenuLayoutId()返回menu布局即可,item點擊回調,只要重寫方法callbackOnMenuAction(MenuItem item)并返回true值即可。
d . 透明狀態欄默認純色半透明,如需修改可通過setTitleBgColor(int color)
修改,或者調用狀態欄管理類,通過鏈試調用的方式對狀態欄進行配置
BaseActivity完整代碼
/**
* Created by chenyk on 2016/6/25.
* 頁面基類
* 默認:顯示toolbar,標題居中,Navigation Button點擊返回銷毀當前頁面,無menu菜單(可自行定義)
*/
public abstract class BaseActivity extends AppCompatActivity {
private FrameLayout baseContent;
private Toolbar toolbar;
private TextView toolbarTitleTv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.base_activity_layout);
initControlViews();
}
/**
* 控件初始化操作
*/
private void initControlViews() {
baseContent = (FrameLayout) findViewById(R.id.base_content);
toolbar = (Toolbar) findViewById(R.id.tool_bar);
toolbarTitleTv = (TextView) findViewById(R.id.toolbar_title_tv);
//設置相關默認操作
setTitleNavigationIcon(R.mipmap.icon_title_back);
setTitleBgColor(R.color.base_title_color);
setInflateMenu();
baseContent.addView(LinearLayout.inflate(this, getContentViewID(), null));
initViews();
//左邊Navigation Button監聽回調
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
callbackOnClickNavigationAction(v);
}
});
//右邊菜單item監聽回調
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
return callbackOnMenuAction(item);
}
});
}
/**
* 為toolbar設置menu項
*/
private void setInflateMenu() {
if (getMenuLayoutId() > 0)
toolbar.inflateMenu(getMenuLayoutId());
}
/**
* 獲取菜單資源id,默認無,子類可重寫
*
* @return
*/
protected int getMenuLayoutId() {
return 0;
}
/**
* 獲取toolbar
*
* @return
*/
public Toolbar getToolbar() {
return toolbar;
}
/**
* 設置主標題
*
* @param object
*/
public void setMainTitle(Object object) {
toolbar.setTitle(CommTool.getResultString(this, object));
}
/**
* 設置子類標題
*
* @param object
*/
public void setSubTitle(Object object) {
toolbar.setSubtitle(CommTool.getResultString(this, object));
}
/**
* 設置主標題字體顏色
*
* @param object
*/
public void setMainTitleColor(Object object) {
toolbar.setTitleTextColor(CommTool.getResultColor(this, object));
}
/**
* 設置子標題字體顏色
*
* @param object
*/
public void setSubTitleColor(Object object) {
toolbar.setSubtitleTextColor(CommTool.getResultColor(this, object));
}
/**
* 設置logoIcon
*
* @param resId
*/
public void setLogoIcon(int resId) {
toolbar.setLogo(resId);
}
/**
* 設置中間標題
*
* @param object
*/
public void setToolbarTitleTv(Object object) {
toolbarTitleTv.setText(CommTool.getResultString(this, object));
}
/**
* 設置標題欄背景顏色
*
* @param color
*/
protected void setTitleBgColor(int color) {
toolbar.setBackgroundColor(CommTool.getResultColor(this, color));
//狀態欄背景相關配置
new StatusBarManager.builder(this)
.setStatusBarColor(color)
.create();
}
/**
* 設置左邊標題圖標
*
* @param iconRes
*/
public void setTitleNavigationIcon(int iconRes) {
toolbar.setNavigationIcon(iconRes);
}
/**
* 隱藏標題欄
*/
protected void hideToolbar() {
if (toolbar.getVisibility() == View.VISIBLE)
toolbar.setVisibility(View.GONE);
}
/**
* 不顯示 NavigationButton
*/
public void hideTitleNavigationButton() {
toolbar.setNavigationIcon(null);
}
/**
* Navigation Button點擊回調,默認回退銷毀頁面,其他操作子類可重寫
*
* @param view
*/
protected void callbackOnClickNavigationAction(View view) {
onBackPressed();
}
/**
* menu點擊回調,默認無,子類可重寫
*
* @param item
* @return
*/
protected boolean callbackOnMenuAction(MenuItem item) {
return false;
}
/**
* 獲取布局資源ID
*
* @return
*/
public abstract int getContentViewID();
/**
* 控件初始化操作
*
* @return
*/
public abstract void initViews();
}
源碼在此:https://github.com/chenykKits/SystemBarUsing
寫在最后,希望以上內容能幫到您,不定時總結和記錄個人的經驗。如果喜歡的話可以關注我,非常感謝您的支持。