欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

详解Android使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou实现手指滑动效果

程序员文章站 2022-11-23 10:30:24
coordinatorlayout+appbarlayout+collapsingtoolbarlayou实现手指滑动效果如何使用 coordinatorlayout+appbarlayout+col...

coordinatorlayout+appbarlayout+collapsingtoolbarlayou实现手指滑动效果

如何使用 coordinatorlayout+appbarlayout+collapsingtoolbarlayou实现下面gif图中的效果，再展开的时候头像处于红白中间，根据收缩程度改变头像的位置！底下的recyclerview也跟随这个移动，不会出现中间隔出一段距离！（仅提供源码复制粘贴，很简单的）

先看下效果图：

详解Android使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou实现手指滑动效果

下面上代码

xml布局代码如下：

<?xml version="1.0" encoding="utf-8"?>
<linearlayout 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:orientation="vertical">

  <android.support.design.widget.coordinatorlayout
    android:id="@+id/fragment_ontstf_coordinatorlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipchildren="false">

    <android.support.design.widget.appbarlayout
      android:id="@+id/fragment_ontstf_appbar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@color/cff3523"
      android:clipchildren="false"
      app:elevation="0dp">

      <android.support.design.widget.collapsingtoolbarlayout
        android:id="@+id/fragment_ontstf_collapsingtoolbarlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollflags="scroll|exituntilcollapsed">

        <relativelayout
          android:id="@+id/fragment_ontstf_relativelayout"
          android:layout_width="match_parent"
          android:layout_height="200dp"
          android:orientation="horizontal"
          app:layout_collapsemode="parallax"
          app:layout_collapseparallaxmultiplier="0.25">

          <android.support.v7.widget.cardview
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_centervertical="true"
            android:layout_gravity="center"
            android:layout_marginleft="15dp"
            android:layout_marginright="15dp"
            app:cardcornerradius="5dp"
            app:cardelevation="5dp">

            <linearlayout
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="horizontal">

              <linearlayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="vertical">

                <textview
                  android:layout_width="match_parent"
                  android:layout_height="0dp"
                  android:layout_weight="1"
                  android:gravity="center_horizontal|bottom"
                  android:text="331"
                  android:textcolor="@color/c333333"
                  android:textsize="16sp" />

                <textview
                  android:layout_width="match_parent"
                  android:layout_height="0dp"
                  android:layout_weight="1"
                  android:gravity="center_horizontal"
                  android:text="积分"
                  android:textcolor="@color/c333333"
                  android:textsize="10sp" />

              </linearlayout>

              <view
                android:layout_width="0.7px"
                android:layout_height="40dp"
                android:layout_gravity="center_vertical"
                android:background="#727272"></view>

              <linearlayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="vertical">

                <textview
                  android:layout_width="match_parent"
                  android:layout_height="0dp"
                  android:layout_weight="1"
                  android:gravity="center_horizontal|bottom"
                  android:text="5"
                  android:textcolor="@color/c333333"
                  android:textsize="16sp" />

                <textview
                  android:layout_width="match_parent"
                  android:layout_height="0dp"
                  android:layout_weight="1"
                  android:gravity="center_horizontal"
                  android:text="优惠卷"
                  android:textcolor="@color/c333333"
                  android:textsize="10sp" />

              </linearlayout>

              <view
                android:layout_width="0.7px"
                android:layout_height="40dp"
                android:layout_gravity="center_vertical"
                android:background="#727272"></view>

              <linearlayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="vertical">

                <textview
                  android:layout_width="match_parent"
                  android:layout_height="0dp"
                  android:layout_weight="1"
                  android:gravity="center_horizontal|bottom"
                  android:text="0.00"
                  android:textcolor="@color/c333333"
                  android:textsize="16sp" />

                <textview
                  android:layout_width="match_parent"
                  android:layout_height="0dp"
                  android:layout_weight="1"
                  android:gravity="center_horizontal"
                  android:text="代金卷"
                  android:textcolor="@color/c333333"
                  android:textsize="10sp" />

              </linearlayout>

              <view
                android:layout_width="0.7px"
                android:layout_height="40dp"
                android:layout_gravity="center_vertical"
                android:background="#727272"></view>

              <linearlayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="vertical">

                <textview
                  android:layout_width="match_parent"
                  android:layout_height="0dp"
                  android:layout_weight="1"
                  android:gravity="center_horizontal|bottom"
                  android:text="3314"
                  android:textcolor="@color/c333333"
                  android:textsize="16sp" />

                <textview
                  android:layout_width="match_parent"
                  android:layout_height="0dp"
                  android:layout_weight="1"
                  android:gravity="center_horizontal"
                  android:text="淘币"
                  android:textcolor="@color/c333333"
                  android:textsize="10sp" />

              </linearlayout>

            </linearlayout>

          </android.support.v7.widget.cardview>

        </relativelayout>

        <relativelayout
          android:layout_width="match_parent"
          android:layout_height="50dp"
          android:background="@color/cff3523"
          android:gravity="center_vertical"
          app:layout_collapsemode="pin">

          <imageview
            android:id="@+id/fragment_ontstf_set"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginright="10dp"
            android:layout_toleftof="@id/fragment_ontstf_message"
            android:src="@mipmap/set" />

          <imageview
            android:id="@+id/fragment_ontstf_message"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignparentright="true"
            android:layout_marginright="10dp"
            android:src="@mipmap/message" />

        </relativelayout>

        <android.support.v7.widget.toolbar
          android:id="@+id/fragment_ontstf_toolbar"
          android:layout_width="match_parent"
          android:layout_height="?attr/actionbarsize"
          app:contentinsetstart="0dp"
          app:layout_collapsemode="pin">

          <linearlayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:padding="5dp">

            <de.hdodenhof.circleimageview.circleimageview
              android:id="@+id/fragment_ontstf_portrait"
              android:layout_width="45dp"
              android:layout_height="45dp"
              android:layout_gravity="center_vertical"
              android:src="@mipmap/ic_launcher_round" />

            <linearlayout
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

              <textview
                android:id="@+id/fragment_ontstf_name"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:layout_marginleft="10dp"
                android:textsize="18sp" />

              <textview
                android:id="@+id/fragment_ontstf_introduce"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:layout_marginleft="10dp"
                android:layout_marginbottom="5dp"
                android:textsize="14sp" />

            </linearlayout>

          </linearlayout>

        </android.support.v7.widget.toolbar>

      </android.support.design.widget.collapsingtoolbarlayout>

    </android.support.design.widget.appbarlayout>

    <android.support.v7.widget.recyclerview
      android:id="@+id/fragment_ontstf_recyclerview"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="@color/c00000000"
      app:layout_behavior="@string/appbar_scrolling_view_behavior"></android.support.v7.widget.recyclerview>

  </android.support.design.widget.coordinatorlayout>

