如何结合使用BoardView与嵌套ViewPager？附Board Library使用说明

既然你已经确定用单个Fragment来集成BoardView和嵌套ViewPager，那我们可以把每个BoardView的列（Column）作为容器，里面嵌入ViewPager来实现多页面切换。下面是具体的实现步骤，完全遵循Board Library的规则：

1. 完善BoardView根布局 #

先把你提供的board_layout.xml补全，确保BoardView能占满整个Fragment：

<?xml version="1.0" encoding="utf-8"?>
<com.woxthebox.draglistview.BoardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/board_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f0f0f0"/>

2. 设计列（Column）的Item布局 #

创建board_column_item.xml，每个列里包含标题和嵌套的ViewPager：

<?xml version="1.0" encoding="utf-8"?>
<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="8dp">

    <!-- 列标题 -->
    <TextView
        android:id="@+id/column_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textStyle="bold"
        android:padding="8dp"
        android:background="#ffffff"/>

    <!-- 嵌套ViewPager -->
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/column_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="8dp"/>

</LinearLayout>

3. 实现BoardView的自定义适配器 #

创建BoardColumnAdapter，负责加载每个列，并为列内的ViewPager绑定数据：

class BoardColumnAdapter(private val columnList: List<ColumnData>) : BoardView.BoardAdapter() {

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

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        super.onBindViewHolder(holder, position)
        val columnData = columnList[position]
        holder.columnTitle.text = columnData.title

        // 为ViewPager设置专属适配器
        val pagerAdapter = ColumnPagerAdapter(holder.itemView.context, columnData.pageList)
        holder.viewPager.adapter = pagerAdapter
    }

    override fun getItemCount(): Int = columnList.size

    inner class ViewHolder(itemView: View) : BoardView.ViewHolder(itemView) {
        val columnTitle: TextView = itemView.findViewById(R.id.column_title)
        val viewPager: ViewPager = itemView.findViewById(R.id.column_viewpager)
    }

    // 数据类：存储列标题和该列下的页面数据
    data class ColumnData(val title: String, val pageList: List<PageData>)
    data class PageData(val pageTitle: String, val content: String)
}

4. 实现ViewPager的页面适配器 #

创建ColumnPagerAdapter，负责加载ViewPager里的每个页面：

class ColumnPagerAdapter(private val context: Context, private val pageList: List<BoardColumnAdapter.PageData>) :
    PagerAdapter() {

    override fun instantiateItem(container: ViewGroup, position: Int): Any {
        val view = LayoutInflater.from(context)
            .inflate(R.layout.viewpager_page_item, container, false)
        val pageTitle = view.findViewById<TextView>(R.id.page_title)
        val pageContent = view.findViewById<TextView>(R.id.page_content)

        val pageData = pageList[position]
        pageTitle.text = pageData.pageTitle
        pageContent.text = pageData.content

        container.addView(view)
        return view
    }

    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
        container.removeView(`object` as View)
    }

    override fun getCount(): Int = pageList.size

    override fun isViewFromObject(view: View, `object`: Any): Boolean = view == `object`
}

对应的ViewPager页面布局viewpager_page_item.xml：

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:background="#ffffff">

    <TextView
        android:id="@+id/page_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:textStyle="bold"/>

    <TextView
        android:id="@+id/page_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="14sp"
        android:layout_marginTop="8dp"/>

</LinearLayout>

5. 在根Fragment中初始化BoardView #

在你的根Fragment里完成BoardView的初始化和数据绑定：

class RootBoardFragment : Fragment() {

    private lateinit var boardView: BoardView

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

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        boardView = view.findViewById(R.id.board_view)

        // 构造测试数据
        val columnList = listOf(
            BoardColumnAdapter.ColumnData(
                "待办事项",
                listOf(
                    BoardColumnAdapter.PageData("今日任务", "完成BoardView与ViewPager集成"),
                    BoardColumnAdapter.PageData("明日任务", "测试拖拽功能")
                )
            ),
            BoardColumnAdapter.ColumnData(
                "进行中",
                listOf(
                    BoardColumnAdapter.PageData("开发中", "编写适配器代码"),
                    BoardColumnAdapter.PageData("调试中", "修复ViewPager滑动冲突")
                )
            ),
            BoardColumnAdapter.ColumnData(
                "已完成",
                listOf(
                    BoardColumnAdapter.PageData("已完成任务1", "完成布局编写"),
                    BoardColumnAdapter.PageData("已完成任务2", "适配不同屏幕")
                )
            )
        )

        // 绑定BoardView适配器
        val boardAdapter = BoardColumnAdapter(columnList)
        boardView.setAdapter(boardAdapter)

        // 可选：开启列拖拽功能
        boardView.setColumnDragEnabled(true)
    }
}

6. 解决滑动冲突（可选） #

因为BoardView支持拖拽，嵌套ViewPager可能会出现滑动冲突，你可以自定义ViewPager来控制滑动权限：

class CustomViewPager(context: Context, attrs: AttributeSet?) : ViewPager(context, attrs) {
    private var isDragEnabled = true

    fun setDragEnabled(enabled: Boolean) {
        isDragEnabled = enabled
    }

    override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
        return isDragEnabled && super.onInterceptTouchEvent(ev)
    }

    override fun onTouchEvent(ev: MotionEvent): Boolean {
        return isDragEnabled && super.onTouchEvent(ev)
    }
}

之后把布局里的ViewPager换成这个CustomViewPager，在适配器中可以根据交互场景动态开启/关闭滑动，比如触摸ViewPager时禁用BoardView的拖拽，离开时恢复。

内容的提问来源于stack exchange，提问作者jehee choi