当前位置:我的异常网» 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
文章评论