Android view滑动悬浮固定效果实现代码示例

概述1.背景在项目开发过程中，有时候会碰到这样的需求：在滑动的过程中，在某时要将子view固定在顶部（常见的是将界面中的tab在滑动到顶部的时候进行固定）。

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> 

需要注意的是：

app:layout_scrollFlags="scroll|exitUntilCollapsed"――>设置可以滑动且当前vIEw可以一直退出直到折叠视图显现。 <include layout="@layout/content_scrolling" />――>引用的子vIEw布局其实就是一个VIEwPager（需要注意的是要在布局中设置：app:layout_behavior="@string/appbar_scrolling_vIEw_behavior"）

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地址>>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android view滑动悬浮固定效果实现代码示例全部内容，希望文章能够帮你解决Android view滑动悬浮固定效果实现代码示例所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。