fitsSystemWindows实践

来源:互联网 发布:搞笑网络段子精选 编辑:程序博客网 时间:2024/04/19 21:45

好久没有写博客,一直在用自己的印象笔记记录一些问题。2017年了,想重新的把博客写起来。也希望通过这个平台交一些朋友。

最开始的文章从自己碰到的问题写起吧。Android的Status Bar和Navigation Bar(当然不是所有版本都有Navigation Bar)在界面中一直占据着一定的空间。随着版本升级,Status Bar和Navigation Bar的碎片化也越来越严重。如何处理Status Bar和Navigation Bar的协调问题,如何合理的展示屏幕中的元素也逐渐成了一个问题。(当然不是所有的app的处理方式都是一样的,这篇博客主要是来记录自己碰到的问题以及解决的方法)

下面统称Status Bar和Navigation Bar为System Bar。
首先需要了解基本的规则:可以用来交互的元素不能一直被System Bar一直遮住,不然可能导致你的某个控件不能操作。简单点解释就是你的Button不能展示在System Bar下面无法点击,你的List Item不能一直展示Navigation Bar的下面无法点击。

先了解一个类。
WindowInsets (api 20引入):用来记录一系列Window占用的空间。mSystemWindowInsets(Rect):System Bar占据的区域、mWindowDecorInsets(Rect):应用内容占据的区域、mStableInsets(Rect):看英文是稳定的区域,但是没有理解,求理解的告知。

了解几个api。
setFitsSystemWindows(boolean):设置系统是否需要考虑System Bar占据的区域来显示。如果需要的话就会执行 fitSystemWindows(Rect)方法。即设置为true的是时候系统会适应System Bar的区域,让内容不被遮住。
fitSystemWindows(Rect)(api level 14):用来调整自身的内容来适应System Bar(不让被System Bar遮住)。// 这里其实不止Status Bar和Navigation Bar,只是目前只考虑Status Bar、Navigation Bar、IME。
onApplyWindowInsets(WindowInsets)(api level 20):同fitSystemWindows(Rect)的作用是一样的,更加方便扩展,对以后增加新的系统控件便于扩展。

几个实践:
1.实现透明状态栏。可以参考http://www.jianshu.com/p/0acc12c29c1b
其中有使用android:fitsSystemWindows=“true”,系统会自动的调整显示区域来实现详情的控件不会被遮住。

2.ListView展示在透明的Status Bar/Navigation Bar下方。
2.1 使用下面的布局就行。最外层的RelativeLayout设置android:fitsSystemWindows="false",意思是根布局不受System Bar的影响,可以完全的展示在System Bar的下面。ListView中的android:fitsSystemWindows="true"使ListView自身受System Bar的影响不会被System Bar遮住,android:clipToPadding="false"ListView不受Padding的影响,可以展示在Padding的区域。其实fitsSystemWindows就是设置一个Padding使View不会展示在System Bar的下方,现在这样设置以后ListView自身还是会适应System Bar的区域,只是同样的可以展示在Padding的区域。

<?xml version="1.0" encoding="utf-8"?><RelativeLayout    android:id="@+id/content_layout"    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#ffDF3031"    android:fitsSystemWindows="false">    <ListView        android:id="@+id/list"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_weight="1"        android:cacheColorHint="@android:color/transparent"        android:clipToPadding="false"        android:fitsSystemWindows="true"        android:listSelector="@null"/></RelativeLayout>

