带货直播源码利用CoordinatorLayout实现炫酷滚动嵌套
带货直播源码利用CoordinatorLayout实现炫酷滚动嵌套的相关代码
CoordinatorLayout作为一个协调器,协调子view之间的交互。通过给子view设置layout_behavior,来决定当其他的view发生交互的时候,视图上如何进行响应。
一般来说,除了一个可滚动的view之外,还需要有AppBarLayout和CollapsingToolbarLayout两个容器,来配合实现各种炫酷的效果:
AppBarLayout:默认设置了behavior,必须作为Coordinatorlayout的直接子view,并将图片和标题设置在其中,其的子view可设置layout_scrollFlags属性,会依据这个属性的取值,在AppBar.Behavior执行不同的响应效果。
CollapsingToolbarLayout:实现可以折叠的标题,必须作为AppbarLayout的子view才能实现大多数效果,子view要配合Toolbar。
先看一个简单的实现,图中有一个图片,一个标题栏,一个列表。跟上面第一张图比较类似:
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".coordinator.CoordinatorActivity"> <com.google.android.material.appbar.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:scaleType="fitXY" app:layout_scrollFlags="scroll" /> <androidx.appcompat.widget.Toolbar android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:title="我是标题" /> </com.google.android.material.appbar.AppBarLayout> <androidx.recyclerview.widget.RecyclerView android:id="@+id/recycleView" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </androidx.coordinatorlayout.widget.CoordinatorLayout>
针对上面的显示方法,先继承实现Coordinatorlayout.Behavior,实现其中两个方法:
layoutDependsOn:判断给定的view和同级view是否是依赖关系。
onDependentViewChanged:根据依赖的视图变化作出变化。
package com.example.mytest.coordinator.behavior import android.content.Context import android.util.AttributeSet import android.view.View import android.widget.Button import android.widget.TextView import androidx.coordinatorlayout.widget.CoordinatorLayout import com.example.mytest.Utils.px class MyBehavior(context: Context, attrs: AttributeSet) : CoordinatorLayout.Behavior<TextView>(context, attrs) { override fun layoutDependsOn( parent: CoordinatorLayout, child: TextView, dependency: View ): Boolean { return dependency is Button } override fun onDependentViewChanged( parent: CoordinatorLayout, child: TextView, dependency: View ): Boolean { child.x = dependency.x child.y = dependency.y + 50.px return true } }
xml布局:
<?xml version="1.0" encoding="utf-8"?> <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".coordinator.CoordinatorActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" app:layout_behavior=".coordinator.behavior.MyBehavior" /> <Button android:id="@+id/btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="Button" /> </androidx.coordinatorlayout.widget.CoordinatorLayout>
最后,设置一下button的移动:
btn.setOnTouchListener { v, event -> if(event.action==MotionEvent.ACTION_MOVE){ v.x=event.rawX-v.width/2 v.y=event.rawY-v.height/2 } true }
以上就是 带货直播源码利用CoordinatorLayout实现炫酷滚动嵌套的相关代码,更多内容欢迎关注之后的文章