Make snapping RecyclerView android
This post hasn't been updated for 4 years
Giới thiệu
Chắc hẳn đối với các lập trình viên mobile bạn đã từng gặp trường hợp tạo một UI với list item được canh giữa và có hiệu ứng zoom item được chọn. Trong trường hợp này thì có nhiều cách để thực hiện công việc trên: đối với Android chúng ta có thể sử dụng ViewPager hoặc RecyclerView. Trong bài viết này mình sẽ hướng dẫn cho các bạn cách custom một RecyclerView hỗ trợ snapping item ở giữa và hiệu ứng zoom
Tiến hành
Đầu tiên là giới thiệu file custom RecyclerView, các bạn đọc qua có thể hiểu được dễ dàng, về cơ bản chúng ta sẽ lắng nghe sự kiện scroll của recyclerview và tiến hành scroll item vào giữa và scale các item còn lại để được hiệu ứng Zoom item được chọn.
class SnappingRecyclerView : RecyclerView {
private var snapEnabled = false
private var userScrolling = false
private var scrolling = false
private var scrollStateTemp: Int = 0
private var lastScrollTime: Long = 0
private val handlerUpdate = Handler()
private var scaleUnfocusedViews = false
private var onItemSelectedListener: OnItemSelectedListener? = null
private val centerView: View?
get() = getChildClosestToPosition(measuredWidth / 2)
val horizontalScrollOffset: Int
get() = computeHorizontalScrollOffset()
val verticalScrollOffset: Int
get() = computeVerticalScrollOffset()
constructor(context: Context) : super(context)
constructor(context: Context, attrs: AttributeSet) : super(context, attrs)
/**
* Enable snapping behaviour for this recyclerView
* @param enabled enable or disable the snapping behaviour
*/
fun setSnapEnabled(enabled: Boolean) {
snapEnabled = enabled
if (enabled) {
addOnLayoutChangeListener(object : View.OnLayoutChangeListener {
override fun onLayoutChange(
v: View, left: Int, top: Int, right: Int, bottom: Int, oldLeft: Int,
oldTop: Int, oldRight: Int, oldBottom: Int
) {
if (left == oldLeft && right == oldRight && top == oldTop && bottom == oldBottom) {
removeOnLayoutChangeListener(this)
updateViews()
handlerUpdate.postDelayed({
scrollToView(getChildClosestToPosition(adapter?.itemCount?.minus(1) ?: 0 / 2)) }
, 20)
}
}
})
addOnScrollListener(object : RecyclerView.OnScrollListener() {
override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
updateViews()
super.onScrolled(recyclerView, dx, dy)
}
override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
super.onScrollStateChanged(recyclerView, newState)
/** if scroll is caused by a touch (scroll touch, not any touch) */
if (newState == SCROLL_STATE_TOUCH_SCROLL) {
/** if scroll was initiated already, this is not a user scrolling, but probably a tap, else set userScrolling */
if (!scrolling) {
userScrolling = true
}
} else if (newState == SCROLL_STATE_IDLE) {
scrollToView(centerView)
userScrolling = false
scrolling = false
} else if (newState == SCROLL_STATE_FLING) {
scrolling = true
}
scrollStateTemp = newState
}
})
}
}
/**
* Enable snapping behaviour for this recyclerView
* @param enabled enable or disable the snapping behaviour
* @param scaleUnfocusedViews downScale the views which are not focused based on how far away they are from the center
*/
fun setSnapEnabled(enabled: Boolean, scaleUnfocusedViews: Boolean) {
this.scaleUnfocusedViews = scaleUnfocusedViews
setSnapEnabled(enabled)
}
private fun updateViews() {
for (i in 0 until childCount) {
val child = getChildAt(i)
setMarginsForChild(child)
if (scaleUnfocusedViews) {
val percentage = getPercentageFromCenter(child)
val scale = 1f - 0.5f * percentage
child.scaleX = scale
child.scaleY = scale
}
}
}
/**
* Adds the margins to a childView so a view will still center even if it's only a single child
* @param child childView to set margins for
*/
private fun setMarginsForChild(child: View) {
val lastItemIndex = layoutManager!!.itemCount - 1
val childIndex = getChildAdapterPosition(child)
val startMargin = if (childIndex == 0) measuredWidth / 2 else 0
val endMargin = if (childIndex == lastItemIndex) measuredWidth / 2 else 0
(child.layoutParams as MarginLayoutParams).apply {
marginStart = startMargin
marginEnd = endMargin
setMargins(startMargin, 0, endMargin, 0)
}
child.requestLayout()
}
override fun dispatchTouchEvent(event: MotionEvent): Boolean {
if (!snapEnabled)
return super.dispatchTouchEvent(event)
val currentTime = System.currentTimeMillis()
/** if touch events are being spammed, this is due to user scrolling right after a tap,
* so set userScrolling to true */
if (scrolling && scrollStateTemp == SCROLL_STATE_TOUCH_SCROLL) {
if (currentTime - lastScrollTime < MINIMUM_SCROLL_EVENT_OFFSET_MS) {
userScrolling = true
}
}
lastScrollTime = currentTime
val targetView = getChildClosestToPosition(event.x.toInt())
if (!userScrolling && event.action == MotionEvent.ACTION_UP && targetView !== centerView) {
scrollToView(targetView)
return true
}
return super.dispatchTouchEvent(event)
}
override fun onInterceptTouchEvent(e: MotionEvent): Boolean {
if (!snapEnabled) return super.onInterceptTouchEvent(e)
val targetView = getChildClosestToPosition(e.x.toInt())
return if (targetView !== centerView) {
true
} else super.onInterceptTouchEvent(e)
}
private fun getChildClosestToPosition(x: Int): View? {
if (childCount <= 0) return null
val itemWidth = getChildAt(0).measuredWidth
var closestX = 9999
var closestChild: View? = null
for (i in 0 until childCount) {
val child = getChildAt(i)
val childCenterX = child.x.toInt() + itemWidth / 2
val xDistance = childCenterX - x
/** if child center is closer than previous closest, set it as closest */
if (abs(xDistance) < abs(closestX)) {
closestX = xDistance
closestChild = child
}
}
return closestChild
}
public fun scrollToView(child: View?) {
if (child == null)
return
stopScroll()
val scrollDistance = getScrollDistance(child)
if (scrollDistance != 0)
smoothScrollBy(scrollDistance, 0)
onItemSelectedListener?.onItemSelected(getChildAdapterPosition(child))
}
private fun getScrollDistance(child: View): Int {
val itemWidth = getChildAt(0).measuredWidth
val centerX = measuredWidth / 2
val childCenterX = child.x.toInt() + itemWidth / 2
return childCenterX - centerX
}
private fun getPercentageFromCenter(child: View): Float {
val centerX = (measuredWidth / 2).toFloat()
val childCenterX = child.x + child.width / 2
val offSet = max(centerX, childCenterX) - min(centerX, childCenterX)
val maxOffset = measuredWidth / 2 + child.width
return offSet / maxOffset
}
fun isChildCenterView(child: View): Boolean {
return child === centerView
}
fun smoothUserScrollBy(x: Int, y: Int) {
userScrolling = true
smoothScrollBy(x, y)
}
fun addOnItemSelectedListener(onItemSelectedListener: OnItemSelectedListener) {
this.onItemSelectedListener = onItemSelectedListener
}
override fun onDetachedFromWindow() {
super.onDetachedFromWindow()
handlerUpdate.removeCallbacksAndMessages(null)
}
companion object {
private const val MINIMUM_SCROLL_EVENT_OFFSET_MS = 20
}
interface OnItemSelectedListener {
fun onItemSelected(position: Int)
}
}
Sử dụng
Để đơn giản mình sẽ tạo một Adapter nhận vào list url image để hiển thị
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="jp.co.mec.saai.presentation.DemoSnappingRecyclerView">
<com.duong.demosnappingrecyclerview.SnappingRecyclerView
android:layout_marginTop="100dp"
android:id="@+id/rc_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
class DemoSnappingRecyclerView : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_demo_snapping_recycler_view)
val listImage =
listOf<String>("https://ss-images.catscdn.vn/wm500/2020/01/20/6853789/untitled-3.jpg",
"https://img-amp.tinmoi.vn/thumbamp/upload/camnhung/2019/05/03/luu-diec-phi-bi-boc-me-o-ban-dung-phan-thom-de-giau-mui-hoi1556848990.jpg",
"https://cdn.vietnammoi.vn/stores/news_dataimages/vudt/112017/29/23/5204_ebvv-fyfzhap5408766-1497427103-2487-8512-1511842926.jpg",
"https://vtv1.mediacdn.vn/thumb_w/640/2019/1/8/494679537232642480462234859189762331770880o-15469384676461258280100.jpg",
"https://images.vov.vn/w720/uploaded/cizotokek8ly8uzveukg/2018_08_17/mulan_1200_r_aoby.jpg"
)
rc_image.apply {
setSnapEnabled(enabled = true, scaleUnfocusedViews = true)
adapter = ListAdapter(listImage)
}
}
}
Adapter
class ListAdapter(private val list: List<String>) : RecyclerView.Adapter<ListAdapter.ViewHolder>() {
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
val inflater = LayoutInflater.from(parent.context)
return ViewHolder(inflater, parent)
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
val url = list[position]
holder.bind(url)
}
override fun getItemCount(): Int = list.size
class ViewHolder(inflater: LayoutInflater, parent: ViewGroup) :
RecyclerView.ViewHolder(inflater.inflate(R.layout.item_image, parent, false)) {
private var imageView: ImageView = itemView.findViewById(R.id.iv_banner)
fun bind(url: String) {
Glide.with(itemView.context).load(url).into(imageView)
}
}
}
Chạy lên sẽ được thành quả như này nhé. Cảm ơn các bạn đã theo dõi, chúc các bạn thành công
All Rights Reserved
