优化播放详情页控制按钮各尺寸屏幕适配

publish/changeLog.md

@@ -8,7 +8,7 @@
 - 添加是否忽略电池优化检查，用于提醒用户添加白名单，确保APP后台播放稳定性
 - 在设置界面返回时，不再直接返回桌面，将回到进入设置界面前的界面，再非设置界面返回时才会返回桌面
 - 更新播放栏进度条样式，进度条允许拖动调整进度
-- 优化播放详情页歌曲封面对屏幕大小的适配，修改横屏下的控制栏按钮布局
+- 优化播放详情页歌曲封面、控制按钮对各尺寸屏幕的适配，修改横屏下的控制栏按钮布局
 
 ### 修复
 

src/screens/PlayDetail/Horizontal/Pic.tsx

@@ -35,10 +35,13 @@ export default memo(({ componentId }: { componentId: string }) => {
     setAnimated(true)
   })
 
-  const imgWidth = Math.min((winWidth * 0.45 - marginLeft - BTN_WIDTH) * 0.76, (winHeight - StatusBar.currentHeight - HEADER_HEIGHT) * 0.62)
+  let imgWidth = Math.min((winWidth * 0.45 - marginLeft - BTN_WIDTH) * 0.76, (winHeight - StatusBar.currentHeight - HEADER_HEIGHT) * 0.62)
+  imgWidth -= imgWidth * (global.lx.fontSize - 1) * 0.3
+  let contentHeight = (winHeight - StatusBar.currentHeight - HEADER_HEIGHT) * 0.66
+  contentHeight -= contentHeight * (global.lx.fontSize - 1) * 0.2
 
   return (
-    <View style={{ ...styles.container, height: (winHeight - StatusBar.currentHeight - HEADER_HEIGHT) * 0.66 }}>
+    <View style={{ ...styles.container, height: contentHeight }}>
       <View style={{ ...styles.content, elevation: animated ? 3 : 0 }}>
         {
           musicInfo.pic

src/screens/PlayDetail/Horizontal/Player/ControlBtn.tsx

@@ -45,7 +45,7 @@ const TogglePlayBtn = ({ size }: { size: number }) => {
 
 export default () => {
   const { onLayout, height, width } = useLayout()
-  const size = Math.min(height * 0.65, (width - marginLeft) * 0.7 * 0.3)
+  const size = Math.min(height * 0.65, (width - marginLeft) * 0.52 * 0.3) * global.lx.fontSize
   return (
     <View style={{ ...styles.content, gap: size * 0.5 }} onLayout={onLayout}>
       <PrevBtn size={size} />

src/screens/PlayDetail/Vertical/Pic.tsx

@@ -34,7 +34,7 @@ export default ({ componentId }: { componentId: string }) => {
   })
   // console.log('render pic')
 
-  const imgWidth = Math.min(winWidth * 0.8, (winHeight - StatusBar.currentHeight - HEADER_HEIGHT) * 0.58)
+  const imgWidth = Math.min(winWidth * 0.8, (winHeight - StatusBar.currentHeight - HEADER_HEIGHT) * 0.5)
 
   return (
     <View style={styles.container}>

src/screens/PlayDetail/Vertical/Player/components/ControlBtn.tsx

@@ -45,7 +45,7 @@ const TogglePlayBtn = ({ size }: { size: number }) => {
 
 export default () => {
   const { onLayout, height, width } = useLayout()
-  const size = Math.min(height * 0.95, width * 0.5 * 0.3)
+  const size = Math.min(height * 0.5, width * 0.4 * 0.33) * global.lx.fontSize
 
   return (
     <View style={styles.conatiner} onLayout={onLayout}>
@@ -63,8 +63,8 @@ const styles = createStyle({
     justifyContent: 'space-evenly',
     alignItems: 'center',
     flex: 1,
-    paddingLeft: '2%',
-    paddingRight: '2%',
+    paddingLeft: '4%',
+    paddingRight: '4%',
     // paddingTop: '8.6%',
     // paddingBottom: '8.6%',
     // backgroundColor: 'rgba(0, 0, 0, .1)',

src/screens/PlayDetail/Vertical/index.tsx

@@ -89,7 +89,7 @@ export default memo(({ componentId }: { componentId: string }) => {
           <View style={{ ...styles.pageIndicatorItem, backgroundColor: pageIndex == 0 ? theme.secondary20 : theme.normal60 }}></View>
           <View style={{ ...styles.pageIndicatorItem, backgroundColor: pageIndex == 1 ? theme.secondary20 : theme.normal60 }}></View>
         </View> */}
-        <View style={styles.player} nativeID={NAV_SHEAR_NATIVE_IDS.playDetail_player}>
+        <View style={{ flex: 0, height: `${36 * global.lx.fontSize}%` }} nativeID={NAV_SHEAR_NATIVE_IDS.playDetail_player}>
           <Player />
         </View>
       </View>
@@ -120,9 +120,9 @@ const styles = StyleSheet.create({
     marginRight: 2,
     borderRadius: 2,
   },
-  player: {
-    flex: 0,
-    height: '38%',
-    // backgroundColor: 'rgba(0,0,0,0.1)',
-  },
+  // player: {
+  //   flex: 0,
+  //   height: '36%',
+  //   // backgroundColor: 'rgba(0,0,0,0.1)',
+  // },
 })