半透明/透明状态栏+ CoordinatorLayout +工具栏+片段 [英] Translucent/Transparent status bar + CoordinatorLayout + Toolbar + Fragment

查看:104
本文介绍了半透明/透明状态栏+ CoordinatorLayout +工具栏+片段的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有以下设置:

  • 我正在使用AppCompat
  • MainActivity,其中包含一个片段并具有一个工具栏,向下滚动时会隐藏
  • FragmentRecyclerView
  • 所有适合屏幕的视图在xml布局中均具有相应的android:fitsSystemWindows="true"
  • I'm using AppCompat
  • MainActivity, that holds a fragment and has a toolbar, that's hiding when scrolling down
  • Fragment with RecyclerView
  • all views that should fit the screen have the according android:fitsSystemWindows="true" in the xml layout

问题是,在这种情况下,我无法使状态栏透明.我要做的是:

The problem is, I can't get the statusbar transparent in this case. What I do is following:

  1. 创建活动并调用setContent
  2. 然后,我尝试调整活动以通过编程方式获取如下所示的半透明工具栏:

  1. Create the activity and call setContent
  2. Then I try to adjust the activity to programmatically get a translucent toolbar like following:

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public void themeNavAndStatusBar(Activity activity)
{
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP)
        return;

    Window w = activity.getWindow();
    w.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
    w.setFlags(
            WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION,
            WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
    w.setFlags(
            WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
            WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    w.setNavigationBarColor(activity.getResources().getColor(android.R.color.transparent));

    w.setStatusBarColor(activity.getResources().getColor(android.R.color.transparent));
}

  • 用片段替换活动(@+id/frame_container)中的占位符

  • Replace the placeholder in the activity (@+id/frame_container) with the fragment

    在这种情况下,状态栏为纯色,并且视图下方未绘制视图...为什么?

    The statusbar is solid colored in this case, and the views are not drawn underneath it... Why?

    我想要的

    我想要一个工具栏,它可以在屏幕上滚动并完全隐藏,而该工具栏下的内容应适合Screen并绘制在透明导航栏的后面.

    I want a toolbar, that is scrolled of the screen and hiding completely while the content underneath this toolbar should fitScreen and be drawn behind the transparent nav bar.

    布局

    这是我的主要活动:

    <android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/clMain"
        android:fitsSystemWindows="true"
        android:background="?attr/main_background_color"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:fitsSystemWindows="true"
            android:background="@null"
            app:elevation="0dp"
            app:contentInsetLeft="0dp"
            app:contentInsetStart="0dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
    
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:elevation="4dp"
                android:theme="?actionBarThemeStyle"
                app:popupTheme="?actionBarPopupThemeStyle"
                app:layout_scrollFlags="scroll|enterAlways">
    
                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
    
                    <LinearLayout
                        android:orientation="horizontal"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">
    
                        <ImageView
                            android:id="@+id/ivToolbarDataSource"
                            android:layout_gravity="center_vertical"
                            android:layout_marginRight="2dp"
                            android:layout_width="24dp"
                            android:layout_height="24dp" />
    
                        <TextView
                            android:id="@+id/tvToolbarTitle"
                            style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
                            android:theme="?actionBarThemeStyle"
                            android:layout_gravity="center_vertical"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content" />
    
                    </LinearLayout>
    
                    <TextView
                        android:id="@+id/tvToolbarSubTitle"
                        style="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle"
                        android:theme="?actionBarThemeStyle"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />
    
                </LinearLayout>
    
    
    
            </android.support.v7.widget.Toolbar>
    
            <!-- BUG: http://stackoverflow.com/questions/30541409/coordinatorlayoutappbarlayout-does-not-draw-toolbar-properly -->
            <View
                android:layout_width="fill_parent"
                android:layout_height="1dp"/>
    
        </android.support.design.widget.AppBarLayout>
    
        <FrameLayout
            android:id="@+id/frame_container"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_margin="32dp"
            android:src="@drawable/ic_local_offer_white_24dp"
            app:backgroundTint="?attr/colorPrimary"
            app:borderWidth="0dp"
            app:fabSize="normal"
            app:rippleColor="?attr/colorPrimaryDark"
            app:layout_anchorGravity="bottom|right|end"
            app:layout_behavior="com.test.classes.ScrollAwareFABBehavior"/>
    
    </android.support.design.widget.CoordinatorLayout>
    

    这是我的片段,将其放置在主要活动中:

    And here is my fragment, that will be placed in the main activity:

    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <android.support.v4.widget.SwipeRefreshLayout
            android:id="@+id/srlImages"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
            <android.support.v7.widget.RecyclerView
                android:id="@+id/rvImages"
                android:fitsSystemWindows="true"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
    
        </android.support.v4.widget.SwipeRefreshLayout>
    
        <TextView
            android:id="@+id/tvEmpty"
            android:gravity="center"
            android:layout_centerInParent="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    
    </RelativeLayout>
    

    编辑-屏幕截图

    我使用浅色/深色基本主题,并手动使用所有主题(因为用户可以选择任何颜色作为主要/重点颜色),所以不要介意工具栏是白色的(这是默认的主题背景颜色和主要主题颜色).我还添加了黑色边框,以便您看到活动结束的地方...

    I use a light/dark base theme and theme everything by hand (because the user can select any color as primary/accent color), so don't mind that the toolbar is white (it's the default's theme background color and primary color). I added a black border as well so that you see where the activity ends...

    • 第一个屏幕截图:显示工具栏,没有滚动内容
    • 第二个屏幕截图:我刚刚开始滚动=>工具栏现在应该滚动了
    • 第三张屏幕截图:主要内容现在应在导航栏下方滚动...

    最后,我当然将工具栏和导航栏设为半透明,以获得更好的视觉效果...

    In the end, I'll of course make the toolbar and navbar semi transparent for a better visual effect...

    推荐答案

    对我而言,原因并不是它本身不起作用,而是我使用了Mike Penz提供的材料抽屉库,并且该库确实使用了全屏+偏移量+工具栏后面的自定义背景,所以我不得不解决有关特殊设置的问题...

    For me, the reason was not that it did not work per se, but that I use the material drawer library from Mike Penz and this library does use fullscreen + offset + custom background behind the toolbar so I had to solve the problem respecting that special setup...

    我会奖励我认为最翔实的答案的点...

    I'll reward the points to the in my opinion most informative answer though...

    这篇关于半透明/透明状态栏+ CoordinatorLayout +工具栏+片段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

  • 查看全文
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