it-swarm.com.ru

FloatingActionButton с текстом вместо изображения

Я пытаюсь понять, как можно изменить FloatingActionButton из библиотеки поддержки Android. Можно ли использовать с текстом вместо изображения?

Примерно так:

 enter image description here

Я вижу, что это расширяет ImageButton, поэтому я думаю, что нет. Я прав?

Это правильно с точки зрения дизайна материалов в целом?

64
comrade

Спасибо всем.

Вот простой обходной путь, который я нашел для этого вопроса. Работает корректно для Android 4+, для Android 5+ добавлен специальный параметр Android: высота для рисования TextView поверх FloatingActionButton.

<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>
89
comrade

преобразовать текст в растровое изображение и использовать его. это супер легко.

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;
}
45
Nandan Kumar Singh

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"

Результат:

The Result

Если вы используете какой-то layout_behavior для своего FAB, вам придется создать аналогичный layout_behavior для TextView

20
lokeshrmitra

Вы не можете установить текст для FloatingActionButton из библиотеки поддержки, но вы можете создать текстовое изображение непосредственно из Android studio: File -> New -> Image Asset, а затем использовать его для своей кнопки.

С точки зрения Материал Дизайн ; они не упомянули об использовании текста с FloatingActionButton, и я не вижу никакой причины для этого, так как на самом деле у вас мало места для текста.

13
Mulham Raee

Мне нужен был текст в 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"/>

Вот рисунок (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>

 enter image description here

5
Derwrecked

С API 28 вы можете просто добавлять текст в Fabs используя:

Посетите: 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"/>
3
Job M

Ответ @NandanKumarSingh https://stackoverflow.com/a/39965170/5279156 работает, но я внес некоторые изменения с помощью fab в коде (не xml, поскольку они будут перезаписаны в методах класса)

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

Где setTextBitmap - это расширение для класса ImageView с похожей функциональностью, но оно поддерживает многострочный текст

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(newLine())
    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)
}
0
V. Kalyuzhnyu