Android 浮动按钮+上滑隐藏按钮+下滑显示按钮

1.效果演示

1.1.关注这个红色的浮动按钮

  

  可以看到,上滑的时候浮动按钮消失,因为用户迫切想知道下面的东西,而不是回到顶部。

  当下滑的时候,用户想回到原来的位置,就可以点击浮动按钮,快速回到顶部。所以浮动按钮弹上来了。

2.定义一个动画通用类AnimatorUtil

2.1.源代码如下

public class AnimatorUtil {

    private static LinearOutSlowInInterpolator FAST_OUT_SLOW_IN_INTERPOLATOR = new LinearOutSlowInInterpolator();

    private static AccelerateInterpolator LINER_INTERPOLATOR = new AccelerateInterpolator();

    // 显示view
    public static void scaleShow(View view, ViewPropertyAnimatorListener viewPropertyAnimatorListener) {
        view.setVisibility(View.VISIBLE);
        ViewCompat.animate(view)
                .scaleX(1.0f)
                .scaleY(1.0f)
                .alpha(1.0f)
                .setDuration(800)
                .setListener(viewPropertyAnimatorListener)
                .setInterpolator(FAST_OUT_SLOW_IN_INTERPOLATOR)
                .start();
    }

    // 隐藏view
    public static void scaleHide(View view, ViewPropertyAnimatorListener viewPropertyAnimatorListener) {
        ViewCompat.animate(view)
                .scaleX(0.0f)
                .scaleY(0.0f)
                .alpha(0.0f)
                .setDuration(800)
                .setInterpolator(FAST_OUT_SLOW_IN_INTERPOLATOR)
                .setListener(viewPropertyAnimatorListener)
                .start();
    }

    // 显示view
    public static void translateShow(View view, ViewPropertyAnimatorListener viewPropertyAnimatorListener) {
        view.setVisibility(View.VISIBLE);
        ViewCompat.animate(view)
                .translationY(0)
                .setDuration(400)
                .setListener(viewPropertyAnimatorListener)
                .setInterpolator(FAST_OUT_SLOW_IN_INTERPOLATOR)
                .start();
    }

    // 隐藏view
    public static void translateHide(View view, ViewPropertyAnimatorListener viewPropertyAnimatorListener) {
        view.setVisibility(View.VISIBLE);
        ViewCompat.animate(view)
                .translationY(260)
                .setDuration(400)
                .setInterpolator(FAST_OUT_SLOW_IN_INTERPOLATOR)
                .setListener(viewPropertyAnimatorListener)
                .start();
    }
}

2.2. 成员变量分析

  

  这里定义了一个LinearOutSlowInInterpolator,系统类。

  然后定义了一个AccelerateInterpolator,通用系统类。

2.3.显示View方法一

  

  ViewCompat系统类。动态地显示这个view。设置周期为800ms。

2.4.隐藏View方法一

  

  ViewCompat系统类,这里动态地隐藏这个View。设置周期为800ms。

2.5.显示View方法二

  

  方法类似,不过这里微调了一下。

2.6.隐藏View方法二

  

  方法类似,不过这里微调了一下。

3.浮动按钮行为控制器

3.1.源代码如下。

// FAB 行为控制器
public class ScaleDownShowBehavior extends FloatingActionButton.Behavior {

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

    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout,
                                       FloatingActionButton child, View directTargetChild,
                                       View target, int nestedScrollAxes) {
        if (nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL){
            return true;
        }
        return super.onStartNestedScroll(coordinatorLayout, child, directTargetChild,
                target, nestedScrollAxes);
    }

    private boolean isAnimateIng = false;   // 是否正在动画
    private boolean isShow = true;  // 是否已经显示

    public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child,
                               View target, int dxConsumed, int dyConsumed,
                               int dxUnconsumed, int dyUnconsumed) {
        if ((dyConsumed > 0 || dyUnconsumed > 0) && !isAnimateIng && isShow) {// 手指上滑,隐藏FAB
            AnimatorUtil.translateHide(child, new StateListener() {
                @Override
                public void onAnimationStart(View view) {
                    super.onAnimationStart(view);
                    isShow = false;
                }
            });
        } else if ((dyConsumed < 0 || dyUnconsumed < 0 && !isAnimateIng && !isShow)) {
            AnimatorUtil.translateShow(child, new StateListener() {
                @Override
                public void onAnimationStart(View view) {
                    super.onAnimationStart(view);
                    isShow = true;
                }
            });// 手指下滑,显示FAB
        }
    }

    class StateListener implements ViewPropertyAnimatorListener {
        @Override
        public void onAnimationStart(View view) {
            isAnimateIng = true;
        }

        @Override
        public void onAnimationEnd(View view) {
            isAnimateIng = false;
        }

        @Override
        public void onAnimationCancel(View view) {
            isAnimateIng = false;
        }
    }
}

3.2.构造函数。

  

  这里继承了浮动按钮的行为FloatingActionButton.Behavior,构造函数直接继承基类即可。

3.3.这里重写第一个函数onStartNestedScroll

  

  这里还是主要继承原来的即可。

3.4.定义两个变量

  

3.5.监听手指上滑和手指下滑

  

  手指上滑是通过dyConsumed>0判断的,执行AnimatorUtil隐藏函数即可。

  手指下滑是通过dyConsumed<0判断的,执行AnimatorUtil显示函数即可。

