【问题标题】:automatically resize ImageButtons in LinearLayout在 LinearLayout 中自动调整 ImageButtons 的大小
【发布时间】:2012-06-12 07:10:11
【问题描述】:

总结:我想要一排水平的 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>

【问题讨论】:

    标签: android android-layout


    【解决方案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" 但

    【讨论】:

      【解决方案2】:

      这就是我所拥有的:

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

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

      我向您推荐 2 种方法:

      • 使用 RelativeLayoutweight 标签实现您的布局。使用这些布局可以轻松实现灵活的布局;
      • 使用 DisplayMetrics 类以编程方式定义按钮大小,类似于本文末尾的 sn-p,并使用额外的 .xml 文件(例如 integer.xml),您可以在其中为 定义常量值按钮数量;

      在这个 sn-p 中,dm 是一个保存设备分辨率的结构。

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

      希望对您有所帮助! :)

      【讨论】:

      • 您对使用RelativeLayout 和权重的建议让我有些困惑。你的意思是使用LinearLayout和layout_weight?我不知道有任何 RelativeLayout 权重标签。至于根据屏幕大小以编程方式更改按钮大小,这可能是必要的。这似乎是一个丑陋且不必要的黑客,但如果我找不到更好的选择,我可能会坚持下去。
      猜你喜欢
      • 2012-09-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-05-15
      • 1970-01-01
      • 2023-03-25
      • 1970-01-01
      • 2017-04-29
      相关资源
      最近更新 更多