如何显示下一张/上一张卡片RecyclerView的一部分

时间:2018-07-12 04:19:37

标签: android android-recyclerview recycler-adapter

实现此功能的最佳策略是什么?

enter image description here

我有一个带有卡片的卧式RecyclerView。 每张卡都将显示整个屏幕,但是如果它有多个项目,我希望它显示下一张卡和上一张的一部分。

我知道我可以通过将适配器上的卡android:layout_width设置为具有特定的DP(例如250dp)而不是match_parent来实现此目的。 但这似乎不是适当的解决方案。

这是我的代码:

使用RecyclerView进行活动:

    class ListPokemon : AppCompatActivity() {

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

        val items = createListPokemons()
        recyclerView.adapter = PokemonAdapter(items)
        recyclerView.layoutManager = LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false)
        recyclerView.setHasFixedSize(true)
        val pagerSnapHelper = PagerSnapHelper()
        pagerSnapHelper.attachToRecyclerView(recyclerView)
    }

    private fun createListPokemons(): List<Pokemon> {
        val pokemons = ArrayList<Pokemon>()
        pokemons += createPokemon("Pikachu")
        pokemons += createPokemon("Bulbasaur")
        pokemons += createPokemon("Charmander")
        pokemons += createPokemon("Squirtle")

        return pokemons
    }

    private fun createPokemon(name: String) = Pokemon(name = name, height = 1, weight = 69, id = 1)
}

活动布局:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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=".MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layoutManager="android.support.v7.widget.LinearLayoutManager"/>

</android.support.constraint.ConstraintLayout>

适配器:

class PokemonAdapter(val list: List<Pokemon>) : RecyclerView.Adapter<PokemonAdapter.PokemonVH>() {

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

    override fun onBindViewHolder(holder: PokemonAdapter.PokemonVH, position: Int) {
        holder.textViewName.text = list[position].name
    }

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

    class PokemonVH(itemView: View) : RecyclerView.ViewHolder(itemView) {

        var textViewName: TextView = itemView.findViewById(R.id.textViewName)
    }
}

适配器的布局:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    android:layout_gravity="center_horizontal"
    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="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:padding="36dp"
            android:id="@+id/textViewName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="22sp"
            tools:text="Teste String"/>

    </LinearLayout>

</android.support.v7.widget.CardView>

这是我的结果:

enter image description here

在这种情况下,我想显示下一张卡片的一部分。我该怎么办?

谢谢。

2 个答案:

答案 0 :(得分:25)

您需要做的是将填充设置为RecyclerView,将clipToPadding设置为false,并使用SnapHelper,并且需要确保边距卡上的值小于或等于RecylerView中的填充。

因此,假设您希望卡片之间到屏幕侧面的距离为16dp,并且卡片之间的距离为8dp。您必须将每张卡上的边距设置为4dp,因此总边距为8dp。而且您必须将填充设置为12dp,因为卡的两边已经有4dp的空白。

看起来会像这样:

您的列表:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layoutManager="android.support.v7.widget.LinearLayoutManager"
    android:clipToPadding="false"
    android:orientation="horizontal"
    android:paddingStart="12dp"
    android:paddingEnd="12dp"/>

您的卡片:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginEnd="4dp"
    android:layout_marginStart="4dp"
    app:cardElevation="2dp"/>

答案 1 :(得分:0)

CardView的宽度从"match_parent"更改为"0dp"。并将layout_weight添加为"80"(或类似名称)。将您的父视图(RecyclerViewlayout_weightSum设为"100"

android:layout_width="0dp"
android:layout_weight="80"