一个自由定制的Material Design风格FloatingActionButton
==
先来看看效果
-
根据GIF可以看出，是一个可折叠菜单式的FloatingActionButton，在部分App中我们也能见到这种效果，下面就一步步学习怎么使用，定制自己的FloatingActionButton
###### 1.添加依赖
添加依赖，在项目的build.gradle中添加```compile 'com.ddz.materialdesign:FloatingActionButton:1.0.2'```
###### 2. 布局
```
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.ddz.floatingactionbutton.FloatingActionMenu
android:id="@+id/fab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin">
<com.ddz.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fab_icon="@drawable/icon_share"
app:fab_size="mini" />
<com.ddz.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fab_icon="@drawable/icon_like"
app:fab_size="normal" />
</com.ddz.floatingactionbutton.FloatingActionMenu>
<com.ddz.floatingactionbutton.FloatingActionMenu
android:id="@+id/fab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_margin="@dimen/fab_margin"
app:fab_addButton_icon="@drawable/icon_follow"
app:fab_labelStyle="@style/lable_style">
<com.ddz.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fab_colorNormal="@color/colorPrimary"
app:fab_colorPressed="@color/colorPrimaryDark"
app:fab_icon="@drawable/icon_follow"
app:fab_size="mini"
app:fab_title="顶部" />
<com.ddz.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fab_icon="@drawable/icon_like"
app:fab_size="normal"
app:fab_stroke_visible="false"
app:fab_title="底部" />
</com.ddz.floatingactionbutton.FloatingActionMenu>
<com.ddz.floatingactionbutton.FloatingActionMenu
android:id="@+id/fab3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_margin="5dp"
app:fab_addButtonColorNormal="@color/colorPrimary"
app:fab_addButtonColorPressed="@color/colorPrimaryDark"
app:fab_addButtonPlusIconColor="@color/colorAccent"
app:fab_addButtonSize="mini"
app:fab_labelStyle="@style/lable_style">
<com.ddz.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fab_icon="@drawable/icon_follow"
app:fab_size="mini"
app:fab_title="顶部" />
<com.ddz.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fab_icon="@drawable/icon_like"
app:fab_size="normal"
app:fab_title="底部" />
</com.ddz.floatingactionbutton.FloatingActionMenu>
<com.ddz.floatingactionbutton.FloatingActionMenu
android:id="@+id/fab4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="5dp"
app:fab_addButton_collapsed_rotation="0"
app:fab_addButton_expanded_rotation="45"
app:fab_addButton_rotation_duration="800"
app:fab_labelStyle="@style/lable_style"
app:fab_labelsPosition="right">
<com.ddz.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fab_icon="@drawable/icon_follow"
app:fab_size="mini"
app:fab_title="顶部" />
<com.ddz.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fab_icon="@drawable/icon_like"
app:fab_size="normal"
app:fab_title="底部" />
</com.ddz.floatingactionbutton.FloatingActionMenu>
</RelativeLayout>
```
布局很简单，一共四个FloatingActionMenu，每个Menu中两个FloatingActionButton，具体效果看图
为了更好的理解每个Menu中属性的含义，罗列出FloatingActionMenu的自定义属性
###### FloatingActionMenu自定义属性：
``` fab_addButtonColorNormal //菜单按钮默认颜色
fab_addButtonColorPressed //菜单按钮按下的颜色
fab_addButtonPlusIconColor //菜单按钮上的“+”号颜色，当设置了icon，“+”不会显示
fab_addButtonSize //菜单按钮的大小，有normal 和 mini 两种状态
fab_addButtonStrokeVisible //菜单按钮“+”边框是否可见
fab_addButton_collapsed_rotation //菜单按钮折叠时的角度
fab_addButton_expanded_rotation //菜单按钮展开的角度
fab_addButton_icon //菜单按钮的图标，设置了icon则“+”不可见
fab_addButton_rotation_duration //菜单按钮展开/折叠的时间
fab_expandDirection //菜单按钮展开的方向，有up/down/left/right四个方向，left/right时，Button不可以设置标签文字
fab_labelsPosition //Button的标签文字相对Button的位置，有 left /right两种
fab_labelStyle //设置标签文字的Style，只有Menu设置了 fab_labelStyle， Button才可以显示文字
```
###### FloatingActionButton自定义属性：
```colorDisabled //Button按钮不可操作时的颜色
fab_colorNormal //Button按钮正常状态的颜色
fab_colorPressed //Button按钮按下时的颜色
fab_icon //Button按钮设置图标
fab_size ///Button按钮设置大小，同样有 normal 和 mini 两种大小
fab_stroke_visible //Button按钮边框是否可见
fab_title //Button按钮的标签文字
```
具体到每个Menu，
第一个Menu: fab1,
```
<com.ddz.floatingactionbutton.FloatingActionMenu
android:id="@+id/fab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin">
<com.ddz.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fab_icon="@drawable/icon_share"
app:fab_size="mini" />
<com.ddz.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fab_icon="@drawable/icon_like"
app:fab_size="normal" />
</com.ddz.floatingactionbutton.FloatingActionMenu>
```
Menu 没有任何设置， 上
一个自由定制的Material Design风格FloatingActionButton
需积分: 14 73 浏览量
2017-05-05
16:44:59
上传
评论
收藏 9.74MB ZIP 举报
一个自由定制的Material Design风格FloatingActionButton （1353个子文件） 
028cd5f87c09792d3ff14b718d02a71f7b96da 91B 02cc2be8a8b89dae5d7a09a72cd3a625bcccc4 193B 0311b3583f95cef920405e71d742c6fa5e840b 175B 033148d5f8c8d710a0adc99747d04514559e63 532B 04edeff005cc73194fea81dfa645b4475b919c 46B 078e3e1a42d474c78470a73c7987cf7ac5d9a0 4KB 083b5ceae747ab2bfc4c4e8ce736ec6e9900be 122B 0a985d987a78b77991f8a9b7429bcbf97c4a46 248B 0c28c6c2ce318adbdd239b4cf8ed3187f98ceb 185B 0c45417bb0c5ca7515b03749d0fcf38c59c79c 53B 0cead629672c4a566008a7d120c99a7705c691 845B 0da33f97785556c16a150a64c131ebeebe6c56 211B 0f4c3cd408228d074b48a827d6fcebeb20da08 248B 1061f9e2d0bface6c086af6917dd37e16dcd23 340B 1135cff25c0bba25b2b6f0ebb80893e72da3cc 321B 14796901c558d9d4f234cd6e4fc492946a2bec 214B 168486ef5f9c51a9ae40bdcbf4a32361210523 533B 178bc957ac4bb6d062b9275b7556cd0e2387d8 91B 181397584ddc2410855533495404305cf974c5 247B 1d6e9aa84b4863dcde31136e3ef0ec760887b6 45B 1d71f1d9f463c844a5c95731855a4655d73764 45B 201c2212b3d59558312583ae3b9cfd3acc74f8 277B 23016865fba95ba2879b80a366bf4143222b73 248B 2343f6c1491942c138233e5ecd359182110dc8 94B 264aca855175f712ccf8f3af8122550bc23029 85B 2837f783e019bb71ca0ff33710998050104904 166B 2882ae20be0bc507b4a3f9c9816406dc7c0fc7 603B 29b83c8cf4420e719a755d45e52683ddfeba60 183B 2debe14809aa59fe3af88f6b5425fabbd94be5 697B 2e1a0bcb620624bd53143f837fef9e10ca7c7d 1KB 2e96e5bd2c80ab7e639093099e602fd03fac3d 91B 2fd14b691e99fd1017781914c0cbcfb29fdec6 196B 30ea1e7ef36a0002ee3e608ffb5cf2d94e61f7 672B 30ef2da7768e4d4c46ad2708944643514c9924 46B 31e6f7ce31487af7c46bd4f7e3ba7497a32237 751B 33a0cbd379f5af6dbf1a899a0293ca5eccfad0 2KB 35d3b4d542962afd277eef20d74b689bc61ddf 389B 37f011daa7ab6a19731eac114a40fc13b55f63 94B 3968db94354bf9c312474cb55be4b68f222fd7 630B 3aea8fd024aef45fd08cd2541a2c8d6d0a3067 45B 4108439fc079e2edabf3f1becf3daac7e4b5da 123B 41ada2b7db10c1b4f0283b064d455972d0aa9b 194B 41eec00351ff374e7333274914fe5be7bbfb4c 123B 4380e5d13b1a808398bd1171ebc2734dd6dd52 91B 44e2baa383267ed1a6175028ad5d795f3d8ae2 248B 4675b257759119a4654f5f2521223b562fee96 212B 47a69989501a93c56801d892f933601d6db139 183B 4e72cdd7480cb983fa1bcc7ce686e51ef87fe7 8KB 53930feb2a1e1af65767000b546362021a4250 94B 55b270ae9cd7e8a4f8961abfefcb1481b1fdc2 183B 56775abaa1bacb2688c34bac8932d8f2e5a38d 46B 56a763c33d9238515c4deae9e85f5ef20bfe89 92B 57ce48228ad2873f5e096bf64f3c8a10240e13 197B 586ab5ea8c66ee47c935ccd4b6d732e4a00076 108B 5b8a3279afc4676266daaddbb6aecb02e5f971 146B 5e86bda426696990b9afc0ee4ccd6605a31b79 184B 5fd0a239afe86077cdb47fd5425d1e7ef9a0f4 1.43MB 6394e5da65ee3bae4410277b3af04ce5299a23 108B 64cc0bfce613293e2fbda24c5cfa129c683c2f 247B 6561168d5b4d260e3eb0546dbacb8f49bac653 248B 68e4607aafc148305ca3de6d09e543d915fe6f 3KB 69e1b561e9102834e20e031f716b05aba7be08 123B 6a7f7967158f69818e2a8848400525400b92e7 520B 6a92df99a460b2e775c8f98878580fcfbbb044 94B 6aec4f0f699c5222f2cc03970889d0bd38723b 45B 6b1d3a89a7596b422140bd04330eca917280df 184B 6b96d1c402326528b4ba3c12ee9d92d0e212e9 22B 6bc82eaa2d72999b87047b7a383c3a4fef5d2d 45B 6d57bfd17e737a9d319188f2aedc21aea31edd 65B 6da43593183af3ab0ce92133bf830169782fbb 73B 6ebb60f44b69da92c222cf9bcc0f0c4cecb1c0 122B 72d3c106936d018cfd8a6a4387e4ee5a4a5d57 638B 742f93e11e659adeedfc519ea29394fdddff98 45B 74dc0f2ee154c810bb65a968f60287c6e796cf 66B 7d7ddb47090b8f4feb6b0a7be7424570c0164a 45B 7f61678fc7d8739c0610494a71e1fa31e8b506 108B 7fee0e3fab143e5d7dc99760f14ddda8bff569 45B 8028fe5db3dfc4ba015974a13547c0d85b6142 45B 80b43feaacbab28a5637ce549440d55322f9db 277B 815967ba8f72b1308e1945dd7d6e4a71199912 94B 85b2192b947aa4446db494996aafcb1bb45f66 247B 8b6deff3a7991f8c3ab997ec335dee5413a09b 615B 8bbd8b6c0f1fc2bd959643262bd687b94a8776 247B 947cd6bbf9c729be83edc96ad08a1d42b82bc9 14KB 94a01bc6c60a50cd639ce1e941bfc4cef4d434 81B 95b8aeb480388545f9a1af64338b5142cc9711 185B 99539089f2edcbce0408f76612cdc37f2edaed 46B 9a785923452cca51a70fcf5e0db1898ba17093 388B a0b0c4f553276e4bbeb064bd1bd81220ae9115 69B a35b4a0a19c0e57fc16d5873a2234cea5d4636 141B a42f0e7b91d006d22352c9ff2f134e504e3c1d 5KB a5ad909b1d43fc70437b3468692d9115cd7940 66B a6039e18104116921575570c2c1d90b5093a5c 248B a7f87815be5e5bd82d90459023215ffc328a1b 407B ac10666d002cb0ef6bf567b96141b5fef461b4 2KB ac41411c6ff491e2af4bd24f4bdc196878e47f 45B aeba3f620c40018a92ac4d019cc510686ed95c 211B af9eea3faa7c495ea3d3ff9c20926436338e26 62B resources-debug.ir.ap_ 474KB resources-debug.ap_ 467KB共 1353 条
- 1
- 2
- 3
- 4
- 5
- 6
- 14
资源评论
