带有文本而不是图像的 FloatingActionButton

Posted

技术标签:

【中文标题】带有文本而不是图像的 FloatingActionButton【英文标题】:FloatingActionButton with text instead of image 【发布时间】:2016-02-13 18:18:27 【问题描述】:

我试图弄清楚如何从 android 支持库中修改 FloatingActionButton。可以用文字代替图片吗?

类似这样的:

我看到它扩展了 ImageButton,所以我认为不是。我说的对吗?

就材料设计而言,这是否正确?

【问题讨论】:

【参考方案1】:

谢谢大家。

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

<FrameLayout
    android:layout_
    android:layout_
    android:layout_gravity="bottom|right">

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

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

【讨论】:

TextView 由于高程属性而显示阴影, 尝试在 FloatingActionButton 中添加属性android:layout_margin="20dp" 来解决阴影问题。等待更好的解决方案 android:includeFontPadding="false" 添加到TextView 标签以获得更好的性能 android:elevation="16dp" 仅与 API 21 及更高版本兼容。【参考方案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;

【讨论】:

完美,但文字大小没有改变。 @Ankur_009 它的变化。尝试将值增加相当大的大小作为它的浮动。 甜蜜,我做了一些改变,将图标字体转换为可绘制对象 @Ankur_009:按钮空间有限,这就是您看不到文字大小变化的原因。因此,如果您的文本已经占据了按钮上的全部空间,那么将文本变大将没有任何效果。 @pratz9999 我什至将它设置为 1000 但仍然没有改变【参考方案3】:

使用 API 28,您可以使用以下方法简单地将文本添加到 Fab:

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

 <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
      android:layout_
      android:layout_
      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"/>

【讨论】:

嘿,他们终于做到了。这可能是现在使用它的最佳方式。感谢分享。 java.lang.ClassNotFoundException:找不到类“com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton” 来自github.com/material-components/material-components-android你必须使用最新的implementation 'com.google.android.material:material:1.1.0-alpha06' 变成圆角矩形,怎么做成圆形按钮? 制作所有圆角半径30dp【参考方案4】:

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_
            android:layout_
            android:layout_gravity="bottom|end"
            android:layout_margin="@dimen/fab_margin"               
            app:backgroundTint="@color/colorPrimary" />

      <TextView android:layout_
              android:layout_
              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"

结果:

如果您为您的 FAB 使用一些 layout_behavior,则您必须为 TextView 制作类似的 layout_behavior

【讨论】:

出现错误 android.support.design.widget.FloatingActionButton 无法转换为 android.view.ViewGroup 你确定你的 FloatingActionButton 在 CoordinatorLayout 里面吗? @Ankur_009 这个错误android.support.design.widget.FloatingActionButton cannot be cast to android.view.ViewGroup 可能是因为您将TextView 放入了FAB。请与 OP 确认标​​签在哪里关闭。 TextView的高程也必须大于FAB的高程,否则会隐藏在FAB的后面 绝妙的答案!!【参考方案5】:

您无法从支持库中为FloatingActionButton 设置文本,但您可以直接从android studio 创建一个文本图像:File -&gt; New -&gt; Image Asset,然后将其用于您的按钮。

Material Design方面;他们没有提到在FloatingActionButton 中使用文本,我认为没有任何理由这样做,因为您实际上没有太多空间用于文本。

【讨论】:

像“OK”、“YES”、“NO”、“GO”这样的文本非常适合 FAB 的............ 对于 FAB 中的单词,请参阅扩展选项卡:material.io/design/components/…【参考方案6】:

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

  <TextView
        android:layout_margin="10dp"
        android:layout_gravity="right"
        android:gravity="center"
        android:background="@drawable/circle_background"
        android:layout_
        android:layout_
        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:
    android:/>
</shape>

【讨论】:

这样的解决方案没有涟漪动画【参考方案7】:

@NandanKumarSingh https://***.com/a/39965170/5279156 的答案有效,但我用 fab 在代码中进行了一些更改(不是 xml,因为它们将在类方法中被覆盖)

fab.setTextBitmap("ANDROID", 100f, Color.WHITE)
fab.scaleType = ImageView.ScaleType.CENTER
fab.adjustViewBounds = false

其中setTextBitmapImageView 类的扩展,具有类似的功能,但它支持多行文本

fun ImageView.setTextBitmap(text: String, textSize: Float, textColor: Int) 
    val paint = Paint(Paint.ANTI_ALIAS_FLAG)
    paint.textSize = textSize
    paint.color = textColor
    paint.textAlign = Paint.Align.LEFT
    val lines = text.split("\n")
    var maxWidth = 0
    for (line in lines) 
        val width = paint.measureText(line).toInt()
        if (width > maxWidth) 
            maxWidth = width
        
    
    val height = paint.descent() - paint.ascent()
    val bitmap = Bitmap.createBitmap(maxWidth, height.toInt() * lines.size, Bitmap.Config.ARGB_8888)
    val canvas = Canvas(bitmap)
    var y = - paint.ascent()
    for (line in lines) 
        canvas.drawText(line, 0f, y, paint)
        y += height
    
    setImageBitmap(bitmap)

【讨论】:

【参考方案8】:

我使用 CardView 来实现相同的结果

  <androidx.cardview.widget.CardView
            android:layout_
            android:layout_
            android:layout_gravity="center_horizontal"
            app:cardElevation="@dimen/dp8"
            android:layout_marginBottom="@dimen/dp16"
            android:layout_marginTop="@dimen/dp8"
            app:cardBackgroundColor="@color/colorWhite100"
            app:cardCornerRadius="@dimen/dp40">

            <TextView
                style="@style/TextAppearance.MaterialComponents.Headline4"
                android:layout_
                android:layout_
                android:layout_gravity="center_horizontal"
                android:background="@drawable/shape_go_bg"
                android:text="GO"
                android:gravity="center"
                android:textColor="@color/colorWhite100" />
        </androidx.cardview.widget.CardView>

【讨论】:

【参考方案9】:

对comrade 的回答稍作修改以支持21 以下的android API,只需将app:elevation="0dp" 添加到FloatingActionButton

这可能对其他人有帮助!

【讨论】:

【参考方案10】:

有一个名为 ExtendedFloatingActionButton 的新材质视图可以执行此操作。

这是一个代码示例:

    <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
    android:layout_
    android:layout_
    android:text="@string/add"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="16dp"
    android:clickable="true"
    android:focusable="true"
    app:icon="@drawable/ic_add_profile"
    app:rippleColor="@color/colorPrimary"
    app:layout_constraintBottom_toTopOf="@id/frameLayout_profilesAd"
    app:layout_constraintEnd_toEndOf="parent"
    android:contentDescription="@string/add_profile" />

这是输出:

您需要将材料库添加到您的依赖项中,如下所示:

implementation 'com.google.android.material:material:1.5.0-alpha02'

【讨论】:

以上是关于带有文本而不是图像的 FloatingActionButton的主要内容,如果未能解决你的问题,请参考以下文章

如何在表格单元格内显示文本消息而不是图像?

在 ChoiceType Symfony 5 中使用图像而不是文本标签

带有图像和文本的 UIPickerView 快速?

如何获取带有图像和视频以及文本的 facebook 提要?

当图像大小改变时相对于图像定位文本

MongoDB 中的文本是“未定义”,而不是文件数据已成功上传