【问题标题】:Changing the drawable size inside a button更改按钮内的可绘制大小
【发布时间】:2015-12-15 21:17:57
【问题描述】:

我想像这样创建一个Button

这是我的代码:

<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"
android:drawablePadding="10dp"
android:id="@+id/button"
android:text="Play Game"
android:background="@drawable/ronaldo"
android:drawableRight="@drawable/messi" />

但是messi.jpeg 太大了,这种情况下不显示文字。如何减小图片尺寸以适应按钮?

谁能帮我解决这个问题?

【问题讨论】:

标签: android android-layout android-drawable android-button android-image


【解决方案1】:

解决方案 1:

向按钮添加可绘制对象的功能非常有限。您无法更改可绘制的大小,因此修复它的最佳方法是在线性布局中添加一个带有图像视图的按钮,如下所示:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/ronaldo"
    android:orientation="horizontal">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp"
        android:background="@null"
        android:text="Play Game"
        android:textColor="#ff0000"
        android:textStyle="italic" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:src="@drawable/messi" />

</LinearLayout>

解决方案 2:

如果您更喜欢这个,您也可以执行以下操作,但您必须为它们中的每一个添加 onClickListener():

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/ronaldo"
    android:orientation="horizontal">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:background="@null"
        android:text="Play Game"
        android:textColor="#ff0000"
        android:textStyle="italic" />

    <ImageButton
        android:id="@+id/imageButton"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:src="@drawable/messi" />

</LinearLayout>

解决方案 3:

正如您在 cmets 中所建议的,您可以这样做:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="80dp"
    android:layout_gravity="center"
    android:background="@drawable/ronaldo">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:layout_alignLeft="@+id/buttonLayout"
        android:layout_alignRight="@+id/buttonLayout"
        android:background="@null" />

    <LinearLayout
        android:id="@+id/buttonLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="80dp"
            android:gravity="center"
            android:text="Play Game"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="#ff0000"
            android:textStyle="italic" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="80dp"
            android:src="@drawable/messi" />

    </LinearLayout>

</RelativeLayout>

【讨论】:

  • 我已经这样做了,但是看起来不是很好,每当处理一些东西时,我们必须处理这个“小按钮”。这不是很好的方法
  • 这是唯一的方法。如果您想要更好但更难的方法,您可以使用 9-patch 图像。谷歌它以获得更多帮助。希望对您有所帮助。
  • @khuong291 另请查看我更新的答案。它可能正是您所需要的。
  • @khuong291 这正是我所做的。没有区别。
【解决方案2】:

如果您使用 API >= 23,您可以将可绘制资源放在 XML 文件中,如下所示 messi_smaller.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/messi"
        android:width="smaller_width_in_dp"
        android:height="smaller_height_in_dp">
    </item>
</layer-list>

在设置宽度和高度时,必须确保保持可绘制比例。只需在您的按钮中使用此可绘制对象:

<Button
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_gravity="center"
    android:drawablePadding="10dp"
    android:id="@+id/button"
    android:text="Play Game"
    android:background="@drawable/ronaldo"
    android:drawableRight="@drawable/messi_smaller" />

通过这种方式,你可以在xml代码中改变drawable的大小

【讨论】:

  • 最聪明的,这是正确的解决方案!谢谢
  • 优秀的解决方案。谢谢
【解决方案3】:

我删除了button 并制作了一个类似button 的图层

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@android:color/background_light"
    android:gravity="center"
    android:orientation="horizontal">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:onClick="go_map"
        android:clickable="true"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/img_m0"
            style="@style/menu2img"
            app:srcCompat="@drawable/ico_m0" />
       <TextView
            android:id="@+id/textView2"
            style="@style/menu2text"
            android:text="@string/men_map" />
    </LinearLayout>

[]

【讨论】:

    【解决方案4】:

    您可以像这样使用 RelativeLayout

    <RelativeLayout
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@drawable/ronaldo">
    
        <Button
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="play game"
            />
        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:background="@drawable/messi"
            android:scaleType="fitXY"
            />
    </RelativeLayout>
    

    【讨论】:

    • 不,我只想要 1 个包含文本和图像的按钮。
    • 这样用有什么问题?
    • 这里没有问题,但是每当要处理某些东西时,我们必须要处理这个“小按钮”。这不是一个很好的方法。
    【解决方案5】:

    试试这个:

    final Button button = (Button) findViewById(R.id.button1);
    ViewTreeObserver vto = button.getViewTreeObserver();
    vto.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
                public boolean onPreDraw() {
                    button.getViewTreeObserver().removeOnPreDrawListener(this);
                    //scale to 90% of button height
                    DroidUtils.scaleButtonDrawables(button, 0.9);
                    return true;
                }
            });
    

    【讨论】:

      【解决方案6】:

      如果您要处理多种屏幕尺寸,为给定屏幕(drawable-mdpi 文件夹等...)创建替代版本可能是解决方案。

      【讨论】:

        【解决方案7】:

        如果您直接导入矢量,您可以使用以下内容:

        <vector android:height="30dp"  android:tint="#00FF41"
            android:viewportHeight="24" android:viewportWidth="24"
            android:width="30dp" xmlns:android="http://schemas.android.com/apk/res/android">
            <path android:fillColor="@android:color/white" android:pathData="M20,6h-8l-2,-2L4,4c-1.1,0 -1.99,0.9 -1.99,2L2,18c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2L22,8c0,-1.1 -0.9,-2 -2,-2zM20,18L4,18L4,8h16v10zM8,13.01l1.41,1.41L11,12.84L11,17h2v-4.16l1.59,1.59L16,13.01 12.01,9 8,13.01z"/>
        </vector>
        

        【讨论】:

          【解决方案8】:

          对于 API >= 23 和 android.support.design.widget.FloatingActionButton(FAB) ,您可以将可绘制资源 (SVG) 放在 XML 文件中,路径为:File/New/Vector Asset,并将文件保存在名称下,例如:ic_water_white_24dp.xml

          并将app:maxImageSize 属性添加到FAB:

          <android.support.design.widget.FloatingActionButton
              android:id="@+id/btnAddProduct"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginBottom="16dp"
              android:layout_marginEnd="16dp"
              android:clickable="true"
              android:focusable="true"
              app:layout_constraintBottom_toBottomOf="parent"
              app:layout_constraintEnd_toEndOf="parent"
              app:maxImageSize="40dp" // add this line to increase the icon inside the fab
              app:srcCompat="@drawable/ic_water_damage_white_24dp" />
          

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2020-04-12
            • 2020-05-13
            • 1970-01-01
            • 1970-01-01
            • 2016-02-14
            相关资源
            最近更新 更多