3.6.AnimatorUtil自定义类函数需要传入一个监听器

  

  如果动画开始,则设置是否正在动画为true

  如果动画结束,则设置是否正在动画为false

  如果动画取消,则设置是否正在动画为false

4.布局中配置浮动按钮行为

4.1.在浮动按钮的布局中设置app:layout_behavior

  

4.2.然后在资源文件中定义自定义的路径,在上面直接写也可以。

  

5.总结一下

5.1.首先自定义一个动画通用类AnimatorUtil,用来动态显示或隐藏view。

5.2.然后定义一个浮动按钮的行为控制器,继承FloatingActionButton.Behavior,实现两个重写的方法。

  在重写的onNestedScroll中,判断手指上滑,然后调用通用类实现隐藏view。判断手指下滑,然后

  调用通用类实现显示view。

5.3.然后在浮动按钮的布局中定义一个app:layout_behavior,用资源文件什么,将自定义类的路径加进去即可。

时间: 2024-11-13 22:38:26

Android 浮动按钮+上滑隐藏按钮+下滑显示按钮的相关文章

iOS 上滑隐藏导航,下滑显示导航,仿斗鱼导航效果

UItableView或 UIcollectionView 都是继承UIScrollView 滑动的时候,判断是上滑还是下滑 使用 UIScrollView 的代理方法 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000 } span.s1 { color: #ba2da2 } span.s2 { } span.s3 { color: #703daa } func scrollViewWillEnd

MFC动态创建按钮,并在按钮上实现位图的切换显示】

动态创建按钮,并在按钮中添加位图,通过单击按钮显示不同的位图,可设置为显示按钮按下和弹起两种状态.只要判断a值从而输入不同的响应代码. 1.在头文件中添加: CButton *pBtn; 2.在初始化函数中添加: pBtn = new CButton(); pBtn->Create(_T("My button"), WS_CHILD|WS_VISIBLE|BS_PUSHBUTTON|BS_BITMAP, CRect(0,0,100,40), this, IDC_BUTTON);/

NestedScrollView嵌套RecycleView 滑动 实现上滑隐藏 下滑显示头部效果

废了好大的劲才弄好的,记下来 方便以后查看 public class MainActivity extends AppCompatActivity { private RecyclerView mRecyclerView; private List<String> mDatas; private HomeAdapter mAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(

iOS 实现长按录音上滑取消的几种思路

body { font-size: 13pt; color: #222; background: #fbfbfb; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; line-height: 1.4; margin: 10% } h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111 } h1 { font-size: 3em; line-height: 1; ma

Android 上滑显示底部导航,下滑显示标题bar

本文简单介绍使用属性动画来实现上滑显示底部导航,下滑显示标题bar.先上图看效果,再分析: 可以看出这是个listview有标题和底部,有点像下拉刷新和上拉加载更多.只不过下拉或上拉一定时位置固定拉不动,且只在list的第一个item出现显示时,才平滑动画的让标题或底部显示或隐藏. 实现思路: 1.整个布局有三个部分构成,上部由一个RelativeLayout放ImageView或TextView.中间部分是个listView,下部是一个TextView. 2.采用LinearLayout摆放中

IOS开发中UIBarButtonItem上按钮切换或隐藏实现案例

IOS开发中UIBarButtonItem上按钮切换或隐藏案例实现案例是本文要介绍的内容,这个代码例子的背景是:导航条右侧有个 edit button,左侧是 back button 和 add button. AD:[线下活动]三大新锐HTML 5企业汇聚51CTO—大话移动前端技术 IOS开发中UIBarButtonItem上按钮切换或隐藏案例实现案例是本文要介绍的内容,这个代码例子的背景是:导航条右侧有个 edit button,左侧是 back button 和 add button.代

百度地图3.0 隐藏比例尺和缩放按钮的方法

今天做项目的时候用到了百度地图Android SDK v3.0.0,发现用以前的办法无法去掉地图上的比例尺和按钮, 而demo里提供的设置BaiduMapOptions这个对象的方法来去掉地图上的比例尺和按钮, 但只能通过mMapView = new MapView(this, mapOptions);的方式来实例化MapView这个对象, 可是我想把自己定义的xml加进来,通过setContentView(R.layout.myview),然后用老办法mMapView = (MapView)

Android自定义组件系列【14】——Android5.0按钮波纹效果实现

今天任老师发表了一篇关于Android5.0中按钮按下的波纹效果实现<Android L中水波纹点击效果的实现>,出于好奇我下载了源代码看了一下效果,正好手边有一个Nexus手机,我结合实际效果看了一下,发现有一些地方和实际效果稍有不同,参考任老师的博文实现简单实现了一个重写View组件的代码,将全部代码贴出,如果有什么问题或者更好的方式请指出,在此再次感谢任老师的这篇博文. 转载请说明出处:http://blog.csdn.net/dawanganban 顺便在这里拉一下票,如果你觉得这篇文

RecyclerView 滑动检测 (上滑 up)(下滑 down)(顶部 top)(底部 bottom)

RecyclerView 给我们的可以检测滑动事件的接口 只有 一个方法 recyclerview.setOnScrollListener()或者 recyclerview.addOnScrollListener() set方法将会被弃用 deprecated 最好使用add方法但是这个也可以根据自己情况,如果自己当前的api中set方法没有被弃用,不存在add方法.就只能使用set方法了. 监听 上滑,下滑 这些都不是重点,接下来就分析如何监听,RecyclerView的滑动. Recycle