CoordinatorLayout 布局的使用方式（中）

(点击上方公众号，可快速关注)

来源：伯乐在线专栏作者 - Spike

链接：http://android.jobbole.com/84103/

点击 → 了解如何加入专栏作者

接上文

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="false"

    tools:context=".MainActivity">

 

    android.support.design.widget.AppBarLayout

        android:id="@+id/main_abl_app_bar"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

 

        android.support.design.widget.CollapsingToolbarLayout

            android:layout_width="match_parent"

            android:layout_height="450dp"

            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

 

            ImageView

                android:id="@+id/main_iv_placeholder"

                android:layout_width="match_parent"

                android:layout_height="300dp"

                android:scaleType="centerCrop"

                android:src="@drawable/large"

                app:layout_collapseMode="parallax" />

 

            FrameLayout

                android:id="@+id/main_fl_title"

                android:layout_width="match_parent"

                android:layout_height="150dp"

                android:layout_gravity="bottom|center_horizontal"

                android:background="@color/colorPrimary"

                app:layout_collapseMode="parallax">

 

                LinearLayout

                    android:id="@+id/main_ll_title_container"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:layout_gravity="center"

                    android:orientation="vertical">

 

                    TextView

                        android:layout_marginTop="@dimen/title_margin"

                        android:layout_width="wrap_content"

                        android:layout_height="wrap_content"

                        android:layout_gravity="center_horizontal"

                        android:gravity="bottom|center"

                        android:text="@string/person_name"

                        android:textColor="@android:color/white"

                        android:textSize="30sp"/>

 

                    TextView

                        android:layout_width="wrap_content"

                        android:layout_height="wrap_content"

                        android:layout_gravity="center_horizontal"

                        android:layout_marginTop="4dp"

                        android:text="@string/person_title"

                        android:textColor="@android:color/white" />

                LinearLayout>

            FrameLayout>

        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"

        android:scrollbars="none"

        app:behavior_overlapTop="30dp"

        app:layout_behavior="@string/appbar_scrolling_view_behavior">

 

        android.support.v7.widget.CardView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_margin="8dp"

            app:cardElevation="8dp"

            app:contentPadding="16dp">

 

            TextView

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:lineSpacingExtra="8dp"

                android:text="@string/person_intro" />

 

        android.support.v7.widget.CardView>

 

    android.support.v4.widget.NestedScrollView>

 

    android.support.v7.widget.Toolbar

        android:id="@+id/main_tb_toolbar"

        android:layout_width="match_parent"

        android:layout_height="?attr/actionBarSize"

        android:background="@color/colorPrimary"

        app:layout_anchor="@id/main_fl_title"

        app:theme="@style/ThemeOverlay.AppCompat.Dark">

 

        LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:orientation="horizontal">

 

            Space

                android:layout_width="@dimen/image_final_width"

                android:layout_height="@dimen/image_final_width" />

 

            TextView

                android:id="@+id/main_tv_title"

                android:layout_width="wrap_content"

                android:layout_height="match_parent"

                android:layout_marginLeft="8dp"

                android:gravity="center_vertical"

                android:text="@string/person_name"

                android:textColor="@android:color/white"

                android:textSize="20sp"

                android:visibility="invisible"/>

 

        LinearLayout>

 

    android.support.v7.widget.Toolbar>

 

    de.hdodenhof.circleimageview.CircleImageView

        android:layout_width="@dimen/image_width"

        android:layout_height="@dimen/image_width"

        android:layout_gravity="center"

        android:src="@drawable/small"

        app:border_color="@android:color/white"

        app:border_width="2dp"

        app:layout_behavior=".AvatarImageBehavior" />

 

android.support.design.widget.CoordinatorLayout>

效果

逻辑

在onCreate里面设置滑动逻辑, 设置两个动画: 监听AppBar的滑动, 处理Toolbar和Title的显示; 自动滑动效果.

@Override

protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    ButterKnife.bind(this);

 

    mTbToolbar.setTitle("");

 

    // AppBar的监听

    mAblAppBar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {

        @Override

        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {

            int maxScroll = appBarLayout.getTotalScrollRange();

            float percentage = (float) Math.abs(verticalOffset) / (float) maxScroll;

            handleAlphaOnTitle(percentage);

            handleToolbarTitleVisibility(percentage);

        }

    });

 

    initParallaxValues(); // 自动滑动效果

}

根据滑动百分比, 设置Title和Toolbar的显示与消失, 使用Alpha动画.

接下文

专栏作者简介（ 点击 → 加入专栏作者 ）

Spike：硕士毕业, 任职于春雨移动健康, 从事移动端架构工作. 做了六年技术研发, 还会一直坚持下去. 分享一些自己的开发经验.

打赏支持作者写出更多好文章，谢谢！