您的位置:首页 > 移动开发 > Android开发

Android design library(二)----------FloatingActionButton + Snackbar

2015-10-31 15:49 597 查看
首先,还是先导入依赖包:

compile 'com.android.support:design:22.2.0'


然后,先来看下FloatingActionButton的效果图:



其实,很简单,就是导入一个控件,先在xml中声明;

xmlns:app="http://schemas.android.com/apk/res-auto"


然后:

<FrameLayout
android:id="@+id/layoutInner"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.FloatingActionButton
android:src="@drawable/ig"
app:elevation="10dp"
app:rippleColor="#ff5522"
android:id="@+id/btnFloatingAction"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right" />

</FrameLayout>


设置了android:src 属性 app:rippleColor和后如下:



还有些属性如下:

使用 android:src 改变 FAB 对应的 drawable;

使用 app:rippleColor 设置 FAB 按下时的波纹效果;

使用 app:borderWidth 设置 FAB 边框宽度;

使用 app:elevation 设置闲置状态下 FAB 的景深(默认是 6dp);

使用 app:pressedTranslationZ 设置 FAB 按下时的景深(默认是 12dp)。


最后,在Activity中使用(和使用Button控件一样,可以绑定事件):

button = (FloatingActionButton)findViewById(R.id.btnFloatingAction);
button.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {

}

});


Snackbar

好处:

一小段时间之后、或者用户与屏幕触发交互,Snackbar 会自动消失;

可以包含一个可选的操作;

把 Snackbar 划出屏幕,可以弃用;

作为一条上下文敏感的消息,也是 UI 的一部分,并在屏幕内所有元素的上层显示,而不是像 Toast 消息一样位于屏幕中央;

一个时刻只能有唯一一个 Snackbar 显示。


使用,结合上面的 FloatingActionButton 如下使用:

public class MainActivity extends Activity {
FloatingActionButton button ;
Snackbar snackbar;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
button = (FloatingActionButton)findViewById(R.id.btnFloatingAction);
button.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
snackbar.make(v, " I am  a snackbar", Snackbar.LENGTH_SHORT).
setAction("I am a Action ", new View.OnClickListener() {
@Override
public void onClick(View v) {
// 做想要做的业务逻辑

}
})
.setActionTextColor(getResources().getColor(R.color.c1))
.show();
}

});
}

}


最后,效果图如下:



我表示很喜欢这种风格。TmT
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息