三分鐘帶你仿攜程機票首頁炫酷交互

前言

最近體驗了一下攜程的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…