三分钟带你仿携程机票首页炫酷交互

前言

最近体验了一下携程的App，对它机票首页的交互挺感兴趣的，所以顺手仿写了一下。在进行仿写前，可以看下携程机票首页的交互：

这些效果熟悉MD的同学肯定一下就能够想到三大利器：CoordinatorLayout，AppBarLayout，CollapsingToolbarLayout。往这个方面想就对了，今天我们就要用这三个东西来搞一个炫酷的交互效果。先简单看一下这三大利器。

CoordinatorLayout

Design包下的控件，作用如其名字是用来协调操作控件的布局，可以通过自定义Behavior来协调和控制子View之间的交互。

AppBarLayout

继承自LinearLayout，在竖直方向的LinearLayout基础上增加了一些Material Design的设计概念，同样可以定义滑动时子View的交互方式。

CollapsingToolbarLayout

为Toolbar而生的控件，用来操控Toolbar实现一些炫酷的折叠效果，可以为Toolbar和StatusBar在滑动阀值时添加scrim效果以及控制Toolbar等其他子View滑动的视差滚动（parallax）

老规矩，先上布局文件：

<?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/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="@android:color/transparent"
            app:statusBarScrim="@android:color/transparent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
            <com.yyydjk.library.BannerLayout
                android:id="@+id/banner"
                android:layout_width="match_parent"
                android:layout_height="160dp"
                app:autoPlayDuration="5000"
                app:indicatorMargin="50dp"
                app:indicatorPosition="centerBottom"
                app:indicatorShape="oval"
                app:indicatorSpace="3dp"
                app:scrollDuration="1100"
                app:defaultImage="@mipmap/ic_launcher"
                app:selectedIndicatorColor="?attr/colorPrimary"
                app:selectedIndicatorHeight="6dp"
                app:selectedIndicatorWidth="6dp"
                app:unSelectedIndicatorColor="#99ffffff"
                app:unSelectedIndicatorHeight="6dp"
                app:unSelectedIndicatorWidth="6dp"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"/>
            <View
                android:id="@+id/view"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:background="@drawable/gradient" />
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:minHeight="?attr/actionBarSize"
                android:gravity="top"
                app:layout_collapseMode="pin"/>
            <FrameLayout
                android:id="@+id/search_tab_container"
                android:layout_width="match_parent"
                android:layout_height="43dp"
                android:layout_marginBottom="-4dp"
                android:layout_gravity="bottom">
                <View
                    android:layout_width="match_parent"
                    android:layout_height="40dp"
                    android:background="#5a000000"
                    android:layout_marginLeft="5dp"
                    android:layout_marginTop="3dp"
                    android:layout_marginBottom="-4dp"
                    android:layout_marginRight="5dp"/>
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="bottom"
                    android:layout_marginBottom="-4dp"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="5dp"
                    android:orientation="horizontal">

                    <View
                        android:id="@+id/slide_bg"
                        android:layout_width="120dp"
                        android:layout_height="43dp"
                        android:background="@drawable/ctrip_slide_tab"/>
                </LinearLayout>
                <RadioGroup
                    android:id="@+id/rg_slide"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal"
                    android:gravity="center"
                    android:layout_centerInParent="true">

                    <RadioButton
                        android:id="@+id/rb_left"
                        android:background="@null"
                        android:textColor="@color/top_layout_sliide_text_color_selector"
                        android:gravity="center"
                        android:button="@null"
                        android:textSize="16dp"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:checked="false"
                        android:text="单程" />

                    <RadioButton
                        android:id="@+id/rb_center"
                        android:background="@null"
                        android:textColor="@color/top_layout_sliide_text_color_selector"
                        android:gravity="center"
                        android:textSize="16dp"
                        android:button="@null"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="往返" />

                    <RadioButton
                        android:id="@+id/rb_right"
                        android:background="@null"
                        android:button="@null"
                        android:textColor="@color/top_layout_sliide_text_color_selector"
                        android:gravity="center"
                        android:textSize="16dp"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:singleLine="true"
                        android:text="多程"
                        android:visibility="visible" />
                </RadioGroup>


            </FrameLayout>
            <LinearLayout
                android:id="@+id/top_container"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:minHeight="?attr/actionBarSize"
                android:orientation="horizontal"
                android:gravity="center"
                android:layout_gravity="top"
                app:layout_collapseMode="pin"
                android:background="@color/ctirp_color_primary">
                <RadioGroup
                    android:layout_width="261dp"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:gravity="center"
                    android:layout_centerInParent="true">

                    <RadioButton
                        android:background="@drawable/title_left_shape"
                        android:padding="6dp"
                        android:textColor="@color/top_layout_text_color_selector"
                        android:gravity="center"
                        android:button="@null"
                        android:textSize="16dp"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:checked="true"
                        android:text="单程" />

                    <RadioButton
                        android:background="@drawable/title_center_shape"
                        android:padding="6dp"
                        android:textColor="@color/top_layout_text_color_selector"
                        android:gravity="center"
                        android:textSize="16dp"
                        android:button="@null"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:layout_marginLeft="-1dp"
                        android:layout_marginRight="-1dp"
                        android:text="往返" />

                    <RadioButton
                        android:background="@drawable/title_right_shape"
                        android:padding="6dp"
                        android:button="@null"
                        android:textColor="@color/top_layout_text_color_selector"
                        android:gravity="center"
                        android:textSize="16dp"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:singleLine="true"
                        android:text="多程"
                        android:visibility="visible" />
                </RadioGroup>
            </LinearLayout>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

       <ImageView
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:src="@drawable/search_bg"
           android:scaleType="fitStart"/>

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

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

当然，除了布局文件，我们在Activity里也要对一些情况进行特殊处理才能完成携程的效果.

首先，我们布局里的广告轮播用了com.yyydjk.library.BannerLayout，github上的开源项目，图片是去携程App上抓出来的。

除此之外，还需要去监听我们整体的滑动过程，通过滑动的位置来为一些控件设置Alpha值从而达到渐变隐藏和显示的效果，这里采用的是为AppBarLayout提供OnOffsetChangedListener监听，这样就可以得到竖直方向的offset

mAppBar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            mSlideView.setAlpha(getAlpha(verticalOffset, appBarLayout.getTotalScrollRange()));
            mTop.setAlpha(1.0f - getAlpha(verticalOffset, appBarLayout.getTotalScrollRange()));
            }
        });
}

就酱，整个仿写的过程就完成了，赶紧编译试试吧，效果还是挺好的。
最后附上源码：github.com/dreamerhome…