web-dev-qa-db-ja.com

フローティングアクションボタンのある円形の進行状況

私は新しい材料設計を研究しており、いくつかの問題があります。

このようなフローティングアクションボタンを使用してプログレスバーを行う方法を知っている人がいるかどうかを知りたい https://dribbble.com/shots/1644982-Animated-circle-loader-FAB-with- integration-gif

Android Lのapiはありますか？

ありがとう

androidandroid-5.0-lollipopmaterial-designfloating-action-button
21
Marco Souza

私はそれを行うライブラリを見つけました、それは非常に簡単なようです

https://github.com/ckurtm/FabButton

14
Marco Souza

これは私のために働いた、私は相対レイアウトを使用し、相対レイアウトの中央に両方を取り付けました。

...
<RelativeLayout
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="bottom|right"
    Android:layout_margin="16dp"
    app:layout_anchor="@id/my_recycler_view"
    app:layout_anchorGravity="bottom|right|end"
    >

    <ProgressBar
        Android:id="@+id/fabProgress"
        style="?android:attr/progressBarStyleLarge"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_centerHorizontal="true"
        Android:layout_centerInParent="true"
        Android:indeterminateTint="@color/colorPrimary"
        />

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/newReportButton"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:src="@Android:drawable/ic_dialog_email"
        app:fabSize="normal"
        Android:layout_centerInParent="true"
        />

</RelativeLayout>
...
10
kunmi

使用できます：https://github.com/DmitryMalkovich/circular-with-floating-action-button to循環アクションをフローティングアクションボタンに統合します。このソリューションはカスタムファブではなく、ファブのシンプルなコンテナにすぎないため、以前のようにスタイルを設定できます。

<com.dmitrymalkovich.Android.ProgressFloatingActionButton
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_margin="@dimen/fab_margin"
    Android:clickable="true">

    <Android.support.design.widget.FloatingActionButton
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:src="@drawable/ic_backup_black_24dp" />

    <ProgressBar
        style="@style/Widget.AppCompat.ProgressBar"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content" />

</com.dmitrymalkovich.Android.ProgressFloatingActionButton>
4
Dmitry

Jorge Costilloのフローティングアクションボタン をお勧めします。私が試した受け入れられた答えから、それはカートのそれよりも優れています。

Kurtの1つは、ベクトルドロウアブル（srcCompat属性）のサポート、画像サイズの問題、fab-miniのサポートなし、素材アイコンガイドラインの誤算がありません。

CostilloのFABは、標準のAndroid FAB。

1
Zon

レイアウトに進行状況バーを追加してから、進行状況バーにカスタム動作を使用するという問題を解決しました。レイアウト：

<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.CoordinatorLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:tools="http://schemas.Android.com/tools" Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    tools:context="es.mediaserver.newinterfacedlna.MainActivity">

    <Android.support.design.widget.AppBarLayout Android:layout_width="match_parent"
        Android:layout_height="wrap_content" Android:theme="@style/AppTheme.AppBarOverlay">

        <Android.support.v7.widget.Toolbar Android:id="@+id/toolbar"
            Android:layout_width="match_parent" Android:layout_height="?attr/actionBarSize"
            Android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" />

    </Android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main"
        Android:id="@+id/include" />

    <Android.support.design.widget.FloatingActionButton Android:id="@+id/fab"
        Android:layout_width="56dp"
        Android:layout_height="56dp"
        Android:layout_margin="28dp"
        Android:layout_gravity="bottom|center"
        app:srcCompat="@Android:drawable/ic_media_play" />

    <ProgressBar
        Android:id="@+id/progressBar2"
        style="?android:attr/progressBarStyle"
        Android:layout_width="80dp"
        Android:layout_height="80dp"
        Android:layout_gravity="bottom|center"
        Android:indeterminate="true"
        Android:layout_margin="@dimen/fab_margin"
        />

</Android.support.design.widget.CoordinatorLayout>

カスタム動作コンポーネント

    public static class SnackBarBehavior extends CoordinatorLayout.Behavior<View> {
    private static final boolean SNACKBAR_BEHAVIOR_ENABLED;
    public SnackBarBehavior() {
        super();
    }
    public SnackBarBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        return SNACKBAR_BEHAVIOR_ENABLED && dependency instanceof Snackbar.SnackbarLayout;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        float translationY = Math.min(0, dependency.getTranslationY() - dependency.getHeight());
        child.setTranslationY(translationY);
        return true;
    }

    @Override
    public void onDependentViewRemoved(CoordinatorLayout parent, View child, View dependency) {
        child.setTranslationY(0);
    }

    static {
        SNACKBAR_BEHAVIOR_ENABLED = Build.VERSION.SDK_INT >= 11;
    }
}

そして最後にonCreateで（またはapp：layout_behavior = "xxx.xxx.SnackBarBehavior"のレイアウトで）

ProgressBar progressBar = (ProgressBar) findViewById(R.id.progressBar2);
SnackBarBehavior snackBarBehavior = new SnackBarBehavior();
        CoordinatorLayout.LayoutParams coordinatorParams = (CoordinatorLayout.LayoutParams) progressBar.getLayoutParams();
        coordinatorParams.setBehavior(snackBarBehavior);

注：私はここに投稿されたものの動作コンポーネントに基づいていました FloatingButtonのようにスナックバーの上にビューを移動する方法

0
Jose Luis Larraz

次のライブラリを使用して、マテリアルスタイルボタンを実現できます> https://github.com/makovkastar/FloatingActionButton （またはこれ>> https://github.com/futuresimple/ Androidフローティングアクションボタン ）

スピナーには、このライブラリを使用することもできます> https://github.com/oguzbilgener/CircularFloatingActionMen

次に、これらの2つのコンポーネントをRelativeLayout（一方を他方に重ねて）に追加して組み合わせ、いくつかのアニメーションを追加します。つまり、ボタンをズームで展開し、ズームで進行状況を展開します。必要なことは、プログレスバーコードにフックして、読み込みが完了したら縮小することです。つまり、ボタンの後ろで縮小します。

下位互換性のあるアニメーションについては、9つの古いAndroidをご覧ください> http://nineoldandroids.com/

お役に立てれば。

0
Andy B