CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar实现渐变透明的状态栏
来源:互联网 发布:量子引力 知乎 编辑:程序博客网 时间:2024/05/16 19:09
在之前的一篇博文里面我已经说明了CoordinatorLayout使用过程中遇到的问题,之后又发现结合CollapsingToolbarLayout使用时的另一个问题。CollapsingToolbarLayout里面的ImageView为背景并不能将状态栏覆盖。在网上查的方法感觉比较费劲,自己试了多次之后发现下面的这种处理算是最简单的了。
大概的思想是:
1.给Activity界面设置主题为透明状态栏的主题,因为5.0系统的限制即使设置透明状态栏之后状态栏上面仍然有一层浅灰色的背景,所以增加values-21的处理。
2.给CollapsingToolbarLayout里面的布局设置marginTop为-15dp目的是为了让进入界面 之后,布局的背景能够向上覆盖到状态栏(可以是背景图片或者背景布局)。
fitsSystemWindows属性是为了让状态栏的颜色和该布局的颜色相同
----上面的-15dp的处理。是因为即使设置透明状态栏,刚进入界面的时候状态栏的颜色也是没有的,因为CollapsingToolbarLayout里面的背景图没有被拉上去。
3.给CollapsingToolbarLayout设置正常显示时状态栏的颜色
关键的代码:
1.给CollapsingToolbarLayout添加如下属性:
app:contentScrim="?attr/colorPrimary"
app:statusBarScrim="?attr/colorPrimary"
2.给CollapsingToolbarLayout里面的第一个child布局设置如下属性:
android:layout_marginTop="-15dp"
android:fitsSystemWindows="true"
3.为当前Activity设置主题:
android:theme="@style/FullTheme"
3.1在values的styles.xml里面配置
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <!--浅蓝色--> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <!--深蓝色--> <item name="colorAccent">@color/colorAccent</item></style><style name="FullTheme" parent="AppTheme"> <item name="android:windowNoTitle">true</item> <!--<item name="android:windowFullscreen">true</item>--></style>
3.2在values-v21的styles.xml里面配置
<style name="FullTheme" parent="AppTheme"> <item name="android:windowTranslucentStatus">false</item> <item name="android:windowTranslucentNavigation">true</item> <!--Android 5.x开始需要把颜色设置透明,否则导航栏会呈现系统默认的浅灰色--> <item name="android:statusBarColor">@android:color/transparent</item></style>
效果如下
具体代码如下:
<?xml version="1.0" encoding="utf-8"?><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/main_content" android:layout_width="match_parent" android:layout_height="match_parent"> <!--CoordinatorLayout是新添加的一个增强型的FrameLayout,通过它可以实现很多东西:--> <!--例如:--> <!--1.界面向上滚动逐渐隐藏Toolbar;--> <!--2.在其中可以放置浮动的View,就像Floating Action Button--> <!--AppBarLayout跟它的名字一样,把容器类的组件全部作为AppBar。--> <!--将AppBarLayout放在CoordinatorLayout中,就可以实现滚动效果。--> <!--本例中,TabLayout在界面滚动时,随着Toolbar的逐渐隐藏,将占据Toolbar的位置,--> <!--达到节省屏幕空间,界面动画效果的目的。--> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="210dp" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" app:collapsedTitleTextAppearance="@style/TextAppearance.AppCompat.Title" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:statusBarScrim="?attr/colorPrimary" app:titleEnabled="false"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="-15dp" android:fitsSystemWindows="true"> <ImageView android:id="@+id/backdrop" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@mipmap/bj" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="1" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginLeft="20dp" android:orientation="vertical"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="张三的龙虎山之旅" android:textSize="@dimen/txs1" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="20dp" android:text="悠闲 朋友 经典" android:textSize="@dimen/txs0" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="10dp" android:orientation="horizontal"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="1天" android:textColor="@color/gray_tv" android:textSize="@dimen/txs1" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:text="8个景点" android:textColor="@color/gray_tv" android:textSize="@dimen/txs1" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="30dp" android:text="在地图中查看 >" android:textSize="@dimen/txs1" /> </LinearLayout> </LinearLayout> </RelativeLayout> <!--//属性解析:--> <!--// app:theme:指定Toolbar的样式,包括ActionbarToggle和popupMenu的指示图标颜色--> <!--// app:popupTheme:指定popupMenu溢出后的样式--> <!--// app:title: 指定Toolbar中主Title的内容--> <!--// app:layout_scrollFlags的意思是:--> <!--设置的layout_scrollFlags有如下几种选项:--> <!--scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。--> <!--enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见,启用快速“返回模式”。--> <!--enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,你的视图只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。--> <!--exitUntilCollapsed: 当视图会在滚动时,它一直滚动到设置的minHeight时完全隐藏。--> <!--// 需要注意的是,后面两种模式基本只有在CollapsingToolbarLayout才有用,--> <!--// 而前面两种模式基本是需要一起使用的,也就是说,这些flag的使用场景,基本已经固定了。--> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:contentInsetStart="0dp" app:layout_collapseMode="pin" app:title="@null"> <RelativeLayout android:id="@+id/ib_back_layout" android:layout_width="@dimen/item_h_50dp" android:layout_height="match_parent"> <ImageView android:id="@+id/ib_back" android:layout_width="20dp" android:layout_height="20dp" android:layout_centerVertical="true" android:layout_marginLeft="@dimen/m_10dp" android:scaleType="fitCenter" android:src="@mipmap/back" /> </RelativeLayout> <TextView android:id="@+id/toolbar_titletv" style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:drawablePadding="5dp" android:ellipsize="end" android:gravity="center" android:lines="1" android:scrollHorizontally="true" android:text="" android:textColor="@android:color/white" /> <RelativeLayout android:id="@+id/ib_right_layout" android:layout_width="50dp" android:layout_height="match_parent" android:layout_gravity="right"> <ImageView android:id="@+id/ib_right" android:layout_width="20dp" android:layout_height="20dp" android:layout_centerInParent="true" android:scaleType="fitCenter" android:src="@mipmap/ib_add" /> </RelativeLayout> </android.support.v7.widget.Toolbar> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <!--//app:layout_behavior 属性,没错,--><!--// 如果你使用CoordinatorLayout来实现Toolbar滚动渐变消失动画效果,那就必须在它下面的那个控件中加入这个属性,并且下面的这个控件必须是可滚动的。--><!--// 当设置了layout_behavior的控件滑动时,就会触发设置了layout_scrollFlags的控件发生状态的改变。--> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout style="@style/linlayout_h2_style" android:layout_margin="@dimen/m_10dp"> <TextView style="@style/tv_item_title_style" android:text="2017-11-21" android:textSize="@dimen/txs2" /> <TextView style="@style/tv_item_title_style" android:layout_marginLeft="@dimen/m_10dp" android:text="09:11" android:textSize="@dimen/txs2" /> </LinearLayout> <android.support.v7.widget.RecyclerView android:id="@+id/travel_plan_rv" android:layout_width="match_parent" android:layout_height="wrap_content" android:nestedScrollingEnabled="false" /> </LinearLayout> </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>
参考文章:
Android 状态栏全透明策略
android状态栏一体化(沉浸式状态栏)
android状态栏颜色修改
- CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar实现渐变透明的状态栏
- Android CoordinatorLayout+AppBarLayout实现toolbar背景渐变透明
- CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar
- CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar实现app的折叠效果
- Android Material Design(5) CoordinatorLayout,AppBarLayout,Toolbar,CollapsingToolbarLayout的使用
- CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar用法小结
- CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout、Toolbar混合使用经验
- CoordinatorLayout的AppBarLayout和CollapsingToolbarLayout
- Transparent(透明的Toolbar) AppBarLayout and CollapsingToolbarLayout
- CoordinatorLayout、Toolbar、CollapsingToolbarLayout、AppBarLayout和NestedScrollView组合滑动折叠或拉伸Toolbar的demo
- 安卓AppBarLayout和Toolbar和CollapsingToolbarLayout详解及设置图片透明状态栏
- CoordinatorLayout AppbarLayout CollapsingToolbarLayout 实现顶部栏
- Android Material 之CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout、Toolbar 等的说明和使用
- JuheNews系列之二 · ToolBar+AppBarLayout+CoordinatorLayout+CollapsingToolbarLayout
- Android学习系列Toolbar,AppBarLayout,CoordinatorLayout,CollapsingToolbarLayout使用小结
- RecyclerView与CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout 解决上滑到toolbar卡顿
- CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout,Toolbar,NestedScrollView,RecyclerView结合使用
- Android学习系列Toolbar,AppBarLayout,CoordinatorLayout,CollapsingToolbarLayout使用小结
- 习题6(6.14)
- mac+nginx+redis+php+composer的安装和配置
- 2017年12月1日训练笔记
- 根据韦东山视频写最小根文件系统
- Python 打包,entry_points的使用
- CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar实现渐变透明的状态栏
- VMware Workstation9 下安装 CentOS6.5( 安装图文教程 )
- Flyway简介
- SSM(2)ajax的入门使用
- get方式网络请求+蓝牙状态判断+wifi状态判断
- vue学习第24天,启动本地MongoDB 启动node搭建的服务器 设置跨域 调用接口
- 内排序- 逆序对问题 树状数组& 归并排序写法
- 敏感词过滤算法
- 智能家居市场或将井喷 电视遥控APP靠什么重新定义电视?