如何用Android原生StackView实现钱包式垂直对齐卡片堆叠效果

当前已实现原生StackView卡片堆叠效果：

希望实现类似钱包中卡片的垂直对齐堆叠效果：

需求与限制 #

• 卡片需保持原生StackView的滚动交互能力
• 卡片需垂直对齐堆叠
• 仅允许使用Android原生StackView组件实现

遇到的问题 #

尝试设置垂直对齐时，卡片会出现截断现象。

现有代码 #

ActivityMain.kt

class MainActivity : AppCompatActivity() {

lateinit var cardAdapter: CardAdapter

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

        val stackView = findViewById<StackView>(R.id.stack_view)

        cardAdapter= CardAdapter(numberWord(),numberImage(),R.layout.item_card,this)
        stackView.adapter=cardAdapter
    }


    // the method numberWord() is used to
    // add the text below corresponding images.
    private fun numberWord(): List<String> {
        val word: MutableList<String> = ArrayList()
        word.add("One")
        word.add("Two")
        word.add("Three")
        word.add("Four")
        word.add("Five")
        return word
    }

    // the method numberWord() is used to call
    // the images that are added to the stack.
    private fun numberImage(): List<Int>{
        val image: MutableList<Int> = ArrayList()
        image.add(R.drawable.ic_filter)
        image.add(R.drawable.ic_filter)
        image.add(R.drawable.ic_filter)
        image.add(R.drawable.ic_filter)
        image.add(R.drawable.ic_filter)
        return image
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<!--We have used RelativeLayout for layout-->
<androidx.constraintlayout.widget.ConstraintLayout 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

    <!--Add StackView-->
    <StackView
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintTop_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:id="@+id/stack_view"
        android:layoutDirection="ltr"
        android:layout_width="400dp"
        android:layout_height="300dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

CardAdapter.kt

class CardAdapter 
    (
    var numberWord: List<String>,
    var numberImage: List<Int>,
    var itemLayout: Int,
    var c: Context
) : ArrayAdapter<Any?>(
    c, itemLayout, numberWord
) {
    // getCount() is called to return
    // the total number of words to be used
    override fun getCount(): Int {
        return numberWord.size
    }

    // getView() is called to get position, 
    // parent and view of the images.
    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        var convertView = convertView
        if (convertView == null) {
            convertView = LayoutInflater.from(parent.context).inflate(itemLayout, parent, false)
        }
        val word = numberWord[position]
        val image = numberImage[position]
        val textView = convertView!!.findViewById<TextView>(R.id.text_view)
        val imageView = convertView.findViewById<ImageView>(R.id.image_view)
        textView.text = word
        imageView.setImageResource(image)
        return convertView
    }
}

item_card.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="300dp"
    android:layout_height="180dp"
    android:background="@drawable/border_bg"
    android:gravity="center"
    android:orientation="vertical">
  
    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_filter" />
    
    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="40sp"
        android:textStyle="bold" />

</LinearLayout>

参考资料 #

可参考Android原生StackView官方文档。

寻求仅使用原生StackView组件的解决方法。

内容的提问来源于stack exchange，提问作者Anish Vahora