Question

设计计算器时5.7英寸屏幕中的按钮完美贴合，而在5.0英寸屏幕中，按钮不完美。（查看下面的图片）。什么是适合所有MOBILE屏幕设计的正确方法？

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff8800"
tools:context=".MainActivity">


<TextView
    android:id="@+id/textView"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="#ffffff"
    android:padding="0dp"
    android:text="New Text"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<Button
    android:id="@+id/button"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="false"
    android:layout_below="@+id/textView"
    android:layout_margin="0dp"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button2"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_below="@+id/textView"
    android:layout_toEndOf="@+id/button"
    android:layout_toRightOf="@+id/button"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button3"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_below="@+id/textView"
    android:layout_toEndOf="@+id/button2"
    android:layout_toRightOf="@+id/button2"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button4"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="false"
    android:layout_below="@+id/button"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button5"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignTop="@+id/button4"
    android:layout_toLeftOf="@+id/button3"
    android:layout_toStartOf="@+id/button3"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button6"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_below="@+id/button2"
    android:layout_toEndOf="@+id/button2"
    android:layout_toRightOf="@+id/button2"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button7"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="false"
    android:layout_below="@+id/button4"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button8"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignTop="@+id/button7"
    android:layout_toLeftOf="@+id/button6"
    android:layout_toStartOf="@+id/button6"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button9"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignLeft="@+id/button6"
    android:layout_alignStart="@+id/button6"
    android:layout_below="@+id/button6"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button10"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="false"
    android:layout_below="@+id/button7"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button11"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_below="@+id/button8"
    android:layout_toLeftOf="@+id/button9"
    android:layout_toStartOf="@+id/button9"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button12"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignLeft="@+id/button9"
    android:layout_alignStart="@+id/button9"
    android:layout_below="@+id/button9"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button13"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_below="@+id/textView"
    android:layout_toEndOf="@+id/button3"
    android:layout_toRightOf="@+id/button3"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button14"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_below="@+id/button13"
    android:layout_toRightOf="@+id/button3"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button15"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_below="@+id/button14"
    android:layout_toRightOf="@+id/button3"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />

<Button
    android:id="@+id/button16"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_below="@+id/button15"
    android:layout_toRightOf="@+id/button3"
    android:background="#4a4a4a"
    android:text="7"
    android:textColor="#ffffff"
    android:textSize="30dp" />
   </RelativeLayout>

Answer 1

您还应该考虑使用GridLayout或GridView，这样无论屏幕大小如何，您的按钮都会相应调整。

这个家伙使用GridLayout完成了一个非常好的教程：http://code.tutsplus.com/tutorials/android-user-interface-design-creating-a-numeric-keypad-with-gridlayout--mobile-8677

使用GridLayout，您只需确定有多少行，列和单元格，它们应根据不同的屏幕尺寸进行缩放。

Answer 2

您必须在布局文件夹中创建多个布局以支持多个屏幕。示例：

res/layout/my_layout.xml              // layout for normal screen size ("default")
res/layout-large/my_layout.xml        // layout for large screen size
res/layout-xlarge/my_layout.xml       // layout for extra-large screen size
res/layout-xlarge-land/my_layout.xml  // layout for extra-large in landscape

检查official documentation以获取更多信息。

Answer 3

在Android的Weight代理中获取战利品。 Tutorial about it

为所有移动设备设计计算器

3 个答案: