android布局按钮看起来不像预期的那样

时间:2014-03-06 03:39:39

标签: android android-layout

我需要在水平布局中创建2个按钮,顶部会包含图标。

布局:     

    <ImageButton
        android:id="@+id/imageButton2"
        android:layout_width="wrap_content"
        android:layout_weight="0.5"
        android:layout_height="wrap_content"
        android:src="@drawable/button" />

    <ImageButton
        android:id="@+id/imageButton3"
        android:layout_width="wrap_content"
        android:layout_weight="0.5"
        android:layout_height="wrap_content"
        android:src="@drawable/button" />

</LinearLayout>

按钮:

<item>
    <bitmap
        android:gravity="right"
        android:src="@drawable/ic_action_call"/>
</item>
<item>
    <shape android:shape="rectangle" >

        <gradient 
            android:startColor="#FFEEC9A8"
            android:endColor="#90FFDAB9"
            android:angle="45"/>

        <padding 
            android:left="7dp"
            android:right="7dp"
            android:top="7dp"
            android:bottom="7dp"/>

        <corners android:radius="10dp"/>

        <stroke android:width="2px" android:color="#ff888888"/>

    </shape>
</item>

我希望它看起来像第一张图片,但它看起来像第二个图标周围的灰色区域。有什么问题?

enter image description here enter image description here

在我添加android:scaleType =“fitXY”之后,按钮看起来像: enter image description here

4 个答案:

答案 0 :(得分:1)

将以下属性添加到ImageButton的XML ...

android:scaleType="fitXY"

所以,你将是XML ...

<ImageButton
    android:id="@+id/imageButton2"
    android:layout_width="wrap_content"
    android:layout_weight="0.5"
    android:layout_height="wrap_content"
    android:src="@drawable/button"
    android:scaleType="fitXY" />

<ImageButton
    android:id="@+id/imageButton3"
    android:layout_width="wrap_content"
    android:layout_weight="0.5"
    android:layout_height="wrap_content"
    android:src="@drawable/button"
    android:scaleType="fitXY" />

<强>更新

另一方面,我建议您使用android:background代替android:src,如下所示......

<ImageButton
    android:id="@+id/imageButton2"
    android:layout_width="wrap_content"
    android:layout_weight="0.5"
    android:layout_height="wrap_content"
    android:background="@drawable/button"
    android:scaleType="fitXY" />

另一种方式:

如果您想使用ImageView,那么您可以执行以下操作...

<ImageView
    android:id="@+id/imageButton2"
    android:layout_width="wrap_content"
    android:layout_weight="0.5"
    android:layout_height="wrap_content"
    android:src="@drawable/button" />

<ImageView
    android:id="@+id/imageButton3"
    android:layout_width="wrap_content"
    android:layout_weight="0.5"
    android:layout_height="wrap_content"
    android:src="@drawable/button" />

答案 1 :(得分:1)

非常简单。

无需创建图层列表等等 只需使用下面的代码

<ImageButton android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="@android:color/darker_gray"
   android:src="@drawable/ic_launcher"
   android:paddingLeft="20dip"
   android:paddingRight="20dip"/>

如果您观察到我使用了一些纯色作为背景并提供了一些图标作为图像。

因此,请使用两个不同的属性,例如android:backgroundandroid:src

对于Round corner background,首先创建一个名为round_bg.xml的drawable

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid android:color="@android:color/darker_gray" />
    <corners android:radius="10dip" />
</shape>

现在在上面的代码中进行以下修改

android:background="@drawable/round_bg"

你会完成的。 :)

答案 2 :(得分:1)

使用此功能。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >

<ImageButton
    android:id="@+id/imageButton2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="0.5"
    android:background="@null"
    android:src="@drawable/ic_launcher" />

<ImageButton
    android:id="@+id/imageButton3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="0.5"
    android:background="@null"
    android:src="@drawable/ic_launcher" />

</LinearLayout>

答案 3 :(得分:1)

是您可以使用“在图像视图中单击”

仅供参考

还有一件事你用Nine patches创建了按钮,这样你的图像就可以在某些部分中显示,并且会有回应

例如

enter image description here

这是Nine patche Image,所以每次只有内容部分才会被拉伸。休息将是原样。