android - Android:如何在 CoordinatorLayout 和 LayoutBehaviour 中翻译和展开视图
问题描述
我目前正在我的应用程序中执行以下操作:用户在视图中有两个元素,即图像和很长的文本。当用户滚动文本时,它会根据他的移动上下移动。当它上升时,文本在内部滚动之前上升到图像高度的一半,然后如果它返回,它会向下滚动执行相反的操作。目前我可以重现所有这些,但我唯一的问题是我只能获得翻译。我想为视图的整个可用部分扩展文本视图,而不仅仅是翻译它。
以下是引用当前结果的图像:
Start Position
向上滚动之前是:
End position
向上滚动后是:
我想在向上滚动后获得 NestedScrollView 占用所有空间而不仅仅是翻译,如下所示:
这是我的代码。我使用以编程方式添加的布局行为来执行向上或向下滚动的操作:
import android.content.Context
import android.util.AttributeSet
import android.view.View
import androidx.coordinatorlayout.widget.CoordinatorLayout
import androidx.core.view.ViewCompat
import androidx.core.widget.NestedScrollView
import org.slf4j.Logger
import org.slf4j.LoggerFactory
class CollapseBehavior @JvmOverloads constructor(
context: Context? = null,
attrs: AttributeSet? = null,
private val brandHeaderImage: View
) :
CoordinatorLayout.Behavior<View>(context, attrs) {
private val logger: Logger = LoggerFactory.getLogger(CollapseBehavior::class.java)
private var currentOffset = 0
private var maxOffset = 0
private lateinit var topView: View
// have to accept nested scrolling event to participate in it
override fun onStartNestedScroll(
coordinatorLayout: CoordinatorLayout, child: View, directTargetChild: View,
target: View, axes: Int, type: Int
): Boolean {
topView = brandHeaderImage
maxOffset = topView.height / 2 // tweak maxOffset if needed
return axes == ViewCompat.SCROLL_AXIS_VERTICAL && target is NestedScrollView
}
// this allows us to steal the scrolling distance
// use it to offset NestedScrollView before it gets to scroll
override fun onNestedPreScroll(
coordinatorLayout: CoordinatorLayout, child: View, target: View,
dx: Int, dy: Int, consumed: IntArray, type: Int
) {
logger.debug("Consumed dy: $dy")
if (dy > 0) performOffset(target, dy, consumed)
}
// this allows us to consume remaining scrolling distance
// use it to offset NestedScrollView after it gets scrolled back to start
override fun onNestedScroll(
coordinatorLayout: CoordinatorLayout, child: View, target: View,
dxConsumed: Int, dyConsumed: Int,
dxUnconsumed: Int, dyUnconsumed: Int,
type: Int, consumed: IntArray
) {
logger.debug("Consumed dyUnconsumed: $dyUnconsumed")
if (dyUnconsumed < 0) performOffset(target, dyUnconsumed, consumed)
}
private fun performOffset(target: View, dy: Int, consumed: IntArray) {
val targetOffset = currentOffset + dy
val consumedScroll = targetOffset.coerceIn(0, maxOffset) - currentOffset
currentOffset += consumedScroll
target.translationY = -currentOffset.toFloat()
consumed[1] = consumedScroll
}
}
以下是如何以编程方式设置 layout_behaviour:
val collapseBehavior =
CollapseBehavior(context = activity, view = view)
BrandHeaderUtil.enableLayoutBehaviour(frameImageView, collapseBehavior)
这里是我的 xml:
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/hawkes_blue"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread_inside"
app:title="app test">
<Button
android:id="@+id/reset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|center_vertical"
android:layout_margin="10dp"
android:backgroundTint="@color/white"
android:padding="5dp"
android:text="Reset"
android:textColor="@color/red"
android:textSize="12sp" />
</com.google.android.material.appbar.MaterialToolbar>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/behaviour"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/toolbar">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/imageContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/placeholder_image"
android:fitsSystemWindows="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.core.widget.NestedScrollView
android:id="@+id/scroll"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="bottom"
android:fitsSystemWindows="true"
app:layout_anchor="@id/imageContainer"
app:layout_anchorGravity="bottom"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/advContainer">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:listitem="@layout/button_list" />
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
解决方案
推荐阅读
- javascript - 将值从 HTML/Javascript 传递到 Flask
- postgresql - 如何创建参数化 XPath 查询
- javascript - 如何在javascript中将当前系统日期格式化为DD-MON-YYYY HH12:MI:SS:AM格式
- java - org.postgresql.util.PSQLException:查询没有结果
- api - 如何在 Dart/Flutter 中使用 Flask Server API 将图像作为请求发布?
- c++ - 如何找到 R 包 bsts 的 C++ 代码?
- javascript - 如何在散景热图中删除/添加行并保持行高?
- reactjs - FlatList 中的错误:试图获取超出范围索引 NaN 的帧
- excel - 为列的每个单元格获取特定模式
- javascript - 当 Scroll 可用时,z-index 如何不适用于表 td 内的工具提示?