1. 程式人生 > >CoordinatorLayout AppBarLayout 結合下拉重新整理 上拉載入更多 的滑動衝突解決

CoordinatorLayout AppBarLayout 結合下拉重新整理 上拉載入更多 的滑動衝突解決

如果appBarLayout中有摺疊控制元件 CollapsingToolbarLayout 或者其他一些控制元件 在滾動的時候進行判斷和重新整理事件處理

在這裡:重新整理框架:為

SwipyRefreshLayout

第一步:設定appBarLayout的監聽:

if (appBarLayout != null)
            appBarLayout.addOnOffsetChangedListener(this);

第二部:
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int i) {
        super.onOffsetChanged(appBarLayout, i);
        if (srlLayout == null) return;
        srlLayout.setEnabled(i >= 0||isSlideToBottom(recyclerview) ? true : false);
    }

i>=0 表示appBarLayout 完全顯示:需要開啟能夠重新整理控制元件的觸控事件  enable=true;

至於 isSlideToBottom方法請檢視 reyclerView滾動到底部的監聽

當recyclerView滾動到底部 也需要開啟 重新整理控制元件的觸控事件 enable=true;

遮蔽重新整理控制元件的範圍:當appBarLayout 在滾動中 recylerView 沒有滾動到底部

這裡還有一種實現方式:

    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int i) {
        super.onOffsetChanged(appBarLayout, i);
        LogUtils.d("-------->off:" + i + "  ScrollRange:" + appBarLayout.getTotalScrollRange() + "  height:" + appBarLayout.getHeight());
    }


可以觀察到i>=0 表示appBarLaoyut完全開啟

i==-appBarLayout.getTotalScrollRange() 時表示appBarLayout完全關閉或者摺疊了

所以:i==-appBarLayout.getTotalScrollRange() 也可以進行判斷 然後分發給重新整理控制元件

順便給出一個工具類:

<pre name="code" class="java">
import android.support.design.widget.AppBarLayout;
import android.support.v7.widget.RecyclerView;

/**
 * @author xuanyouwu
 * @email 
[email protected]
* @time 2016-04-13 16:25 */ public class DesignViewUtils { /** * AppBarLayout 完全顯示 開啟狀態 * * @param verticalOffset * @return */ public static boolean isAppBarLayoutOpen(int verticalOffset) { return verticalOffset >= 0; } /** * AppBarLayout 關閉或摺疊狀態 * * @param appBarLayout * @param verticalOffset * @return */ public static boolean isAppBarLayoutClose(AppBarLayout appBarLayout, int verticalOffset) { return appBarLayout.getTotalScrollRange() == Math.abs(verticalOffset); } /** * RecyclerView 滾動到底部 最後一條完全顯示 * * @param recyclerView * @return */ public static boolean isSlideToBottom(RecyclerView recyclerView) { if (recyclerView == null) return false; if (recyclerView.computeVerticalScrollExtent() + recyclerView.computeVerticalScrollOffset() >= recyclerView.computeVerticalScrollRange()) return true; return false; } /** * RecyclerView 滾動到頂端 * * @param recyclerView * @return */ public static boolean isSlideToTop(RecyclerView recyclerView) { return recyclerView.computeVerticalScrollOffset() <= 0; } }

完美解決重新整理案例:

<pre name="code" class="java">
import android.support.design.widget.AppBarLayout;
import android.support.v4.view.ViewCompat;
import android.support.v7.widget.RecyclerView;
import android.view.ViewGroup;

import com.kekeclient.widget.design.DesignViewUtils;

/**
 * @author xuanyouwu
 * @email [email protected]
 * @time 2016-04-15 11:20
 * <p/>
 * 解決 巢狀nestScrolling appbar 重新整理衝突
 */
public class SwipyAppBarScrollListener extends RecyclerView.OnScrollListener implements AppBarLayout.OnOffsetChangedListener {
    private AppBarLayout appBarLayout;
    private RecyclerView recyclerView;
    private ViewGroup refreshLayout;
    private boolean isAppBarLayoutOpen = true;
    private boolean isAppBarLayoutClose;

    public SwipyAppBarScrollListener(AppBarLayout appBarLayout, ViewGroup refreshLayout, RecyclerView recyclerView) {
        this.appBarLayout = appBarLayout;
        this.refreshLayout = refreshLayout;
        this.recyclerView = recyclerView;
        disptachScrollRefresh();
    }


    private void disptachScrollRefresh() {
        if (this.appBarLayout != null && this.recyclerView != null && refreshLayout != null) {
            this.appBarLayout.addOnOffsetChangedListener(this);
            this.recyclerView.addOnScrollListener(this);
        }
    }

    @Override
    public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
        super.onScrollStateChanged(recyclerView, newState);
    }

    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);
        dispatchScroll();
    }

    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        isAppBarLayoutOpen = DesignViewUtils.isAppBarLayoutOpen(verticalOffset);
        isAppBarLayoutClose = DesignViewUtils.isAppBarLayoutClose(appBarLayout, verticalOffset);
        dispatchScroll();
    }

    private void dispatchScroll() {
        if (this.recyclerView != null && this.appBarLayout != null && this.refreshLayout != null) {
            //不可滾動
            if (!(ViewCompat.canScrollVertically(recyclerView, -1) || ViewCompat.canScrollVertically(recyclerView, 1))) {
                refreshLayout.setEnabled(isAppBarLayoutOpen);
            } else//可以滾動
            {
                if (isAppBarLayoutOpen || isAppBarLayoutClose) {
                    if (!ViewCompat.canScrollVertically(recyclerView, -1) && isAppBarLayoutOpen) {
                        refreshLayout.setEnabled(true);
                    } else if (isAppBarLayoutClose && !ViewCompat.canScrollVertically(recyclerView, 1)) {
                        refreshLayout.setEnabled(true);
                    } else {
                        refreshLayout.setEnabled(false);
                    }
                } else {
                    refreshLayout.setEnabled(false);
                }
            }
        }
    }
}

