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);
}
}
});
}
这样就完成了！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自学编程网。
