Android新特性之TabLayout+ViewPager悬停
来源:互联网 发布:知乎电子书 kindle 编辑:程序博客网 时间:2024/06/05 14:29
栗子惯例,先上GIF
用到的控件
使用以下控件1,2,3需要在Gradle加入Support Design Library:
compile 'com.android.support:design:25.0.1'
- CoordinatorLayout
CoordinatorLayout
通过协调子布局的形式,产生联动效果。通过设置子View的Behaviors来协调子View。 - AppBarLayout
AppBarLayout
中的一个属性android:fitsSystemWindows="true"
,是为了调整系统窗口布局以适应布局。AppBarLayout
里面的View,是通过app:layout_scrollFlags
属性来控制,其中有4种Flag的类型:Scroll
:向下滚动时,被指定了这个属性的View会被滚出屏幕范围直到完全不可见的位置。enterAlways
:向上滚动时,这个View会随着滚动手势出现,直到恢复原来的位置。enterAlwaysCollapsed
: 当视图已经设置minHeight属性又使用此标志时,视图只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。exitUntilCollapsed
: 滚动退出屏幕,最后折叠在顶端。 CollapsingToolbarLayout
用来协调AppBarLayout
来实现滚动隐藏ToolBar
的效果。Toolbar
Toolbar在v7包中,设置layout_collapseMode
协调CollapsingToolbarLayout
达到滑动视图的视觉差效果:pin
:固定模式,在折叠的时候最后固定在顶端。parallax
:视差模式,在折叠的时候会有个视差折叠的效果。
核心代码xml
<?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:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" app:theme="@style/ToolbarTheme" android:fitsSystemWindows="true"> <!--app:layout_scrollFlags="scroll|enterAlways"--> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsingToolbar" android:layout_width="match_parent" android:layout_height="match_parent" app:contentScrim="?attr/colorPrimary" app:navigationIcon="@mipmap/back" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:scaleType="centerInside" app:layout_collapseMode="parallax" android:fitsSystemWindows="true" android:orientation="vertical"> <ImageView android:background="@mipmap/image" android:layout_width="match_parent" android:layout_height="200dp" /> </LinearLayout> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:titleTextColor="#ffffff" app:theme="@style/ToolbarTheme" android:gravity="center_vertical" android:background="#00ffffff" app:navigationIcon="@mipmap/back" app:layout_collapseMode="pin" app:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.CollapsingToolbarLayout> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/selector_list_item" app:tabIndicatorColor="#666666" app:tabSelectedTextColor="#4D4D4D" app:tabTextColor="#A7A7A7" /> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_behavior="@string/appbar_scrolling_view_behavior" /></android.support.design.widget.CoordinatorLayout>
这里有几个注意的地方AppBarLayout
加入android:fitsSystemWindows="true"
CollapsingToolbarLayout
加入app:layout_scrollFlags="scroll|exitUntilCollapsed
Toolbar
加入app:layout_collapseMode="pin"
ViewPager
加入app:layout_behavior="@string/appbar_scrolling_view_behavior"
ViewPager
中需要用RecyclerView
做为列表
总结:这是Android的新特提供的一种炫酷组合控件~顶部的图片可以换成任意的View,比如Banner图等。
GitHub地址
1 0
- Android新特性之TabLayout+ViewPager悬停
- Android 新特性 - TabLayout
- Android之ViewPager显示应用新特性
- Android之ViewPager显示应用新特性
- Android之ViewPager显示应用新特性 (转)
- Android 开发之 TabLayout + ViewPager 的使用
- Android学习之TabLayout和ViewPager
- Tablayout+ViewPager+Fragment(Android)
- Android---Tablayout+ViewPager
- Android Material Design系列之Tablayout,Fragment,Viewpager搭配使用
- Android底部导航栏实现(四)之TabLayout+ViewPager
- Android之TabLayout+ViewPager+Fragment实现标题栏与页面联动
- Material之TabLayout与ViewPager
- MaterialDesign 之TabLayout和ViewPager
- Material Design之TabLayout+ViewPager
- 底部导航之TabLayout+ViewPager
- android TabLayout+ViewPager配合使用
- Android之4.0新特性
- JavaScript:数组大全
- Android 四大组件之Service 5.0版本
- Kafka 之 入门
- HTML5简单轮播的实现(使用JQuery)
- wnidows api 模拟鼠标拖动
- Android新特性之TabLayout+ViewPager悬停
- java基础3-集合类接口
- Android四大组件之BroadcastReceiver的使用
- Codeforces Round #409 div2 C
- .net的TreeView控件绑定数据库表建立树架构
- Centos7.2安装详解
- 在MYSQL上添加TokuDB引擎
- JAVA——字符串String
- 利用canvas,把多张图合并成一张图片