FloatingActionButton包含文本而不是图像

Question

我试图找出如何从android支持库修改FloatingActionButton.它可以与文本而不是图像一起使用吗？

像这样的东西:

我看到它扩展了ImageButton所以我认为不是.我对吗？

这在材料设计方面是否正确？

Answer 1

谢谢大家.

这是我在这个问题中找到的简单解决方法.适用于Android 4+的正常工作,对于Android 5+,添加了特定参数android:elevation,以在FloatingActionButton上绘制TextView.

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right">

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:color/transparent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@android:string/ok"
        android:elevation="16dp"
        android:textColor="@android:color/white"
        android:textAppearance="?android:attr/textAppearanceMedium" />
</FrameLayout>

Answer 2

将文本转换为位图并使用它.它非常容易.

fab.setImageBitmap(textAsBitmap("OK", 40, Color.WHITE));

//method to convert your text to image
public static Bitmap textAsBitmap(String text, float textSize, int textColor) {
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setTextSize(textSize);
    paint.setColor(textColor);
    paint.setTextAlign(Paint.Align.LEFT);
    float baseline = -paint.ascent(); // ascent() is negative
    int width = (int) (paint.measureText(text) + 0.0f); // round
    int height = (int) (baseline + paint.descent() + 0.0f);
    Bitmap image = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

    Canvas canvas = new Canvas(image);
    canvas.drawText(text, 0, baseline, paint);
    return image;
}

Answer 3

FAB通常用于CoordinatorLayouts.你可以用这个:

<android.support.design.widget.CoordinatorLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="@dimen/fab_margin"               
            app:backgroundTint="@color/colorPrimary" />

      <TextView android:layout_height="wrap_content"
              android:layout_width="wrap_content"
              android:text="OK"
              android:elevation="6dp"
              android:textSize="18dp"
              android:textColor="#fff"
              app:layout_anchor="@id/fab"
              app:layout_anchorGravity="center"/>

</android.support.design.widget.CoordinatorLayout>

这就是工作

app:layout_anchor="@id/fab"
app:layout_anchorGravity="center"

结果:

如果你正在使用一些layout_behavior用于你的FAB,你将不得不做一个相似layout_behavior的TextView

Answer 4

您无法FloatingActionButton从支持库中设置文本,但您可以做的是直接从android studio:创建文本图像File -> New -> Image Asset,然后将其用于您的按钮.

在材料设计方面 ; 他们没有提到使用文本FloatingActionButton,我没有看到任何理由这样做,因为你没有太多的文本空间.

Answer 5

使用API​​ 28，您可以使用以下方法简单地向Fab添加文本：

请访问：https：//material.io/develop/android/components/extended-floating-action-button/

 <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="8dp"
      android:contentDescription="@string/extended_fab_content_desc"
      android:text="@string/extended_fab_label"
      app:icon="@drawable/ic_plus_24px"
      app:layout_anchor="@id/app_bar"
      app:layout_anchorGravity="bottom|right|end"/>

Answer 6

我需要FAB中的文本,但我只是使用带有圆形可绘制背景的TextView:

  <TextView
        android:layout_margin="10dp"
        android:layout_gravity="right"
        android:gravity="center"
        android:background="@drawable/circle_background"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#FFF"
        android:textStyle="bold"
        android:fontFamily="sans-serif"
        android:text="AuthId"
        android:textSize="15dp"
        android:elevation="10dp"/>

这是drawable(circle_backgroung.xml):

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

<solid
    android:color="#666666"/>

<size
    android:width="60dp"
    android:height="60dp"/>
</shape>