更简单更全的material design状态栏

时间:2023-02-04 06:38:30

从实际使用须要出发,以最简单的方式实现了几种类型的MD状态栏。

(重点在fitsSystemWindows的使用)

0,使用前提

Theme.AppCompat.Light.DarkActionBar

targetSdkVersion 23;

support librariy 23.3.0

styles-v19: <item name="android:windowTranslucentStatus">true</item>

styles-v21+: <item name="android:windowDrawsSystemBarBackgrounds">true</item>  <item name="android:statusBarColor">@android:color/transparent</item>

1。最普通的类型:仅仅有一个ToolBar

layout:

<android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.AppBarLayout>

        <android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:fitsSystemWindows="true"/> </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout>

.java:

/**
* 简单型状态栏(ToolBar)
*
* @param activity
*/
public static void setOrdinaryToolBar(Activity activity) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
activity.getWindow().setStatusBarColor(ContextCompat.getColor(activity, R.color.colorPrimaryDark));
} else if (Build.VERSION.SDK_INT == Build.VERSION_CODES.KITKAT) {
setKKStatusBar(activity, R.color.colorPrimaryDark);
}
}

效果:

左:Android4.4  右:Android6.0

更简单更全的material design状态栏更简单更全的material design状态栏

2,图片全屏透明状态栏(图片位于状态栏以下)

layout:

<android.support.design.widget.CoordinatorLayout>

    <ImageView/>

    <android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:fitsSystemWindows="true"/> </android.support.design.widget.CoordinatorLayout>

.java

/**
* 图片全屏透明状态栏(图片位于状态栏以下)
*
* @param activity
*/
public static void setImageTransparent(Activity activity) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
activity.getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
}
}

效果:

左:Android4.4  右:Android6.0

更简单更全的material design状态栏更简单更全的material design状态栏

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

3,图片全屏半透明状态栏(图片位于状态栏以下)

layout:

<android.support.design.widget.CoordinatorLayout>

    <ImageView/>

    <android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:fitsSystemWindows="true"/> </android.support.design.widget.CoordinatorLayout>

.java:

/**
* 图片全屏半透明状态栏(图片位于状态栏以下)
*
* @param activity
*/
public static void setImageTranslucent(Activity activity) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
activity.getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
activity.getWindow().setStatusBarColor(ContextCompat.getColor(activity, R.color.statusBar));
} else {
setKKStatusBar(activity, R.color.statusBar);
}
}

效果:

左:Android4.4  右:Android6.0

更简单更全的material design状态栏

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">更简单更全的material design状态栏

4,ToolBar+TabLayout状态栏(ToolBar可伸缩)

layout:

<android.support.design.widget.CoordinatorLayout
android:background="@color/colorPrimaryDark"
android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout> <android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"/> <android.support.design.widget.TabLayout/> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView/> </android.support.design.widget.CoordinatorLayout>

.java:

/**
* ToolBar+TabLayout状态栏(ToolBar可伸缩)
*
* @param activity
*/
public static void setToolbarTabLayout(Activity activity) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
activity.getWindow().setStatusBarColor(ContextCompat.getColor(activity, R.color.colorPrimaryDark));
}
}

效果:

Android4.4:

更简单更全的material design状态栏更简单更全的material design状态栏

Android6.0:

更简单更全的material design状态栏

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">更简单更全的material design状态栏

5。DrawerLayout+ToolBar+TabLayout状态栏(ToolBar可伸缩)

layout:

<android.support.v4.widget.DrawerLayout
android:fitsSystemWindows="true"> <android.support.design.widget.CoordinatorLayout
android:background="@color/colorPrimary"> <android.support.design.widget.AppBarLayout> <android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|snap"/> <android.support.design.widget.TabLayout/> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView
android:background="@android:color/white"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/> </android.support.design.widget.CoordinatorLayout> <android.support.design.widget.NavigationView
android:fitsSystemWindows="true"/> </android.support.v4.widget.DrawerLayout>

.java:

/**
* DrawerLayout+ToolBar+TabLayout状态栏(ToolBar可伸缩)
*
* @param activity
* @param drawerLayout
* @param coordinatorLayout
*/
public static void setDrawerToolbarTabLayout(Activity activity, CoordinatorLayout coordinatorLayout) {
if (Build.VERSION.SDK_INT == Build.VERSION_CODES.KITKAT) {
ViewGroup contentLayout = (ViewGroup) activity.findViewById(android.R.id.content);
contentLayout.getChildAt(0).setFitsSystemWindows(false);
coordinatorLayout.setFitsSystemWindows(true);
setKKStatusBar(activity, R.color.statusBar);
}
}

