为什么不同scrreen的布局不同

Question

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

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

我可以知道这是为什么吗？我该如何修复它？

我想我的布局，看起来像这样

然而，我始终布局像这样

我目前使用表格布局和线性布局

。 我也尝试过其他布局，但没有匹配我的需求。

有人可以帮助我吗？

绿色代表的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

为Android设计并不像设计的iOS设备 - 有成千上万种不同的屏幕配置可供选择，而与iOS，有十下。

你可以认为它与设计一个网站类似，具有响应能力;设计师不知道屏幕如何寻找客户端，所以他们必须考虑大小桶，并制作一个布局，可以根据显示的设备重新流动。

您可以在资源目录中指定限定符，这些资源目录的工作方式与网站的媒体查询（例如，layout-sw600dp仅在正在运行的设备的最小宽度为600个密度独立像素时使用）相同。

请参阅Android Developer - designing for multiple screens。

Answer 2

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

Galaxy note：800×1280（1.6纵横比） - 5.3英寸，285 PPI

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

而这不是唯一的2个不同的机器人装置在那里。有成千上万...

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

如果您坚持这两个设备都会使组件的尺寸拉大，请将行设置为具有相同的权重。我认为你仍然可以使用TableLayout，因为它从LinearLayout扩展，但如果你不能，你需要更多的工作。但是，如果你这么做，那么较小的设备就会有微小的组件，并使它们全部挤入到他们的小屏幕中，而较大的设备（甚至是平板电脑）将具有巨大的UI组件。

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

• http://developer.android.com/design/style/metrics-grids.html
• http://developer.android.com/training/multiscreen/index.html
• http://android-developers.blogspot.co.il/2011/07/new-tools-for-managing-screen-sizes.html
• http://developer.android.com/design/style/devices-displays.html
• http://developer.android.com/design/videos/index.html