2

摘要：我想要一排水平的 ImageButtons 均匀地缩小以适应屏幕尺寸。

我在屏幕顶部有一排 ImageButtons。一个左对齐的徽标 ImageButton，然后是右对齐的 ImageButtons，用于各种操作。

是的，这听起来很像 Honeycomb/ICS 操作栏，但代码是针对 Froyo 的，所以我需要在 2.2 兼容的布局中实现设计。

我以编程方式检测我何时在 7" 或更大的屏幕上，并切换到 ImageButtons 的更大图像（因为 drawable-xlarge 目录仅适用于 10" 及以上，而 drawable-large 适用于 4" 及以上）。

这在手机或 10" 平板电脑上效果很好。但是，在 7" 平板电脑上，图像对于纵向模式的空间来说太大了（应用程序被锁定为纵向模式）。

我尝试了许多不同的方法来缩小图像，因为我不想再为 7" 平板电脑使用另一组图像。但是图像的间距不正确，或者缩放到不同的水平，或者只是一些图片出现在屏幕上。我用过RelativeLayout、LinearLayout、android:weightSum，将图片设置为背景图片、src图片等。

编辑：我在实验中注意到的另一个怪癖是，如果我设置相同的 layout_weight，布局会起作用，迫使每个项目具有相同的宽度。如果我希望某些项目具有不同的宽度——在这种情况下这是必要的，因为第一个按钮需要更宽——然后当我设置与其他项目不匹配的 layout_weight 时布局会中断。只有一两个项目出现在屏幕上，其余的可能被推开。

这是我正在使用的布局。这是我迄今为止最好的——它在 10 英寸平板电脑和手机上运行良好，在 7 英寸平板电脑上几乎可以接受。但是徽标——应该与按钮高度相同，宽约 2.5 倍——明显高于其他按钮。有关改进布局的任何建议？

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/actionBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0"
    android:padding="5dip"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:background="@drawable/action_bar_bg"
     >

    <ImageButton
         android:id="@+id/logoButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:background="@null"
         android:src="@drawable/save_logo_03"
         android:padding="2dip"
         android:adjustViewBounds="true"
         android:scaleType="centerInside"
          />
     <View
         android:id="@+id/spacer"
         android:layout_width="50dip"
         android:layout_height="1dip"
         android:layout_weight="1"
         android:visibility="invisible"
         />
     <ImageButton
         android:id="@+id/listButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:src="@drawable/list_button"
         android:background="@null"
         android:adjustViewBounds="true"
         android:padding="2dip"
         android:scaleType="centerInside"
          />

     <ImageButton
         android:id="@+id/mapButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:background="@null"
         android:src="@drawable/map_button2"
         android:adjustViewBounds="true"
         android:padding="2dip"
         android:scaleType="centerInside"
          />

     <ImageButton
         android:id="@+id/ltoButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:background="@null"
         android:src="@drawable/lto_button"
         android:adjustViewBounds="true"
         android:padding="2dip"
         android:scaleType="centerInside"
          />

     <ImageButton
         android:id="@+id/searchButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:background="@null"
         android:src="@drawable/search_button"
         android:adjustViewBounds="true"
         android:padding="2dip"
         android:scaleType="centerInside"
          />

</LinearLayout>
4

2 回答 2

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="wrap_content"
    android:layout_weight="0"
    android:padding="5dip"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:background="@drawable/action_bar_bg"
     >
     <ImageButton
         android:id="@+id/logoButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="0"
         android:background="@null"
         android:padding="2dip"
         android:adjustViewBounds="true"
         android:src="@drawable/logo"
         android:scaleType="centerInside"
          />

     <View
         android:layout_width="0dp"
         android:layout_height="0dp"
         android:layout_weight="1"/>

     <ImageButton
         android:id="@+id/button1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="0"
         android:background="@null"
         android:padding="2dip"
         android:src="@drawable/button1"
         android:scaleType="centerInside"
         android:adjustViewBounds="true"
         />

     <ImageButton
         android:id="@+id/button2"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="0"
         android:background="@null"
         android:padding="2dip"
         android:src="@drawable/button2"
         android:scaleType="centerInside"
         android:adjustViewBounds="true"
          />

     <ImageButton
         android:id="@+id/button3"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="0"
         android:background="@null"
         android:padding="2dip"
         android:src="@drawable/button3"
         android:scaleType="centerInside"
         android:adjustViewBounds="true"
          />

     <ImageButton
         android:id="@+id/button4"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="0"
         android:background="@null"
         android:padding="2dip"
         android:src="@drawable/button4"
         android:adjustViewBounds="true"
         android:scaleType="centerInside"
          />

</LinearLayout>

注意填充可用空间的空视图，将其他按钮推到屏幕右侧。

在代码中，我检查了屏幕尺寸。如果它看起来 >= 7"，那么我切换到更大的图像。如果它看起来 >=7" 但 < 9"，那么我以编程方式更改图像的大小 - 我必须尝试想出一个正确的数字让它工作。如果我有更多的图像或者它们改变了，我将不得不重复它。我对这样一个不灵活的解决方案并不感到自豪，但我找不到任何其他的工作。

于 2012-06-11T23:10:11.910 回答
0

这就是我所拥有的：

在您的特定情况下，我们可以说您的应用程序布局和按钮大小取决于：

  • 移动设备的屏幕尺寸/分辨率；
  • 行中按钮的数量；

我向您推荐两种方法：

  • 使用RelativeLayout和权重标签实现您的布局。使用这些可以使灵活的布局变得非常容易；
  • 使用 DisplayMetrics 类以编程方式定义按钮大小，类似于本文末尾的片段，并使用额外的 .xml 文件（例如 integer.xml），您可以在其中为按钮数量定义一个常量值；

在这个片段中，dm是一个保存设备分辨率的结构。 

DisplayMetrics dm = new DisplayMetrics();
context.getWindowManager().getDefaultDisplay().getMetrics(dm);

希望对您有所帮助！:)

于 2012-06-01T23:41:33.137 回答