1.背景
在项目开发过程中,有时候会碰到这样的需求:在滑动的过程中,在某时要将子view固定在顶部(常见的是将界面中的tab在滑动到顶部的时候进行固定)。
之前写过一篇滑动组件悬浮固定在顶部的文章,但感觉还是有些复杂,因此就有了这次的实现。效果图:
2.思路
(CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout)+TabLayout+ViewPager
3.代码实现
a.主布局代码
<?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="com.ganshenml.slideholdsmoothdemo.ScrollingActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="wrap_content" 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="wrap_content" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:titleEnabled="false"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="30dp" app:popupTheme="@style/AppTheme.PopupOverlay"></android.support.v7.widget.Toolbar> <ImageView android:layout_width="match_parent" android:layout_height="280dp" android:scaleType="centerCrop" android:src="@drawable/bg" /> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="30dp" android:layout_gravity="bottom" android:background="@color/colorAccent"></android.support.design.widget.TabLayout> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_scrolling" /> </android.support.design.widget.CoordinatorLayout>
需要注意的是:
b.主界面Activity代码
public class ScrollingActivity extends AppCompatActivity { private TabLayout tabLayout; private ViewPager viewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_scrolling); initViews(); } private void initViews() { tabLayout = (TabLayout) findViewById(R.id.tabLayout); viewPager = (ViewPager) findViewById(R.id.viewPager); viewPager.setOffscreenPageLimit(2); viewPager.setAdapter(new MPagerAdapter(getSupportFragmentManager())); tabLayout.setupWithViewPager(viewPager); } }
c.适配器MPagerAdapter代码
public class MPagerAdapter extends FragmentStatePagerAdapter { private String[] tabTitle = new String[]{"tab01", "tab02"}; private FirstFragment firstFragment; private SecondFragment secondFragment; public MPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { if (position == 0) { if (firstFragment == null) { firstFragment = new FirstFragment(); } return firstFragment; } else if (position == 1) { if (secondFragment == null) { secondFragment = new SecondFragment(); } return secondFragment; } return null; } @Override public int getCount() { return tabTitle.length; } @Override public CharSequence getPageTitle(int position) { return tabTitle[position]; } }
两个Fragment的代码非常简单。仅仅加载布局而已,所以在此就不贴出来了。
4.扩展
a.关于CollapsingToolbarLayout中子view的排列顺序对显示结果造成的影响
如图:
可以看到图中黑色边框显示的内容不一致,因此ToolBar和ImageView的排列顺序会对视图的显示结果造成影响。
推测——>CollapsingToolbarLayout中以上三种view不同排序的剖面展示效果为:
顺序:Toolbar——>ImageView——>TabLayout(设置layout_gravity="bottom")
顺序:ImageView——>Toolbar——>TabLayout(设置layout_gravity="bottom")
不负责任滴猜测:把Toolbar看做一张画布,只有覆盖在画布投射区域范围内的内容才显示出来在该画布内。
(因此,1.在画布下的内容就无法显示出来;2.无法覆盖画布的内容就显示为画布默认的样式)
所以,如果不想要有视差效果的话,那么就将Toolbar与TabLayout的高度设置一致。如果将Toolbar去掉,那么所有的CollapsingToolbarLayout中的View都会滑出界面,此时布局就变成了普通布局了(相当于CollapsingToolbarLayout变成了CollapsingLayout)。
b.去掉Toolbar实现固定效果
<android.support.design.widget.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="wrap_content" 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="wrap_content" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:titleEnabled="false"> <ImageView android:layout_width="match_parent" android:layout_height="280dp" android:scaleType="centerCrop" android:src="@drawable/bg" /> </android.support.design.widget.CollapsingToolbarLayout> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="30dp" android:layout_gravity="top" android:background="@color/colorAccent"></android.support.design.widget.TabLayout> </android.support.design.widget.AppBarLayout>
只要将TabLayout从CollapsingToolbarLayout中移到AppBarLayout的一级子View即可。
(这样也避免了:在CollapsingToolbarLayout中,因为视图折叠覆盖的问题,会导致整个ImageView被TabLayout覆盖一部分而显示不完全的问题。)
查看完整代码,点击:GitHub地址>>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍vue+jquery+lodash实现滑动时顶部悬浮固定效果,包括了vue+jquery+lodash实现滑动时顶部悬浮固定效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了vue实现滑动时顶部悬浮固定效果的具体代码,供大家参考,具体内容如下 这个效果是一个项目中抽出来的一个demo效果。 前期准备: 1. 引入jQ 引入lodash.js fixTop.vue组件的
本文向大家介绍JS实现自动固定顶部的悬浮菜单栏效果,包括了JS实现自动固定顶部的悬浮菜单栏效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS实现自动固定顶部的悬浮菜单栏效果。分享给大家供大家参考。具体如下: 这是一款自动固定顶部的悬浮菜单栏代码,不管你如何拉动滚动条,它会始终显示在网页的最顶部,用作网站的顶级导航或公告之类的比较合适吧。 运行效果截图如下: 在线演示地址如下: htt
模仿大众点评网的团购页面,整体布局滑动到顶端时,信息描述的view停止在顶端,其他布局仍可滑动。在demo中的表现是:白色视图往上滑动接近屏幕顶端时,将停止(表现为表层出现一个暗红色的视图)滑动,底部的视图继续往上移动。底部视图往下移动时,当滑动到一定位置时(表现为底部的白色视图和暗红色视图重合),白色视图将继续移动。 [Code4App.com]
本文向大家介绍android通过自定义toast实现悬浮通知效果的示例代码,包括了android通过自定义toast实现悬浮通知效果的示例代码的使用技巧和注意事项,需要的朋友参考一下 android通过toast实现悬浮通知效果,如图: 实现的功能: 自定义悬浮弹窗; 点击其他地方该布局不受影响; 可自定义显示时间; 可以设置点击事件; 代码如下: xml布局: 点九格式图片: 使用方法: ac
本文向大家介绍Android实现桌面悬浮窗、蒙板效果实例代码,包括了Android实现桌面悬浮窗、蒙板效果实例代码的使用技巧和注意事项,需要的朋友参考一下 现在很多安全类的软件,比如360手机助手,百度手机助手等等,都有一个悬浮窗,可以飘浮在桌面上,方便用户使用一些常用的操作。 今天这篇文章,就是介绍如何实现桌面悬浮窗效果的。 首先,看一下效果图。 悬浮窗一共分为两个部分,一个是平常显示的小窗口,
本文向大家介绍Android实现顶部悬浮效果,包括了Android实现顶部悬浮效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Android实现顶部悬浮效果的具体代码,供大家参考,具体内容如下 效果图 布局 java 注意事项 1.清单文件需要配置 2.gradle配置需要24以上 3.recyclerView的下滑和swipRefreshLayout的下拉刷新会冲突,所以需要