web-dev-qa-db-ja.com

画像の代わりにテキストを含むFloatingActionButton

AndroidサポートライブラリからFloatingActionButtonを変更する方法を見つけようとしています。画像の代わりにテキストで使用できますか？

このようなもの：

enter image description here

ImageButtonを拡張するので、そうではないと思います。私は正しいですか？

これは、材料設計全般に関して正しいですか？

androidmaterial-designandroid-support-libraryfloating-action-button
67
comrade

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"/>
4
Job M

ありがとうございます。

この質問に対して見つけた簡単な回避策を以下に示します。 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>
92
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;
}
50
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

FABにlayout_behaviorを使用している場合、TextViewにも同様のlayout_behaviorを作成する必要があります。

21
lokeshrmitra

サポートライブラリからFloatingActionButtonのテキストを設定することはできませんが、できることは、Android studio：File -> New -> Image Assetから直接テキストイメージを作成し、それをボタンに使用することです。

Material Design;に関して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"/>

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>

enter image description here

5
Derwrecked

@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クラスの拡張ですが、multilne textをサポートします

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