CoordinatorLayout与ListView协同让FAB悬浮按钮从底部消失及出现

CoordinatorLayout协同布局在一般只结合RecyclerView和NestedScrollView使用,如果我使用ListView没有效果的。但是,由于业务原因使用ListView,有需要实现协同的效果怎么办?

其实分析RecyclerView和NestedScrollView的源码可以知道,他们都实现了一个接口NestedScrollingChild,所以我们可以自定义ListView,实现NestedScrollingChild接口就好。当然除此外,google还提供了一个API

mListView.setNestedScrollingEnabled(true),就可以使用。当然,这2种方法只有在Android5.0以上才有效果。

下面就滑动ListView,让fab悬浮按钮滑动出现和滑动消失为例:

这里需要自定义一个Behavior类,这个类将作用于fab悬浮按钮,也就是在fab悬浮按钮中使用这个属性,如下:

app:layout_behavior="www.weshared.listviewandcoor.QuickReturnFooterBehavior"

具体代码如下:

activity_main.xml

<?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="www.weshared.listviewandcoor.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"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        app:layout_behavior="www.weshared.listviewandcoor.QuickReturnFooterBehavior"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

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

content_main.xml

<?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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="www.weshared.listviewandcoor.MainActivity"
    tools:showIn="@layout/activity_main">

    <ListView
        android:id="@+id/lv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</RelativeLayout>

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="60dp">

    <TextView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/tv_item"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:gravity="center"
        android:text="ee">
    </TextView>

</RelativeLayout>


MainActivity文件中

public class MainActivity extends AppCompatActivity {
    private ArrayList<String> mdatas = new ArrayList();
    private ListView mListView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        initView();

    }

    private void initView() {
        mListView = (ListView) findViewById(R.id.lv);
        //API21以上才有效果----第二种方式,比较简便
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            mListView.setNestedScrollingEnabled(true);
        }
        initData();
        mListView.setAdapter(new MyListAdapter(mdatas));
    }

    private void initData() {
        for(int i=0;i<30;i++){
            mdatas.add("---------"+i+"-----------");
        }
    }
}

MyListAdapter文件就省略吧



自定义ListView实现NestedScrollingChild接口,看代码也可以知道,其实发挥作用的就是setNestedScrollingEnabled(true)这个方法

public class NestedScrollingListView extends ListView implements NestedScrollingChild {
    private NestedScrollingChildHelper mNestedScrollingChildHelper;

    public NestedScrollingListView(final Context context) {
        super(context);
        initHelper();

    }

    public NestedScrollingListView(final Context context, final AttributeSet attrs) {
        super(context, attrs);
        initHelper();
    }

    public NestedScrollingListView(final Context context, final AttributeSet attrs, final int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initHelper();
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public NestedScrollingListView(final Context context, final AttributeSet attrs, final int defStyleAttr, final int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        initHelper();
    }

    private void initHelper() {
        mNestedScrollingChildHelper = new NestedScrollingChildHelper(this);
        setNestedScrollingEnabled(true);
    }

    @Override
    public void setNestedScrollingEnabled(final boolean enabled) {
        mNestedScrollingChildHelper.setNestedScrollingEnabled(enabled);
    }

    @Override
    public boolean isNestedScrollingEnabled() {
        return mNestedScrollingChildHelper.isNestedScrollingEnabled();
    }

    @Override
    public boolean startNestedScroll(final int axes) {
        return mNestedScrollingChildHelper.startNestedScroll(axes);
    }

    @Override
    public void stopNestedScroll() {
        mNestedScrollingChildHelper.stopNestedScroll();
    }

    @Override
    public boolean hasNestedScrollingParent() {
        return mNestedScrollingChildHelper.hasNestedScrollingParent();
    }

    @Override
    public boolean dispatchNestedScroll(final int dxConsumed, final int dyConsumed, final int dxUnconsumed, final int dyUnconsumed, final int[] offsetInWindow) {
        return mNestedScrollingChildHelper.dispatchNestedScroll(dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, offsetInWindow);
    }

    @Override
    public boolean dispatchNestedPreScroll(final int dx, final int dy, final int[] consumed, final int[] offsetInWindow) {
        return mNestedScrollingChildHelper.dispatchNestedPreScroll(dx, dy, consumed, offsetInWindow);
    }

    @Override
    public boolean dispatchNestedFling(final float velocityX, final float velocityY, final boolean consumed) {
        return mNestedScrollingChildHelper.dispatchNestedFling(velocityX, velocityY, consumed);
    }

    @Override
    public boolean dispatchNestedPreFling(final float velocityX, final float velocityY) {
        return mNestedScrollingChildHelper.dispatchNestedPreFling(velocityX, velocityY);
    }
}


最重要的一个类Behavior的实现类

public class QuickReturnFooterBehavior extends CoordinatorLayout.Behavior<View> {
    private static final Interpolator INTERPOLATOR = new FastOutSlowInInterpolator();

    private int mDySinceDirectionChange;
    private boolean mIsShowing;
    private boolean mIsHiding;

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

    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
        return (nestedScrollAxes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0;
    }

    @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dx, int dy, int[] consumed) {
        if (dy > 0 && mDySinceDirectionChange < 0
                || dy < 0 && mDySinceDirectionChange > 0) {
            // We detected a direction change- cancel existing animations and reset our cumulative delta Y
            child.animate().cancel();
            mDySinceDirectionChange = 0;
        }

        mDySinceDirectionChange += dy;

        if (mDySinceDirectionChange > child.getHeight()
                && child.getVisibility() == View.VISIBLE
                && !mIsHiding) {
            hide(child);
        } else if (mDySinceDirectionChange < 0
                && child.getVisibility() == View.GONE
                && !mIsShowing) {
            show(child);
        }
    }

