高级UI之FloatingActionButton

发表于 | 分类于 | |

FloatingActionButton为悬浮按钮，就是常见的那种悬浮在控件上，可以调出其他菜单的按钮

FloatingActionButton的特有属性

app:backgroundTint 按钮的背景颜色
app:backgroundTintMode 按钮背景颜色的模式
app:borderWidth 该属性如果不设置0dp，那么在4.x的sdk上FAB会显示为正方形，而且在5.0以后的sdk没有阴影效果。所以设置为borderWidth="0dp"，同时设置4.x:android:layout_margin="16dp",5.0以上android:layout_margin="0dp"
app:elevation 默认状态下阴影大小
app:fabSize 设置大小，该属性有两个值，分别为normal和mini，对应的大小分别为56dp和40dp
app:pressedTranslationZ 按钮按下去的状态下的阴影大小
app:rippleColor 设置点击时的背景颜色
app:useCompatPadding 是否使用兼容的填充大小

FloatingActionButton的使用

首先依旧是引入依赖

1
implementation 'com.android.support:design:25.4.0'

其实际上是继承了ImageButton，故和ImageButton的使用方式类似

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:onClick="changeDire"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_margin="16dp"
        android:clickable="true"
        android:src="@android:drawable/ic_input_add"
        app:backgroundTint="@android:color/holo_purple"
        app:borderWidth="3dp"
        app:elevation="16dp"
        app:rippleColor="@color/colorPrimary" />

</RelativeLayout>

顺便实现中间的 + 旋转功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
public class MainActivity extends AppCompatActivity {

    private boolean reverse;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void changeDire(View view) {
        Float toDegree = reverse ? -45.0F : 0F;
        ObjectAnimator animator = ObjectAnimator
                .ofFloat(view, "rotation", 0.0F, toDegree)
                .setDuration(300);
        animator.start();
        reverse = !reverse;
    }
}

实现FAB的显示和隐藏

模拟实现

这里使用一个ImageButton来模拟FAB，完成其效果
因为要模拟FAB，需要一个阴影效果

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@android:color/darker_gray"/>
        </shape>
    </item>
    <item android:bottom="3dp">
        <shape android:shape="oval">
            <solid android:color="@color/colorPrimaryDark"/>
        </shape>
    </item>
</layer-list>

将布局实现出来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false"
        android:clipToPadding="false"
        android:paddingTop="?attr/actionBarSize" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/tool_bar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary" />

    <ImageButton
        android:id="@+id/image_button"
        android:layout_width="58dp"
        android:layout_height="58dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_margin="16dp"
        android:background="@drawable/image_button_bg"
        android:src="@android:drawable/ic_input_add" />

</RelativeLayout>

编写适配器，直接使用系统资源

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
public class FABAdapter extends RecyclerView.Adapter<FABAdapter.MyViewHolder> {
    private List<String> list;

    class MyViewHolder extends RecyclerView.ViewHolder {
        private TextView textView;

        public MyViewHolder(View itemView) {
            super(itemView);
            textView = (TextView) itemView.findViewById(android.R.id.text1);
        }
    }

    public FABAdapter(List<String> list) {
        this.list = list;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        LayoutInflater layoutInflater = LayoutInflater.from(parent.getContext());
        View view = layoutInflater.inflate(android.R.layout.simple_list_item_1,parent,false);
        MyViewHolder holder = new MyViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        holder.textView.setText(list.get(position));
    }

    @Override
    public int getItemCount() {
        return list.size();
    }
}

设置滑动简体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
public class FABScrollListener extends RecyclerView.OnScrollListener {

    private static final int THRESHOLD = 20;
    private ShowScrollListener showScrollListener;
    private int distence = 0;
    private boolean isShow;

    public FABScrollListener(ShowScrollListener showScrollListener) {
        this.showScrollListener = showScrollListener;
    }

    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);
        //x,y方向的增量
        if (distence > THRESHOLD && isShow) {
            //隐藏动画
            isShow = false;
            showScrollListener.onHide();
            distence = 0;
        } else if (distence < -20 && !isShow) {
            //显示动画
            isShow = true;
            showScrollListener.onShow();
            distence = 0;
        }
        if ((isShow && dy > 0) || (!isShow && dy < 0)) {
            distence += dy;
        }
    }
}

设置回调接口

1
2
3
4
public interface ShowScrollListener {
    void onShow();
    void onHide();
}

实现回调接口，使用属性动画完成其逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
public class MainActivity extends AppCompatActivity implements ShowScrollListener {

    private List<String> list = new ArrayList<>();
    ;
    private RecyclerView recyclerView;
    private Toolbar toolbar;
    private ImageButton imageButton;
    private FABAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        toolbar = (Toolbar) findViewById(R.id.tool_bar);
        imageButton = (ImageButton) findViewById(R.id.image_button);
        setSupportActionBar(toolbar);
        setTitle("这是标题");
        recyclerView.addOnScrollListener(new FABScrollListener(this));
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        for (int i = 0; i < 30; i++) {
            list.add("item " + i);
        }
        adapter = new FABAdapter(list);
        recyclerView.setAdapter(adapter);
    }

    @Override
    public void onHide() {
        LayoutParams params = (LayoutParams) imageButton.getLayoutParams();
        toolbar.animate().translationY(-toolbar.getHeight()).
                setInterpolator(new AccelerateInterpolator(1F));
        imageButton.animate().translationY(imageButton.getHeight() + params.bottomMargin)
                .setInterpolator(new AccelerateInterpolator(1F));
    }

    @Override
    public void onShow() {
        toolbar.animate().translationY(0)
                .setInterpolator(new DecelerateInterpolator(1F));
        imageButton.animate().translationY(0)
                .setInterpolator(new DecelerateInterpolator(1F));
    }
}

由于使用到了Toolbar，所以主题样式应设置为NoActionBar

1
2
3
4
5
6
7
8
9
10
11
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

效果如下

使用CoordinatorLayout实现

主要是使用RecyclerView + FloatingActionButton + CoordinatorLayout，CoordinatorLayout的作用是协调并调度子空间及布局来实现触摸（滑动）产生的动画效果，使用View的Behavior来实现触摸的动画调度
由于CoordinatorLayout位于support-design，所以需要导入

1
2
implementation 'com.android.support:recyclerview-v7:25.4.0'
implementation 'com.android.support:design:25.4.0'

然后修改其布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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=".MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false"
        android:clipToPadding="false"
        android:paddingTop="?attr/actionBarSize" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/tool_bar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|bottom"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_input_add"
        app:layout_behavior=".FABBehavivor" />

</android.support.design.widget.CoordinatorLayout>

适配器保持不变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
package com.cj5785.fabshowandhidebehavivor;

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.List;

public class FABAdapter extends RecyclerView.Adapter<FABAdapter.MyViewHolder> {
    private List<String> list;

    class MyViewHolder extends RecyclerView.ViewHolder {
        private TextView textView;

        public MyViewHolder(View itemView) {
            super(itemView);
            textView = (TextView) itemView.findViewById(android.R.id.text1);
        }
    }

    public FABAdapter(List<String> list) {
        this.list = list;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        LayoutInflater layoutInflater = LayoutInflater.from(parent.getContext());
        View view = layoutInflater.inflate(android.R.layout.simple_list_item_1,parent,false);
        MyViewHolder holder = new MyViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        holder.textView.setText(list.get(position));
    }

    @Override
    public int getItemCount() {
        return list.size();
    }
}

实现Behavivor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
package com.cj5785.fabshowandhidebehavivor;

import android.content.Context;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.v4.view.ViewCompat;
import android.util.AttributeSet;
import android.view.View;
import android.widget.RelativeLayout;

public class FABBehavivor extends FloatingActionButton.Behavior {

    private boolean isShow;

    public FABBehavivor(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    //依赖滑动开始回调
    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View directTargetChild, View target, int nestedScrollAxes) {
        //nestedScrollAxes 滑动的方向，这里我们依赖recyclerview，只关心其是否垂直滑动
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL
                || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
    }

    //依赖滑动过程回调
    @Override
    public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
        //根据情况执行动画
        if (dyConsumed > 0 && isShow) {
            isShow = false;
            onHide(child);
        } else if (dyConsumed < 0) {
            isShow = true;
            onShow(child);
        }
    }

    private void onShow(FloatingActionButton fab) {
        ViewCompat.animate(fab).scaleX(1f).scaleY(1f).start();
    }

    private void onHide(FloatingActionButton fab) {
        ViewCompat.animate(fab).scaleX(0f).scaleY(0f).start();
    }
}

调用里面就没那么多监听了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
public class MainActivity extends AppCompatActivity{

    private List<String> list = new ArrayList<>();
    private RecyclerView recyclerView;
    private Toolbar toolbar;
    private FloatingActionButton fab;
    private FABAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        toolbar = (Toolbar) findViewById(R.id.tool_bar);
        fab = (FloatingActionButton) findViewById(R.id.fab);
        setSupportActionBar(toolbar);
        setTitle("这是标题");
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        for (int i = 0; i < 30; i++) {
            list.add("item " + i);
        }
        adapter = new FABAdapter(list);
        recyclerView.setAdapter(adapter);
    }
}

效果如下

Donate comment here