BV：Jetpack Compose驱动的哔哩哔哩第三方TV应用开发实战

2026-02-04 04:54:58作者：羿妍玫Ivan

哔哩哔哩的第三方 Android TV 应用。A third-party Android TV app for Bilibili.

项目地址：https://gitcode.com/GitHub_Trending/bv/bv

痛点：传统TV应用开发的困境

你是否曾为Android TV应用开发中的复杂UI适配、性能优化和API集成而头疼？传统TV应用开发面临诸多挑战：

UI适配复杂：TV大屏与手机小屏的布局差异巨大
性能要求高：TV应用需要流畅的60fps体验
交互方式特殊：遥控器操作与触摸操作完全不同
API集成繁琐：第三方平台API调用需要大量封装工作

BV项目正是为了解决这些痛点而生，它采用现代Android开发技术栈，为哔哩哔哩内容在TV端的完美呈现提供了完整解决方案。

技术架构解析

核心架构设计

graph TB
    A[UI Layer] --> B[ViewModel Layer]
    B --> C[Repository Layer]
    C --> D[API Layer]
    D --> E[Bilibili Server]
    
    subgraph UI Components
        F[Compose Screens]
        G[Custom Components]
        H[Theme System]
    end
    
    subgraph Data Flow
        I[State Management]
        J[Data Persistence]
        K[Network Handling]
    end

多模块架构

BV采用Gradle多模块设计，确保代码的可维护性和可扩展性：

模块名称	职责描述	技术特点
`app`	主应用模块	Jetpack Compose UI
`bili-api`	API接口封装	Kotlin协程 + Retrofit
`player`	视频播放器	ExoPlayer集成
`utils`	工具类库	通用工具函数

Jetpack Compose在TV端的实践

TV专属UI组件设计

BV充分利用Jetpack Compose的声明式UI特性，为TV端设计了专门的组件：

