[android] 이미지 대신 텍스트가있는 FloatingActionButton

Question 1

Android 지원 라이브러리에서 FloatingActionButton을 수정하는 방법을 알아 내려고 노력 중입니다. 이미지 대신 텍스트와 함께 사용할 수 있습니까?

다음과 같은 것 :

ImageButton을 확장하므로 생각하지 않습니다. 내가 맞아?

일반적으로 머티리얼 디자인 측면에서 이것이 맞습니까?

Question 2

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"/>

Question 3

모두에게 감사합니다.

이 질문에 대해 찾은 쉬운 해결 방법은 다음과 같습니다. 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>

Question 4

텍스트를 비트 맵으로 변환하고 사용합니다. 아주 쉽습니다.

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

Question 5

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_behaviorFAB에 대해 일부 를 사용하는 layout_behavior경우TextView

Question 6

FloatingActionButton지원 라이브러리에서 텍스트를 설정할 수 없지만 할 수있는 일은 android studio :에서 직접 텍스트 이미지를 File -> New -> Image Asset만든 다음 버튼에 사용하는 것입니다.

머티리얼 디자인 측면에서 ; 그들은 텍스트 사용에 대해 언급하지 않았으며 텍스트를 FloatingActionButton위한 공간이 많지 않기 때문에 그렇게 할 이유가 없습니다.

Question 7

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>

Question 8

@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)
}