用法:
recyclerview.addOnScrollListener(new SwipyAppBarScrollListener(appBarLayout, srlLayout, recyclerview));



相關推薦

基於better-scroll的重新整理載入

目錄 前言 專案中使用的截圖如下 封裝better-scroll 元件的使用 前言 本來想使用vux的scroller元件,但是看到官方說不在維護了,而且在提供的樣例裡面,雖然例子有可以自定義載入等待區域以及文字提示的內容,但是實際上卻沒有找到相關樣例程式碼,改來改去也改

IOS控制元件系列二---優雅的UITableView的MVC模式設計,支援自定義重新整理/載入檢視(含swift)

demo效果如下: 本小框架設計原則依舊按照之前的慣例: 1.擴充套件性好,程式碼不冗餘(整個重新整理的頭部與底部程式碼不超過300行)。 2.邏輯清晰。 3.回撥介面清晰。 4.移植性好。 對於擴充套件性本框架擴充套件點如下: 1.框架中的

CoordinatorLayout AppBarLayout 結合重新整理 載入滑動衝突解決

如果appBarLayout中有摺疊控制元件 CollapsingToolbarLayout 或者其他一些控制元件 在滾動的時候進行判斷和重新整理事件處理 在這裡:重新整理框架:為 SwipyRefreshLayout 第一步:設定appBarLayout的監聽: if

react native之listview加重新整理分頁

直接上程式碼 var REQUEST_URL = 'xxxx&page='; import React, { Component } from 'react'; import { AppRegistry, Image, StyleSheet, Text, Vie

react native自定義實現重新整理載入

1·定義元件 PageListView.js  /** * 上拉重新整理/下拉載入更多 元件 */ import React, { Component } from 'react'; import { Text, View, ListView, FlatList

mui 重新整理 載入

轉自http://ask.dcloud.net.cn/question/1247 動態禁止和恢復上下拉重新整理 留著做個demo 需要暫時禁止和恢復上下拉重新整理,我的初始化程式碼如下: mui.init({ styles: { top: ‘42px’, //子頁面頂部位置

android重新整理,載入

public class MainActivity extends AppCompatActivity { private RecyclerView mRecyclerview; private ArrayList<Integer> mList = new ArrayL

Android打造 ListView GridView等 通用的重新整理 自動載入的元件

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

vue-scroller的使用 實現重新整理 載入初始效果

安裝vue-scroller npm i vue-scroller -D 在main.js中: import VueScroller from 'vue-scroller' Vue.use(VueScroller) &nbs

重新整理載入框架:android-Ultra-Pull-To-Refresh

下拉重新整理上拉載入框架:PtrClassicFrameLayout 1、一個優雅的框架實現下拉重新整理上拉載入,學習來源:點選開啟連結 2、如何使用: 2.1、在專案中引入: compile 'com.shizhefei:MVCHelper-UltraRefresh:1

好用的重新整理 載入 框架 SmartRefreshLayout

特點功能:  簡單用例 1.在 build.gradle 中新增依賴 支援多點觸控 支援淘寶二樓和二級重新整理 支援巢狀多層的檢視結構 Layout (LinearLayout,FrameLayout...) 支援所有的 View(AbsListView

Refresh+LoadMore重新整理 載入

匯入有關的library庫 XListViewFlush import android.os.Bundle; import android.os.Handler; import android.support.v7.app.AppCompatActivity; import

MUI重新整理載入實現

DOM結構 <div id="refreshContainer" class="mui-content mui-scroll-wrapper"> <div class="hui-media-list mui-scroll"> <u

Flutter之封裝一個重新整理載入的listview

封裝一個簡單的listview,下拉重新整理上拉載入 Getting Started 1.需求場景 在開發的過程中,經常要用到一個具有下拉重新整理和上拉載入更多功能的listview ,程式碼的實現思路基本是差不多的。所以有必要封裝一個通用的listview,方便使用。 2.需要用到

Android中ListView重新整理載入效果實現

  在Android開發中,下拉重新整理和上拉載入更多在很多app中都會有用到,下面就是具體的實現的方法。 首先,我們自定義一個RefreshListView來繼承與ListView,下面是程式碼: package com.example.downrefresh; import

Android 列表重新整理載入分頁功能

手機app 列表頁很常用,當資料特別多的時候,為了更好地使用者體驗,需要進行分頁處理。那麼分頁功能怎麼做呢? 看如下核心程式碼 if (mPage == 1 && mList != null) { mList.clear();

PullToRefresh 重新整理 載入

先匯入library包 //listView監聽 上拉載入 下拉重新整理 listView.setOnRefreshListener(new PullToRefreshBase.OnRefreshListener2<ListView>() { @Override p

重新整理載入

import React, { Component } from "react"; import { withNavigation } from "react-navigation"; import RefreshListView, { RefreshState } f

PullTo重新整理載入+條目檢視專項練習一()

PullTo下拉重新整理上拉載入 private int type = 0; private int page = 0; List<NewsBean.NewslistBean> list; private PullToRefreshListView

Android 重新整理載入PullToRefresh

PullToRefresh 開發者可以使用 PullToRefresh 對各種控制元件實現下拉重新整理或者上拉載入以及可以自定義重新整理和載入部分的檢視。 目前支援:ScrollView,ListView,WebView,RecyclerView。 PullToRefresh的使用步驟