效果:

Android4.4:

更简单更全的material design状态栏更简单更全的material design状态栏

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">更简单更全的material design状态栏

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

Android6.0:

更简单更全的material design状态栏

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">更简单更全的material design状态栏更简单更全的material design状态栏

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

6,CollapsingToolbarLayout状态栏(可折叠图片)

layout:

<android.support.design.widget.CoordinatorLayout
android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout
android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout> <ImageView
android:fitsSystemWindows="true"/> <android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView
app:layout_behavior="@string/appbar_scrolling_view_behavior"/> </android.support.design.widget.CoordinatorLayout>

.java:

/**
* CollapsingToolbarLayout状态栏(可折叠图片)
*
* @param activity
* @param coordinatorLayout
* @param appBarLayout
* @param imageView
* @param toolbar
*/
public static void setCollapsingToolbar(Activity activity, CoordinatorLayout coordinatorLayout,
AppBarLayout appBarLayout, ImageView imageView, Toolbar toolbar) {
if (Build.VERSION.SDK_INT == Build.VERSION_CODES.KITKAT) {
coordinatorLayout.setFitsSystemWindows(false);
appBarLayout.setFitsSystemWindows(false);
imageView.setFitsSystemWindows(false);
toolbar.setFitsSystemWindows(true);
CollapsingToolbarLayout.LayoutParams lp = (CollapsingToolbarLayout.LayoutParams) toolbar.getLayoutParams();
lp.height = (int) (getStatusBarHeight(activity) +
activity.getResources().getDimension(R.dimen.abc_action_bar_default_height_material));
toolbar.setLayoutParams(lp);
setKKStatusBar(activity, R.color.statusBar);
setCollapsingToolbarStatus(appBarLayout);
}
}

效果:

Android4.4:

更简单更全的material design状态栏更简单更全的material design状态栏

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

Android6.0:

更简单更全的material design状态栏

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">更简单更全的material design状态栏

7,DrawerLayout+ToolBar型状态栏

layout:

<android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.AppBarLayout>

        <android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:fitsSystemWindows="true"/> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_main"/> </android.support.design.widget.CoordinatorLayout>

.java:

/**
* DrawerLayout+ToolBar型状态栏
*
* @param activity
*/
public static void setDrawerToolbar(Activity activity) {
if (Build.VERSION.SDK_INT == Build.VERSION_CODES.KITKAT) {
ViewGroup contentLayout = (ViewGroup) activity.findViewById(android.R.id.content);
contentLayout.getChildAt(0).setFitsSystemWindows(false);
setKKStatusBar(activity, R.color.statusBar);
}
}

其他:

/**
* Android4.4CollapsingToolbar折叠时statusBar显示和隐藏
*
* @param appBarLayout
*/
private static void setCollapsingToolbarStatus(AppBarLayout appBarLayout) {
ViewCompat.setAlpha(mStatusBarView, 1);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
int maxScroll = appBarLayout.getTotalScrollRange();
float percentage = (float) Math.abs(verticalOffset) / (float) maxScroll;
ViewCompat.setAlpha(mStatusBarView, percentage);
}
});
} private static void setKKStatusBar(Activity activity, int statusBarColor) {
ViewGroup contentView = (ViewGroup) activity.findViewById(android.R.id.content);
mStatusBarView = contentView.getChildAt(0);
//改变颜色时避免反复加入statusBarView
if (mStatusBarView != null && mStatusBarView.getMeasuredHeight() == getStatusBarHeight(activity)) {
mStatusBarView.setBackgroundColor(ContextCompat.getColor(activity, statusBarColor));
return;
}
mStatusBarView = new View(activity);
ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
getStatusBarHeight(activity));
mStatusBarView.setBackgroundColor(ContextCompat.getColor(activity, statusBarColor));
contentView.addView(mStatusBarView, lp);
} private static int getStatusBarHeight(Context context) {
int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");
return context.getResources().getDimensionPixelSize(resourceId);
}

效果:

Android4.4:

更简单更全的material design状态栏更简单更全的material design状态栏

Android6.0:

更简单更全的material design状态栏更简单更全的material design状态栏

OK!

源代码地址:https://github.com/XYScience/MDStatusBar