Material Design recyclerview+floatingactionbutto实现联动的效果

在android5.0之后谷歌推出了一种新的设计规范Material Design下面我们要实现的就是其中的一种recyclerview+floatingactionbutto实现联动的效果(上滑动显示下滑动隐藏)
效果图(效果一样不过我改成了左右)

要说到这个效果的实现不得不提到一个布局———CoordinatorLayout
CoordinatorLayout使用新的思路通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。CoordinatorLayout通过设置子View的 Behaviors来调度子view

使用CoordinatorLayout需要在Gradle加入Support Design Library:

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

下面我们将详细介绍此次的联动效果
先来看下布局

<?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"
    android:fitsSystemWindows="true"
    tools:context="com.zhaomy.recyclerview_fab.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:title="RecycleView+fab"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

   <android.support.v7.widget.RecyclerView
       android:id="@+id/recycleview"
       android:layout_width="match_parent"
       android:layout_height="match_parent">

   </android.support.v7.widget.RecyclerView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="@dimen/fab_margin"       app:layout_behavior="com.zhaomy.recyclerview_fab.MyBehavior"
        android:src="@android:drawable/ic_dialog_email" />

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

简单的就是让CoordinatorLayout包裹了recyclerview与FloatingActionButton
在给FloatingActionButton设置一个app:layout_behavior
(其实内部的原理就是滑动recyclerview 通知给coordinatorlayout在反馈给FAB)
好了 重点就是我们要说的自定义的behavior下面请看代码内部都有详细的注释就不再次赘述了

package com.zhaomy.recyclerview_fab;

import android.content.Context;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.v4.view.ViewCompat;
import android.support.v4.view.ViewPropertyAnimatorListenerAdapter;
import android.support.v4.view.animation.FastOutLinearInInterpolator;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by 赵梦阳 on 2016/4/10.
 */
public class MyBehavior extends FloatingActionButton.Behavior {
    //我们还可以加一个加速器实现弹射效果
    private FastOutLinearInInterpolator folistener=new FastOutLinearInInterpolator();
    public  MyBehavior(Context context, AttributeSet attr){
        super();
    }

    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View directTargetChild, View target, int nestedScrollAxes) {
       //开始滑监听---当观察recyclerview开始发生滑动的时候回调
        //nestedScrollAxes滑动关联的方向
        return nestedScrollAxes==ViewGroup.SCROLL_AXIS_VERTICAL||super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
    }
    //正在滑出来
    boolean isAnimatingOut=false;
    @Override
    public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
        //不断的调用
        //判断滑动的方向 dyConsumed 某个方向的增量
        if(dyConsumed>0&&!isAnimatingOut&&child.getVisibility()==View.VISIBLE){
            //fab划出去
            animateOut(child);
        }else if(dyConsumed<0&&child.getVisibility()!=View.VISIBLE){
            //fab划进来
            animateIn(child);
        }
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
    }
    //滑进来
    private void animateIn(FloatingActionButton child) {
        child.setVisibility(View.VISIBLE);
        //属性动画
        ViewCompat.animate(child).translationX(0).setInterpolator(folistener).setListener(null).start();
    }
    //滑出去
    private void animateOut(FloatingActionButton child) {
        //属性动画
        //设置监听判断状态
        ViewCompat.animate(child).translationX(child.getHeight()).setInterpolator(folistener).setListener(new ViewPropertyAnimatorListenerAdapter(){
            @Override
            public void onAnimationStart(View view) {
                isAnimatingOut=true;
                super.onAnimationStart(view);
            }

            @Override
            public void onAnimationCancel(View view) {
                isAnimatingOut=false;
                super.onAnimationCancel(view);
            }

            @Override
            public void onAnimationEnd(View view) {
                view.setVisibility(View.GONE);
                isAnimatingOut=false;
                super.onAnimationEnd(view);
            }
        }).start();
    }

    @Override
    public void onStopNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target) {
        super.onStopNestedScroll(coordinatorLayout, child, target);
    }
}
[下载地址](http://download.csdn.net/detail/applicaton/9490049)
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这个实现需要以下步骤: 1. 在布局文件中添加ViewPager2和TabLayout: ```xml <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabGravity="fill" app:tabMode="fixed" /> <androidx.viewpager2.widget.ViewPager2 android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 2. 在代码中初始化ViewPager2和TabLayout: ```java ViewPager2 viewPager = findViewById(R.id.view_pager); TabLayout tabLayout = findViewById(R.id.tab_layout); viewPager.setAdapter(new MyPagerAdapter(this)); new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> tab.setText("Tab " + (position + 1)) ).attach(); ``` 3. 创建PagerAdapter,用于管理Fragment: ```java public class MyPagerAdapter extends FragmentStateAdapter { public MyPagerAdapter(FragmentActivity fa) { super(fa); } @Override public Fragment createFragment(int position) { return new MyFragment(position + 1); } @Override public int getItemCount() { return 3; } } ``` 4. 创建Fragment,用于显示RecyclerView: ```java public class MyFragment extends Fragment { private int mTabNumber; public MyFragment(int tabNumber) { mTabNumber = tabNumber; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_my, container, false); RecyclerView recyclerView = rootView.findViewById(R.id.recycler_view); recyclerView.setLayoutManager(new LinearLayoutManager(getContext())); recyclerView.setAdapter(new MyRecyclerViewAdapter(mTabNumber)); return rootView; } } ``` 5. 创建RecyclerViewAdapter,用于显示数据: ```java public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.ViewHolder> { private int mTabNumber; public MyRecyclerViewAdapter(int tabNumber) { mTabNumber = tabNumber; } @NonNull @Override public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()) .inflate(R.layout.item_my, parent, false); return new ViewHolder(view); } @Override public void onBindViewHolder(@NonNull ViewHolder holder, int position) { holder.mTextView.setText("Tab " + mTabNumber + ", Item " + (position + 1)); } @Override public int getItemCount() { return 10; } public static class ViewHolder extends RecyclerView.ViewHolder { public TextView mTextView; public ViewHolder(@NonNull View itemView) { super(itemView); mTextView = itemView.findViewById(R.id.text_view); } } } ``` 6. 创建RecyclerView的item布局文件和Fragment的布局文件: item_my.xml: ```xml <TextView android:id="@+id/text_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="16dp" /> ``` fragment_my.xml: ```xml <androidx.recyclerview.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 这样就完成了实现。每个Tab都显示一个RecyclerView,切换Tab时切换RecyclerView

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值