代码之家  ›  专栏  ›  技术社区  ›  Twitter khuong291

更改按钮内的可拉伸尺寸

  •  14
  • Twitter khuong291  · 技术社区  · 9 年前

    我想创建一个 Button 这样地:

    Button Example

    这是我的代码:

    <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 太大,在这种情况下无法显示文本。如何减小图像大小以适合按钮?

    有人能帮我解决这个问题吗?

    9 回复  |  直到 2 年前
        1
  •  29
  •   Ulysses CP    4 年前

    如果您正在使用API>=23,您可以将可绘制资源放在XML文件中,如下所示 mesis_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代码中更改可绘制的大小

        2
  •  21
  •   Hussein El Feky    9 年前

    解决方案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:

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

    <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>
    
        3
  •  1
  •   ॐ Rakesh Kumar    4 年前

    我删除了 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
  •  0
  •   saleh sereshki    9 年前

    您可以使用 相对布局 这样地:

    <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>
    
        5
  •  0
  •   PSN    7 年前

    试试看:

    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
  •  0
  •   David Vareka    3 年前

    若您正在处理多个屏幕大小,那个么为给定屏幕创建替代版本(可绘制的mdpi文件夹等)是一个解决方案。

        7
  •  0
  •   Edwin Paz ss. -    3 年前

    如果要直接导入向量,可以使用以下方法:

    <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>
    

    enter image description here

        8
  •  0
  •   ngock    2 年前

    对于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" />
    

    Before After

        9
  •  0
  •   Tangibleidea    2 年前

    尝试使用矢量文件而不是JPEG。此外,您甚至可以转换 jpeg svg 格式。 一旦您将svg文件导入到AndroidStudio项目中,您将看到 <vector> 资源,然后根据需要更改大小 width , height 属性。 viewportWidth viewportHeight 设置虚拟画布上绘图的大小。

     <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="20dp" <!-- fix the size here -->
        android:height="20dp"
        android:viewportWidth="40"
        android:viewportHeight="40">
      <path .../> <!-- your shapes are here -->
      <path .../> 
    </vector>