陕西建设局官方网站,看啥网一个没有人工干预的网,在兔展上怎么做网站页面,北京海淀区的科技有限公司Bilibili移动端APP简介依赖效果登录效果WebView自定义TobRow的Indicator大小首页推荐LazyGridView使用Paging3热门排行榜搜索模糊搜索富文本搜索结果视频详情合集信息Coroutines进行网络请求管理#xff0c;避免回调地狱添加suspendwithContextGit项目链接末简介
此Demo采用A…
Bilibili移动端APP简介依赖效果登录效果WebView自定义TobRow的Indicator大小首页推荐LazyGridView使用Paging3热门排行榜搜索模糊搜索富文本搜索结果视频详情合集信息Coroutines进行网络请求管理避免回调地狱添加suspendwithContextGit项目链接末简介
此Demo采用Android Compose声明式UI编写而成主体采用MVVM设计框架Demo涉及到的主要技术包括Flow、Coroutines、Retrofit、Okhttp、Hilt以及适配了深色模式等主要数据来源于Bilibili API。
依赖
Demo中所使用的依赖如下表格所示
库名称备注Flow流Coroutines协程Retrofit网络Okhttp网络Hilt依赖注入room数据存储coil异步加载图片paging分页加载media3-exoplayer视频
效果
登录
登录在Demo中分为WebView嵌入B站网页实现获取Cookie和自主实现登录由于后者需要通过极验API验证所以暂且采用前者获取Cookie后者绘制了基本view和基本逻辑
效果 WebView
由于登录暂未实现故而此处就介绍使用WebView获取Cookie。由于在Compose中并未直接提供WebView组件故使用AndroidView进行引入。以下代码对WebView进行了一个简单的封装我们只需要在onPageFinished方法中回调所获的cookie即可然后保存到缓存文件即可
Composable
fun CustomWebView(modifier: Modifier Modifier,url:String,onBack: (webView: WebView?) - Unit,onProgressChange: (progress:Int)-Unit {},initSettings: (webSettings: WebSettings?) - Unit {},onReceivedError: (error: WebResourceError?) - Unit {},onCookie:(String)-Unit {}
){val webViewChromeClient object: WebChromeClient(){override fun onProgressChanged(view: WebView?, newProgress: Int) {//回调网页内容加载进度onProgressChange(newProgress)super.onProgressChanged(view, newProgress)}}val webViewClient object: WebViewClient(){override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {super.onPageStarted(view, url, favicon)onProgressChange(-1)}override fun onPageFinished(view: WebView?, url: String?) {super.onPageFinished(view, url)onProgressChange(100)//监听获取cookieval cookie CookieManager.getInstance().getCookie(url)cookie?.let{ onCookie(cookie) }}override fun shouldOverrideUrlLoading(view: WebView?,request: WebResourceRequest?): Boolean {if(null request?.url) return falseval showOverrideUrl request.url.toString()try {if (!showOverrideUrl.startsWith(http://) !showOverrideUrl.startsWith(https://)) {Intent(Intent.ACTION_VIEW, Uri.parse(showOverrideUrl)).apply {addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)view?.context?.applicationContext?.startActivity(this)}return true}}catch (e:Exception){return true}return super.shouldOverrideUrlLoading(view, request)}override fun onReceivedError(view: WebView?,request: WebResourceRequest?,error: WebResourceError?) {super.onReceivedError(view, request, error)onReceivedError(error)}}var webView:WebView? nullval coroutineScope rememberCoroutineScope()AndroidView(modifier modifier,factory { ctx -WebView(ctx).apply {this.webViewClient webViewClientthis.webChromeClient webViewChromeClientinitSettings(this.settings)webView thisloadUrl(url)}})BackHandler {coroutineScope.launch {onBack(webView)}}
}自定义TobRow的Indicator大小
由于在compose中TobRow的指示器宽度被写死如果需要更改指示器宽度则需要自己进行重写将源码拷贝一份然后根据自己需求进行定制具体代码如下
ExperimentalPagerApi
fun Modifier.customIndicatorOffset(pagerState: PagerState,tabPositions: ListTabPosition,width: Dp
): Modifier composed {if (pagerState.pageCount 0) returncomposed thisval targetIndicatorOffset: Dpval indicatorWidth: Dpval currentTab tabPositions[minOf(tabPositions.lastIndex, pagerState.currentPage)]val targetPage pagerState.targetPageval targetTab tabPositions.getOrNull(targetPage)if (targetTab ! null) {val targetDistance (targetPage - pagerState.currentPage).absoluteValueval fraction (pagerState.currentPageOffset / max(targetDistance, 1)).absoluteValuetargetIndicatorOffset lerp(currentTab.left, targetTab.left, fraction)indicatorWidth lerp(currentTab.width, targetTab.width, fraction).value.absoluteValue.dp} else {targetIndicatorOffset currentTab.leftindicatorWidth currentTab.width}fillMaxWidth().wrapContentSize(Alignment.BottomStart).padding(horizontal (indicatorWidth - width) / 2).offset(x targetIndicatorOffset).width(width)
}使用就变得很简单了因为是采用modifier的扩展函数进行编写而modifier在每一个compose组件都拥有所以只需要在tabrow的指示器调用即可具体代码如下
TabRow(...indicator { pos -TabRowDefaults.Indicator(color BilibiliTheme.colors.tabSelect,modifier Modifier.customIndicatorOffset(pagerState pageState,tabPositions pos,32.dp))}...)首页
整个首页页面由BottomNavbar构成包含四个子界面其中第一个界面又由两个子界面组成通过TabRowHorizontalPager完成子页面滑动子页面分为推荐和热门两个页面
推荐
推荐页面由上面的Banner和下方的LazyGridView组成由于Compose中不允许同向滑动所以就将Banner作为LazyGridView的一个item进而进行包裹 LazyGridView使用Paging3
由于在现在Compose版本中LazyGridView并不支持Paging3所以如果有此类需求则需要自己动手具体代码如下
fun T : Any LazyGridScope.items(items: LazyPagingItemsT,key: ((item: T) - Any)? null,span: ((item: T) - GridItemSpan)? null,contentType: ((item: T) - Any)? null,itemContent: Composable LazyGridItemScope.(value: T?) - Unit
) {items(count items.itemCount,key if (key null) null else { index -val item items.peek(index)if (item null) {//PagingPlaceholderKey(index)} else {key(item)}},span if (span null) null else { index -val item items.peek(index)if (item null) {GridItemSpan(1)} else {span(item)}},contentType if (contentType null) {{ null }} else { index -val item items.peek(index)if (item null) {null} else {contentType(item)}}) { index -itemContent(items[index])}
}热门
热门页面代码与推荐页面代码类似此处不在阐述 排行榜
排行界面与上述类似TabHorizontalPager完成所有子页面滑动切换此处也不在继续阐述 搜索
搜索界面主要分为四个模块搜索栏、热搜内容、搜索记录、搜索列表搜索框内字符改变搜索列表显示并以富文本显示热搜内容展开与折叠、搜索记录内容展开与折叠、清空记录等操作都在ViewModel中完成然后view通过监听VM中状态值进行重组 模糊搜索
在搜索框内键入字符然后通过字符的改变获取相应的网络请求数据最后通过AnimatedVisibility显示与隐藏搜索建议列表 富文本
通过逐字匹配输入框内的字符与搜索建议item内容然后输入框的字符存在搜索建议列表中的文字就加入高亮显示列表中因为采用buildAnnotatedString可以让文本显示多种不同风格所以最后将字符内容区别为高亮颜色和普通文本两种文本并让其进行显示
Composable
fun RichText(selectColor: Color,unselectColor: Color,fontSize:TextUnit TextUnit.Unspecified,searchValue: String,matchValue: String
){val richText buildAnnotatedString {repeat(matchValue.length){val index if (it searchValue.length) matchValue.indexOf(searchValue[it]) else -1if (index -1){withStyle(style SpanStyle(fontSize fontSize,color unselectColor,)){append(matchValue[it])}}else{withStyle(style SpanStyle(fontSize fontSize,color selectColor,)){append(matchValue[index])}}}}Text(text richText,maxLines 1,overflow TextOverflow.Ellipsis,modifier Modifier.fillMaxWidth(),)
}搜索结果
搜索结果也是由ScrollableTabRowHorizontalPager完成子页面的滑动切换但是与上述不同的是所展现的Tab与内容并不是固定而是根据后端返回的数据进行自动生成的。由于其他子页面的内容都是由LazyColumn进行展现而综合界面有需要将其他界面的数据进行集中所以就必须LazyColumn嵌套LazyColumn然后这在Compose中是不被允许的所以就将子Page的LazyColumn使用modifier.heightIn(max screenHeight.dp)进行高度限制高度可以取屏幕高度并且多个item之间都是取屏幕高度之间不会存在间隙 视频详情
视频播放功能暂未实现完成因为获取的API返回的URL进行播放一直为403被告知权限不足在网上进行多番查询未果所以暂且搁置。视频库采用的Google的ExoPlayer 合集
每个视频返回的内容数据格式一致但具体内容不一致有的视频存在排行信息、合集等就通过AnimatedVisibility进行显示和隐藏将所有结果进行列出然后在ViewModel通过解析数据并改变相应的状态值view即可进行重组 信息 Coroutines进行网络请求管理避免回调地狱
在日常开发中网络请求必不可少在传统Viewjava开发中使用Retrifit或者okhttp进行网络请求最为常见但大多数场景中后一个API需要前一个API数据内字段值此时就需要callback进行操作回调一次获取代码依旧看起来简洁可读但次数一旦增多则会掉入回调地狱。Google后续推出的协程完美解决此类问题协程的主要核心就是“通过非阻塞的代码实现阻塞功能”具体代码如下
添加suspend
以下为示例代码通过给接口添加suspend标志符告知外界次方法需要挂起
GET(xxxxx)suspend fun getVideoDetail(Query(aid)aid:Int):BaseResponseVideoDetailwithContext
getVideoDetail挂起函数返回一个字段值然后通过withContext包裹使其进行阻塞然后将返回值进行返回后续的getVideoUrl挂起函数就可以使用前一个接口返回的数据需要注意的是函数都需为suspend修饰的方法并且在统一协程域中否则会出现异常 viewModelScope.launch(Dispatchers.Main) {try {withContext(Dispatchers.Main){val cid withContext(Dispatchers.IO){getVideoDetail(_videoState.value.aid)}val url withContext(Dispatchers.IO){getVideoUrl(avid _videoState.value.aid, cid cid)}if (url.isNotEmpty()){play(url)}getRelatedVideos(_videoState.value.aid)}}catch (e:Exception){Log.d(VDetailViewModel,e.message.toString())}}Git项目链接
Git项目链接
末
此Demo并未完全完善尤其是播放界面由于采用Bilibili API获取的视频URL在播放时一直返回403错误被告知没有权限在根据文档进行使用以及网上查询未果之后只能暂且搁置此功能。
