GridLayout 内带有 drawableLeft 的按钮

Question

我有一个 GridLayout，里面有 6 个按钮：

当我尝试为按钮设置 drawableLeft 属性时，我有以下行为：

如何自动缩放drawable，让所有按钮都可见？

布局是：

  <GridLayout
    android:orientation="horizontal"
    android:background="#AFAFAF"
    android:layout_width="match_parent"
    android:layout_margin="20dp"
    android:columnCount="4"
    android:rowCount="3"
    android:layout_weight="10"
    android:layout_height="0dp">
    <Space 
    android:layout_column="0"
    android:layout_columnWeight="1.5"
    android:layout_row="0"
    android:layout_rowWeight="1" />
    <Space 
    android:layout_column="2"
    android:layout_columnWeight="2"
    android:layout_row="0"
    android:layout_rowWeight="1" />
    <Space 
    android:layout_column="3"
    android:layout_columnWeight="1.5"
    android:layout_row="0"
    android:layout_rowWeight="1" />   
    <Button
        android:id="@+id/PageHome_Learn"
        android:layout_column="1"
        android:layout_columnWeight="2"
        android:layout_row="0"
        android:layout_rowWeight="1"
        android:drawableLeft="@drawable/MenuLearn"
        android:layout_margin="@dimen/TextPadding"
        android:text="@string/PageHome_LearnText"
        style="@style/Button" />
    <Button
        android:id="@+id/PageHome_Piano"
        android:layout_column="2"
        android:layout_columnWeight="2"
        android:layout_row="0"
        android:layout_rowWeight="1"
        android:layout_margin="@dimen/TextPadding"
        android:text="@string/PageHome_PianoText"
        style="@style/Button" />
    <Space 
    android:layout_column="3"
    android:layout_columnWeight="1.5"
    android:layout_row="0"
    android:layout_rowWeight="1" />
    <Button 
        android:id="@+id/PageHome_SimpleGame"
        android:layout_column="1"
        android:layout_columnWeight="2"
        android:layout_row="1"
        android:layout_rowWeight="1"
        android:layout_margin="@dimen/TextPadding"
        android:text="@string/PageHome_PractiseText"
        style="@style/Button" />
    <Button 
        android:id="@+id/PageHome_AgainstTheClock"
        android:layout_column="2"
        android:layout_columnWeight="2"
        android:layout_row="1"
        android:layout_rowWeight="1"
        android:layout_margin="@dimen/TextPadding"
        android:text="@string/PageHome_AgainstTheClockText"
        style="@style/Button" />
    <Button
        android:id="@+id/PageHome_Scores"
        android:layout_column="1"
        android:layout_columnWeight="2"
        android:layout_row="2"
        android:layout_rowWeight="1"
        android:layout_margin="@dimen/TextPadding"
        android:text="@string/PageHome_ScoreText"
        style="@style/Button" />
    <Button
        android:id="@+id/PageHome_Settings"
        android:layout_column="2"
        android:layout_columnWeight="2"
        android:layout_row="2"
        android:layout_rowWeight="1"
        android:layout_margin="@dimen/TextPadding"
        android:text="@string/PageHome_SettingsText"
        style="@style/Button" />

样式按钮对行为没有影响。 我没有找到任何将可绘制对象限制为按钮高度的属性。

Answer 1

这是我从以下代码中得到的，我想你也想达到同样的效果。只需使用复合 TextView。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_rowSpan="12"
    android:columnCount="3"
    android:layout_weight="3"
    android:rowCount="3">

    <TextView
        style="@style/ButtonStyle"
        android:text="Button" />
    <TextView
        style="@style/ButtonStyle"
        android:text="Button" />
    <TextView
        style="@style/ButtonStyle"
        android:text="Button" />
    <TextView
        style="@style/ButtonStyle"
        android:text="Button" />
    <TextView
        style="@style/ButtonStyle"
        android:text="Button" />
    <TextView
        style="@style/ButtonStyle"
        android:text="Button" />
    <TextView
        style="@style/ButtonStyle"
        android:text="Button" />
</GridLayout>


// the code for ButtonStyle in the styles.xml file
<style name="ButtonStyle">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:drawableStart">@drawable/ic_library</item>
    <item name="android:drawableLeft">@drawable/ic_library</item>
    <item name="android:drawablePadding">8dp</item>
    <item name="android:layout_columnWeight">1</item>
    <item name="android:textSize">16sp</item>
    <item name="android:textStyle">bold</item>
</style>

Answer 2

您的可绘制对象的尺寸非常大。因为当您使用 drawableLeft 类型属性时，android 会在其整个维度中显示该可绘制对象。

如果只需要在 xml 中设置 drawable，那么您必须在按钮左侧使用 ImageView，并通过为 ImageView 提供宽度和高度来控制尺寸。

或者您可以从代码中设置可绘制对象并控制它们的尺寸，如下所示：

Drawable btnOneDrawable = ContextCompat.getDrawable(R.drawable.MenuLearn);
btnOneDrawable.setBounds(0,0,40,40);
buttonOne.setCompoundDrawables(btnOneDrawable, null, null, null);

更新
在 xml 中试试这个。在布局中使用此更改按钮部分。此外，您必须将可绘制的轮廓设置为此 RelativeLayout 而不是按钮。

<RelativeLayout
    android:id="@+id/PageHome_Learn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="1"
    android:layout_columnWeight="2"
    android:layout_row="0"
    android:layout_rowWeight="1"
    android:layout_margin="@dimen/TextPadding">


    <Button
        android:id="@+id/btnPageHome_Learn"
        android:layout_centerInParent="true"
        android:text="@string/PageHome_LearnText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <ImageView
        android:src="@drawable/MenuLearn"
        android:layout_toLeftOf="@+id/btnPageHome_Learn"
        android:layout_centerVertical="true"
        android:layout_marginRight="10dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>