85
Dzięki API 28 możesz po prostu dodać tekst do Fabs za pomocą:
Odwiedź: 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"/>
implementation 'com.google.android.material:material:1.1.0-alpha06'
30dp
Dziękuje za wszystko.
Oto proste obejście, które znalazłem dla tego pytania. Działa poprawnie dla Androida 4+, dla Androida 5+ dodano określony parametr android: Elevation, aby narysować TextView na 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>
źródło
android:layout_margin="20dp"
w FloatingActionButton, aby rozwiązać problemy z cieniem. Czekam na lepsze rozwiązanieandroid:includeFontPadding="false"
doTextView
tagu dla lepszej wydajnościprzekonwertuj tekst na bitmapę i użyj go. to bardzo łatwe.
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; }
źródło
FAB są zwykle używane w
CoordinatorLayout
s. Możesz użyć tego:<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>
To właśnie działa
app:layout_anchor="@id/fab" app:layout_anchorGravity="center"
Wynik:
Jeśli używasz niektórych
layout_behavior
dla swojego FAB, będziesz musiał zrobić podobnylayout_behavior
dlaTextView
źródło
android.support.design.widget.FloatingActionButton cannot be cast to android.view.ViewGroup
prawdopodobnie wynika z tego, że umieściłeśTextView
wewnątrz FAB. Sprawdź w OP, gdzie tag się zamknął.Nie możesz ustawić tekstu dla
FloatingActionButton
z biblioteki wsparcia, ale co możesz zrobić, to utworzyć obraz tekstu bezpośrednio z Android Studio:,File -> New -> Image Asset
a następnie użyć go jako przycisku.W zakresie Material Design ; nie wspomnieli o używaniu tekstu z
FloatingActionButton
, i nie widzę żadnego powodu, aby to robić, ponieważ tak naprawdę nie masz dużo miejsca na tekst.źródło
Potrzebowałem tekstu w FAB, ale zamiast tego wybrałem TextView z okrągłym rysowalnym tłem:
<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"/>
Oto plik do rysowania (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>
źródło
Odpowiedź @NandanKumarSingh https://stackoverflow.com/a/39965170/5279156 działa, ale wprowadziłem pewne zmiany w kodzie fab (nie xml, ponieważ zostaną nadpisane w metodach klas)
fab.setTextBitmap("ANDROID", 100f, Color.WHITE) fab.scaleType = ImageView.ScaleType.CENTER fab.adjustViewBounds = false
Gdzie
setTextBitmap
jest rozszerzeniemImageView
klasy o podobnej funkcjonalności, ale obsługuje tekst wielowierszowyfun 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) }
źródło
Bardzo mała modyfikacja odpowiedzi towarzysza , aby obsługiwać ją dla Android API poniżej 21, wystarczy dodać
app:elevation="0dp"
doFloatingActionButton
To może pomóc innym!
źródło
Użyłem CardView, aby osiągnąć ten sam wynik
<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>
źródło