如何使用AppCompat v21在android中创建浮动操作按钮(FAB)？
我想创建一个浮动操作按钮(将项目添加到列表视图),如谷歌日历,保持与棒棒糖前Android版本(5.0之前)的兼容性.
我创建了这个布局:
活动main_activity.xml:
<LinearLayout ... >
<include
layout="@layout/toolbar"/>
<RelativeLayout ... >
<!-- My rest of the layout -->
<!-- Floating action button -->
<ImageButton style="@style/AppTheme"
android:layout_width="60dp"
android:layout_height="60dp"
android:text="New Button"
android:id="@+id/button"
android:src="@drawable/ic_fab"
android:background="@drawable/fab"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="24dp"
android:layout_marginRight="24dp"/>
</RelativeLayout>
</LinearLayout>
可绘制的fab.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#ffa48bc0"/>
</shape>
样式styles.xml
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#ff1d79b1</item>
<item name="colorPrimaryDark">#ff084d95</item>
</style>
</resources>
结果类似,但没有阴影,材料设计的特点:
日历的浮动操作按钮:
我的应用程序的浮动操作按钮:
如何将阴影添加到我的按钮？
我已经使用了属性提升,但不起作用
use*_*603 99
不再需要创建自己的FAB或使用第三方库,它包含在AppCompat 22中.
https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html
只需在gradle文件中添加名为design in的新支持库:
compile 'com.android.support:design:22.2.0'
......你很高兴:
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_margin="16dp"
android:clickable="true"
android:src="@drawable/ic_happy_image" />
- 默认情况下,背景颜色将是主题中的"colorAccent".不过你也可以使用floatingActionButton.setRippleColor(颜色),不要让名字'涟漪'吓到你,它也适用于前棒棒糖设备. (2认同)
- 超级最佳答案 (2认同)
Jus*_*ard 43
我通常使用xml drawables在pre-lollipop小部件上创建阴影/高程.例如,这里是一个xml drawable,可用于棒棒糖前设备上,以模拟浮动动作按钮的高程.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="8px">
<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>
<item>
<shape android:shape="oval">
<solid android:color="#17000000"/>
<padding
android:bottom="1px"
android:left="1px"
android:right="1px"
android:top="1px"
/>
</shape>
</item>
</layer-list>
</item>
<item>
<shape android:shape="oval">
<solid android:color="?attr/colorPrimary"/>
</shape>
</item>
</layer-list>
代替?attr/colorPrimary你可以选择任何颜色.这是结果的屏幕截图:
- 对于将来的参考,这是避免阴影和高程的一个很好的例子 - > http://www.curious-creature.com/2008/12/18/avoid-memory-leaks-on-android/comment-page- 1 / (2认同)
| 归档时间： |
|
| 查看次数： |
113802 次 |
| 最近记录： |