Android ui如何正确分配图像按钮?

时间:2012-08-31 15:56:01

标签: android scaling imagebutton

我正在开发一个应用程序我正在尝试正确分配图像按钮但是根据屏幕它们正在改变我在低和高中间可绘制文件夹中添加了低密度,高密度和中密度图像的图像。

这是我的代码和屏幕截图。

<?xml version="1.0" encoding="utf-8"?>
 <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"    
android:id="@+id/ScrollView01" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content">    
  <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="1" 
    android:gravity="center"
    android:paddingLeft="20dip" 
    android:paddingRight="20dip" >

<TableRow>       
<LinearLayout 
    android:orientation="vertical" 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
  <ImageButton 
       android:id="@+id/aboutus"
       android:scaleType="fitCenter"
       android:src="@drawable/aboutus"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:padding="2dp"
       android:background="@android:color/transparent"
       />
    <TextView
    android:text="About Us"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="right"
    android:padding="3dip" 
    android:textColor="#ffffff" />
</LinearLayout>
   <LinearLayout 
   android:orientation="vertical" 
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   >
   <ImageButton
       android:id="@+id/services"         
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:background="@android:color/transparent"
       android:padding="2dp"
       android:src="@drawable/services123" />
    <TextView
    android:text="Services"
     android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="right"
    android:padding="3dip" android:textColor="#ffffff" />
    </LinearLayout>
  </TableRow>    
    <TableRow>
        <LinearLayout android:orientation="vertical" android:layout_width="fill_parent"
       android:layout_height="fill_parent">
    <ImageButton 
       android:id="@+id/courses"           
       android:src="@drawable/services"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:padding="2dp"
       android:background="@android:color/transparent"
       />
    <TextView
    android:text="Courses"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="right"
    android:padding="3dip" android:textColor="#ffffff" />
</LinearLayout>
   <LinearLayout 
   android:orientation="vertical" 
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">     
    <ImageButton 
       android:id="@+id/contactus"
       android:src="@drawable/services"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:padding="2dp"
       android:background="@android:color/transparent"
       />
       <TextView
    android:text="contact us"
     android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="right"
    android:padding="3dip" android:textColor="#ffffff" />
   </LinearLayout>
 </TableRow>
      <TableRow>
         <LinearLayout android:orientation="vertical"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">
    <ImageButton 
       android:id="@+id/syllabus"
       android:src="@drawable/services"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:padding="2dp"
       android:background="@android:color/transparent"
       />
    <TextView
    android:text="Syllabus"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="right"
    android:padding="3dip" 
    android:textColor="#ffffff" />
</LinearLayout>
   <LinearLayout 
   android:orientation="vertical" 
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">          
    <ImageButton 
       android:id="@+id/pingtoupdates"
       android:src="@drawable/services"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:padding="2dp"
       android:background="@android:color/transparent"
       />
    <TextView
    android:text="Ping To Updates"
     android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="right"
    android:padding="3dip" android:textColor="#ffffff" />
    </LinearLayout>
  </TableRow>
 </TableLayout>

enter image description here

2 个答案:

答案 0 :(得分:1)

我相信使用GridView会是最好的,因为你可以在那里修复你的布局,并指定网格中每个图像的大小,而不管它们的大小。

查看此sample教程。

如果您需要更多示例代码,可以在GridView上找到另一个很好的教程herethis one解释如何处理从网格中选择的项目,即当您点击任何图像时会发生什么网格。

希望这有帮助!

答案 1 :(得分:1)

layout_width和height有两个很大的变化,从一个表行项到另一个表行项。在某些LinearLayout中,您使用了fill_parent,fill_parent和一些wrap_content,wrap_content。首先,您需要更正此问题,因为您的要求是每个行项应具有相同的尺寸。
对于你来说,更好的方法是使用GridView。您只需要为行项创建一个布局文件(XML),然后就可以将其用于所有行项。
以下是网格项的示例代码:

 <LinearLayout 
    android:orientation="vertical" 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
        <ImageButton 
           android:id="@+id/aboutus"
           android:src="@drawable/aboutus"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:padding="2dp"
           android:background="@android:color/transparent"/>
        <TextView
           android:text="About Us"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:gravity="right"
           android:padding="3dip" 
           android:textColor="#ffffff" />
</LinearLayout>

如果您不熟悉GridView,请按照此link

进行操作

完成此操作后,您应该尝试多个设备支持。
您可以按照此link获取多个设备支持。

您还可以查看this stackoverflow帖子。