FloatingActionButton з текстом замість зображення


85

Я намагаюся зрозуміти, як можна змінити FloatingActionButton з бібліотеки підтримки Android. Чи можна його використовувати з текстом замість зображення?

Щось на зразок цього:

введіть тут опис зображення

Я бачу, що це розширює ImageButton, тому я думаю, що ні. Чи правий я?

Чи правильно це з точки зору Матеріального дизайну загалом?

Відповіді:


22

За допомогою 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"/>

Гей, нарешті вони це зробили. Напевно, це найкращий спосіб використовувати його зараз. Дякую, що поділились.
товариш

java.lang.ClassNotFoundException: Не знайдено клас "com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton"
Nirel,

2
З github.com/material-components/material-components-android вам доведеться скористатися найновішим implementation 'com.google.android.material:material:1.1.0-alpha06'
Job M

1
вона стає прямокутною прямокутною прямокутницею, як зробити круглою кнопкою?
dx3906

зробити весь радіус кута30dp
Робота M

100

Дякую всім.

Ось простий спосіб вирішення цього питання. Працює коректно для 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>

2
TextView показує тінь через властивості висоти,
Лавекуш Агравал,

Спробуйте додати атрибути android:layout_margin="20dp"в FloatingActionButton, щоб вирішити тіньові проблеми. Чекаючи кращого рішення
Long Ranger

додати android:includeFontPadding="false"в TextViewтег для кращої продуктивності

android: elevation = "16dp" сумісний лише з API 21 і вище.
Red M

57

перетворити текст у растрове зображення та використовувати його. це дуже просто.

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;
}

2
Ідеально, але розмір тексту не змінюється.
Ankur_009

1
@ Ankur_009 його зміна. Спробуйте збільшити значення на досить великий розмір, як у плаваючому.
pratz9999

солодко, з невеликими змінами я змусив його перетворити шрифти значків на
малюнки

1
@ Ankur_009: Простір кнопок обмежений, тому ви не бачите змін у розмірі тексту. Отже, якщо ваш текст вже займає весь простір на кнопці, збільшення тексту не матиме ефекту.
j3App 8.03.18

2
@ pratz9999 я навіть встановив значення 1000, але все ще не змінюється
Шивам Похріял

30

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


1
Отримання помилки android.support.design.widget.FloatingActionButton не можна передати на android.view.ViewGroup
Ankur_009

1
Ви впевнені, що ваш FloatingActionButton знаходиться всередині CoordinatorLayout?
lokeshrmitra

1
@ Ankur_009 ця помилка android.support.design.widget.FloatingActionButton cannot be cast to android.view.ViewGroup, мабуть, тому, що ви помістили TextViewвсередину FAB. Будь ласка, перевірте в OP, де тег закритий.
безглузді пальці

Висота TextView також повинна бути більшою, ніж висота FAB, інакше вона сховатиметься за FAB
Ali Nem

Чудова відповідь !!
Sjd

17

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

З точки зору Матеріального дизайну ; вони не згадували про використання тексту FloatingActionButton, і я не бачу жодної причини для цього, оскільки у вас насправді не так багато місця для тексту.


5
Такі тексти, як "ОК", "ТАК", "НІ", "ПЕРЕЙТИ", ідеально вписуються в FAB ..........
MarsAndBack

Слова в FAB дивіться у Розширених вкладках: material.io/design/components/…
Mike

8

Мені потрібен був текст у 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>

введіть тут опис зображення


2
Немає пульсаційної анімації з таким рішенням
Влад

2

Відповідь @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("\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)
}

0

Дуже невелика модифікація відповіді товариша , щоб підтримати її для API Android нижче 21, просто додайте app:elevation="0dp"доFloatingActionButton

Це може допомогти іншим!


0

Я використав CardView для досягнення того самого результату

  <androidx.cardview.widget.CardView
            android:layout_width="@dimen/dp80"
            android:layout_height="@dimen/dp80"
            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_width="match_parent"
                android:layout_height="match_parent"
                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>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.