[HarmonyOS] 为任意屏幕尺寸构建 Android 界面

class WindowMetrics {
  class WindowSizeClass(val name: String) {
    companion object {
      val COMPACT = WindowSizeClass(“COMPACT”)
      val MEDIUM = WindowSizeClass(“MEDIUM”)
      val EXPANDED = WindowSizeClass(“EXPANDED”)
    }
  }
  val widthClass: WindowSizeClass
    get() {...}
  val heightClass: WindowSizeClass
    get() {...}
}

  

• 为了确保应用在不同设备尺寸上都能够正确展示，请优先针对较小和展开型宽度大小类来优化布局；  
  
• 在所有的 Reference Devices 上都测试一遍您的应用，优先采用在中等型下的最佳布局；  
  
• 为了提供更好的用户体验，请添加对应用有意义的功能，如支持可折叠设备的折叠状态或针对键盘、鼠标和触控笔输入支持进行优化；
  

// main_activity.xml
<androidX.coordinatorlayout.widget.CorrdinatorLayout
…>
<com.google.android.material.navigationrail.NavigationRailView
  android:id="@+id/navigation_rail"
  android :layout_width="wrap_content"
  android:layout_height="0dp"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintStart_toStartOf="parent"
  app: layout_constraintTop_toTopOf="parent"
  app:headerLayout="@layout/navigation_rail_header"
  app:labelVisibilityMode="unlabeled"
  app:menu="@menu/navigation_rail" />
</androidX.coordinatorlayout.widget.CorrdinatorLayout>

// w600dp/tasks_fragment.xml
<layout...>
   <data.../>
   <androidx.coordinatorlayout.widget.CoordinatorLayout...>
   <com.google.android.material.appbar.AppBarLayout.../>
   <androidx.recyclerview.widget.RecyclerView
     android:id="@+id/tasks_list"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:clipToPadding="false"
     android:paddingLeft="@dimen/pane_margin"
     android:paddingRight="@dimen/pane_margin"
     tools:ignore="SpeakableTextPresentCheck"
     tools:listitem="@layout/task_summary"/>
   </androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>

<!=-NavRail Menu -->
<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    android:id="@+id/nav_tasks"
    android:icon="@drawable/ic_task" .../>
  <item
    android:id="@+id/nav_archives"
    android:icon="@drawable/ic_archive" .../>
</menu>

// MainActivity NavController
class MainActivity: AppCompatActivity() {
...
  override func onCreate(saveInstanceState: Bundle?) {
  ...
    binding.navigationRail?.apply{
      setupWithNavController(navController)
      setOnItemReselectedListener()
      headerView?.setOnClickListener {
        navController.navigate(R.id.nav_task_edit_graph)
      }
    }
  }
}

// tasks_two_pane_fragment.xml
<layout...>
   <androidx.slidingpanelayout.widget.SlidingPaneLayout
     android:id="@+id/sliding_pane_layout"...>
     <androidx.fragment.app.FragmentContainerView
       android:id="@+id/list_pane"
       android:name="com.example.android.trackr.ui.tasks.TasksFragment"
       android:layout_width="@dimen/list_pane_width"
       android:layout_height="match_parent"
       android:layout_weight="@dimen/list_pane_weight"
       tools:layout="@layout/tasks_fragment" />
   <androidx.fragment.app.FragmentContainerView
       android:id="@+id/detail_pane"
       android:name="androidx.navigation.fragment.NavHostFragment"
       android:layout_width="@dimen/detail_pane_width"
       android:layout_height="match_parent"
       android:layout_weight="@dimen/detail_pane_weight"
       app:navGraph="@navigation/task_detail"
       tools:layout="@layout/task_detail_fragment" />
   </androidx.slidingpanelayout.widget.SlidingPaneLayout>
</layout>

