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

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> 

需要注意的是：

1. app:layout_scrollflags="scroll|exituntilcollapsed"——>设置可以滑动且当前view可以一直退出直到折叠视图显现。
2. <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地址>>

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