带有文本而不是图像的 FloatingActionButton
FloatingActionButton with text instead of image
我正在尝试找出如何从 android 支持库修改 FloatingActionButton。可以用文字代替图片吗？
像这样的：
我看到它扩展了 ImageButton，所以我认为不是。我说得对吗？
就Material一般设计而言，这是否正确？
您无法从支持库为 FloatingActionButton 设置文本，但您可以直接从 android 工作室创建文本图像：File -> New -> Image Asset，然后将它用于您的按钮。
按Material设计;他们没有提到在 FloatingActionButton 中使用文本，而且我看不出有任何理由这样做，因为您实际上没有太多 space 文本。
感谢大家。
这是我为这个问题找到的简单解决方法。 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>
将文本转换为位图并使用它。超级简单。
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;
}
FAB 通常用在 CoordinatorLayout 中。你可以使用这个：
<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"
结果：
如果您正在为您的 FAB 使用一些 layout_behavior，则必须为 TextView
制作一个类似的 layout_behavior
我需要 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>
@NandanKumarSingh 的回答 有效，但我在代码 中使用 fab 进行了一些更改（不是 xml，因为它们将在 class 方法）
fab.setTextBitmap("ANDROID", 100f, Color.WHITE)
fab.scaleType = ImageView.ScaleType.CENTER
fab.adjustViewBounds = false
其中 setTextBitmap 是 ImageView class 的扩展，具有相似的功能，但它支持 多行文本
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)
}
使用 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"/>
对 comrade 的回答稍作修改以支持低于 21 的 android API 只需将 app:elevation="0dp" 添加到 FloatingActionButton
这可能会对其他人有所帮助！
我使用 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>
有一个名为 ExtendedFloatingActionButton 的新 material 视图可以执行此操作。
这是一个代码示例：
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/add"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:clickable="true"
android:focusable="true"
app:icon="@drawable/ic_add_profile"
app:rippleColor="@color/colorPrimary"
app:layout_constraintBottom_toTopOf="@id/frameLayout_profilesAd"
app:layout_constraintEnd_toEndOf="parent"
android:contentDescription="@string/add_profile" />
这是输出：
您需要将 material 库添加到您的依赖项中，如下所示：
implementation 'com.google.android.material:material:1.5.0-alpha02'
我正在尝试找出如何从 android 支持库修改 FloatingActionButton。可以用文字代替图片吗？
像这样的：
我看到它扩展了 ImageButton，所以我认为不是。我说得对吗？
就Material一般设计而言，这是否正确？
您无法从支持库为 FloatingActionButton 设置文本，但您可以直接从 android 工作室创建文本图像：File -> New -> Image Asset，然后将它用于您的按钮。
按Material设计;他们没有提到在 FloatingActionButton 中使用文本，而且我看不出有任何理由这样做，因为您实际上没有太多 space 文本。
感谢大家。
这是我为这个问题找到的简单解决方法。 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>
将文本转换为位图并使用它。超级简单。
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;
}
FAB 通常用在 CoordinatorLayout 中。你可以使用这个：
<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"
结果：
如果您正在为您的 FAB 使用一些 layout_behavior，则必须为 TextView
layout_behavior
我需要 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>
@NandanKumarSingh 的回答
fab.setTextBitmap("ANDROID", 100f, Color.WHITE)
fab.scaleType = ImageView.ScaleType.CENTER
fab.adjustViewBounds = false
其中 setTextBitmap 是 ImageView class 的扩展，具有相似的功能，但它支持 多行文本
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)
}
使用 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"/>
对 comrade 的回答稍作修改以支持低于 21 的 android API 只需将 app:elevation="0dp" 添加到 FloatingActionButton
这可能会对其他人有所帮助！
我使用 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>
有一个名为 ExtendedFloatingActionButton 的新 material 视图可以执行此操作。
这是一个代码示例：
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/add"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:clickable="true"
android:focusable="true"
app:icon="@drawable/ic_add_profile"
app:rippleColor="@color/colorPrimary"
app:layout_constraintBottom_toTopOf="@id/frameLayout_profilesAd"
app:layout_constraintEnd_toEndOf="parent"
android:contentDescription="@string/add_profile" />
这是输出：
您需要将 material 库添加到您的依赖项中，如下所示：
implementation 'com.google.android.material:material:1.5.0-alpha02'