Android TV应用开发：基于Leanback Library实现固定顶部视频详情栏的方案咨询

Hey there! Let's tackle this issue you're facing with Android TV's Leanback Library and the DetailSupportFragment. The default behavior of covering the top detail area during D-pad navigation is definitely frustrating, but there are two solid approaches to fix this—either customize the DetailSupportFragment itself, or switch to a more flexible custom fragment combination.

Option 1: Customize the DetailSupportFragment Layout #

The default DetailSupportFragment uses a layout that combines the detail header and content list in a way that can cause overlap. You can override this by defining your own layout and extending the fragment to use it.

Step 1: Create a Custom Layout File #

Make a layout (e.g., fragment_custom_detail.xml) that separates the fixed top detail area from the horizontal video list:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- Fixed top detail area (always visible) -->
    <FrameLayout
        android:id="@+id/detail_header_container"
        android:layout_width="match_parent"
        android:layout_height="220dp"
        android:background="#222"
        android:focusable="false"> <!-- Prevent focus from moving here -->

        <!-- Add your video detail views here (cover art, title, description, etc.) -->
        <ImageView
            android:id="@+id/video_cover"
            android:layout_width="180dp"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"/>

        <TextView
            android:id="@+id/video_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="200dp"
            android:layout_marginTop="30dp"
            android:textSize="28sp"
            android:textColor="#FFFFFF"/>

    </FrameLayout>

    <!-- Horizontal video list below -->
    <androidx.leanback.widget.HorizontalGridView
        android:id="@+id/video_list_grid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:focusable="true"/>

</LinearLayout>

Step 2: Extend DetailSupportFragment #

Create a custom fragment class that loads your layout and handles selection updates:

class CustomDetailFragment : DetailSupportFragment() {
    private lateinit var detailHeader: FrameLayout
    private lateinit var videoGridView: HorizontalGridView

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.fragment_custom_detail, container, false)
        
        // Initialize views
        detailHeader = view.findViewById(R.id.detail_header_container)
        videoGridView = view.findViewById(R.id.video_list_grid)

        // Set up your video adapter (replace with your own adapter implementation)
        videoGridView.adapter = VideoHorizontalAdapter(yourVideoList)

        // Handle item selection to update the top detail area
        videoGridView.setOnItemSelectedListener { parent, _, position, _ ->
            val selectedVideo = parent.getItemAtPosition(position) as VideoModel
            updateDetailHeader(selectedVideo)
        }

        return view
    }

    private fun updateDetailHeader(video: VideoModel) {
        // Update the top detail views with selected video data
        detailHeader.findViewById<ImageView>(R.id.video_cover).setImageURI(video.coverUri)
        detailHeader.findViewById<TextView>(R.id.video_title).text = video.title
        // Add more updates for description, release date, etc.
    }
}

Option 2: Use Separate Fragments for Detail and List #

If you want full control over the layout without wrestling with DetailSupportFragment defaults, split your UI into two independent fragments: one for the top detail, and another for the horizontal video list.

Step 1: Activity Layout #

Define your activity's layout to host both fragments:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- Top detail fragment container -->
    <FrameLayout
        android:id="@+id/detail_fragment_container"
        android:layout_width="match_parent"
        android:layout_height="220dp"/>

    <!-- Bottom list fragment container -->
    <FrameLayout
        android:id="@+id/list_fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

Step 2: Initialize Fragments in Activity #

Load both fragments and set up communication between them so selecting a video updates the detail view:

class MainTVActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main_tv)

        // Initialize detail fragment
        val detailFragment = VideoDetailFragment()
        supportFragmentManager.beginTransaction()
            .replace(R.id.detail_fragment_container, detailFragment)
            .commit()

        // Initialize list fragment
        val listFragment = VideoHorizontalListFragment().apply {
            // Pass a listener to update detail fragment on selection
            onVideoSelected = { selectedVideo ->
                detailFragment.updateVideoDetails(selectedVideo)
            }
        }
        supportFragmentManager.beginTransaction()
            .replace(R.id.list_fragment_container, listFragment)
            .commit()
    }
}

Step 3: Implement the Fragments #

• VideoDetailFragment: Handles displaying video details and exposes a method to update its content.
• VideoHorizontalListFragment: Uses Leanback's RowsSupportFragment or a HorizontalGridView to show videos, and triggers the selection listener when an item is chosen.

Key Notes for Both Approaches #

• Focus Management: Ensure the top detail area has android:focusable="false" so D-pad navigation skips it and stays within the video list.
• Leanback Compatibility: If using Leanback components like HorizontalGridView, make sure to set up proper adapters and item decorations to match TV UI standards.

内容的提问来源于stack exchange，提问作者Hassan Imtiaz