Android开发之实现滑动RecyclerView,浮动按钮的显示和隐藏(一)

来源:互联网 发布:重返十七岁电影知乎 编辑:程序博客网 时间:2024/06/04 18:55

本篇博客,主要讲解了滑动RecyclerView实现FloatingActionButton的显示和隐藏的动画。

-------------------------------分割线-----------------------------

效果图展示:


-------------------------------分割线-----------------------------

思路:

1.监听RecyclerView的滑动。

2.fab执行显示和隐藏的动画

-------------------------------分割线-----------------------------

写一个接口,显示和隐藏动画:

public interface HideScrollListener {    void onHide();    void onShow();}
实现RecyclerView的滑动监听:

public class FabScrollListener extends RecyclerView.OnScrollListener {    private HideScrollListener listener;    private static final int THRESHOLD = 20;    private int distance = 0;    private boolean visible = true;//是否可见    public FabScrollListener(HideScrollListener listener) {        this.listener = listener;    }    @Override    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {        super.onScrolled(recyclerView, dx, dy);        if (distance > THRESHOLD && visible) {            //隐藏动画            visible = false;            listener.onHide();            distance = 0;        } else if (distance < -20 && !visible) {            //显示动画            visible = true;            listener.onShow();            distance = 0;        }        if (visible && dy > 0 || (!visible && dy < 0)) {            distance += dy;        }    }}
接着RecyclerView的Adapter:

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;/** * Created by Fly on 2017/5/10. */public class FabRecyclerAdapter extends RecyclerView.Adapter<FabRecyclerAdapter.MyViewHolder> {    private List<String> list;    public FabRecyclerAdapter(List<String> list) {        this.list = list;    }    @Override    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.listitem, parent, false);        return new MyViewHolder(view);    }    @Override    public void onBindViewHolder(MyViewHolder holder, int position) {        holder.tv.setText(list.get(position));    }    @Override    public int getItemCount() {        return list.size();    }    public class MyViewHolder extends RecyclerView.ViewHolder {        TextView tv;        public MyViewHolder(View itemView) {            super(itemView);            tv = (TextView) itemView.findViewById(R.id.tv);        }    }}
MainActivity:

import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.LinearLayoutManager;import android.support.v7.widget.RecyclerView;import android.support.v7.widget.Toolbar;import android.view.animation.AccelerateInterpolator;import android.view.animation.DecelerateInterpolator;import android.widget.ImageButton;import android.widget.RelativeLayout;import java.util.ArrayList;public class MainActivity extends AppCompatActivity implements HideScrollListener {    private Toolbar toolbar;    private RecyclerView recyclerView;    private ImageButton fab;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        toolbar = (Toolbar) findViewById(R.id.toolbar);        recyclerView = (RecyclerView) findViewById(R.id.recycler);        fab = (ImageButton) findViewById(R.id.fab);        setSupportActionBar(toolbar);        recyclerView.setLayoutManager(new LinearLayoutManager(this));        ArrayList<String> list = new ArrayList<String>();        for (int i = 0; i < 30; i++) {            list.add("item" + i);        }        FabRecyclerAdapter adapter = new FabRecyclerAdapter(list);        recyclerView.setAdapter(adapter);        recyclerView.addOnScrollListener(new FabScrollListener(this));    }    @Override    public void onHide() {        //隐藏动画        toolbar.animate().translationY(-toolbar.getHeight()).setInterpolator(new AccelerateInterpolator(3));        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) fab.getLayoutParams();        fab.animate().translationY(fab.getHeight() + layoutParams.bottomMargin).setInterpolator(new AccelerateInterpolator(3));    }    @Override    public void onShow() {        // 显示动画--属性动画        toolbar.animate().translationY(0).setInterpolator(new DecelerateInterpolator(3));        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) fab.getLayoutParams();        fab.animate().translationY(0).setInterpolator(new DecelerateInterpolator(3));    }}
两个简单布局一并贴出:

activity_main:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    xmlns:app="http://schemas.android.com/apk/res-auto">    <android.support.v7.widget.RecyclerView        android:id="@+id/recycler"        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/toolbar"        app:title="fly学院"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:background="?attr/colorPrimary" />    <ImageButton        android:id="@+id/fab"        android:layout_width="58dp"        android:layout_height="58dp"        android:layout_alignParentBottom="true"        android:layout_alignParentRight="true"        android:layout_margin="16dp"        android:background="@drawable/fab_bg"        android:src="@drawable/ic_favorite_outline_white_24dp" /></RelativeLayout>
listitem:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="vertical">    <TextView        android:id="@+id/tv"        android:layout_width="wrap_content"        android:layout_height="30dp" /></LinearLayout>

-------------------------------下节课介绍用BeHavior来实现这一效果-----------------------------

阅读全文
2 0
原创粉丝点击