Tính năng:
- MinSdk 14
- Khả năng tùy biến cao (label, icon, ripple, fab và label background colors, themes support)
- Animation tương tự Inbox của Gmail
- Tùy chọn các icon khác nhau cho trạng thái mở/đóng
- Tùy chọn overlay
- Hỗ trợ mở rộng menu dưới, trái và phải
- Hỗ trợ vượt trội cho Snackbar
- Hỗ trợ tùy chọn cho hành vi trong RecyclerView và NestedScrollView
- Hỗ trợ cho VectorDrawable
- Và quan trọng nhất là dễ sử dụng
Cách dùng
Thư viện này có sẵn trên Jcenter. Bạn chỉ cần thêm dòng dưới đây vào Dependencies
1 2 | implementation <span class="token string">"com.leinardi.android:speed-dial:2.0.0"</span> |
Thêm JitPack repository vào build file
1 2 | maven <span class="token punctuation">{</span> url <span class="token string">'https://jitpack.io'</span> <span class="token punctuation">}</span> |
Thêm dependency
1 2 | implementation <span class="token string">'com.github.leinardi:FloatingActionButtonSpeedDial:master-SNAPSHOT'</span> |
Sử dụng bằng cách thêm SpeedDialView vào file layout của bạn
1 2 3 4 5 6 7 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>com.leinardi.android.speeddial.SpeedDialView</span> <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/speedDial<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span>layout_gravity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>bottom|end<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">app:</span>sdMainFabClosedSrc</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/ic_add_white_24dp<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> |
Thêm item cho SpeedDialView
1 2 3 4 5 6 | SpeedDialView speedDialView <span class="token operator">=</span> <span class="token function">findViewById</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>id<span class="token punctuation">.</span>speedDial<span class="token punctuation">)</span><span class="token punctuation">;</span> speedDialView<span class="token punctuation">.</span><span class="token function">addActionItem</span><span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">SpeedDialActionItem<span class="token punctuation">.</span>Builder</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>id<span class="token punctuation">.</span>fab_link<span class="token punctuation">,</span> R<span class="token punctuation">.</span>drawable<span class="token punctuation">.</span>ic_link_white_24dp<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> |
Handle click listener
1 2 3 4 5 6 7 8 9 10 11 12 13 | speedDialView<span class="token punctuation">.</span><span class="token function">setOnActionSelectedListener</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">SpeedDialView<span class="token punctuation">.</span>OnActionSelectedListener</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token annotation punctuation">@Override</span> <span class="token keyword">public</span> <span class="token keyword">boolean</span> <span class="token function">onActionSelected</span><span class="token punctuation">(</span>SpeedDialActionItem speedDialActionItem<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">switch</span> <span class="token punctuation">(</span>speedDialActionItem<span class="token punctuation">.</span><span class="token function">getId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">case</span> R<span class="token punctuation">.</span>id<span class="token punctuation">.</span>fab_link<span class="token operator">:</span> <span class="token function">showToast</span><span class="token punctuation">(</span><span class="token string">"Link action clicked!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token comment">// true to keep the Speed Dial open</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Một số tùy chỉnh bạn có thể sử dụng
Handle onChangeListener
1 2 3 4 5 6 7 8 9 10 11 12 13 | speedDialView<span class="token punctuation">.</span><span class="token function">setOnChangeListener</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">SpeedDialView<span class="token punctuation">.</span>OnChangeListener</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token annotation punctuation">@Override</span> <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onMainActionSelected</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Call your main action here</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token comment">// true to keep the Speed Dial open</span> <span class="token punctuation">}</span> <span class="token annotation punctuation">@Override</span> <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onToggleChanged</span><span class="token punctuation">(</span><span class="token keyword">boolean</span> isOpen<span class="token punctuation">)</span> <span class="token punctuation">{</span> Log<span class="token punctuation">.</span><span class="token function">d</span><span class="token punctuation">(</span>TAG<span class="token punctuation">,</span> <span class="token string">"Speed dial toggle state changed. Open = "</span> <span class="token operator">+</span> isOpen<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Tùy chỉnh cho các item. SpeedDialActionItem.Builder cung cấp một số setters để tùy chỉnh những thuộc tính của các item
1 2 3 4 5 6 7 8 9 10 11 | mSpeedDialView<span class="token punctuation">.</span><span class="token function">addActionItem</span><span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">SpeedDialActionItem<span class="token punctuation">.</span>Builder</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>id<span class="token punctuation">.</span>fab_custom_color<span class="token punctuation">,</span> R<span class="token punctuation">.</span>drawable<span class="token punctuation">.</span>ic_custom_color<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">setFabBackgroundColor</span><span class="token punctuation">(</span>ResourcesCompat<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token function">getResources</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> R<span class="token punctuation">.</span>color<span class="token punctuation">.</span>material_white_1000<span class="token punctuation">,</span> <span class="token function">getTheme</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">setFabImageTintColor</span><span class="token punctuation">(</span>ResourcesCompat<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token function">getResources</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> R<span class="token punctuation">.</span>color<span class="token punctuation">.</span>inbox_primary<span class="token punctuation">,</span> <span class="token function">getTheme</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">setLabel</span><span class="token punctuation">(</span><span class="token function">getString</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>string<span class="token punctuation">.</span>label_custom_color<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">setLabelColor</span><span class="token punctuation">(</span>Color<span class="token punctuation">.</span>WHITE<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">setLabelBackgroundColor</span><span class="token punctuation">(</span>ResourcesCompat<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token function">getResources</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> R<span class="token punctuation">.</span>color<span class="token punctuation">.</span>inbox_primary<span class="token punctuation">,</span> <span class="token function">getTheme</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">setLabelClickable</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> |
Bạn cũng có thể thay đổi background và hiệu ứng đổi màu khi click
1 2 3 4 5 6 | mSpeedDialView<span class="token punctuation">.</span><span class="token function">addActionItem</span><span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">SpeedDialActionItem<span class="token punctuation">.</span>Builder</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>id<span class="token punctuation">.</span>fab_custom_theme<span class="token punctuation">,</span> R<span class="token punctuation">.</span>drawable<span class="token punctuation">.</span>ic_theme_white_24dp<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">setLabel</span><span class="token punctuation">(</span><span class="token function">getString</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>string<span class="token punctuation">.</span>label_custom_theme<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">setTheme</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>style<span class="token punctuation">.</span>AppTheme_Purple<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
1 2 3 4 5 6 7 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>AppTheme.Purple<span class="token punctuation">"</span></span> <span class="token attr-name">parent</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>AppTheme<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style language-css"> <item name=<span class="token string">"colorPrimary"</span>>@color/material_purple_500</item> <item name=<span class="token string">"colorPrimaryDark"</span>>@color/material_purple_700</item> <item name=<span class="token string">"colorAccent"</span>>@color/material_purple_a700</item> <item name=<span class="token string">"colorControlHighlight"</span>>@color/material_purple_200</item> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> |
Thêm lớp overlay/touch guard khi menu đang mở
Bạn chỉ cần thêm SpeedDialOverlayLayout vào layout
1 2 3 4 5 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>com.leinardi.android.speeddial.SpeedDialOverlayLayout</span> <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/overlay<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> |
Sau đó thêm vào SpeedDialView bằng 1 trong 2 cách sau:
1 2 3 4 5 6 7 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>com.leinardi.android.speeddial.SpeedDialView</span> <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/speedDial<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">app:</span>sdMainFabClosedSrc</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@drawable/ic_add_white_24dp<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">app:</span>sdOverlayLayout</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@id/overlay<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> |
hoặc
1 2 3 | SpeedDialOverlayLayout overlayLayout <span class="token operator">=</span> <span class="token function">findViewById</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>id<span class="token punctuation">.</span>overlay<span class="token punctuation">)</span><span class="token punctuation">;</span> mSpeedDialView<span class="token punctuation">.</span><span class="token function">setSpeedDialOverlayLayout</span><span class="token punctuation">(</span>overlayLayout<span class="token punctuation">)</span><span class="token punctuation">;</span> |
Trên đây là cách dùng đơn giản của Floating Button sử dụng thư viện Speed Dial. Cảm ơn các bạn đã theo dõi!