android汽车之家顶部滑动菜单,详解Android使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou实现手指滑动效果...

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

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

先看下效果图：

下面上代码

XML布局代码如下：

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:id="@+id/Fragment_ontstf_CoordinatorLayout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:clipChildren="false">

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:id="@+id/Fragment_ontstf_CollapsingToolbarLayout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:layout_scrollFlags="scroll|exitUntilCollapsed">

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: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">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="horizontal">

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1"

android:orientation="vertical">

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" />

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" />

android:layout_width="0.7px"

android:layout_height="40dp"

android:layout_gravity="center_vertical"

android:background="#727272">

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1"

android:orientation="vertical">

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" />

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" />

android:layout_width="0.7px"

android:layout_height="40dp"

android:layout_gravity="center_vertical"

android:background="#727272">

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1"

android:orientation="vertical">

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" />

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" />

android:layout_width="0.7px"

android:layout_height="40dp"

android:layout_gravity="center_vertical"

android:background="#727272">

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1"

android:orientation="vertical">

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" />

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" />

android:layout_width="match_parent"

android:layout_height="50dp"

android:background="@color/cFF3523"

android:gravity="center_vertical"

app:layout_collapseMode="pin">

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" />

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" />

android:id="@+id/Fragment_ontstf_Toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

app:contentInsetStart="0dp"

app:layout_collapseMode="pin">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="horizontal"

android:padding="5dp">

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" />

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

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" />

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" />

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">

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);

}

}

});

}

这样就完成了！

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