[英]automatically resize ImageButtons in LinearLayout
简介:我希望水平排列的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>
不幸的是,最后我不得不根据屏幕大小以编程方式更改按钮的大小。
我的最终布局看起来像这样(已清理):
<?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“,那么我将以编程方式更改图像的大小,而我不得不尝试提出正确的编号才能工作。如果我有更多图像或更改了图像,我将不得不重复一遍。我为这种灵活的解决方案不感到骄傲,但找不到其他可行的方法。
这就是我得到的:
在您的特定情况下,我们可以说您的应用布局和按钮大小取决于以下因素:
我向您推荐2种方法:
在此代码段中, dm是用于保存设备分辨率的结构。
希望对您有所帮助! :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.