按钮背景图像拉伸(wrap_content或dp用法)

Question

我正在将背景图像设置为我的自定义按钮.我为我的应用程序制作了截图,并提到当我使用"wrap_content"作为按钮的宽度和高度时,按钮被拉伸.当我在dp中修改大小时,它会显得很好(例如:在我的mdpi文件夹中,我有48x48px图标,所以我把48dp放在宽度和高度上).你能解释一下为什么吗？

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/definition_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="5dp"
android:layout_alignParentTop="true" >

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/buttons"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="5dp" >

    <Button
        android:id="@+id/addToFavorites"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/favorites_button" />

    <Button
        android:id="@+id/fontup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/fontup_button" />

    <Button
        android:id="@+id/fontdown"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/fontdown_button" />

    <Button
        android:id="@+id/comment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/comment_button" />

    <Button
        android:id="@+id/speak"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/speak_button" />
    </LinearLayout>

    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent"
        android:layout_below="@id/buttons">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/image_frame"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <WebView
        android:id="@+id/webView1"
        android:layout_below="@id/image_frame"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    </LinearLayout>
    </ScrollView>

    </RelativeLayout>

上面的代码显示了我的XML文件.您可以查看此链接以查看我的问题的屏幕截图:https: //www.dropbox.com/s/phnxt5p335ltqef/buttons_icon_altered.png

Answer 1

您可以通过将minWidth和minHeight设置为0dp来避免按钮背景拉伸

<Button
    android:id="@+id/addToFavorites"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minWidth="0dp"
    android:minHeight="0dp"
    android:layout_margin="5dp"
    android:background="@drawable/favorites_button" />

Answer 2

这很简单:

• 使用ImageButton而不是Button
• 将background属性设置为null
• 设置src属性
• 将scaleType属性设置为centerInside

工作范例:

<ImageButton
android:id="@+id/my_awesome_button"
android:scaleType="centerInside"
android:background="@null"
android:gravity="center"
android:layout_height="wrap_content" 
android:layout_width="wrap_content"
android:src="@drawable/my_awesome_drawable"/>

注意: 您还可以使用dp值而不是" wrap_content ".

我希望它有所帮助.

Answer 3

它看起来很拉伸,因为"wrap_content"意味着android将拉伸图像以适应封闭的布局.

在您的情况下,线性布局中的按钮将占用布局中的尽可能多的空间.因此,除非您设置按钮的高度和宽度,否则它们将伸展以填充线性布局占用的空间,因此,它们的背景图像也将随按钮一起拉伸.

但是如果你将按钮大小设置为48dp,那么图像将不必拉伸,因为它们的大小也是48px,因此它们看起来不错.

有关布局的更多信息,请访问优秀的官方开发人员文档:https: //developer.android.com/guide/topics/ui/declaring-layout.html

并在这里学习如何管理多个Android屏幕尺寸和分辨率的布局和资产:

https://developer.android.com/guide/practices/screens_support.html