Question

我尝试通过使用“ android：text”和“ android：drawableTop”在按钮上添加一些文本和图标，但是得到的结果并不正确。文本和图标未居中，如果我横向使用该应用程序或更改屏幕大小，则文本会消失，图标会稍微脱离按钮。

这是既没有“ android：text”又没有“ android：drawableTop”的布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/redButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        android:background="#FF0000"
        app:layout_constraintBottom_toTopOf="@+id/blueButton"
        app:layout_constraintEnd_toStartOf="@+id/yellowButton"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/greenButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        android:background="#00FF00"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/blueButton"
        app:layout_constraintTop_toBottomOf="@+id/yellowButton" />

    <Button
        android:id="@+id/blueButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        android:background="#0000FF"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/greenButton"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/redButton" />

    <Button
        android:id="@+id/yellowButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="4dp"
        android:background="#FFFF00"
        app:layout_constraintBottom_toTopOf="@+id/greenButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/redButton"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

我想知道是否有一种使文本和图标具有响应性的方法，因为我也尝试使用svg图标，但是它们没有显示。

我得到的结果：

Portrait和Landscape

谢谢您的任何帮助。

Answer 1

自定义按钮在Android中可能非常令人沮丧。我建议您看看这个popular library for Android called FancyButton。仅通过在布局中使用简单的XML属性，即可为您提供各种选项来创建所需的按钮。

例如，这段代码：

<mehdi.sakout.fancybuttons.FancyButton
    android:id="@+id/btn_spotify"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="10dp"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:paddingTop="10dp"
    fancy:fb_borderColor="#FFFFFF"
    fancy:fb_borderWidth="1dp"
    fancy:fb_defaultColor="#7ab800"
    fancy:fb_focusColor="#9bd823"
    fancy:fb_fontIconResource="&#xf04b;"
    fancy:fb_iconPosition="left"
    fancy:fb_radius="30dp"
    fancy:fb_text="SHUFFLE PLAY"
    fancy:fb_textColor="#FFFFFF" />

您可以获得带有居中文本和图标的按钮：

Answer 2

  <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:weightSum="4"
        android:orientation="vertical">
         <Button
            android:id="@+id/btnRed"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:textColor="@color/white"
            android:background="@color/colorAccent"
            android:textAllCaps="false"
            android:drawableLeft="@drawable/ic_action_mywallet"
            android:layout_weight="1"
            android:text="Red Button"/>
          <Button
            android:id="@+id/btnGreen"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:textColor="@color/white"
            android:background="@color/colorAccent"
            android:textAllCaps="false"
            android:drawableLeft="@drawable/ic_action_mywallet"
            android:layout_weight="1"
            android:text="Green Button"/>
          <Button
            android:id="@+id/btnBlue"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:textColor="@color/white"
            android:background="@color/colorAccent"
            android:textAllCaps="false"
            android:drawableLeft="@drawable/ic_action_mywallet"
            android:layout_weight="1"
            android:text="Blue Button"/>
          <Button
            android:id="@+id/btnYellow"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:textColor="@color/white"
            android:background="@color/colorAccent"
            android:textAllCaps="false"
            android:drawableLeft="@drawable/ic_action_mywallet"
            android:layout_weight="1"
            android:text="Yellow Button"/>

 </LinearLayout>

Answer 3

图像中的图形和文本正确地水平居中。
显然，您选择的可绘制对象非常大，因此在横向中没有用于文本的空间，而在横向中则将文本推到底部。
尝试使用另一个较小的可绘制对象，您将同时看到文本和可绘制对象。
您可以设置：

android:padding="8dp"

因此可绘制对象不完全位于按钮的顶部边缘。

响应式文字和按钮图标

3 个答案: