Android開發之實現滑動RecyclerView,浮動按鈕的顯示和隱藏(一)
阿新 • • 發佈:2019-02-06
本篇部落格,主要講解了滑動RecyclerView實現FloatingActionButton的顯示和隱藏的動畫。
-------------------------------分割線-----------------------------
效果圖展示:
-------------------------------分割線-----------------------------
思路:
1.監聽RecyclerView的滑動。
2.fab執行顯示和隱藏的動畫
-------------------------------分割線-----------------------------
寫一個介面,顯示和隱藏動畫:
public interface HideScrollListener {
void onHide();
void onShow();
}
實現RecyclerView的滑動監聽:
接著RecyclerView的Adapter: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; } } }
MainActivity: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); } } }
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來實現這一效果-----------------------------