    /**
     * Hide the quick return view.
     *
     * Animates hiding the view, with the view sliding down and out of the screen.
     * After the view has disappeared, its visibility will change to GONE.
     *
     * @param view The quick return view
     */
    private void hide(final View view) {
        mIsHiding = true;
        ViewPropertyAnimator animator = view.animate()
                .translationY(view.getHeight())
                .setInterpolator(INTERPOLATOR)
                .setDuration(200);

        animator.setListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {}

            @Override
            public void onAnimationEnd(Animator animator) {
                // Prevent drawing the View after it is gone
                mIsHiding = false;
                view.setVisibility(View.GONE);
            }

            @Override
            public void onAnimationCancel(Animator animator) {
                // Canceling a hide should show the view
                mIsHiding = false;
                if (!mIsShowing) {
                    show(view);
                }
            }

            @Override
            public void onAnimationRepeat(Animator animator) {}
        });

        animator.start();
    }

    /**
     * Show the quick return view.
     *
     * Animates showing the view, with the view sliding up from the bottom of the screen.
     * After the view has reappeared, its visibility will change to VISIBLE.
     *
     * @param view The quick return view
     */
    private void show(final View view) {
        mIsShowing = true;
        ViewPropertyAnimator animator = view.animate()
                .translationY(0)
                .setInterpolator(INTERPOLATOR)
                .setDuration(200);

        animator.setListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {
                view.setVisibility(View.VISIBLE);
            }

            @Override
            public void onAnimationEnd(Animator animator) {
                mIsShowing = false;
            }

            @Override
            public void onAnimationCancel(Animator animator) {
                // Canceling a show should hide the view
                mIsShowing = false;
                if (!mIsHiding) {
                    hide(view);
                }
            }

            @Override
            public void onAnimationRepeat(Animator animator) {}
        });

        animator.start();
    }
}
时间: 2024-10-09 10:17:59

CoordinatorLayout与ListView协同让FAB悬浮按钮从底部消失及出现的相关文章

Android FloatingActionButton(FAB) 悬浮按钮

FloatingActionButton 悬浮按钮                                                                                                                                  -------部分资料从网上查找的,如果不妥,请留言通知我更改! 1)布局文件 app:backgroundTint - 设置FAB的背景颜色. app:rippleColor - 设置FA

android ——悬浮按钮及可交互提示

一.悬浮按钮 FloatingActionButton是Design Support中的一个控件,它会默认colorAccent作为按钮的颜色,还可以给按钮一个图标. 这是没有图标的,这是有图标的. 然后布局文件这样写: <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:lay

Framework7新版学习笔记之 升级版悬浮按钮

一:悬浮按钮 悬浮按钮是一种有着特殊UI效果的按钮,它看起来就像悬浮在界面之上一样. 悬浮按钮点击时通常会展开一系列的选项按钮,十分酷炫. 新版F7中的悬浮按钮不仅仅是Material Design特有了,而是一种通用的UI控件. 二:悬浮按钮种类 1)按照它在界面中的位置来分类: fab-right-bottom fab-center-bottom fab-left-bottom fab-right-center fab-center-center fab-left-center fab-ri

css3代码实现的鼠标悬浮按钮效果代码实例

css3代码实现的鼠标悬浮按钮效果代码实例:在css3之前,鼠标悬浮于按钮之上,无非是设置按钮的大小.字体颜色或者背景图片等简单的项目,但是css3的出现,可以让设置变得丰富多彩,下面就是一个css3实现的此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://

Android用悬浮按钮实现翻页效果

今天给大家分享下自己用悬浮按钮点击实现翻页效果的例子. 首先,一个按钮要实现悬浮,就要用到系统顶级窗口相关的WindowManager,WindowManager.LayoutParams.那么在AndroidManifest.xml中添加权限: ? 1 <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" /> 然后,我们要对WindowManager,WindowManager.La

tableView添加悬浮按钮button添加悬浮窗

如何给tableView添加一个悬浮的按钮? 恐怕没有想象的那么简单! 最近在公司做项目时,产品经理有一个需求就是在一个 tableView上 加一个悬浮的按钮, 尝试了很多方案之后我终于找到了一个通用的可行的方案! 最终效果图: 滑动tableView之后的效果是: 可以 看到,我们实现了 悬浮的效果,随着tableView的滑动,悬浮按钮并没有随之儿而滚动! 受到这个启发,我们应该可以在 tableView上面,可以根据实际情况添加一个 悬浮的 置顶按钮,提高用户体验! 首先说一下方案的选取

iOS开发——悬浮按钮

项目中需要在创建一个悬浮按钮,自己觉得光创建一个按钮不能滑动有点不太优化,就自己试着做了一个可以随意拖动的悬浮按钮,希望大家能够多多支持. -(void)viewDidLoad { //创建悬浮按钮 self.editEventsButton=[UIButton buttonWithType:UIButtonTypeCustom]; self.editEventsButton.frame=CGRectMake(0, 0, 60, 60); [self.editEventsButton setBa

小程序悬浮按钮进入内页

wxml: <!-- 小程序悬浮按钮进入内页 --> <navigator class="set_button" url='../set/set' hover-class='none'> <image class="set_image" src="/images/set.png"></image> </navigator> wxss: .set_button{ background-co

android开发之AlertDialog点击按钮之后不消失

最近有这样一个需求,我需要用户在一个弹出框里输入密码来验证,验证成功当然好说,但是如果验证失败则需要把alertdialog的标题改为"密码错误,请重新输入",并且这个alertdialog还不能消失,要等待用户继续输入. 那么怎么实现点击确定或者取消按钮之后dialog不消失呢? // 不关闭dialog try { // 不关闭 Field field = dialog .getClass() .getSuperclass() .getDeclaredField( "mS