Question

我想问一下，如何在不同的屏幕上修复布局？

当我运行应用程序时，XML中显示的布局与我的设备显示的布局不同。尽管如此，星系Ace 2的布局和三星音符的布局也不同。

我可以知道为什么会这样，我该如何解决呢？

我希望我的布局看起来像这样

enter image description here

但是，我的布局总是看起来像这样

enter image description here

我目前正在使用表格布局和线性布局。我也尝试了其他布局，但没有一个符合我的需求。

有人可以帮助我吗？

绿色代表textview 红色代表edittext

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
     android:orientation="vertical"
    android:layout_height="fill_parent"
    tools:context=".MainActivity" 
    android:background="@drawable/background">

   <TableLayout
        android:id="@+id/tableLayout1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:stretchColumns="1" >

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/datetxtview"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Date:"
                android:textColor="#99FFFF"
                android:textSize="18sp"
                android:textStyle="bold" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <EditText
                android:id="@+id/date"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:clickable="false"
                android:cursorVisible="false"
                android:focusable="false"
                android:focusableInTouchMode="false"
                android:hint="DD/MM/YYYY"
                android:inputType="date"
                android:textColor="#FFFFFF"
                android:textColorHint="#0099FF"
                android:textSize="12sp" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow3"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/fuelpricetxtview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Fuel Price ($):"
                android:textColor="#99FFFF"
                android:textSize="18sp"
                android:textStyle="bold" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow4"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <EditText
                android:id="@+id/fuelprice"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:hint="Enter the price"
                android:textColor="#FFFFFF"
                android:textColorHint="#0099FF"
                android:textSize="15sp" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow5"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/fuelpumptxtview"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Fuel Pump (litre):"
                android:textColor="#99FFFF"
                android:textSize="18sp"
                android:textStyle="bold" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow6"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <EditText
                android:id="@+id/fuelpump"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:hint="Enter the number of litres pump"
                android:textColorHint="#0099FF"
                android:textColor="#FFFFFF"
                android:textSize="15sp" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow7"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/totalcosttxtview"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Total Cost ($):"
                android:textColor="#99FFFF"
                android:textSize="18sp"
                android:textStyle="bold" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow8"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/tcost"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textColor="#FFFFFF"
                android:textSize="15sp" />
        </TableRow>




        <TableRow
            android:id="@+id/tableRow9"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/odometertxtview"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Current Odometer (mileage):"
                android:textColor="#99FFFF"
                android:textSize="18sp"
                android:textStyle="bold" 
                />
        </TableRow>




        <TableRow
            android:id="@+id/tableRow10"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <EditText
                android:id="@+id/odometer"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:ems="10"
                android:textColor="#FFFFFF"
                android:textSize="15sp" 
                 android:hint="Enter your current odometer"
                android:textColorHint="#0099FF"/>
        </TableRow>





        <TableRow
            android:id="@+id/tableRow12"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/fctxtview"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Fuel Consumption:"
                android:textColor="#99FFFF"
                android:textSize="18sp"
                android:textStyle="bold" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow13"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/fcon"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textColor="#FFFFFF"
                android:textSize="15sp" />
        </TableRow>


    </TableLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:weightSum="90">
              <Button
                android:id="@+id/saveBTN"
                style="@style/ButtonInside"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:paddingTop="100dp"
                android:text="Save" 
                android:layout_weight="45"/>
  <Button
      android:id="@+id/cancelBTN"
      style="@style/ButtonInside"
     android:layout_width="0dp"
                  android:layout_weight="45"
      android:layout_height="wrap_content"
      android:paddingTop="100dp"
      android:text="Cancel" />

    </LinearLayout>
</RelativeLayout>

Answer 1

作为用户，您可能已经注意到您的设备的屏幕和规格彼此不同（很多）：

Galaxy note：800 x 1280（1.6宽高比） - 5.3英寸，285 ppi

galaxy Ace 2：480 x 800（1.6666 ...纵横比） - 3.8英寸，246 ppi

那并不是那里唯一的两个不同的Android设备。有成千上万......

你需要考虑如何使用优雅的解决方案来处理它们。

如果您坚持两个设备都会使组件的大小拉伸，请将行设置为具有相同的权重。我认为你仍然可以使用TableLayout，因为它扩展了LinearLayout，但如果你不能，你需要有更多的工作。

然而，如果你这样做，较小的设备将拥有微小的组件并使它们全部挤入他们的小屏幕，而较大的设备（甚至平板电脑）将拥有巨大的UI组件。

我建议您观看一些有关UI设计以及如何处理不同屏幕的Google IO讲座。关于它的链接也很多，例如：

Answer 2

Android的设计与设计iOS设备不同 - 有数千种不同的屏幕配置可供选择，而iOS则不到10种。

您可以将其视为与设计网站类似，并考虑到响应能力;设计师不知道屏幕将如何寻找客户端，因此他们必须考虑尺寸存储桶，并根据显示的设备制作可以重新流动的布局。

您可以在资源目录中指定限定符，这些限定符的作用类似于网站的媒体查询（例如layout-sw600dp，仅在运行它的设备具有600个密度独立像素的最短宽度时使用。）

请参阅Android Developer - designing for multiple screens。

为什么不同屏幕的布局不同

2 个答案: