在LinearLayout中自动调整ImageButtons的大小

时间:2012-06-01 21:52:48

标签: android android-layout

摘要:我想要一个水平行的ImageButtons按比例缩小以适应屏幕尺寸。

屏幕顶部有一排ImageButtons。左对齐徽标ImageButton,然后右对齐ImageButtons进行各种操作。

是的,这听起来很像Honeycomb / ICS Action Bar,但代码是针对Froyo的,因此我需要在2.2兼容的布局中实现该设计。

我以编程方式检测我何时在7英寸或更大的屏幕上并切换到ImageButtons的更大图像(因为drawable-xlarge目录仅适用于10英寸及以上,而可绘制的大型作品适用于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>

2 个答案:

答案 0 :(得分: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“,那么我切换到更大的图像。 如果它似乎是&gt; = 7“但是&lt; 9”,那么我会以编程方式更改图像的大小 - 而且我必须进行实验才能找到合适的数字才能工作。如果我有更多的图像或他们改变了,我将不得不重复它。我并不为这种不灵活的解决方案感到自豪,但我找不到其他有用的方法。

答案 1 :(得分:0)

这就是我所拥有的:

在您的具体情况下,我们可以说您的应用布局和按钮大小不依赖于:

  • 移动设备屏幕显示/分辨率;
  • 中的按钮数量 行;

我向您推荐两种方法:

  • 使用 RelativeLayout 权重标记实施布局。使用这些布局可以非常轻松地实现灵活布局;
  • 使用DisplayMetrics类以编程方式定义您的按钮大小,类似于本文末尾的代码段,并使用额外的.xml文件(例如integer.xml),您可以在其中为数量定义一个常量值按钮

在此代码段中, dm 是一种保存设备分辨率的结构。 的

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

希望它对你有所帮助! :)