[英]How to peek RecyclerView + PagerSnapHelper
I'm using a horizontal RecyclerView
with PagerSnapHelper
to make it look like a ViewPager
. 我正在使用带有
PagerSnapHelper
的水平RecyclerView
使其看起来像ViewPager
。 It's displaying CardViews
. 它正在显示
CardViews
。
My question is, how can I make it show a small peek of the edge of the next and previous card? 我的问题是,我怎样才能让它显示下一张和上一张卡的边缘? The user needs to see a little of those cards so they understand intuitively that they need to swipe horizontally so they can view other cards.
用户需要看到一些这样的卡片,以便他们直观地理解他们需要水平滑动以便他们可以查看其他卡片。
I'll also note that the current card always needs to be centered, even for the first one, which would not have a previous card peeking on the left. 我还要注意,当前的卡片总是需要居中,即使对于第一张卡片,也不需要在左侧偷看之前的卡片。 Also, the design requirements are out of my control;
此外,设计要求不受我的控制; I need to peek, I can't use dot indicators or anything else.
我需要偷看,我不能使用点指示器或其他任何东西。
I could use a LinearSnapHelper
and make the width of the cards smaller, but then 1) the first item will be left-aligned instead of centered, since there's no card peeking on the left side and 2) how much of each card displays would vary based on the width of the phone. 我可以使用
LinearSnapHelper
并使卡片的宽度更小,但是1)第一项将左对齐而不是居中,因为左侧没有卡片偷看和2)每张卡片显示的数量会有所不同根据手机的宽度。
This seems like it should be a common and simple task, so I hope I'm missing something obvious to make it happen. 这似乎应该是一个普通而简单的任务,所以我希望我遗漏了一些明显的事情来实现它。
After some trial and error, I found a solution. 经过一些试验和错误,我找到了解决方案。 Fortunately, it wasn't as complicated as I thought, although not as clean as I hoped.
幸运的是,它没有我想象的那么复杂,尽管不像我希望的那么干净。
So start with a RecyclerView and its Adapter, use a LinearLayoutManager with a Horizontal orientation, add in a PagerSnapHelper and so on... then to fix the specific issue in this question I made some adjustments to the adapter: 所以从RecyclerView及其适配器开始,使用具有水平方向的LinearLayoutManager,添加PagerSnapHelper等等......然后修复此问题中的特定问题我对适配器进行了一些调整:
private var orientation: Int? = null
override fun onAttachedToRecyclerView(recyclerView: RecyclerView) {
super.onAttachedToRecyclerView(recyclerView)
orientation = (recyclerView.layoutManager as LinearLayoutManager).orientation
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
// Kludge to adjust margins for horizontal, ViewPager style RecyclerView
if (orientation != LinearLayout.VERTICAL) {
holder.itemView.layoutParams = (holder.itemView.layoutParams as RecyclerView.LayoutParams).apply {
val displayMetrics = DisplayMetrics()
baseActivity.windowManager.defaultDisplay.getMetrics(displayMetrics)
// To show the edge of the next/previous card on the screen, we'll adjust the width of our MATCH_PARENT card to make
// it just slightly smaller than the screen. That way, no matter the size of the screen, the card will fill most of
// it and show a hint of the next cards.
val widthSubtraction = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 40f, displayMetrics).toInt()
width = displayMetrics.widthPixels - widthSubtraction
// We always want the spot card centered. But the RecyclerView will left-align the first card and right-align the
// last card, since there's no card peeking on that size. We'll adjust the margins in those two places to pad it out
// so those cards appear centered.
// Theoretically we SHOULD be able to just use half of the amount we shrank the card by, but for some reason that's
// not quite right, so I'm adding a fudge factor developed via trial and error to make it look better.
val fudgeFactor = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 6f, displayMetrics).toInt()
val endAdjustment = (widthSubtraction / 2) - fudgeFactor
marginStart = if (position == 0) endAdjustment else 0
marginEnd = if (position == (itemCount - 1)) endAdjustment else 0
}
}
}
Of course, you'll want to change 40f
and 6f
to the appropriate values for your use case. 当然,您需要将
40f
和6f
更改为适合您的用例的值。
In case you're wondering, I have the orientation check because in my case, the same adapter is used for two different RecyclerViews. 如果你想知道,我有方向检查,因为在我的情况下,相同的适配器用于两个不同的RecyclerViews。 One is a simple vertical list.
一个是简单的垂直列表。 The other is horizontal and functions like a ViewPager, which greatly increased the complexity.
另一个是水平的,功能类似于ViewPager,这大大增加了复杂性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.