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

Grace ·

更新时间:2024-09-21

· 573 次阅读

CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou实现手指滑动效果

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

先看下效果图：

下面上代码

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中View跟随手指滑动效果的实例代码Android通过ImageView设置手指滑动控件缩放Android视频播放器屏幕左侧边随手指上下滑动亮度调节功能的原理实现Android中解决页签手指按下从左到右滑动的bug封装的android监听手指左右滑动屏幕的事件类分享android中使用Activity实现监听手指上下左右滑动

coordinatorlayout appbarlayout 动效 Android

1024 个赞