Android开发：如何实现可同时横竖滚动的RecyclerView及JioTv同款布局？

Hey there! Let's tackle these two Android layout questions one by one—they're both about building smooth, flexible scrolling experiences, which are super common in media apps like JioTv.

There are two main approaches, depending on how complex your use case is:

Option 1: Nested RecyclerViews (Simple & Easy to Maintain) #

This is the go-to solution for most scenarios, like having vertical sections each with horizontal content:

• Use a vertical RecyclerView as the outer container for your entire page's vertical scroll
• Each item in the outer RecyclerView contains a horizontal RecyclerView to handle the side-to-side scrolling content
• Example code snippets:
  First, the layout for the outer RecyclerView's item:

  <!-- outer_item_layout.xml -->
  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical"
      android:padding="8dp">
  
      <TextView
          android:id="@+id/section_title"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:text="Section Title"
          android:textSize="18sp"
          android:textStyle="bold"/>
  
      <androidx.recyclerview.widget.RecyclerView
          android:id="@+id/horizontal_rv"
          android:layout_width="match_parent"
          android:layout_height="200dp"
          android:orientation="horizontal"/>
  </LinearLayout>
  

  Then, in your outer RecyclerView Adapter's onBindViewHolder, set up the horizontal RecyclerView:

  override fun onBindViewHolder(holder: OuterViewHolder, position: Int) {
      val sectionData = dataList[position]
      holder.sectionTitle.text = sectionData.title
  
      // Set up horizontal RecyclerView
      val horizontalLayoutManager = LinearLayoutManager(holder.itemView.context, LinearLayoutManager.HORIZONTAL, false)
      holder.horizontalRv.apply {
          layoutManager = horizontalLayoutManager
          adapter = HorizontalItemAdapter(sectionData.items)
          setHasFixedSize(true) // Optimize performance
      }
  }
  

  Pro tip: If you notice scroll jank, enable hardware acceleration for the RecyclerView or add android:overScrollMode="never" to reduce unnecessary animations.

Option 2: Custom LayoutManager (Flexible for Complex Grids) #

If you need something like a free-scrolling grid (think Excel-style), you'll need a custom LayoutManager:

• Override canScrollVertically() and canScrollHorizontally() to return true
• Implement onLayoutChildren() to position items in a grid across both axes
• Handle scroll offsets in scrollVerticallyBy() and scrollHorizontallyBy()
  Here's a simplified example:

  class TwoWayGridLayoutManager(private val spanCount: Int) : RecyclerView.LayoutManager() {
      private var totalGridWidth = 0
      private var totalGridHeight = 0
  
      override fun canScrollVertically() = true
      override fun canScrollHorizontally() = true
  
      override fun onLayoutChildren(recycler: RecyclerView.Recycler, state: RecyclerView.State) {
          if (itemCount == 0) {
              detachAndScrapAttachedViews(recycler)
              return
          }
          detachAndScrapAttachedViews(recycler)
  
          val itemWidth = width / spanCount
          val itemHeight = itemWidth // Square items, adjust as needed
          val rowCount = ceil(itemCount.toFloat() / spanCount).toInt()
  
          totalGridWidth = spanCount * itemWidth
          totalGridHeight = rowCount * itemHeight
  
          // Layout each item in the grid
          for (i in 0 until itemCount) {
              val view = recycler.getViewForPosition(i)
              addView(view)
              measureChildWithMargins(view, 0, 0)
  
              val row = i / spanCount
              val column = i % spanCount
              val left = column * itemWidth
              val top = row * itemHeight
              layoutDecoratedWithMargins(view, left, top, left + itemWidth, top + itemHeight)
          }
      }
  
      override fun scrollVerticallyBy(dy: Int, recycler: RecyclerView.Recycler, state: RecyclerView.State): Int {
          val scrollAmount = dy.coerceIn(-(totalGridHeight - height), 0)
          offsetChildrenVertical(scrollAmount)
          return scrollAmount
      }
  
      override fun scrollHorizontallyBy(dx: Int, recycler: RecyclerView.Recycler, state: RecyclerView.State): Int {
          val scrollAmount = dx.coerceIn(-(totalGridWidth - width), 0)
          offsetChildrenHorizontal(scrollAmount)
          return scrollAmount
      }
  }
  

  Note: This approach requires more work to handle view recycling and edge cases, so only use it if nested RecyclerViews don't fit your needs.

First, let's clarify the JioTv layout behavior (based on your description and typical app design):

JioTv Layout Behavior:

• The page scrolls vertically to browse different TV channels and their program lists
• Each channel entry has a fixed channel name on the left
• The right side of each entry is a horizontally scrollable list of programs for that channel
• When scrolling horizontally through programs, the channel name stays fixed in place

Here are two solid approaches to build this:

Approach 1: Vertical RecyclerView + Fixed Sidebar per Channel Item #

This is the most direct match for the JioTv behavior:

• Use a vertical RecyclerView as the main container—each item represents a single TV channel
• Each channel item uses a horizontal layout split into two parts:
  1. A fixed-width left section for the channel name/thumbnail (doesn't scroll horizontally)
  2. A horizontal RecyclerView on the right for the channel's programs
• Example layout for the channel item:

  <!-- channel_item_layout.xml -->
  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="120dp"
      android:orientation="horizontal"
      android:background="#ffffff">
  
      <!-- Fixed channel name section -->
      <LinearLayout
          android:layout_width="100dp"
          android:layout_height="match_parent"
          android:background="#f5f5f5"
          android:gravity="center"
          android:orientation="vertical">
  
          <TextView
              android:id="@+id/channel_name"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:text="Channel Name"
              android:textSize="16sp"
              android:textAlignment="center"/>
      </LinearLayout>
  
      <!-- Horizontally scrollable program list -->
      <androidx.recyclerview.widget.RecyclerView
          android:id="@+id/program_rv"
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:orientation="horizontal"/>
  </LinearLayout>
  

• Why this works:
  • Vertical scroll lets users browse all channels naturally
  • Horizontal scrolling only affects the program list—channel name stays put
  • Each channel's program list is independent, making data management easy

Approach 2: Fixed Left Channel List + Linked Horizontal Program Area #

If you want the channel list to stay fixed on the left while scrolling programs vertically/horizontally:

• Use a parent ConstraintLayout or LinearLayout to split the screen:
  • Left: A vertical RecyclerView for the channel list (fixed width)
  • Right: A ViewPager2 or horizontal RecyclerView for the selected channel's programs
• Add a click listener to the left channel list to switch the content in the right program area
• Optional: Sync vertical scroll between the left and right components if needed
• This is great if you want users to quickly switch channels without scrolling the entire page

Quick Optimization Tips #

• Add a subtle shadow to the edge of the horizontal program RecyclerView to hint it's scrollable
• Highlight the currently selected channel in the list for better UX
• Handle touch conflicts between vertical and horizontal scrolls by overriding onInterceptTouchEvent if needed

内容的提问来源于stack exchange，提问作者Manilal Kasera