2016-08-13 47 views
0

如何安排按钮并在所有设备上工作,如下图所示?如何安排按钮并在android studio中的所有设备上工作?

黄色是一个按钮,其他颜色只是设计。

我尝试RelativeLayout的但在另一个装置 不起作用相同的配置,并尝试的LinearLayout,但在相同的配置不来的。

enter image description here

<LinearLayout 
      android:orientation="vertical" 
      android:layout_width="wrap_content" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:gravity="center_horizontal"> 

      <Button 
       style="?android:attr/buttonStyleSmall" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:id="@+id/button34" 
       android:layout_weight="1" 
       android:background="@drawable/out_up" /> 

      <Button 
       style="?android:attr/buttonStyleSmall" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:id="@+id/button33" 
       android:layout_weight="1" 
       android:background="@drawable/green" /> 

      <Button 
       style="?android:attr/buttonStyleSmall" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:id="@+id/button36" 
       android:layout_weight="1" 
       android:background="@drawable/yellow" /> 

      <Button 
       style="?android:attr/buttonStyleSmall" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:id="@+id/button37" 
       android:layout_weight="1" 
       android:background="@drawable/yellow" /> 

      <Button 
       style="?android:attr/buttonStyleSmall" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:id="@+id/button38" 
       android:layout_weight="1" 
       android:background="@drawable/yellow" /> 

      <Button 
       style="?android:attr/buttonStyleSmall" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:id="@+id/button39" 
       android:layout_weight="1" 
       android:background="@drawable/yellow" /> 

      <Button 
       style="?android:attr/buttonStyleSmall" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:id="@+id/button40" 
       android:layout_weight="1" 
       android:background="@drawable/yellow" /> 

      <Button 
       style="?android:attr/buttonStyleSmall" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:id="@+id/button35" 
       android:layout_weight="1" 
       android:background="@drawable/green_down" /> 
     </LinearLayout> 

    </LinearLayout> 
    <LinearLayout 
     android:orientation="vertical" 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:gravity="center_horizontal"> 

     <Button 
      style="?android:attr/buttonStyleSmall" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/button43" 
      android:layout_weight="1" 
      android:background="@drawable/green_out_up" /> 

     <Button 
      style="?android:attr/buttonStyleSmall" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/button44" 
      android:layout_weight="1" 
      android:background="@drawable/yellow" /> 

     <Button 
      style="?android:attr/buttonStyleSmall" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/button42" 
      android:layout_weight="1" 
      android:background="@drawable/yellow" /> 

     <Button 
      style="?android:attr/buttonStyleSmall" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/button45" 
      android:layout_weight="1" 
      android:background="@drawable/yellow" /> 

     <Button 
      style="?android:attr/buttonStyleSmall" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/button47" 
      android:layout_weight="1" 
      android:background="@drawable/yellow" /> 

     <Button 
      style="?android:attr/buttonStyleSmall" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/button46" 
      android:layout_weight="1" 
      android:background="@drawable/yellow" /> 

     <Button 
      style="?android:attr/buttonStyleSmall" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/button41" 
      android:layout_weight="1" 
      android:background="@drawable/green_out_down" /> 
    </LinearLayout> 

    <LinearLayout 
     android:orientation="vertical" 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:gravity="center_horizontal" > 

     <Button 
      style="?android:attr/buttonStyleSmall" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/button49" 
      android:layout_weight="1" 
      android:background="@drawable/out_up_right" /> 

     <Button 
      style="?android:attr/buttonStyleSmall" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/button53" 
      android:layout_weight="1" 
      android:background="@drawable/right_red" /> 

     <Button 
      style="?android:attr/buttonStyleSmall" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/button54" 
      android:layout_weight="1" 
      android:background="@drawable/right_red" /> 

     <Button 
      style="?android:attr/buttonStyleSmall" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/button55" 
      android:layout_weight="1" 
      android:background="@drawable/right_red" /> 

     <Button 
      style="?android:attr/buttonStyleSmall" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/button56" 
      android:layout_weight="1" 
      android:background="@drawable/right_red" /> 

     <Button 
      style="?android:attr/buttonStyleSmall" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/button57" 
      android:layout_weight="1" 
      android:background="@drawable/right_red" /> 

     <Button 
      style="?android:attr/buttonStyleSmall" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/button52" 
      android:layout_weight="1" 
      android:background="@drawable/right_red" /> 

     <Button 
      style="?android:attr/buttonStyleSmall" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/button48" 
      android:layout_weight="1" 
      android:background="@drawable/out_down_right" /> 
    </LinearLayout> 


</LinearLayout> 
<LinearLayout 
    android:orientation="vertical" 
    android:layout_width="wrap_content" 
    android:layout_height="match_parent" 
    android:layout_weight="1" 
    android:gravity="center_horizontal"> 

    <Button 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:id="@+id/button51" /> 
</LinearLayout> 

Android Studio中的结果是这样的:

enter image description here

+0

所有的android布局是矩形的,所以你如何构建这个布局?使用drawables? –

+0

通过使用图像按钮或按钮和背景以及我通过Photoshop制作的每一个形状。是工作,但没有相同的安排 –

+0

你能分享你的XML布局与[编辑]? –

回答

0

如果你不想失真你布置你需要定义一个“安全区“或”板面积“,这是一个固定的长宽比。

然后您需要在宽度和/或高度上用浮动垫填充此“安全区域”。

例如:

------------------------------------------ 
| pad =============================== pad | 
| + + ======  safe area  ====== + + | 
| pad =============================== pad | 
| + + ======  safe area  ====== + + | 
| pad =============================== pad | 
| + + ======  safe area  ====== + + | 
| pad =============================== pad | 
| + + ======  safe area  ====== + + | 
| pad =============================== pad | 
------------------------------------------ 

或者一个屏幕不够宽

----------------------------------- 
| + pad + + pad + + pad + + pad + | 
| =============================== | 
| ======  safe area  ====== | 
| =============================== | 
| ======  safe area  ====== | 
| =============================== | 
| ======  safe area  ====== | 
| =============================== | 
| ======  safe area  ====== | 
| =============================== | 
| + pad + + pad + + pad + + pad + | 
----------------------------------- 

在这两个例子中的“安全区”是相同的大小,只填充已改变。

+0

您的安全区域的意思 –

+0

“安全区域”是您希望在所有屏幕尺寸上均保持不变的屏幕区域。这是无论屏幕宽度和高度如何都会显示的屏幕部分。 – Tigger

相关问题