三分钟带你模仿携程机票首页酷炫互动
前言
最近体验了一下携程的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…
上一篇: 礼品卡生成代码
推荐阅读