详解Android使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou实现手指滑动效果
程序员文章站
2022-04-28 21:01:21
coordinatorlayout+appbarlayout+collapsingtoolbarlayou实现手指滑动效果如何使用 coordinatorlayout+appbarlayout+col...
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开发之使用150行代码实现滑动返回效果
-
Android Studio 使用ViewPager + Fragment实现滑动菜单Tab效果 --简易版
-
Android实现左右滑动效果的方法详解
-
Android使用ViewPager实现图片滑动预览效果
-
详解Android使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou实现手指滑动效果
-
Android如何使用ViewPager2实现页面滑动切换效果
-
android中使用Activity实现监听手指上下左右滑动
-
Android Studio使用ViewPager+Fragment实现滑动菜单Tab效果
-
android使用TabLayout+NestedScrollView 实现详情界面tab页 关联 上下滑动视图的效果
-
Android Studio 使用ViewPager + Fragment实现滑动菜单Tab效果 --简易版