@Composable
fun TVVideoCard(
    videoData: VideoCardData,
    modifier: Modifier = Modifier,
    onClick: () -> Unit = {}
) {
    Card(
        modifier = modifier
            .size(320.dp, 240.dp)
            .focusable()
            .onKeyEvent { keyEvent ->
                when (keyEvent.nativeKeyEvent.keyCode) {
                    KeyEvent.KEYCODE_DPAD_CENTER -> {
                        onClick()
                        true
                    }
                    else -> false
                }
            },
        elevation = CardDefaults.cardElevation(8.dp)
    ) {
        Column {
            AsyncImage(
                model = videoData.coverUrl,
                contentDescription = videoData.title,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(180.dp)
                    .clip(RoundedCornerShape(8.dp))
            )
            Text(
                text = videoData.title,
                modifier = Modifier.padding(8.dp),
                maxLines = 2,
                overflow = TextOverflow.Ellipsis,
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

焦点管理策略

TV应用的核心挑战是焦点管理，BV实现了智能焦点系统：

@Composable
fun FocusScopeHandler(
    currentFocus: Int,
    itemCount: Int,
    onFocusChange: (Int) -> Unit
) {
    LaunchedEffect(currentFocus) {
        if (currentFocus < 0) onFocusChange(0)
        if (currentFocus >= itemCount) onFocusChange(itemCount - 1)
    }

    DisposableEffect(Unit) {
        val focusListener = object : OnFocusChangeListener {
            override fun onFocusChange(hasFocus: Boolean) {
                if (hasFocus) {
                    // 处理焦点获取逻辑
                }
            }
        }
        onDispose { /* 清理资源 */ }
    }
}

Bilibili API深度集成

API签名机制

BV实现了完整的B站API签名算法，确保请求的安全性：

object ApiSign {
    private const val APP_KEY = "1d8b6e7d45233436"
    private const val APP_SECRET = "560c52ccd288fed045859ed18bffd973"
    
    fun generateSign(params: Map<String, String>): String {
        val sortedParams = params.toSortedMap()
        val signBuilder = StringBuilder()
        
        sortedParams.forEach { (key, value) ->
            signBuilder.append("$key=$value&")
        }
        signBuilder.append("app_secret=$APP_SECRET")
        
        return md5(signBuilder.toString()).lowercase()
    }
    
    private fun md5(input: String): String {
        val digest = MessageDigest.getInstance("MD5")
        val result = digest.digest(input.toByteArray())
        return result.joinToString("") { "%02x".format(it) }
    }
}

多数据类型处理

BV支持哔哩哔哩丰富的视频内容类型：

内容类型	API端点	数据模型
UGC视频	`/x/web-interface/ranking/v2`	`UgcItem`
PGC内容	`/pgc/operation/api/si/v2/operation`	`PgcItem`
直播内容	`/xlive/web-interface/v1/index/getWebList`	`LiveItem`
动态内容	`/x/polymer/web-dynamic/v1/feed/all`	`DynamicItem`

性能优化策略

内存管理优化

object MemoryOptimizer {
    private const val MAX_CACHE_SIZE = 50 * 1024 * 1024 // 50MB
    
    fun setupImageCache(context: Context) {
        val imageLoader = ImageLoader.Builder(context)
            .components {
                if (SDK_INT >= 28) {
                    add(ImageDecoderDecoder.Factory())
                } else {
                    add(GifDecoder.Factory())
                }
            }
            .memoryCache {
                MemoryCache.Builder()
                    .maxSizeBytes(MAX_CACHE_SIZE)
                    .build()
            }
            .diskCache {
                DiskCache.Builder()
                    .directory(context.cacheDir.resolve("image_cache"))
                    .maxSizeBytes(MAX_CACHE_SIZE)
                    .build()
            }
            .build()
        
        Coil.setImageLoader(imageLoader)
    }
}

网络请求优化

class BiliHttpApi @Inject constructor(
    private val okHttpClient: OkHttpClient
) {
    private val retrofit: Retrofit by lazy {
        Retrofit.Builder()
            .baseUrl("https://api.bilibili.com/")
            .client(okHttpClient)
            .addConverterFactory(Json.asConverterFactory("application/json".toMediaType()))
            .build()
    }
    
    suspend fun <T> executeRequest(block: suspend () -> T): Result<T> {
        return try {
            val result = withContext(Dispatchers.IO) {
                block()
            }
            Result.success(result)
        } catch (e: IOException) {
            Result.failure(e)
        } catch (e: HttpException) {
            Result.failure(e)
        }
    }
}

开发最佳实践

状态管理模式

BV采用MVI（Model-View-Intent）架构模式：

data class VideoPlayerState(
    val videoUrl: String = "",
    val isPlaying: Boolean = false,
    val isLoading: Boolean = false,
    val error: String? = null,
    val progress: Long = 0L,
    val duration: Long = 0L
)

sealed class VideoPlayerIntent {
    data class PlayVideo(val videoId: String) : VideoPlayerIntent()
    object Pause : VideoPlayerIntent()
    object Resume : VideoPlayerIntent()
    data class SeekTo(val position: Long) : VideoPlayerIntent()
}

class VideoPlayerViewModel : ViewModel() {
    private val _state = MutableStateFlow(VideoPlayerState())
    val state: StateFlow<VideoPlayerState> = _state.asStateFlow()
    
    fun processIntent(intent: VideoPlayerIntent) {
        when (intent) {
            is VideoPlayerIntent.PlayVideo -> loadVideo(intent.videoId)
            VideoPlayerIntent.Pause -> pauseVideo()
            VideoPlayerIntent.Resume -> resumeVideo()
            is VideoPlayerIntent.SeekTo -> seekTo(intent.position)
        }
    }
    
    private fun loadVideo(videoId: String) {
        viewModelScope.launch {
            _state.update { it.copy(isLoading = true) }
            // 加载视频逻辑
        }
    }
}

测试策略

@HiltAndroidTest
class VideoPlayerViewModelTest {
    @get:Rule
    val hiltRule = HiltAndroidRule(this)
    
    @Inject
    lateinit var videoRepository: VideoRepository
    
    private lateinit var viewModel: VideoPlayerViewModel
    
    @Before
    fun setup() {
        hiltRule.inject()
        viewModel = VideoPlayerViewModel(videoRepository)
    }
    
    @Test
    fun `play video should update state correctly`() = runTest {
        // Given
        val videoId = "BV1xx411c7mu"
        
        // When
        viewModel.processIntent(VideoPlayerIntent.PlayVideo(videoId))
        
        // Then
        val state = viewModel.state.value
        assertTrue(state.isLoading)
        assertEquals(videoId, state.videoUrl)
    }
}

部署与发布

CI/CD流水线

BV使用GitHub Actions实现自动化构建和发布：

name: Release Build
on:
  push:
    tags:
      - 'v*'

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - name: Set up JDK 17
      uses: actions/setup-java@v3
      with:
        java-version: '17'
        distribution: 'temurin'
    - name: Grant execute permission for gradlew
      run: chmod +x gradlew
    - name: Build with Gradle
      run: ./gradlew assembleRelease
    - name: Upload APK
      uses: actions/upload-artifact@v3
      with:
        name: bv-app
        path: app/build/outputs/apk/release/*.apk