</linearlayout>

java代码如下：

 /**
   * 获取控件信息
   */
 private void initview() {
    fragmentontstfappbar = (appbarlayout) view.findviewbyid(r.id.fragment_ontstf_appbar);
    fragmentontstftoolbar = (toolbar) view.findviewbyid(r.id.fragment_ontstf_toolbar);
    fragmentontstfportrait = (circleimageview) view.findviewbyid(r.id.fragment_ontstf_portrait);
    fragmentontstfname = (textview) view.findviewbyid(r.id.fragment_ontstf_name);
    fragmentontstfintroduce = (textview) view.findviewbyid(r.id.fragment_ontstf_introduce);
    fragmentontstfcollapsingtoolbarlayout = (collapsingtoolbarlayout) view.findviewbyid(r.id.fragment_ontstf_collapsingtoolbarlayout);
    fragmentontstfset = (imageview) view.findviewbyid(r.id.fragment_ontstf_set);
    fragmentontstfmessage = (imageview) view.findviewbyid(r.id.fragment_ontstf_message);
    fragmentontstfrecyclerview = (recyclerview) view.findviewbyid(r.id.fragment_ontstf_recyclerview);
    fragmentontstfcoordinatorlayout = (coordinatorlayout) view.findviewbyid(r.id.fragment_ontstf_coordinatorlayout);
    fragmentontstfrelativelayout = (relativelayout) view.findviewbyid(r.id.fragment_ontstf_relativelayout);
    setfragmentontstfrecyclerview();
    appbar();
    mpresenter.pselectuser(userid);
  }

  /**
   * 最主要的代码
   * appbar滑动效果
   */
  private void appbar() {
    fragmentontstfappbar.setexpanded(true);
    fragmentontstfappbar.addonoffsetchangedlistener(new appbarlayout.onoffsetchangedlistener() {
      @override
      public void onoffsetchanged(appbarlayout appbarlayout, int i) {
        float alpha = (float) math.abs(i) / appbarlayout.gettotalscrollrange();
        if (alpha == 0) {
          collapsingtoolbarlayout.layoutparams layoutparams = new collapsingtoolbarlayout.layoutparams(viewgroup.layoutparams.match_parent, viewgroup.layoutparams.wrap_content);
          fragmentontstfrecyclerview.setpadding(0,fragmentontstftoolbar.getheight() / 2,0,0);
          layoutparams.setmargins(0, 0, 0, (-fragmentontstftoolbar.getheight() / 2));
          layoutparams.gravity = gravity.bottom;
          fragmentontstftoolbar.setlayoutparams(layoutparams);
          fragmentontstfcoordinatorlayout.setclipchildren(false);
        } else if (fragmentontstfrelativelayout.getheight() - math.abs(i * 1.0f) == fragmentontstftoolbar.getheight()) {
          fragmentontstfcoordinatorlayout.setclipchildren(true);
        } else {
          int a = (int) ((fragmentontstftoolbar.getheight() / 2) * alpha);
          collapsingtoolbarlayout.layoutparams layoutparams = new collapsingtoolbarlayout.layoutparams(viewgroup.layoutparams.match_parent, viewgroup.layoutparams.wrap_content);
          fragmentontstfrecyclerview.setpadding(0,fragmentontstftoolbar.getheight() / 2 - a,0,0);
          layoutparams.setmargins(0, 0, 0, -(fragmentontstftoolbar.getheight() / 2) - (-a));
          layoutparams.gravity = gravity.bottom;
          fragmentontstftoolbar.setlayoutparams(layoutparams);
          fragmentontstfcoordinatorlayout.setclipchildren(false);
        }
      }
    });
  }

这样就完成了！

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

相关标签： Android 手指滑动

上一篇： 家庭第一入口，果加智能门锁领跑品质生活

下一篇： 安装ssl证书后报错Caused by: java.io.IOException: DerInputStream.getLength(): lengthTag=109, too big.

推荐阅读