Android知识点点滴汇聚

CoordinatorLayout,CollapsingTool

2016-10-29  本文已影响440人  幸福的程序媛

android的折叠式布局好多app都已经用了,看起来效果确实很赞,最近项目中也使用了,记录使用笔记,备忘.

在android studio的模板里面,Scrolling Activity就实现了这个折叠式布局,可以直接看到效果.今天我们就在它的基础上学习定制自己的折叠效果.
先看下模板里面的xml

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.example.happycodingirl.collapsingtoolbarlayoutdemo.ScrollingActivity">

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

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

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

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

    <include layout="@layout/content_scrolling" />

    <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:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end" />

</android.support.design.widget.CoordinatorLayout>
1.其中注意一点:
 android:fitsSystemWindows="true"
这个属性是为了适应状态栏高度.当为true时,会自动给view加一个ppadding,以使view不会挤压到状态栏里面.
需要注意的一点是toolbar没有设置android:fitSystemWindows="true"默认也就是false.如果也置为true,你会发现toolbar上方又多出来了一个padding.没有居中了.
2.可通过在CollapsingToolbarLayout标签下添加
app:titleEnabled="false"
使toolbar的title固定,而不随整个布局的拉伸位置下移.

或者在代码中设置

        collapsingToolbarLayout.setTitleEnabled(false);
3.在我们的应用中需要添加在toolbar下面添加一条线,以使toolbar界限明显.

最后在根CoordinatorLayout布局下添加View,如下

 <View
        android:layout_marginTop="65dp"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        app:layout_anchor="@id/toolbar"
        app:layout_anchorGravity="bottom"
        android:background="@android:color/holo_green_dark"
        />

其中marginTop值需要设置为toolbar的高度+statusBar的高度.此处要注意不要忘了写marginTop,否则该View会压在toolbar上,别忘了加状态栏的高度.(StormZhang在其toolabr适配方案里面也是直接写死statusBar高度为25dp).其实我还是对写死的东西有点没有安全感,一直在疑惑所有手机的statusBar都是25dp吗,临时在我手机上显示都正常.若有知道statusBar高度是否在所有手机上都一样高的问题的,望赐教.

app:layout_anchor="@id/toolbar"

设置该view以哪个View作为锚点.

app:layout_anchorGravity="bottom"

处于锚点View的下方.

4.collapsingToolbarLayout 标签下的
app:contentScrim="?attr/colorPrimary"
限定的是toolbar折叠在顶部时的背景色.
5.不要忘记了collapsingToolbarLayout本质上依然是一个FrameLayout,Toolbar必须写在最后面,否则折叠后被后面添加的布局遮挡了.

我的测试代码如下:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.example.happycodingirl.collapsingtoolbarlayoutdemo.ScrollingActivity">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:titleEnabled="false"
            app:contentScrim="@android:color/holo_orange_dark"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_marginTop="40dp"
                android:src="@drawable/sea"
                android:scaleType="fitXY"
                android:layout_gravity="bottom"
                android:fitsSystemWindows="true"
                android:layout_width="match_parent"
                android:layout_height="150dp" />




            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:fitsSystemWindows="false"
                app:navigationIcon="@android:drawable/ic_btn_speak_now"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                app:layout_collapseMode="pin"
                android:gravity="center"
                android:layout_gravity="top"
                android:minHeight="40dp"
                android:background="@android:color/holo_orange_dark"
                app:popupTheme="@style/AppTheme.PopupOverlay" >
                <LinearLayout
                    android:orientation="horizontal"
                    android:layout_gravity="center"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <TextView
                        android:text="toolbar title"

                        android:gravity="center"
                        android:textSize="25dp"
                        android:layout_weight="1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />

                    <ImageView
                        android:gravity="center"
                        android:layout_gravity="right|center"

                        android:layout_width="wrap_content"
                        android:layout_height="40dp"
                        android:src="@android:drawable/ic_search_category_default"/>
                </LinearLayout>



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



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


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

    <View

        android:layout_marginTop="65dp"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        app:layout_anchor="@id/toolbar"
        app:layout_anchorGravity="bottom"
        android:background="@android:color/holo_green_dark"
        />

    <include layout="@layout/content_scrolling" />


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

展开效果:


展开效果

折叠效果:


toolbar显示正常

在上述xml里面如果将ImageView放到toolbar后面,属性不变,折叠后的效果如下:


toobar被遮挡
其实toolbar还是在折叠的位置上,只是被上面的imageView遮挡住了.
AppBarLayout 本质上是个LinearLayout,所以可以在CollapsingToolbarLayout和结束标签后面和AppBarLayout结束标签前面添加一个TabLayout,toolbar折叠后TabLayout紧贴在toolbar下面吸附的效果.

还有一个非常重要的知识点app:layoutFlags各个值代表的各种效果,下篇博客再写.
洗洗睡啦,呼呼~~~

上一篇 下一篇

猜你喜欢

热点阅读