带货直播源码利用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实现炫酷滚动嵌套的相关代码,更多内容欢迎关注之后的文章

上一篇:Hexo折腾记


下一篇:程序依赖图(Program Dependency Graph)