Question

我想实现以下显示在我的android应用中的屏幕设计。我想出了这个设计，它在手机和宽度大于480dp的设备上看起来都不错。但是我希望能够在较小的屏幕上产生相似的结果。我尝试使用layout-sw480dp。令我困惑的是，如何在不使用LinearLayout的宽度和高度的硬编码尺寸值的情况下产生相似的结果。

我是如何实现屏幕的，基本上是在LinearLayout中创建五个固定宽度和高度值的dp，然后使用ConstraintLayout作为根布局来创建ConstraintGuide （垂直）屏幕尺寸的50％，然后我将前两个LinearLayout约束在该指南的左侧和右侧。

我还在屏幕的60％处使用了ConstraintGuide（水平），并限制了该准则上方的前两个布局和其他三个准则。我还以水平链式约束了三个Linearlayout。

另一个复杂性是TextView中的LinearLayout不在一行中。第一个TextView长两行。

在考虑屏幕兼容性的同时又要紧贴设计，我将如何着手实施此屏幕设计。

Answer 1

您是否正在寻找类似的东西？

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

 <LinearLayout
     android:orientation="vertical"
     android:layout_width="match_parent"
     android:layout_height="match_parent">

     <!--- First pink half -->
     <LinearLayout
         android:layout_width="match_parent"
         android:background="#ff00ff"
         android:layout_height="match_parent"
         android:layout_weight="1">
     </LinearLayout>

     <!--- Second half -->
     <LinearLayout
         android:orientation="vertical"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout_weight="1">

         <!--- Layout for 2 Buttons -->
         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:layout_weight="1"
             android:gravity="center"
             android:background="#00ffff"
             android:orientation="horizontal">
             <LinearLayout
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:orientation="horizontal">
                 <Button
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="Button1"/>
                 <Button
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:text="Button2"/>
             </LinearLayout>
         </LinearLayout>

         <!--- Layout for 3 Buttons -->
         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:layout_weight="1"
             android:gravity="center"
             android:background="#0000ff"
             android:orientation="horizontal">
             <LinearLayout
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:orientation="horizontal">
                 <Button
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:text="Button3"/>
                 <Button
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:text="Button4"/>
                 <Button
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:text="Button5"/>
             </LinearLayout>
         </LinearLayout>

         <!--- Layout for round Button -->
         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:layout_weight="1"
             android:gravity="center"
             android:background="#00ff00"
             android:orientation="horizontal">
             <Button
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="Round Button"/>
         </LinearLayout>
     </LinearLayout>
 </LinearLayout>
</LinearLayout>

结果如下：

我该如何实施这种屏幕设计？需要屏幕兼容

1 个答案: