【问题标题】:how to change a drawableLeft icon size on a button?如何更改按钮上的 drawableLeft 图标大小?
【发布时间】:2016-12-06 15:25:11
【问题描述】:

我在 4 个按钮上添加了一些图标,它们在按钮旁边看起来很大。那么如何调整它们的大小呢?我在按钮上使用了 drawableLeft 来添加图标。

可绘制对象称为交易、奖杯、拼图和扩音器。图标太大了。 content_main.xml 文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/content_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="tr.k12.evrim.evrimnews.MainActivity"
    tools:showIn="@layout/activity_main">




    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/frameLayout"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Giriş Yap"
                android:onClick="SignIn"
                android:textStyle="bold"
                style="@style/Widget.AppCompat.Button.Colored"/>




            </LinearLayout>


    </FrameLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:layout_below="@id/frameLayout"
        android:orientation="vertical">



    <Button
        android:text="Duyurular"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_below="@+id/frameLayout"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="13dp"
        android:id="@+id/button2"
        android:drawableLeft="@drawable/megaphone" />

    <Button
        android:text="Kadromuz"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_below="@+id/button2"
        android:layout_alignEnd="@+id/button2"
        android:layout_marginTop="13dp"
        android:id="@+id/button3"
        android:drawableLeft="@drawable/puzzle"/>

        <Button
            android:text="Başarılarımız"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_marginTop="12dp"
            android:id="@+id/button5"
            android:drawableLeft="@drawable/trophy"/>


    <Button
        android:text="Ortaklarımız"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:layout_marginTop="12dp"
        android:id="@+id/button4"
        android:drawableLeft="@drawable/deal"/>




    </LinearLayout>

</RelativeLayout>

【问题讨论】:

  • 你能澄清一下你的问题吗?上传一些屏幕和代码吧?
  • 改变图标本身的大小..?
  • @JamesSwinton 是的,我把它放在按钮旁边。
  • @PrzemyslawJablonski 添加了详细截图。
  • 是的,我的意思是获取实际的drawable并将图像缩小到您想要的大小。

标签: android android-drawable


【解决方案1】:

将您的资源包装在一个可定义您所需大小的可绘制对象中,类似于:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

  <item
      android:drawable="@drawable/icon"
      android:width="@dimen/icon_size"
      android:height="@dimen/icon_size"
      />

</layer-list >

之后,在你的android:drawableLeft标签中使用这个drawable

【讨论】:

  • @MuhammedRefaat 小心这个解决方案,属性 widthheight 只兼容 API 23 或更高版本,所以它不起作用使用 Lollipop 及以下版本。
  • @EduardoE.R.哇,我不知道,很高兴你告诉我,谢谢
  • @EduardoE.R.你能指导我如何使 23 以下版本兼容的属性宽度和高度,所以我可以在棒棒糖和以下版本中显示相同大小的图标,非常感谢提前
  • @AmitVerma 此解决方案兼容 23 以下版本,我的意思是,它不会崩溃,但不会有相同的大小。我真的不知道是否还有其他更好的方法。也许你可以为这个 API 版本使用另一种布局,并使用一个 Image 标签给它一个按钮行为,你知道的,onclick 事件,onPress 事件......如果听起来不是一个很好的解决方案,对不起。
  • 作为一个初学者,我不明白该做什么。请添加更多详细信息。
【解决方案2】:

只需使用 Google 的 MaterialButtons: https://material.io/develop/android/components/buttons/

app:icon
app:iconGravity
app:iconPadding
app:iconSize

【讨论】:

    【解决方案3】:

    更新:

    只需使用 MaterialButton 它具有图标属性,例如:

    app:icon
    app:iconSize
    app:iconGravity
    app:iconPadding
    
    
    
    <com.google.android.material.button.MaterialButton
        app:icon="@drawable/test"
        app:iconSize="8dp"
        app:iconGravity="end"
        app:iconPadding="8dp"/>
    

    【讨论】:

      【解决方案4】:

      您可以通过编程方式设置边界 (here),如下所示

      Drawable img = ActivityName.this.getContext().getResources().getDrawable(
                  R.drawable.blue_line);
      img.setBounds(left, top, right, bottom);
      button.setCompoundDrawables(img, null, null, null);
      

      【讨论】:

        【解决方案5】:

        试试下面的。将可绘制对象声明为您要使用的图标

            Drawable drawable = getResources().getDrawable(R.mipmap.youricon);
            drawable.setBounds(0, 0, (int) (drawable.getIntrinsicWidth() * 0.6),
                    (int) (drawable.getIntrinsicHeight() * 0.6));
            ScaleDrawable sd = new ScaleDrawable(drawable, 0, 40, 40);
            youredittext1.setCompoundDrawables(null, null, sd.getDrawable(), null);
            drawable = getResources().getDrawable(R.mipmap.yourothericon);
            drawable.setBounds(0, 0, (int) (drawable.getIntrinsicWidth() * 0.6),
                    (int) (drawable.getIntrinsicHeight() * 0.6));
            sd = new ScaleDrawable(drawable, 0, 40, 40);
            youredittext2.setCompoundDrawables(null, null, sd.getDrawable(), null);
        

        【讨论】:

          【解决方案6】:

          使用 Kotlin 扩展:

          添加此项以保持您的代码干净且可重用。如果您不传递任何内容或为 0 传递 id,它将清除可绘制对象。 (按钮扩展 TextView)

          buttonView.leftDrawable(R.drawable.my_icon, R.dimen.icon_size)
          
          // Button extends TextView
          fun TextView.leftDrawable(@DrawableRes id: Int = 0, @DimenRes sizeRes: Int) {
              val drawable = ContextCompat.getDrawable(context, id)
              val size = resources.getDimensionPixelSize(sizeRes)
              drawable?.setBounds(0, 0, size, size)
              this.setCompoundDrawables(drawable, null, null, null)
          }
          

          【讨论】:

            【解决方案7】:

            添加到 DroidBender 的出色答案。他的解决方案不会在 API 21 上崩溃,因此它仍然可以使用,即使不添加 Build.VERSION.SDK_INT 代码。这是使用标准图像资源的解决方案在 API 21 上的外观(使用文本高度作为尺寸设置)。

            这就是它在 API 23+ 上的样子

            即使最小 API

            【讨论】:

            • 这在很大程度上取决于可绘制对象,它可能只是被隐藏了,也可能是巨大的。目前 API
            • @htafoya 好点。我想我应该专门说图像资产。我已经更新了我的帖子。
            • @seekingStillness 不,它不会在 API
            • @CDrosos 我在回答“使用标准图像资产”时提到过。我怀疑您没有使用来自 Android Studio 的标准导入图像资产。
            • 什么是标准图片资源?我使用的是位图 png 图像。在我看来,最好使用 API 23 以下的其他方法。最好是安全的
            【解决方案8】:

            只要图标是矢量资源,进入矢量文件并将android:widthandroid:height 修改为@dimen/icon_size 之类的内容。然后在您的 dimens.xml 文件中为多种屏幕尺寸定义此资源。像魅力一样工作

            【讨论】:

            • 这是一个不错的选择——尤其是对于单个用例。想象一下编写几行代码来实现如此小的变化。
            【解决方案9】:

            此解决方案适用于使用矢量图形图标的所有用例,并且还兼容 23 个以下版本。

            在xml中打开可绘制图标

            可绘制的原始图标:

            <vector 
                android:height="24dp"
                android:tint="?attr/colorControlNormal" 
                android:viewportHeight="24"
                android:viewportWidth="24" 
                android:width="24dp" 
                xmlns:android="http://schemas.android.com/apk/res/android">
                <path android:fillColor="@android:color/white" android:pathData="M11,18h2v-2h-2v2zM12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,20c-4.41,0 -8,-3.59 -8,-8s3.59,-8 8,-8 8,3.59 8,8 -3.59,8 -8,8zM12,6c-2.21,0 -4,1.79 -4,4h2c0,-1.1 0.9,-2 2,-2s2,0.9 2,2c0,2 -3,1.75 -3,5h2c0,-2.25 3,-2.5 3,-5 0,-2.21 -1.79,-4 -4,-4z"/>
            </vector>
            

            现在用组标签包装你的路径标签,并在组标签中添加属性 scaleX、scaleY、pivotX 和 pivotY 来缩小图标大小,如下所示:

            <vector 
                android:height="24dp"
                android:tint="?attr/colorControlNormal" 
                android:viewportHeight="24"
                android:viewportWidth="24" 
                android:width="24dp" 
                xmlns:android="http://schemas.android.com/apk/res/android">
                <group
                    android:scaleX="0.5"
                    android:scaleY="0.5"
                    android:pivotX="12"
                    android:pivotY="12">
                    <path
                    android:fillColor="@android:color/white"
                    android:pathData="M11,18h2v-2h-2v2zM12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,20c-4.41,0 -8,-3.59 -8,-8s3.59,-8 8,-8 8,3.59 8,8 -3.59,8 -8,8zM12,6c-2.21,0 -4,1.79 -4,4h2c0,-1.1 0.9,-2 2,-2s2,0.9 2,2c0,2 -3,1.75 -3,5h2c0,-2.25 3,-2.5 3,-5 0,-2.21 -1.79,-4 -4,-4z"/>
                </group>
            </vector>
            

            您可以通过更改 scaleX 和 scaleY 来控制图标的大小。

            这不仅在可绘制对象的情况下有用,而且在任何使用图标的地方以及不容易找到减小图标大小的样式解决方案(例如 AlertDialogue)的地方都很有用。

            【讨论】:

              【解决方案10】:

              使用 ImageView 的最佳方式。 这是一个管理文本视图左右两个图像的示例。

              <ImageView
                      android:id="@+id/manage_icon_image"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:paddingStart="10dp"
                      android:paddingTop="10dp"
                      android:paddingBottom="10dp"
                      android:foregroundGravity="center"
                      android:src="@drawable/manage_store_icon"
                    />
                  <TextView
                      android:id="@+id/manage_store_title"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:layout_marginStart="10dp"
                      android:paddingTop="10dp"
                      android:paddingBottom="10dp"
                      android:textColor="@color/black"
                      android:text="@string/manage_store"
                      android:layout_toRightOf="@+id/manage_icon_image"
                      android:textSize="15sp"/>
                  <ImageView
                      android:id="@+id/ManageStoresLink"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:layout_alignParentEnd="true"
                      android:layout_marginEnd="5dp"
                      android:padding="5dp"
                      android:onClick="onManageStoresLink"
                      android:src="@drawable/manage_arrow_icon"
                      app:layout_constraintTop_toBottomOf="@+id/my_ic_cards"
                      />
              

              【讨论】:

                猜你喜欢
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 2020-02-11
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                相关资源
                最近更新 更多