2.2 ListView只展示在Navigation Bar的下方。一般的展示可能是这样的:ListView上方可能会有一个固定的区域(Action Bar、ToolBar等,即Action Bar等等展示在Status Bar的下方不被遮住)。如何实现这样的需求呢?
(1).最上层区域展示在Status Bar的下方,那么就最外层的android:fitsSystemWindows="true"。这样就会导致ListView会展示在Status Bar/Navigation Bar的下方(即展示的区域就会缩小)
(2).需要扩大最外层的Layout的展示区域可以延伸到Navigation Bar。对于一个最外层的Layout如何扩大的区域到Navigation Bar呢?setPadding(0, 0, 0, -1 * navigation_bar_height); //注意是负数
(3).如何设置ListView的区域,可以被Navigation Bar遮住,同时最后的一个item不会被Navigation Bar遮住。2.1中内容给了我们提示,android:clipToPadding="false",这样就可以展示在ListView的Padding区域了,然后还需要设置setPadding(0, 0, 0, navigation_bar_height); // 注意是正数
RelativeLayout中的android:clipToPadding="false"表示RelativeLayout的第一个Child会受System Bar的区域影响。ListView的android:clipToPadding="false"与2.1的内容相同。

<?xml version="1.0" encoding="utf-8"?><RelativeLayout    android:id="@+id/content_layout"    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#ffDF3031"    android:fitsSystemWindows="true"    android:orientation="vertical">    <Button        android:id="@+id/button"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Button"/>    <ListView        android:id="@+id/list"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_below="@id/button"        android:layout_weight="1"        android:background="#ff000000"        android:cacheColorHint="@android:color/transparent"        android:clipToPadding="false"        android:listSelector="@null"/></RelativeLayout>

Java代码。

// todo 动态计算Navigation Bar的高度ViewGroup viewGroup = (ViewGroup) getWindow().getDecorView().findViewById(android.R.id.content);viewGroup.setPadding(0, 0, 0, -144);  // 设置整体(DecorView)能够展示的区域-144代表的是在屏幕最下面向上144mList.setPadding(0, 0, 0, 144);  // item可以出现在超出自身区域的位置。144是我测试手机的Navigation Bar的高度

3.视频播放器被透明的Status Bar遮住,但是播放器的控制栏不会被遮住。(这里的Demo当播放器是一个ImageView,上面的控制栏是一个Button)。
(1).Button不会被Status Bar遮住,那么外层的Layout需要android:fitsSystemWindows="true"
(2).ImageView需要被Status Bar遮住,那么外层的Layout需要android:fitsSystemWindows="false"
似乎是矛盾的,那么假设android:fitsSystemWindows="false"的。(2)就不用处理了。对于(1)的问题是变成了如何使Button展示在Status Bar下方不被遮住。那么是不是只需要将Buton向下移动一个Status Bar的高度就行了?
那么需要自定义个Layout来实现上面的功能。

@TargetApi(Build.VERSION_CODES.KITKAT_WATCH)@Overrideprotected void onLayout(boolean changed, int left, int top, int right, int bottom) {    super.onLayout(changed, left, top, right, bottom);    for (int i = 0, z = getChildCount(); i < z; i++) {        final View child = getChildAt(i);        // 对于没有设置android:fitsSystemWindows="true"的可以将其下移一段距离        if (!ViewCompat.getFitsSystemWindows(child) && mLastInsets != null) {            final int insetTop = mLastInsets.getSystemWindowInsetTop();            Log.e("Egos", "inset top = " + insetTop);            if (child.getTop() < insetTop) {                ViewCompat.offsetTopAndBottom(child, insetTop);           }      }  }}// 用来将dispatchApplyWindowInsets()传递下去。设置@TargetApi(Build.VERSION_CODES.KITKAT_WATCH)@Overridepublic WindowInsets onApplyWindowInsets(WindowInsets insets) {    int childCount = getChildCount();    for (int i = 0; i < childCount; i++) {        getChildAt(i).dispatchApplyWindowInsets(insets);    }    mLastInsets = insets;    return insets;}
<?xml version="1.0" encoding="utf-8"?><com.egos.fitssystemwindow.sample.TestWindowInsetFrameLayout    android:id="@+id/collapsing_toolbar1"    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="256dp"    android:fitsSystemWindows="false"    android:visibility="visible">    <ImageView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@mipmap/background"        android:fitsSystemWindows="true"        android:scaleType="centerCrop"/>    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Button"        android:visibility="visible"/></com.egos.fitssystemwindow.sample.TestWindowInsetFrameLayout>

完整的代码戳这里。

0 0
原创粉丝点击