更改按钮内的可绘制大小
Changing the drawable size inside a button
我想创建一个这样的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太大了，在这种情况下不显示文字。如何减小图像大小以适合按钮？
谁能帮我解决这个问题？
您可以像这样使用 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：
向按钮添加可绘制对象的功能非常有限。您无法更改可绘制对象的大小，因此解决此问题的最佳方法是在线性布局中添加一个带有图像视图的按钮，如下所示：
<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>
试试这个：
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;
}
});
我删除了 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>
[]
如果您使用 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-mdpi 文件夹等...）。
如果您直接导入矢量，您可以使用以下方法：
<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>
对于 API >= 23 和 android.support.design.widget.FloatingActionButton(FAB) ，您可以将可绘制资源 (SVG) 放入 XML 文件中，路径为：File/New/Vector Asset 并将文件保存在名称下，例如：ic_water_white_24dp.xml
并向 FAB 添加 app:maxImageSize 属性：
<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" />
尝试使用矢量文件而不是 JPEG。此外，您甚至可以将 jpeg 格式转换为 svg 格式。
将 svg 文件导入 Android Studio 项目后，您将看到 <vector> 资源，然后只需根据需要通过 width、height 属性更改大小。
viewportWidth 和 viewportHeight 是设置在虚拟 canvas 上绘图的大小。
<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>
我想创建一个这样的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太大了，在这种情况下不显示文字。如何减小图像大小以适合按钮？
谁能帮我解决这个问题？
您可以像这样使用 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：
向按钮添加可绘制对象的功能非常有限。您无法更改可绘制对象的大小，因此解决此问题的最佳方法是在线性布局中添加一个带有图像视图的按钮，如下所示：
<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>
试试这个：
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;
}
});
我删除了 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>
[
如果您使用 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-mdpi 文件夹等...）。
如果您直接导入矢量，您可以使用以下方法：
<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>
对于 API >= 23 和 android.support.design.widget.FloatingActionButton(FAB) ，您可以将可绘制资源 (SVG) 放入 XML 文件中，路径为：File/New/Vector Asset 并将文件保存在名称下，例如：ic_water_white_24dp.xml
并向 FAB 添加 app:maxImageSize 属性：
<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" />
尝试使用矢量文件而不是 JPEG。此外，您甚至可以将 jpeg 格式转换为 svg 格式。
将 svg 文件导入 Android Studio 项目后，您将看到 <vector> 资源，然后只需根据需要通过 width、height 属性更改大小。
viewportWidth 和 viewportHeight 是设置在虚拟 canvas 上绘图的大小。
<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>