Android: кликабельный горизонтальный слайдер изображений с помощью kotlin - PullRequest
2 голосов
/ 02 октября 2019

Я хочу добавить горизонтальный скроллер изображений, как на картинке ниже. Я знаю, что есть решения, но всем решениям от 4 до 5 лет, и после Kotlin и компоновки ограничений я предполагаю, что сейчас есть несколько хороших методов для достижения этой цели. Пожалуйста, помогите мне и поделитесь лучшим и простым способом сделать это. Заранее спасибо. enter image description here

Ответы [ 2 ]

2 голосов
/ 02 октября 2019

Создайте элемент:

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="16dp"
    android:background="@color/colorAccent"
    card_view:cardCornerRadius="8dp"
    card_view:cardUseCompatPadding="true">

    <LinearLayout
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:orientation="vertical">

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:scaleType="centerCrop"
            android:src="@mipmap/ic_launcher_round" />

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/tvName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:padding="8dp"
            android:text="@string/app_name"
            android:textColor="#000000"
            android:textSize="16sp" />

    </LinearLayout>

</androidx.cardview.widget.CardView>

Затем добавьте этот элемент в RecyclerView:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/colorPrimary" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="10dp" />

</LinearLayout>

Затем вызовите его из своей деятельности и установите для него HORIZONTAL LayoutManagerа затем его адаптер:

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        displayList()
    }

    private fun displayList() {
        val imageList = ArrayList<ImageDataModel>()
        imageList.clear()
        imageList.add(ImageDataModel("https://conversionxl.com/wp-content/uploads/2018/09/coding-language.jpg", "Test"))
        imageList.add(ImageDataModel("https://makeawebsitehub.com/wp-content/uploads/2016/02/learn-code-e1455713167295.jpg", "Test"))
        imageList.add(ImageDataModel("https://www.tecmint.com/wp-content/uploads/2016/11/Convert-PNG-to-JPG-Using-for-loop-Command.png", "Test"))
        imageList.add(ImageDataModel("https://conversionxl.com/wp-content/uploads/2018/09/coding-language.jpg", "Test"))
        imageList.add(ImageDataModel("https://www.tecmint.com/wp-content/uploads/2016/11/Convert-PNG-to-JPG-Using-for-loop-Command.png", "Test"))
        recyclerView.layoutManager = LinearLayoutManager(this, LinearLayout.HORIZONTAL, false)
        recyclerView.adapter = ViewAdapter(imageList)
    }
}

Как вы видите, RecyclerView тоже нужен адаптер, это простой адаптер, который использует Glide для показа изображений, подобных этому:

class ViewAdapter(private val imageDataModelList: ArrayList<ImageDataModel>) : RecyclerView.Adapter<ViewAdapter.ViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        return ViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.item_list, parent, false))
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.bindItems(imageDataModelList[position])
    }

    override fun getItemCount(): Int {
        return imageDataModelList.size
    }

    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        fun bindItems(imageDataModel: ImageDataModel) {
            val textView = itemView.findViewById<TextView>(R.id.tvName)
            val imageView = itemView.findViewById<ImageView>(R.id.imageView)
            textView.text = imageDataModel.name

            Glide.with(itemView.context).load(imageDataModel.url).into(imageView)
        }
    }
}

Не забудьте добавить зависимости Glide на уровне вашего приложения build.gradle:

dependencies {
  implementation 'com.github.bumptech.glide:glide:4.10.0'
  annotationProcessor 'com.github.bumptech.glide:compiler:4.10.0'
}

Приложение должно выглядеть так: https://imgur.com/WFSnKyz

1 голос
/ 02 октября 2019

Не специально для RecyclerViews, но есть некоторые замечательные функции языка Kotlin, которые вы можете использовать.

Лично я бы не делал это с макетом ограничения, но RecyclerView . Kotlin предлагает несколько хороших опций для работы с коллекциями , так что стоит использовать их, если вам нужно выполнить какие-либо манипуляции. Я бы посоветовал вам не делать список доступным как изменяемый вне адаптера. Это может быть достигнуто с использованием свойств поддержки .

. Для того, чтобы сделать их кликабельными, вы можете использовать OnItemTouchListener . Однако лично я предпочитаю использовать OnClickListener и callback. Обратный вызов принадлежит адаптеру, и OnClickListener добавляется в корневое представление держателя просмотра.

Помимо этого есть различные полезные приемы, которые вы можете использовать, например typealias .

Вот код, который я мог бы быстро придумать (я не делал никаких тестовых работ с приложениями переработчика, поэтому у меня нет правильно разработанного образца для рисования):

class ImageListAdapter : RecyclerView.Adapter<ImageListAdapter.ImageListItemVH>() {
    private val _items = mutableListOf<ImageItem>()
    val items: List<ImageItem>
        get() = _items

    var clickCallback: ImageClickCallback? = null

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ImageListItemVH {
        val itemView = LayoutInflater.from(parent.context)
            .inflate(
                R.layout.viewholder_image_list_item,
                parent,
                false
            )
        return ImageListItemVH(itemView)
    }

    override fun getItemCount(): Int = _items.size

    override fun onBindViewHolder(holder: ImageListItemVH, position: Int) {
        holder.bind(_items[position]) { clickCallback?.invoke(it) }
    }

    fun addItem(newItem: ImageItem) {
        _items += newItem
        notifyItemInserted(_items.size - 1)
    }

    fun addItems(newItems: List<ImageItem>) {
        val sizeBefore = _items.size
        _items += newItems
        notifyItemRangeInserted(sizeBefore - 1, newItems.size)
    }

    fun clearItems() {
        val sizeBefore = _items.size
        _items.clear()
        notifyItemRangeRemoved(0, sizeBefore - 1)
    }

    fun setItems(items: List<ImageItem>) {
        _items.clear()
        _items += items
        notifyDataSetChanged()
    }

    class ImageListItemVH(itemView: View) : RecyclerView.ViewHolder(itemView) {
        fun bind(imageItem: ImageItem, callback: (id: String) -> Unit) =
            itemView.setOnClickListener { callback(imageItem.id) }
    }
}

data class ImageItem(
    val id: String,
    val location: String
)

typealias ImageClickCallback = (id: String) -> Unit

Если коллекция изображений имеет большой размер или не ограничена небольшим количеством статических элементов, вам следует использовать библиотеку подкачки , особенно в этом случае PagedList

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...