web-dev-qa-db-ja.com

拡張された実際のフローティングアクションボタン（FAB）の使用方法

重複についての疑問や考えを取り除くには：on Material Design が「拡張」と定義されます。

FAB - Extended FAB

しかし、ほとんどの人は「拡張」と「 移行のタイプ：スピードダイヤル 」を混同して、解決策を見つけるのを難しくしています。 こちら

FAB - Type of Transition: Speed Dial

質問だから、私が楽しみにしているのは、テキストと拡張サイズでFABを設定する方法です。

今日、私のコードは次のようなものです。

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/maps_main_distance_btn"
    Android:layout_width="0dp"
    Android:layout_height="wrap_content"
    Android:layout_marginBottom="8dp"
    Android:text="@string/str_distance_btn"
    app:elevation="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

しかし、私のボタンは次のようになります。

enter image description here

テキストも正しい形式もありません。制約レイアウトで使用しています。

javaandroidfloating-action-button
7
Canato
  1. Gradleファイルに依存関係を追加します。
implementation 'com.google.Android.material:material:1.1.0-alpha04'

xmlファイルで：

<com.google.Android.material.floatingactionbutton.ExtendedFloatingActionButton
            Android:id="@+id/fab"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_gravity="bottom|end"
            Android:layout_alignParentBottom="true"
            Android:layout_alignParentEnd="true"
            Android:layout_margin="@dimen/fab_margin"
            Android:text="Create"
            app:icon="@drawable/outline_home_24" />
9
Alexander HD

enter image description here

MaterialButtonを使用して、FloatingActionButtonをExtended ConstraintLayoutにアニメーション化するユーティリティクラスを作成できます。最初にxmlでMaterialButtonの2つの状態を宣言し、次にTransitionManagerを使用してそれらをアニメーション化する必要があります。

あなたはそれについて中程度の投稿を読むことができます ここ 、その間、ここに関連するコードを少し追加します。

折りたたみFAB状態：

<?xml version="1.0" encoding="utf-8"?>
<Android.support.constraint.ConstraintLayout Android:id="@+id/extend_fab_container"
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@drawable/bg_fab"
    Android:elevation="8dp">

    <Android.support.design.button.MaterialButton
        Android:id="@+id/fab"
        style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
        Android:layout_width="56dp"
        Android:layout_height="56dp"
        app:cornerRadius="56dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</Android.support.constraint.ConstraintLayout>

拡張FAB状態：

<?xml version="1.0" encoding="utf-8"?>
<Android.support.constraint.ConstraintLayout Android:id="@+id/extend_fab_container"
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:elevation="8dp"
    Android:background="@drawable/bg_fab">

    <Android.support.design.button.MaterialButton
        Android:id="@+id/fab"
        style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        app:cornerRadius="56dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</Android.support.constraint.ConstraintLayout>

背景描画可能：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <solid Android:color="@color/colorAccent" />
    <corners Android:radius="56dp" />
</shape>

関連するJava拡張コード：

private void setExtended(boolean extended, boolean force) {
    if (isAnimating || (extended && isExtended() && !force)) return;

    ConstraintSet set = new ConstraintSet();
    set.clone(container.getContext(), extended ? R.layout.fab_extended : R.layout.fab_collapsed);

    TransitionManager.beginDelayedTransition(container, new AutoTransition()
            .addListener(listener).setDuration(150));

    if (extended) button.setText(currentText);
    else button.setText("");

    set.applyTo(container);
}
7
Tunji_D

this library を使用してそれを行うことができます。 （別の方法を使用しました）しかし、 FancyButton を使用して、以下のようにコーディネーターレイアウトに丸くて素晴らしいボタンを作成しました。

    <mehdi.sakout.fancybuttons.FancyButton
    Android:id="@+id/actMain_btnCompare"
    app:layout_behavior="@string/fab_transformation_sheet_behavior"
    Android:layout_width="125dp"
    Android:layout_height="38dp"
    Android:layout_gravity="bottom|center"
    Android:layout_margin="20dp"
    Android:elevation="3dp"
    Android:padding="2dp"
    fancy:fb_borderColor="@color/white"
    fancy:fb_borderWidth="3dp"
    fancy:fb_defaultColor="@color/colorPrimaryDark"
    fancy:fb_radius="20dp"
    fancy:fb_text="مقایسه محصول"
    fancy:fb_textColor="@color/white"
    fancy:fb_textGravity="center"
    fancy:fb_textSize="13sp" />

結果は次のとおりです。

enter image description here

アイコンを含めることができます（ FancyButton を参照）。

app:layout_behavior="@string/fab_transformation_sheet_behavior"以下のようにfabのように機能します。

enter image description here

がんばろう。

0
Mahdi Moqadasi