Android双区域视图下RecyclerView与Adapter交互实现技术问询

Got it, let's build this UI with smooth button transfer between the top and bottom sections. I'll use a Fragment example here (the logic translates directly to an Activity if you prefer that).

Step 1: Create the Fragment Layout #

First, we'll make a vertical layout split into two parts: a top container for moved buttons, and a bottom RecyclerView to handle the dynamic list of buttons (since the count can range from 2 to 30, RecyclerView is efficient for this).

<!-- fragment_button_transfer.xml -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <!-- Top section for moved buttons -->
    <LinearLayout
        android:id="@+id/top_button_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gap="8dp"
        android:paddingBottom="16dp"
        android:background="#f0f0f0"
        android:padding="12dp"/>

    <!-- Bottom section for dynamic buttons -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/bottom_button_recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#e0e0e0"/>

</LinearLayout>

Step 2: Define a Data Model for Buttons #

We'll use a simple data class to track each button's ID and display text—this helps with safely moving items between lists.

// ButtonItem.kt
data class ButtonItem(val id: Int, val text: String)

Step 3: Implement the Fragment Logic #

We'll need two lists to track which buttons are in the top vs bottom section, plus adapters for the bottom RecyclerView. We'll also handle click events to move buttons between sections.

First, the Bottom RecyclerView Adapter #

This adapter will create buttons for the bottom section and trigger the move-to-top action on click.

class BottomButtonAdapter(
    private val items: List<ButtonItem>,
    private val onButtonClick: (ButtonItem) -> Unit
) : RecyclerView.Adapter<BottomButtonAdapter.ButtonViewHolder>() {

    inner class ButtonViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        fun bind(item: ButtonItem) {
            val button = itemView as Button
            button.text = item.text
            button.setOnClickListener { onButtonClick(item) }
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ButtonViewHolder {
        val button = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_button, parent, false) as Button
        return ButtonViewHolder(button)
    }

    override fun onBindViewHolder(holder: ButtonViewHolder, position: Int) {
        holder.bind(items[position])
    }

    override fun getItemCount() = items.size
}

Create a reusable button layout (item_button.xml) for consistency:

<!-- item_button.xml -->
<Button
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingHorizontal="16dp"
    android:paddingVertical="8dp"
    android:textSize="14sp"/>

Now, the Fragment Code #

This is where we manage the lists, update the UI, and handle button transfers.

class ButtonTransferFragment : Fragment() {

    private lateinit var topContainer: LinearLayout
    private lateinit var bottomRecycler: RecyclerView
    private lateinit var bottomAdapter: BottomButtonAdapter

    // Track buttons in each section
    private val bottomButtons = mutableListOf<ButtonItem>()
    private val topButtons = mutableListOf<ButtonItem>()

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_button_transfer, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        topContainer = view.findViewById(R.id.top_button_container)
        bottomRecycler = view.findViewById(R.id.bottom_button_recycler)

        // Initialize bottom buttons (replace with your dynamic data)
        initializeBottomButtons()

        // Setup bottom RecyclerView
        bottomRecycler.layoutManager = GridLayoutManager(context, 3) // Adjust columns as needed
        bottomAdapter = BottomButtonAdapter(bottomButtons) { item ->
            moveButtonToTop(item)
        }
        bottomRecycler.adapter = bottomAdapter
    }

    private fun initializeBottomButtons() {
        // Example: Add 5 buttons (replace with your dynamic data source)
        repeat(5) { index ->
            bottomButtons.add(ButtonItem(index, "Button ${index + 1}"))
        }
    }

    private fun moveButtonToTop(item: ButtonItem) {
        // Remove from bottom list and update adapter
        bottomButtons.remove(item)
        bottomAdapter.notifyDataSetChanged()

        // Add to top list and create a button for the top container
        topButtons.add(item)
        val topButton = LayoutInflater.from(context)
            .inflate(R.layout.item_button, topContainer, false) as Button
        topButton.text = item.text
        topButton.setOnClickListener {
            moveButtonToBottom(item, topButton)
        }
        topContainer.addView(topButton)
    }

    private fun moveButtonToBottom(item: ButtonItem, topButtonView: View) {
        // Remove from top container and list
        topContainer.removeView(topButtonView)
        topButtons.remove(item)

        // Add back to bottom list and update adapter
        bottomButtons.add(item)
        bottomAdapter.notifyDataSetChanged()
    }
}

Key Notes #

• Dynamic Data: Replace the initializeBottomButtons() method with your actual data source (e.g., fetching from an API, database, etc.)
• Layout Flexibility: For the top section, if you expect many buttons, replace the LinearLayout with a FlowLayout (from Material Components) to handle automatic line breaks.
• State Preservation: If you need to save the state of which buttons are in top/bottom during configuration changes (like screen rotation), use savedInstanceState to store the lists, or use a ViewModel.

内容的提问来源于stack exchange，提问作者Anna Frolova