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

置顶 于 2018-12-31 12:11:37 发布
阅读量8.5k 收藏 7
点赞数 1
分类专栏： Android实战 文章标签： Material design library Material design  折叠式布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/geduo_83/article/details/85452569
版权

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

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

常见问题：

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

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

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

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

常见模板布局1：

效果图：

布局代码：

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

常见模板布局2：

效果图：

布局代码：

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

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优先滚动

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

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

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

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

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();
    }
});

4.2 Activity样式设置：

<style name="AppTheme.BackBar" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name="navigationIcon">@mipmap/navbar_icon_return</item>
</style>
<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>

问题反馈

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

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

关于作者

var geduo_83 = {
    nickName  : "geduo_83",
    site : "http://www.weibo.com/geduo83"
}

 

门心叼龙
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

门心叼龙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值