代码之家  ›  专栏  ›  技术社区  ›  Olivier MATROT

以图像/文本为背景居中的按钮

  •  2
  • Olivier MATROT  · 技术社区  · 6 年前

    我的目标是有一个圆形按钮的图像,一些文字和背景。图像和文本应该在背景中居中。

    我使用以下内容作为背景:

    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:dither="true"
        android:shape="rectangle">
    
        <corners android:radius="120sp" />
    
        <solid android:color="#FF5F00" />
    
        <size
            android:width="120sp"
            android:height="36sp" />
    
    </shape>
    

    图像的以下内容:

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24sp"
        android:height="24sp"
        android:viewportWidth="24"
        android:viewportHeight="24">
      <path
          android:pathData="M5,12L19,12"
          android:strokeLineJoin="round"
          android:strokeWidth="2"
          android:fillColor="#00000000"
          android:strokeColor="#FFFFFF"
          android:strokeLineCap="round"/>
      <path
          android:pathData="M12,5L12,19"
          android:strokeLineJoin="round"
          android:strokeWidth="2"
          android:fillColor="#00000000"
          android:strokeColor="#FFFFFF"
          android:strokeLineCap="round"/>
    </vector>
    

    最后是按钮:

        <Button android:layout_columnSpan="6" 
    android:layout_gravity="center" android:drawableStart="@drawable/ic_plus_24px" 
    android:text="Evaluer" 
    android:id="@+id/doEvalQOL" android:background="@drawable/roundedyakabutton" android:textColor="#FFFFFF" 
    android:gravity="center" 
    android:textSize="12sp" 
    fontPath="fonts/Ubuntu-Medium.ttf" />
    

    这给了我这个: enter image description here

    当我移除背景时,图像和文本将按我希望的方式放置在背景中:

    enter image description here

    我错过了什么?

    2 回复  |  直到 6 年前
        1
  •  3
  •   Sanjay Bhalani    6 年前

    您可以使用drawablePadding、paddingLeft和paddingRight来对齐按钮中心的文本及其图标。我用了下面的代码,结果作为截图附上。再试一次,希望对你有帮助。

        <Button
        android:id="@+id/doEvalQOL"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/roundedyakabutton"
        android:drawableLeft="@drawable/ic_plus_24px"
        android:text="Evaluer"
        android:drawablePadding="2dip"
        android:gravity="center"
        android:paddingLeft="30dip"
        android:paddingRight="26dip"
        android:singleLine="true"
        android:textColor="#FFFFFF"
        android:textSize="12sp"
         />
    

    Out put of above button

        2
  •  0
  •   Khemraj Sharma    6 年前

    问题

    gravity 属于 drawableLeft 在按钮/text视图中。在这里,您已经将重力设置为按钮,这使文本居中,但图像保持在左侧。

    解决方案

    • 使用负边距 android:drawablePadding="-20sp" 可绘制左侧
    • 或者不要将ImageView和按钮包装与父视图(带背景)而不是按钮一起使用。