高级UIAndroid收藏集

Android材料设计库之折叠式布局你应该知道的一切

2019-04-07  本文已影响63人  门心叼龙

github源码地址：https://github.com/geduo83/AndroidMaterialDesign/tree/master/module_drawerlayout_coordinatorlayout

在Android5.0之后，Android给我们提供了非常丰富关于UI设计的材料设计库，其中就有非常实用的折叠式布局

常见问题：

1. ToolBar中自定义的title不能居中

 设置CollapsingToolbarLayout的app:titleEnabled="false"即可

  1. 背景图片没有完全沉浸在状态栏里边

    设置<ImageView android:fitsSystemWindows="true"/>即可

常见模板布局1：

效果图：

image image.gif

​

布局代码：

<?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"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/detail_backdrop_height"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

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

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

    <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"
            android:paddingTop="24dp">

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/card_margin">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="卡片1"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/news_content" />

                </LinearLayout>

            </android.support.v7.widget.CardView>

        </LinearLayout>

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

    <android.support.design.widget.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"
        android:src="@drawable/ic_discuss"
        android:layout_margin="@dimen/fab_margin"
        android:clickable="true"/>

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

常见模板布局2：

效果图：

image image.gif

​

布局代码：

<?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">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways|snap" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        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="end|bottom"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_done" />

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

1.CoordinatorLayout

 根布局必须使用CoordinatorLayout，即协调式布局，用来协调AppBarLayout和Scrollview之间的滚动关系

2.AppBarLayout

AppBarLayout必须依赖父控件CoordinatorLayout，AppBarLayout为ChildrenView提供了一个`app:layout_scrollFlags属性来设置ScrollView滚动时Childview的滚动模式`，ScrollFlags共有五种常量值，对应的值为：scroll，enterAlways，enterAlwaysCollapsed，snap，exitUntilCollapsed；

2.1 app:layout_scrollFlags="scroll" :往下滚ScrollView优先滚动

` image image.gif

​`

2.2 app:layout_scrollFlags="scroll|enterAlways" :往下滚ChildView优先滚动

` image image.gif

​`

2.3 app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"：往下滚动ChildView优先滚动，且滚动到指定的最小高度，然后开始滚动ScrollView，直到ScrollView滚动完毕再开始滚动ChildView

` image image.gif

​`

2.4 app:layout_scrollFlags="scroll|exitUntilCollapsed"：往上滚动ChildView优先滚动，且滚动到指定的最小高度，然后开始滚动ScrollView

` image image.gif

​`

2.5 app:layout_scrollFlags="scroll|snap"：往下滚ScrollView优先滚动，然后ChildView开始滚动，但是ChildView必须滚动到一定的比例才能继续往下滚，否则ChildView滚动没有到达一定比例，手松了之后就会回弹回去，类似ViewPager左滑右滑的那种效果

` image image.gif

​`

3.CollapsingToolbarLayout

CollapsingToolbarLayout必须依赖父控件AppBarLayout，其中非常重要的几个属性如下

3.1 title
标题，布局展开时放大显示在图片底部，布局折叠时缩小显示在Toolbar左侧。注意，没有设置这个属性时，默认使用Toolbar的标题；
3.2 statusBarScrim
顶部视图折叠状态下，状态栏的遮罩色。通常这样设置：app:statusBarScrim="?attr/colorPrimaryDark"，即style样式中定义的沉浸式状态栏颜色。这个属性要和getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);（支持API19及以上版本，位于setContentView语句前面）一起使用，使顶部视图展开时图片能够延伸到状态栏位置显示，如效果图中所示；
3.3 contentScrim
内容遮罩，上下滚动时图片上面显示和隐藏的遮罩色，Toolbar位置的的背景色；通常这样设置：app:contentScrim="?attr/colorPrimary"，即显示为Toolbar颜色，应用的主题色；
3.4 layout_collapseMode：ChildView使用
折叠模式，设置其他控件滚动时自身的交互行为，有两种取值：parallax，折叠视差效果，比如上述效果图中的图片；pin，固定别针效果，比如上图中的Toolbar；
3.5 layout_collapseParallaxMultiplier：ChildView使用
不折叠视差系数，配合parallax模式使用，取值有点类似alpha（不透明度），在0.0 ～ 1.0之间，默认值为0.5。当设置为1.0，滚动列表时图片不会折叠移动；

4.Toolbar

4.1Toolbar初始设置

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
toolbar.setNavigationOnClickListener(new View.OnClickListener(){
    @Override
    public void onClick(View v) {
        onBackPressed();
    }
});
image.gif

4.2 Activity样式设置：

<style name="AppTheme.BackBar" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name="navigationIcon">@mipmap/navbar_icon_return</item>
</style>
image.gif 
<style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="colorPrimary">#673AB7</item>
        <item name="colorPrimaryDark">#512DA8</item>
        <item name="colorAccent">#FF4081</item>
</style>
image.gif

问题反馈

在使用中有任何问题，欢迎反馈给我，可以用以下联系方式跟我交流

QQ：303704981
email：geduo_83@163.com
weibo：@geduo_83

关于作者

var geduo_83 = {
    nickName  : "geduo_83",
    site : "http://www.weibo.com/geduo83"
}
image.gif
上一篇 下一篇

猜你喜欢

热点阅读