<!-- 顶层导航图 -->
<navigation app: startDestination="@+id/nav_tasks"...>
   <fragment
     android:id="@+id/nav_tasks"
     android:name="..trackr.ui.tasks.TasksTwoPaneFragment" ...>
     <action
       android:id="@+id/to_task_edit"
       app: destination="@id/nav_task_edit_graph' />
   </fragment>
<!--Remove the 'details' destination-->
...
</navigation>
<!-SlidingPaneLayout 导航图-->
<navigation...
     app:startDestination="@id/nav_task_detail_placeholder">
     <action
       android:id="@+id/to_task_detail"
       app:destination="@id/nav_task_detail"
       app:popUpTo="@id/nav_task_detail"
       app :popUpToInclusive="true"
     <fragment
       android:id="@+id/nav_task_detail"
       android:name="..trackr.ui..TaskDetailFragment"...>
     <argument
       android:name="taskId"
       app:argType="long" />
   </fragment>
<!-- 为其实目的页面使用一个 placeholder-->
   <fragment
     android:id="@+id/nav_task_detail_placeholder"
     android:name="..trackr.ui.PlaceholderFragment"
     tools:layout="@layout/placeholder_fragment"/>
</navigation>

@Composable
fun Activity.rememberWindowSizeClass(): WindowSize {
   val configuration = LocalConfiguration.current
   val windowMetrics = remember (configuration) {
     WindowMetricsCalculator.getOrCreate()
       .computeCurrentWindowMetrics(this)
   }
   val windowDpSize = with (LocalDensity.current) {
     windowMetrics.bounds.toComposeRect().size.toDpSize()
   }
   when {
     windowDpSize.width < 600.dp -> WindowSize.Compact
     windowDpSize.width < 840.dp
     else -> WindowSize.Expanded
   }
}

NavigationRail(
  header = {
    JetnewsIcon()
  }
) {
  Column(verticalArrangement = Arrangement.Center) {
    Icon(
      icon = Icons.Filled.Home,
      action = navigateToHome
    )
    Icon(
      icon = Icons.Filled.ListAlt,
      action = navigateToInterests
    )
  }
}

@Composable
fun JetnewsApp() {
  val windowSize = rememberWindowSizeState()
  val isDrawerActive = windowSize == WindowSize.Compact
  ModalDrawer(
    gesturesEnabled = isDrawerActive
    drawerContent = {...}
  ) {
    val showNavRail = isDrawerActive
    Row() {
      if (showNavRail) {
        AppNavRail()
      }
      JetnewsNavGraph()
    }
  }
}

@Composable
fun HomeFeedWithArticleDetailsScreen(...) {
  Row() {
    PostList(
      modifier
        .width(334.dp)
        .notifyInput(onInteractWithList))
    Crossfade(...) {
      PostContent(
        modifier
          .fillMaxSize()
          .notifyInput {
            onInteractWithDetail(detailPost.id)
          }
      )
    }
  )}
}

val windowSize = rememberWindowSizeState()
val homeScreenType = when (windowSize) {
  WindowSize.Compact,
  WindowSize.Medium -> HomeScreenType.Feed
  WIndowSize.Expanded -> HomeScreenType.FeeWithArticleDetails
}

testOptions
  devices {
    pixel2api29 (com.android.build.api.dsl.ManagedVirtualDevice) {
    nexus9api30 (com.android.build.api.dsl.ManagedVirtualDevice) {
      device = "Nexus 9"
      apiLevel = 30
      systemImageSource = "google"
      abi = "×86"
    }
  }
  deviceGroups {
    mediumAndExpandedWidth{
      targetDevices.addAll(devices.pixel2api29)
      targetDevices.addAll(devices.nexus9api30)
  }
}

$ gradlew -Pandroid.experimental.androidTest.useUnifiedTestPlatform=true mediumAndExpandedWidthGroupDebugAndroidTest

$ gradlew -Pandroid.experimental.androidTest.numManagedDeviceShards=2 deviceDebugAndroidTest