- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试实现这个播放器动画
我还希望能够在折叠和展开时同时滑动歌曲。所以想法是使用 MotionLayout
与 RecyclerView
, 并且还有 RecyclerView
的每一项成为 MotionLayout
.这样我可以在 RecyclerView
上应用展开动画并对它的 child 应用过渡。
如附加视频中所示,过渡本身可以正常工作。但是要在 RecyclerView
上工作本身没有。
仅当触摸从 RecyclerView
外部开始时才会检测到拖动。如视频中突出显示的触摸所示,触摸从 RecyclerView
下方开始.
如果触摸开始于 RecyclerView
,歌曲的滚动消耗事件。甚至禁用附带的 LinearLayoutManager
中的滚动不起作用。我也尝试过覆盖 onTouch
对于RecyclerView
总是返回 false
并且不消耗任何触摸事件(理论上),但这也不起作用。
该项目可以在这里找到 https://github.com/vlatkozelka/PlayerAnimation2
它并不意味着是一个生产就绪的应用程序,只是一个测试游乐场。
这是相关代码
布局 :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout 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"
android:background="@color/colorPrimary"
app:layoutDescription="@xml/player_scene"
tools:context=".MainActivity"
android:id="@+id/layout_main"
>
<FrameLayout
android:id="@+id/layout_player"
android:layout_width="match_parent"
android:layout_height="@dimen/mini_player_height"
android:elevation="2dp"
app:layout_constraintBottom_toTopOf="@id/layout_navigation"
app:layout_constraintStart_toStartOf="parent"
android:background="@color/dark_grey"
android:focusable="true"
android:clickable="true"
>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_songs"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="false"
android:clickable="false"
/>
</FrameLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/layout_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/dark_grey"
android:padding="5dp"
android:weightSum="3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:id="@+id/iv_home"
android:layout_width="0dp"
android:layout_height="34dp"
android:layout_weight="1"
android:tint="#fff"
app:layout_constraintEnd_toStartOf="@id/iv_search"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/ic_home_24px" />
<ImageView
android:id="@+id/iv_search"
android:layout_width="0dp"
android:layout_height="34dp"
android:layout_weight="1"
android:tint="#fff"
app:layout_constraintEnd_toStartOf="@id/iv_library"
app:layout_constraintStart_toEndOf="@id/iv_home"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/ic_search_24px" />
<ImageView
android:id="@+id/iv_library"
android:layout_width="0dp"
android:layout_height="34dp"
android:layout_weight="1"
android:tint="#fff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/iv_search"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/ic_library_music_24px" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.motion.widget.MotionLayout>
动态场景 :
<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<Transition
android:id="@+id/dragUp"
app:constraintSetEnd="@id/expanded"
app:constraintSetStart="@id/collapsed">
<OnSwipe
app:dragDirection="dragUp"
app:touchRegionId="@id/layout_player" />
<OnClick
app:clickAction="transitionToEnd"
app:targetId="@id/layout_player" />
</Transition>
<Transition
android:id="@+id/dragDown"
app:constraintSetEnd="@id/collapsed"
app:constraintSetStart="@id/expanded">
<OnSwipe
app:dragDirection="dragDown"
app:touchRegionId="@id/layout_player" />
<OnClick
app:clickAction="transitionToEnd"
app:targetId="@id/layout_player" />
</Transition>
<ConstraintSet android:id="@+id/collapsed">
<Constraint
android:id="@+id/layout_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/dark_grey"
android:orientation="horizontal"
android:padding="5dp"
android:weightSum="3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Constraint
android:id="@+id/layout_player"
android:layout_width="match_parent"
android:layout_height="@dimen/mini_player_height"
android:elevation="2dp"
app:layout_constraintBottom_toTopOf="@id/layout_navigation"
app:layout_constraintStart_toStartOf="parent" />
</ConstraintSet>
<ConstraintSet android:id="@+id/expanded">
<Constraint
android:id="@+id/layout_navigation"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="@color/dark_grey"
android:orientation="horizontal"
android:padding="5dp"
android:weightSum="3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent" />
<Constraint
android:id="@+id/layout_player"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="2dp"
app:layout_constraintBottom_toTopOf="@id/layout_navigation"
app:layout_constraintStart_toStartOf="parent" />
</ConstraintSet>
</MotionScene>
主要 Activity :
package com.example.playeranimation2
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import androidx.constraintlayout.motion.widget.MotionLayout
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.PagerSnapHelper
import androidx.recyclerview.widget.RecyclerView
import androidx.viewpager2.widget.ViewPager2
import io.reactivex.subjects.PublishSubject
import org.notests.sharedsequence.Driver
data class AppState(
val songs: List<Song> = Song.getRandomSongs(),
val currentSong: Int = 0,
val expandedPercent: Float = 0f
)
class MainActivity : AppCompatActivity() {
companion object {
var appState = AppState()
val appStateObservable = PublishSubject.create<AppState>()
val appStateDriver = Driver(appStateObservable.startWith(appState))
}
lateinit var mainLayout: MotionLayout
lateinit var songsRecycler: RecyclerView
lateinit var playerLayout : ViewGroup
lateinit var adapter: SongsAdapter
lateinit var snapHelper: PagerSnapHelper
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
mainLayout = findViewById(R.id.layout_main)
songsRecycler = findViewById(R.id.recycler_songs)
playerLayout = findViewById(R.id.layout_player)
songsRecycler.layoutManager = LinearLayoutManager(this).apply { orientation = LinearLayoutManager.HORIZONTAL }
adapter = SongsAdapter()
songsRecycler.adapter = adapter
adapter.refreshData(appState.songs)
snapHelper = PagerSnapHelper()
snapHelper.attachToRecyclerView(songsRecycler)
mainLayout.setTransitionListener(object : MotionLayout.TransitionListener {
override fun onTransitionTrigger(p0: MotionLayout?, p1: Int, p2: Boolean, p3: Float) {
}
override fun onTransitionStarted(p0: MotionLayout?, p1: Int, p2: Int) {
}
override fun onTransitionChange(p0: MotionLayout?, p1: Int, p2: Int, p3: Float) {
if (p1 == R.id.expanded) {
appState = appState.copy(expandedPercent = 1f - p3)
} else {
appState = appState.copy(expandedPercent = p3)
}
emitNewAppState()
adapter.expandedPercent = appState.expandedPercent
updateAllRecyclerChildren()
}
override fun onTransitionCompleted(p0: MotionLayout?, p1: Int) {
}
})
songsRecycler.addOnScrollListener(object: RecyclerView.OnScrollListener(){
override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
super.onScrolled(recyclerView, dx, dy)
updateAllRecyclerChildren()
}
})
}
fun updateAllRecyclerChildren(){
for (i in appState.songs.indices) {
val childView = songsRecycler.getChildAt(i)
if(childView != null){
val songViewHolder = songsRecycler.getChildViewHolder(childView) as? SongsAdapter.SongViewHolder
songViewHolder?.setExpandPercent(appState.expandedPercent)
}
}
}
fun emitNewAppState() {
appStateObservable.onNext(appState)
}
class SongsAdapter : RecyclerView.Adapter<SongsAdapter.SongViewHolder>() {
val data = arrayListOf<Song>()
var expandedPercent : Float = 0f
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): SongViewHolder {
val view = LayoutInflater.from(parent.context).inflate(R.layout.item_song, parent, false)
return SongViewHolder(view)
}
override fun getItemCount(): Int {
return data.size
}
override fun onBindViewHolder(holder: SongViewHolder, position: Int) {
holder.bind(data[position], expandedPercent)
}
fun refreshData(data: List<Song>) {
this.data.clear()
this.data.addAll(data)
}
class SongViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
var songImageView: ImageView? = itemView.findViewById(R.id.iv_cover_art)
var songTitleView: TextView? = itemView.findViewById(R.id.tv_song_title)
var rootView: MotionLayout? = itemView.findViewById(R.id.root_view)
fun bind(song: Song, expandedPercent: Float) {
songImageView?.setImageResource(song.imageRes)
songTitleView?.text = song.title
setExpandPercent(expandedPercent)
}
fun setExpandPercent(percent: Float) {
rootView?.setInterpolatedProgress(percent)
}
}
}
}
知道如何获得
RecyclerView
和
MotionLayout
一起玩拖动手势?
最佳答案
我遇到了同样的问题,我被困了超过 5 天,最后,我找到了一个可能适合你的简单解决方案。
问题是当用户触摸屏幕并且没有将其转发到运动布局以应用滑动动画时,回收器 View 获得焦点。
所以,我只是在回收器 View 上添加了一个触摸监听器,并将其转发给运动布局类的 on touch 方法。检查代码
recyclerView.setOnTouchListener { _, event ->
binding.motionLayout.onTouchEvent(event)
return@setOnTouchListener false
}
只需从 onTouchListener 中获取运动事件并将其转发给运动布局中的 onTouchEvent 方法
关于当触摸区域包含 RecyclerView 时,Android MotionLayout OnSwipe 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64088595/
在使用 GDI 进行图形处理的传统 Windows 程序中,您必须担心只绘制需要重绘的窗口区域;这是“更新矩形”,可以通过 PAINTSTRUCT.rcPaint 或通过调用 GetUpdateRec
我对 TFS 中的所有内容感到困惑。有人可以解释一下所有这些是如何组合在一起的吗? 团队项目合集 团队项目 团队 地区 迭代 来自 this page,我认为一个(团队)项目集合可以包含多个(团队)项
这对我来说根本没有意义。创建新的 API 网关时,您可以指定它是区域优化的还是边缘优化的。但话又说回来,当您为 API Gateway 创建自定义域名时,您可以在两者之间进行选择。 最糟糕的是,您可以
我有一个工作表,其中包含我想循环遍历的许多不同区域。我将进行一些计算,并认为它比在列中逐个单元格地更快/更有效。 我尝试了一些不同的东西,但不知道如何跳到下一个区域。我已经发表了一些评论,最有希望的是
最近迁移到 TFS 2010 后,我想知道对于区域而言,最佳或最广泛接受的定义或配置是什么? 我能在网上找到的唯一有用的文章是 this one并且是我认为是正确的。然而,这让我开始思考是否以下任何一
我在“北欧”有一个存储帐户,现在我想使用生命周期管理将冷 blob 移动到存档层。 但是我每次尝试都会遇到以下失败:无法为存储帐户“myStorageAccount”添加生命周期管理规则。错误:管理策
我正在开发一个项目,您在扫描仪中输入州的缩写,然后程序会告诉您该州位于美国的哪个地区。我认为我的大部分代码都是正确的,但我有以前从未使用过 switch。 我已经将我的工作改进为一个错误,即我的第一个
我正在尝试学习 AngularJS,我想我有一个架构问题。 如果我想开始开发一个应用程序,比方说,比如 youtube,我如何在“区域”(比如 Marionette)中组织页面?我的意思是:顶部导航栏
我正在制作一个动态内存分配器,当我释放其中的一部分时,我需要检查我传递给函数的指针实际上是否在该区域内。我有一个指向 malloc 区域开头的指针 typedef unsigned char byte
有时我想看看 到底在哪里页面上图片上的标签。 在 Javascript 中有没有办法改变颜色或隐藏与区域标签对应的图像部分? 最佳答案 也许您正在寻找类似 mapper.js 的内容.它允许您在鼠标
我有一个使用 D3 js 创建的时间序列图表。我想为特定时间间隔添加高亮区域,以显示在该特定时间发生的特定事件(会有不同类型的事件,因此每个高亮标记将根据其类型具有不同的颜色)。我希望这个突出显示区域
我正在尝试创建网站的密码保护区。我想通过检查 MySql 表中的用户名和密码来允许访问,然后启动一个 session 并允许在 session 处于事件状态时访问多个页面。如果有人尝试直接访问这些页面
在 ScrollView 中我添加了几个按钮。正如您在图片中看到的,2 个按钮完全可见,第三个按钮半可见。当我向右滚动看到第三个时;1-如果滚动条很短,则它会滚动回到第一个位置。2- 如果滚动足够则显
我正在开发我的第一个 spritekit 应用程序,并且有一个关于如何处理我想到的事情的快速问题。我正在制作一个我想要的棋盘游戏原型(prototype),并希望在 iOS map 中进行一些集思广益
在我的 C# 程序中,我收到这样的日期和时间:DateTime.Now 我得到:19/09/2010 20:10:30 因为我的地区是:希伯来语(以色列) 但是如果我将我的程序安装在区域为 Engli
有时我在 Visual Studio 的源文件中运行(在我的例子中是 2010),我看到很多区域,我必须点击 + 号才能一个一个地打开它们! 是否有任何快捷方式或菜单选项可以使这对我来说更容易,并且对
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 7 年前。 Improve
我正在寻找二维数据中的峰值区域(如果您愿意,灰度图像或二维景观,通过霍夫变换创建)。 峰值区域是指局部最大峰值,但不是单个点而是周围的一部分strong>contributing region 随之而
我希望能够将任何字符或字符串转换为形状或区域,以便我可以按照我喜欢的任何大小、样式、效果等来绘制该字符。 更具体地说,我将使用视差绘制它,以便它仅在特定角度清晰定义(这就是为什么我不能使用 html
我非常喜欢数学(或者你们大多数人会说的“数学”!),但我还没有达到知道这个问题答案的程度。我有一个主圆,它可以在显示器上的任何 x 和 y 处有一个中心点。其他圆圈将随意在显示器周围移动,但在任何给定
我是一名优秀的程序员,十分优秀!