1.FloatingActionButton的基本使用：
GoogleSamples：github上谷歌官方FAB事例
- 由于FloatingActionButton在Design Support库中，所以先添加依赖：(注意最后相应的版本号)
dependencies {
……
compile 'com.android.support:design:25.3.1'
}
- xml中定义
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.stories.floatingactionbutton.MainActivity">
<android.support.design.widget.FloatingActionButton
android:id="@+id/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:src="@drawable/ic_action"
app:fabSize="mini"
app:elevation="8dp"
app:pressedTranslationZ="10dp"
app:rippleColor="#fff"
app:backgroundTint="@color/colorAccent"/>
</FrameLayout>
- 添加点击事件
public class MainActivity extends AppCompatActivity {
private FloatingActionButton mButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
/* 为FloatingActionButton设置点击事件 */
mButton = (FloatingActionButton) findViewById(R.id.floating_action_button);
mButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
}
});
}
}
2.FloatingActionButton的继承关系：
3.FloatingActionButton的常用属性：
-
app:fabSize: 为了符合Material Design的设计风格，Google给出了FloatingActionButton的三种大小值：mini、normal、auto。
- auto：FloatingActionButton的大小会根据屏幕的大小自己改变，对于小屏幕设备（最大屏幕尺寸小于470 dp）会使用mini尺寸，比这个更大的屏幕会使用normal尺寸。
mini normal auto
-
app:elevation="6dp"：为了有投影悬浮效果，为FloatingActionButton设置一个高度值。
- 高度值越大，投影效果越淡，投影范围越大。
- 高度值越小，投影效果越浓，投影范围越小。
-
app:rippleColor：为了符合Material Design的设计风格，为了使可点击的选项给用户反馈，点击时会有水波纹扩散的效果。
- 默认值是灰色的水波纹效果。
- 如果设置rippleColor没有效果，记得设置属性
android:clickable="true"。
-
app:pressedTranslationZ="10dp"：设置阴影的点击效果。与elevation控制的同一地方的阴影，不过elevation是非按压时的阴影效果，而pressedTranslationZ是点击按钮时阴影的效果（按钮被按压了，阴影当然也要随着变化啦）。
- 值越大，按下时阴影范围越大。这个值一般默认就好。
-
app:backgroundTint： 改变FloatingActionButton的背景颜色。
-
注意要使用自定义命名空间
xmlns:app="http://schemas.android.com/apk/res-auto"，因为FloatingActionButton重写了继承自View的android:backgroundTint属性，使用android:backgroundTint改变背景颜色会导致Fab四周有一个用colorAccent颜色填充的圆环。 - 产生涟漪效果，记得设置属性
android:clickable="true"。 - 默认的背景颜色是所使用主题的colorAccent颜色。
-
app:useCompatPadding="true"：这个属性会让FloatingActionButton自己调整内边距。不过在5.0系统上设置此属性会导致按压时产生方形阴影效果，影响美观度。一般用android:layout_margin属性调整即可。 - 根据继承关系，会继承ImageVIew、ImageButton等的可继承属性。
-
android:src="": 用来设置FloatingActionButton的背景内容、形状，比如“对号”、“铅笔”之类的。
4.常用属性所对应的public方法：
public class MainActivity extends AppCompatActivity {
private static final String TAG = "MainActivity";
private FloatingActionButton mFAButton;
private Button mTestButton; //测试按钮，用来显示Fab
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTestButton = (Button) findViewById(R.id.button);
mFAButton = (FloatingActionButton) findViewById(R.id.floating_action_button);
mFAButton.setCompatElevation(5.0F); //设置FloatingActionButton的高度值，产生相应的阴影效果
mFAButton.setRippleColor(Color.parseColor("#FFFFFFFF")); //设置涟漪效果颜色
mFAButton.setImageResource(R.drawable.ic_action); //设置Fab的背景内容
mFAButton.setBackgroundTintList(ColorStateList.valueOf(Color.parseColor("#FF13C6DA"))); //设置Fab的背景颜色
//mFAButton.setVisibility(View.INVISIBLE); //设置Fab的可见性
mFAButton.setSize(FloatingActionButton.SIZE_AUTO); // 设置Fab的大小
/* 为FloatingActionButton设置点击事件 */
mFAButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mFAButton.hide(new FloatingActionButton.OnVisibilityChangedListener() {
@Override
public void onHidden(FloatingActionButton fab) {
super.onHidden(fab);
Toast.makeText(MainActivity.this, "OnShown", Toast.LENGTH_SHORT).show();
Log.d(TAG, "Hide");
Log.d(TAG, "onHidden: " + mFAButton.getRippleColor());
Log.d(TAG, "onHidden: " + mFAButton.getCompatElevation());
Log.d(TAG, "onHidden: " + mFAButton.getElevation());
}
});
}
});
mTestButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mFAButton.show(new FloatingActionButton.OnVisibilityChangedListener() {
@Override
public void onShown(FloatingActionButton fab) {
super.onShown(fab);
Toast.makeText(MainActivity.this, "OnShown", Toast.LENGTH_SHORT).show();
Log.d(TAG, "ONSHOW");
}
});
}
});
}
}
-
void setSize (int size): 设置FloatingActionButton的大小，三值可选择，对应三个常量。FloatingActionButton.SIZE_MINI、FloatingActionButton.SIZE_NORMAL、FloatingActionButton.SIZE_AUTO。
- 对应属性：
app:fabSize=""。
-
void setUseCompatPadding (boolean useCompatPadding): 设置是否使用系统自兼容的内边距。
- 对应属性：
app:useCompatPadding=""。
-
void setVisibility (int visibility): 设置Fab的可见性，继承自View的方法。
- 对应属性：
android:visibility="visible|invisible|gone"。
-
void setImageResource (int resId): 设置Fab的背景内容。
- 对应属性：
android:src=""。
-
void setBackgroundTintList (ColorStateList tint): 设置Fab的背景颜色。
- 对应属性：
app:backgroundTint=""。
-
void setRippleColor(int color): 设涟漪效果的颜色。
- 对应属性：
app:rippleColor=""。
-
void setCompatElevation (float elevation)：设置FloatingActionButton的高对值，产生相应的阴影效果。
- 对应属性
app:elevation="6dp"。
-
void hide(): 使得FloatingActionButton隐藏，不同于设置visibility属性的是，自带了逐渐缩小的动画效果。 -
void hide (FloatingActionButton.OnVisibilityChangedListener listener): 会使得FloatingActionButton隐藏的同时，会调用此接口中的onHidden(FloatingActionButton fab)方法。 -
void show(): 使得隐藏的FloatingActionButton显示，对应hide()方法，自带了逐渐放大的动画效果。 -
void show (FloatingActionButton.OnVisibilityChangedListener listener): 会使得隐藏的FloatingActionButton显示的同时，会调用此接口中的onShown(FloatingActionButton fab)方法。
显示隐藏效果及接口调用
-
boolean getUseCompatPadding (): 获取是否使用了系统自适应内边距。 -
int getSize(): 获取FloatingActionButton的当前大小值。
| 返回值 | 对应大小 |
|---|---|
| 0 | SIZE_NORMAL |
| 1 | SIZE_MINI |
| -1 | SIZE_AUTO |
-
int getRippleColor(): 返回int类型的ripple所使用的颜色。 -
float getCompatElevation(): 返回FloatingActionButton的高度值。
网友评论