詳解Android使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou實(shí)現(xiàn)手指滑動(dòng)效果
更新時(shí)間：2020年05月22日 09:56:20 作者：文休
這篇文章主要為大家詳細(xì)介紹了Android使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou實(shí)現(xiàn)手指滑動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou實(shí)現(xiàn)手指滑動(dòng)效果
如何使用 CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou實(shí)現(xiàn)下面GIF圖中的效果，再展開的時(shí)候頭像處于紅白中間，根據(jù)收縮程度改變頭像的位置！底下的RecyclerView也跟隨這個(gè)移動(dòng)，不會(huì)出現(xiàn)中間隔出一段距離！（僅提供源碼復(fù)制粘貼，很簡單的）
先看下效果圖：
下面上代碼
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="優(yōu)惠卷"
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滑動(dòng)效果
*/
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);
}
}
});
}
這樣就完成了！
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 詳解Android使用CoordinatorLayout+AppBarLayout實(shí)現(xiàn)拉伸頂部圖片功能
- Android進(jìn)階NestedScroll嵌套滑動(dòng)機(jī)制實(shí)現(xiàn)吸頂效果詳解
- Android RecyclerView實(shí)現(xiàn)吸頂動(dòng)態(tài)效果流程分析
- Android itemDecoration接口實(shí)現(xiàn)吸頂懸浮標(biāo)題
- Android Jetpack Compose實(shí)現(xiàn)列表吸頂效果
- Android實(shí)現(xiàn)上拉吸頂效果
- Android進(jìn)階CoordinatorLayout協(xié)調(diào)者布局實(shí)現(xiàn)吸頂效果
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Android獲取手機(jī)聯(lián)系人信息的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
Android如何利用svg實(shí)現(xiàn)可縮放的地圖控件
這篇文章主要給大家介紹了關(guān)于Android如何利用svg實(shí)現(xiàn)可縮放的地圖控件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01
下面小編就為大家?guī)硪黄仙Ｕ刼nTouch和onTouchEvent(必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
Android自定義短信倒計(jì)時(shí)view流程分析
倒計(jì)時(shí)實(shí)現(xiàn)有三種方式 而這個(gè)自定義view是通過handler實(shí)現(xiàn)的。本文通過實(shí)例代碼給大家介紹Android自定義短信倒計(jì)時(shí)view流程，,需要的朋友可以參考下2020-03-03
這篇文章主要為大家詳細(xì)介紹了Android中Notification通知用法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
Android 如何獲取手機(jī)總內(nèi)存和可用內(nèi)存等信息
這篇文章主要介紹了Android系統(tǒng)檢測程序內(nèi)存占用各種方法,并對內(nèi)存信息的詳細(xì)介紹,需要的朋友可以參考下2016-07-07
Android 事件觸發(fā)機(jī)制的深入學(xué)習(xí)
這篇文章主要介紹了 Android 事件觸發(fā)機(jī)制的深入學(xué)習(xí)的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了AndroidStudio4.1 自定義模板的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
RecyclerView實(shí)現(xiàn)探探卡片滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了RecyclerView實(shí)現(xiàn)探探卡片滑動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
這篇文章主要介紹了Android模擬器的檢測方法,在Android開發(fā)過程中,防作弊一直是老生常談的問題,而模擬器的檢測往往是防作弊中的重要一環(huán),接下來我們來講解有關(guān)于模擬器的檢測方法,需要的朋友可以參考下2024-02-02