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

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

 

发布了102 篇原创文章 · 获赞 918 · 访问量 42万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 撸撸猫 设计师: 设计师小姐姐

分享到微信朋友圈

×

扫一扫,手机浏览