Flooating Action Button完全解析[Design Support Library(2)]

32520 ワード

Flooating Action Button完全解析[Design Support Library(2)]
転載は出所を明記してください。http://blog.csdn.net/lmj623565791/article/details/46678867」（http://blog.csdn.net/lmj623565791/article/details/46678867;本論文の出典：【張鴻洋のブログ】
は、上記のAndroidに従ってNavigationView[Design Support Library(1)]を実現した後、Design Support Libraryの中で極めて簡単なコントロールを紹介します。
一、簡単に使う
レイアウト:


        <android.support.design.widget.FloatingActionButton  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right|bottom" android:src="@drawable/ic_discuss" />

非常にシンプルで、直接ImageViewとして使えばいいです。
効果図:

FloatingActionButton 完全解析[Design Support Library(2)]_第1张图片

私達のFloatingActionButtonが正常に表示されている場合、塗りつぶしの色があり、陰影があります。クリックするとrippleColorがあり、影の範囲が大きくなります。

この塗りつぶし色とrippleColorはどのようにカスタマイズされますか？デフォルトの色は、themeのcolorAccentですので、styleでcolorAccentを定義することができます。
colorAccentはEditText編集時、Radio Button選択、CheckBoxなどの選択時の色に対応しています。詳細はAndroid 5.x The meとToolBarは実戦的です。
RippleColorはデフォルトでとったのはthemeのColorControl Highlightです。属性を直接使ってこの二つの色を定義することもできます。

app:backgroundTint="#ff87ffeb"
app:rippleColor="#33728dff"

立体感にはどのような属性が動的に指定できますか？立体感に関する2つの属性があります。elevationとpresed Translation Zは、前者のユーザーが正常に表示する影の大きさを設定します。後者はクリック時に表示される影の大きさです。自分で設定してみてください。

以上、色をカスタマイズしたいなら、影の大きさも下記のように設定できます。

<android.support.design.widget.FloatingActionButton  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right|bottom" android:src="@drawable/ic_discuss" app:backgroundTint="#ff87ffeb" app:rippleColor="#33728dff" app:elevation="6dp" app:pressedTranslationZ="12dp" />

クリックイベントはViewのクリックイベントと一致しています。
二、5.xに存在するいくつかの問題
5.xの設備で動作します。いくつかの問題（テストシステム5.0）を発見します。

木には影があります。FloatingActionButtonを設定してください。

は上記の設定により影が出ましたが、矩形の境界があります。

maginの値を設定したいです。5.0前にはデフォルトで外の距離があります。
そして、良い実践は：

追加属性app:borderWidth="0dp"

は、5.xに対して合理的なmagin

を設定する。
以下のとおりです

 <android.support.design.widget.FloatingActionButton  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" app:borderWidth="0dp" android:layout_margin="@dimen/fab_margin" android:src="@drawable/ic_headset" />

values

 <dimen name="fab_margin">0dp</dimen>

values-v 21

 <dimen name="fab_margin">16dp</dimen>

三、簡単にFloatアクションButtonを実現する。
参考資料4
簡単なシェーディング効果は、drawableによって実現できます。
drawable/fab.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <layer-list>
            <!-- Shadow -->
            <item android:top="1dp" android:right="1dp">
                <layer-list>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#08000000"/>
                            <padding  android:bottom="3px" android:left="3px" android:right="3px" android:top="3px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#09000000"/>
                            <padding  android:bottom="2px" android:left="2px" android:right="2px" android:top="2px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#10000000"/>
                            <padding  android:bottom="2px" android:left="2px" android:right="2px" android:top="2px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#11000000"/>
                            <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#12000000"/>
                            <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#13000000"/>
                            <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#14000000"/>
                            <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#15000000"/>
                            <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#16000000"/>
                            <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
                        </shape>
                    </item>
                </layer-list>
            </item>

            <!-- Blue button pressed -->
            <item>
                <shape android:shape="oval">
                    <solid android:color="#90CAF9"/>
                </shape>
            </item>
        </layer-list>
    </item>

    <item android:state_enabled="true">

        <layer-list>
            <!-- Shadow -->
            <item android:top="2dp" android:right="1dp">
                <layer-list>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#08000000"/>
                            <padding  android:bottom="4px" android:left="4px" android:right="4px" android:top="4px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#09000000"/>
                            <padding  android:bottom="2px" android:left="2px" android:right="2px" android:top="2px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#10000000"/>
                            <padding  android:bottom="2px" android:left="2px" android:right="2px" android:top="2px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#11000000"/>
                            <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#12000000"/>
                            <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#13000000"/>
                            <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#14000000"/>
                            <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#15000000"/>
                            <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
                        </shape>
                    </item>
                    <item>
                        <shape android:shape="oval">
                            <solid android:color="#16000000"/>
                            <padding  android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
                        </shape>
                    </item>
                </layer-list>
            </item>

            <!-- Blue button -->

            <item>
                <shape android:shape="oval">
                    <solid android:color="#03A9F4"/>
                </shape>
            </item>
        </layer-list>

    </item>

</selector>

かなり長いdrawableですが、複雑ではなく、記憶にもいいです。まず、Viewに影を付けて、app:borderWidth="0dp"から#08000000まで使っています。取ったpaddingの値は4、2、1…1です。そうすると、Viewの四辺に影を付けることができます。
もちろん、影がよりリアルになるように、上記のLayer-listをitemに含め、このitemのためにtopとrightを設けました。左、下の影の効果を上、右より重くするために、もちろん他の両側を設けて、効果を変えることができます。
最後にitemを追加して、ボタンの塗りつぶし色に設定します。
このdrawableはselectorなので、pressとデフォルトの状態は基本的に同じコードを2回書いています。塗りつぶしの色が違っています。
使用:

 <ImageButton  android:layout_width="56dp" android:layout_height="56dp" android:layout_gravity="bottom|right" android:layout_margin="20dp" android:background="@drawable/fab" android:src="@drawable/ic_done" />

効果図:

FloatingActionButton 完全解析[Design Support Library(2)]_第2张图片

ここでFloat Action Buttonを紹介しました。興味があれば、githubから選んで他の人の実現を見てもいいです。
ok~
新浪微博微信公衆号：hongyangAndroid（ご注意ください。第一時間はブログ情報を送ります。）

FloatingActionButton 完全解析[Design Support Library(2)]_第3张图片

参考資料

http://antonioleiva.com/floating-action-button/

https://code.google.com/p/android/issues/detail?id=175067

https://github.com/chrisbanes/cheesesquare

http://www.myandroidsolutions.com/2015/01/01/android-floating-action-button-fab-tutorial/

iOSは、非同期スレッドBlockからデータを取得する（マスタスレッドリフレッシュデータ）

JAVA学習ノート19——MyBatisフレーム第二章