CollapsingToolbarLayout 与 TabLayout结合使用实现炫酷效果
来源:互联网 发布:柴可夫斯基妻子知乎 编辑:程序博客网 时间:2024/05/22 10:47
今天我们实现下面的效果
Demo里面主要涉及到好多design包下的控件
在项目中先要引入下面的包
compile 'com.android.support:design:25.0.1'
项目中的整体布局为下面
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="coordinatorlayout.tangyc.fb.com.coordinatorlayoutdemo.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@drawable/meinv"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
app:layout_collapseMode="pin"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
android:layout_gravity="bottom" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
样式如下图所示
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
里面我们就要介绍下面的几个重要的知识点
首先是android:fitsSystemWindows这个的用处,就是把Activity状态栏设置成透明模式。
然后在布局文件中,把CollapsingToolbarLayout里要实现沉浸式的控件设置上android:fitsSystemWindows="true",
如果没有设置(默认为false),则子布局会位于状态栏下方,未延伸至状态栏。
如图所示有个白色的空白(设置android:fitsSystemWindows="false"或者不设置)
然后就是layout_scrollFlags的属性,里面有五个参数scroll,enterAlways,enterAlwaysCollapsed,snap,exitUntilCollapsed。
参数的具体如下
scroll:所有想滚动出屏幕的view都需要设置这个flag,没有设置这个flag的view将被固定在屏幕顶部。比如说,TabLayout没有设置这个值,将会停留在屏幕顶部。
enterAlways:设置时,向下的滚动会导致该view变成可见,启用快速“返回模式”。
enterAlwaysCollapsed:当你的视图已经设置minHeight属性又使用此标志时,你的视图只能已最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
exitUntilCollapsed:滚动退出屏幕,最后折叠在顶端。
sanp:子View的滑动效果的一个吸附效果,子View不会存在局部显示的情况,滚动子View的部分高度,当松开手指时,子View要么向上全部滚出屏幕,要么向下全部滚进屏幕。
最后就是layout_collapseMode的使用,子视图的折叠模式,在子视图设置,有两种方式
“pin”:固定模式,在折叠的时候最后固定在顶端;
“parallax”:视差模式,在折叠的时候会有个视差折叠的效果。
我们现在使用属性app:layout_collapseMode=”parallax”来改变的。
还有一个app:layout_behavior="@string/appbar_scrolling_view_behavior",
它就是指定Behavior的,appbar_scrolling_view_behavior对应的类的名称是:android.support.design.widget.AppBarLayout$ScrollingViewBehavior
第三代码如下代码就没有什么可以描述的的里面有详细的注释
private TabLayout mTabLayout;
private ViewPager mViewPager;
private LayoutInflater mInflater;
private ArrayList<String> mTitles = new ArrayList<>();//页卡标题集合
private View view1, view2;
private ArrayList<View> mViewList = new ArrayList<>();//页卡视图集合
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_scrolling);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//去掉标题
getSupportActionBar().setDisplayShowTitleEnabled(false);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mTabLayout = (TabLayout) findViewById(R.id.tablayout);
mInflater = LayoutInflater.from(this);
view1 = mInflater.inflate(R.layout.item_view, null);
view2 = mInflater.inflate(R.layout.item_view, null);
//添加到View集合
mViewList.add(view1);
mViewList.add(view2);
//添加标题集合
mTitles.add("安卓开发");
mTitles.add("混合开发");
mTabLayout.setTabMode(TabLayout.MODE_FIXED);//设置tab模式,当前为系统默认模式
mTabLayout.addTab(mTabLayout.newTab().setText(mTitles.get(0)));//添加tab选项卡
mTabLayout.addTab(mTabLayout.newTab().setText(mTitles.get(1)));
MyPagerAdapter mAdapter = new MyPagerAdapter(mViewList);
mViewPager.setAdapter(mAdapter);//给ViewPager设置适配器
mTabLayout.setupWithViewPager(mViewPager);//将TabLayout和ViewPager关联起来。
//mTabLayout.setTabsFromPagerAdapter(mAdapter);//给Tabs设置适配器
}
class MyPagerAdapter extends PagerAdapter {
private ArrayList<View> mViewList;
public MyPagerAdapter(ArrayList<View> mViewList) {
this.mViewList = mViewList;
}
@Override
public int getCount() {
return mViewList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(mViewList.get(position));
return mViewList.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mViewList.get(position));
}
@Override
public CharSequence getPageTitle(int position) {
return mTitles.get(position);
}
}
源码已经上传到github
需要源码在微信公众号回复:1221
Android订阅是探讨Android开发的公众号,分享最有价值的Android干货文章
欢迎关注我们,一起讨论技术,扫描和长按下方的二维码可快速关注我们
- CollapsingToolbarLayout 与 TabLayout结合使用实现炫酷效果
- CollapsingToolbarLayout 与 TabLayout结合使用
- CollapsingToolbarLayout 与 TabLayout结合使用
- Tablayout和Viewpager的结合使用,实现导航的效果
- Android使用CollapsingToolbarLayout实现折叠效果
- CollapsingToolbarLayout结合ToolBar使用
- Android 中CollapsingToolbarLayout和Toolbar实现炫酷效果
- Tablayout与ViewPager的结合使用
- Material Design之CollapsingToolbarLayout 和 TabLayout使用
- AppBarLayout+CollapsingToolbarLayout+TabLayout+ViewPager 组合使用
- android新特性:使用CollapsingToolbarLayout实现折叠效果及问题解决
- android新特性:使用CollapsingToolbarLayout实现折叠效果及问题解决
- 使用AppBarLayout+CollapsingToolbarLayout实现自定义工具栏折叠效果
- 使用AppBarLayout+CollapsingToolbarLayout实现自定义工具栏折叠效果
- Tablayout与Viewpage实现联动效果
- ViewPager与TabLayout纵向实现效果
- TabLayout与ViewPager结合
- TabLayout结合ViewPager使用
- Win7下Ant的安装与配置
- iOS编译问题:Property's synthesized getter follows Cocoa naming convention for returning 'owned'
- [Android]安全第五步,看懂汇编(续)
- 最近两年的总结
- 快学Scala(2) 控制结构和函数
- CollapsingToolbarLayout 与 TabLayout结合使用实现炫酷效果
- Android开发之拥有Material Design风格的折叠布局
- 清除浮动
- Minimizing quadratic energies with constant constraints
- XMPP学习1-认识XMPP
- angularJS1 url中携带参数的获取
- Nginx重新编译添加模块
- rep stos dword ptr es:[edi]
- 常用的Mysql数据库操作语句大全