当前位置:我的异常网» Web前端 » 三分钟带你仿携程飞机票首页炫酷交互

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

www.myexceptions.net  网友分享于：2013-12-23  浏览：0次

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

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

CoordinatorLayout

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

AppBarLayout

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

CollapsingToolbarLayout

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

老规矩，先上布局文件：

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/coordinatorLayout"

android:layout_width="match_parent"

android:layout_height="match_parent">

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

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

android:id="@+id/view"

android:layout_width="match_parent"

android:layout_height="40dp"

android:background="@drawable/gradient" />

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

android:id="@+id/search_tab_container"

android:layout_width="match_parent"

android:layout_height="43dp"

android:layout_marginBottom="-4dp"

android:layout_gravity="bottom">

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

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

android:id="@+id/slide_bg"

android:layout_width="120dp"

android:layout_height="43dp"

android:background="@drawable/ctrip_slide_tab"/>

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

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="单程" />

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="往返" />

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

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

android:layout_width="261dp"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:gravity="center"

android:layout_centerInParent="true">

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="单程" />

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="往返" />

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

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:layout_behavior="@string/appbar_scrolling_view_behavior">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:src="@drawable/search_bg"

android:scaleType="fitStart"/>

当然，除了布局文件，我们在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()));

}

});

}

就酱，整个仿写的过程就完成了，赶紧编译试试吧，效果还是挺好的。

交流群103791667

文章评论