详解Android使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou实现手指滑动效果
云丰
本文向大家介绍详解Android使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou实现手指滑动效果，包括了详解Android使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou实现手指滑动效果的使用技巧和注意事项，需要的朋友参考一下
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);
}
}
});
}
这样就完成了！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
类似资料：
-
我正在开发一个应用程序，其中我使用了AppBarLayout和CollapsingToolbarLayout以及NestedScrollView。我已经成功地实现了这一点，并且运行良好。 现在我想做的是，在嵌套滚动视图上滑动(快速向上滑动)时，它应该完全滚动到顶部。类似地，在向屏幕底部滑动(快速向下滑动)时，它必须平滑地滚动到底部。然而现在，它只能卡在中间，这使它看起来很丑。我已经尝试了许多可用的
-
本文向大家介绍详解Android使用CoordinatorLayout+AppBarLayout实现拉伸顶部图片功能，包括了详解Android使用CoordinatorLayout+AppBarLayout实现拉伸顶部图片功能的使用技巧和注意事项，需要的朋友参考一下 一、国际惯例，先看下效果图 二、不跟你多bb直接上布局文件代码 三、上java代码 四、重点在于设置AppBarLayout的Beh
-
这段代码实现类似水果忍者应用中，用户手指在屏幕上划动时出现划痕轨迹的效果，有兴趣的朋友可以研究一下。 [Code4App.com]
-
我使用的是API22上的Android设计库。我想： 有一个工具栏和一个抽屉布局，里面有一个RecycerView 使Drawer布局位于工具栏下方；例如，当工具栏可见时，抽屉的主要内容应该在它下面，（左）抽屉也应该在它下面，这样当它展开时，工具栏仍然可见 当回收器视图向下滚动时，使工具栏从屏幕上滚动
-
本文向大家介绍Android使用Scroller实现弹性滑动效果，包括了Android使用Scroller实现弹性滑动效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Android使用Scroller实现弹性滑动展示的具体代码，供大家参考，具体内容如下 scrollTo、scrollBy View内部为了实现滑动提供了这两个方法，但是使用这两个方法滑动的效果是瞬间的不够平滑，如何
-
本文向大家介绍Android GestureDetector手势滑动使用实例讲解，包括了Android GestureDetector手势滑动使用实例讲解的使用技巧和注意事项，需要的朋友参考一下 Gesture在 ViewGroup中使用 GestureDetector类可以让我们快速的处理手势事件，如点击，滑动等。 使用GestureDetector分三步： 1. 定义GestureDetect