您的当前位置:首页正文

MaterialDesign 布局/控件踩坑记

来源:化拓教育网

一、AppBarLayout CollapsingToolbarLayout Toolbar 推拉缩放

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    
    
    
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleTextAppearance="@style/ExpandedAppBar"
            app:collapsedTitleTextAppearance="@style/CollapsedAppBar"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed|enterAlways">

            <ImageView
                android:id="@+id/bar_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:contentDescription="@null"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:scrollbarAlwaysDrawVerticalTrack="true"
                android:scrollbarStyle="insideInset"
                android:src="@drawable/nav_header"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay"/>

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipe_refresh"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <android.support.v7.widget.RecyclerView
                android:id="@+id/recycler_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

        </android.support.v4.widget.NestedScrollView>

    </android.support.v4.widget.SwipeRefreshLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:clickable="true"
        android:src="@drawable/ic_bell_white_24dp"
        app:backgroundTint="@color/md_pink_500"
        app:borderWidth="@dimen/dp_0"
        app:elevation="@dimen/dp_4"
        app:fabSize="normal"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"
        app:rippleColor="@color/dribbble_super_dark"/>

</android.support.design.widget.CoordinatorLayout>

出来的效果如下:
实际效果.png

但是我想要的效果是下面这样的:


想要实现的效果.png

排查问题找啊找,最终发现是Toolbar里的background不能用android命名空间的,应该采用app命名空间的,也就是说将上面的xml中Toolbar属性中的

 android:background="?attr/colorPrimary"

换成这样

 app:background="?attr/colorPrimary"

二、状态栏沉浸模式

如果你发现状态栏并没有随着你的背景改变而改变,请检查 AppBarLayout CollapsingToolbarLayout Toolbar 是否设置了:

android:fitsSystemWindows="true"

三、Toolbar.setTitle 问题

如果你的Toolbar就是直接被AppBarLayout包裹的话,那么直接调Toolbar.setTitle是没有什么问题。但是如果你的Toolbar是被AppBarLayout -> CollapsingToolbarLayout 这样层次包裹的话,直接调Toolbar.setTitle就不行了,标题栏并不会换标题。
解决方案:使用CollapsingToolbarLayout来设置标题

collapsingToolbarLayout.setTitle("新标题");

哎呀,这个坑太深了。


关注我的公众号.jpg