自定義view--仿體育app,股票基金區塊鏈APP 資料資訊欄展示

語言: CN / TW / HK

1.png

大家好,我是球迷楊指導,喜歡看各種籃球足球比賽,喜歡平時玩弄各種體育類APP,之前就發現了一個有趣的自定義view,很多場景都能通用 比如:

1.虎撲體育app 2.懂球帝APP 3.股票APP 4.基金APP 5.區塊鏈APP

下面上圖

image.png

以上是別人APP的效果圖,下面我把我寫的demo的效果圖放出來

從現在來看,這2個是可以一起聯動的,當然,如果你根據你的需要,也是可以不設定聯動

``` leftRecycler.addOnScrollListener(new RecyclerView.OnScrollListener() { @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); if (RecyclerView.SCROLL_STATE_IDLE != recyclerView.getScrollState()) { rightRecycler.scrollBy(dx, dy); } } }); rightRecycler.addOnScrollListener(new RecyclerView.OnScrollListener() { @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); if (RecyclerView.SCROLL_STATE_IDLE != recyclerView.getScrollState()) { leftRecycler.scrollBy(dx, dy); } } });

```

思路分析

  • 1.根據虎撲的效果圖可以看到,該頁面主要是一個大列表(2個小列表)

  • 2.頭部的tab欄可以水平滑動,或者整體水平滑動,所以父佈局用 HorizontalScrollView 實現;

  • 3.列表 Item 分1部分 ,這裡我用的是一排資料結果,所謂的各項分數

  • 4.頭部 Tab 欄水平滑動時,列表 Item 同步滑動;

  • 5.ScrollView  跟 RecyclerView滑動衝突了

程式碼部分

1、自定義橫向滾動控制元件

  • 因為上面已經分析,頭部 Tab 欄父佈局和 item 第二部分同步滑動,所以都採用橫向滾動控制元件完成,所以自定義橫向滾動控制元件,繼承 HorizontalScrollView 並重寫構造方法,這裡重寫了 3 個構造方法。

```/* * 自定義橫向滾動控制元件 * 過載了 onScrollChanged方法,監聽每次的變化 /

public class CustomHScrollView extends HorizontalScrollView {

ScrollViewObserver mScrollViewObserver = new ScrollViewObserver();

public CustomHScrollView(Context context) {
    super(context);
}

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

public CustomHScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

} ```

  • 定義外部可回撥介面,當發生了滾動事件時介面,供外部訪問

public static interface OnScrollChangedListener { public void onScrollChanged(int l, int t, int oldl, int oldt); }

  • 定義一個觀察者,用於滑動控制元件時,接收水平滑動的回撥。並定義新增滾動監聽和移除滾動監聽的方法。

``` / * 滾動觀察者 / public static class ScrollViewObserver { List mChangedListeners;

    public ScrollViewObserver() {
        super();
        mChangedListeners = new ArrayList<OnScrollChangedListener>();
    }
    //新增滾動事件監聽
    public void AddOnScrollChangedListener(OnScrollChangedListener listener) {
        mChangedListeners.add(listener);
    }
    //移除滾動事件監聽
    public void RemoveOnScrollChangedListener(OnScrollChangedListener listener) {
        mChangedListeners.remove(listener);
    }
    //回撥
    public void NotifyOnScrollChanged(int l, int t, int oldl, int oldt) {
        if (mChangedListeners == null || mChangedListeners.size() == 0) {
            return;
        }
        for (int i = 0; i < mChangedListeners.size(); i++) {
            if (mChangedListeners.get(i) != null) {
                mChangedListeners.get(i).onScrollChanged(l, t, oldl, oldt);
            }
        }
    }
}

``` - 因為父佈局是水平滾動 HorizontalScrollView,所以需要重寫 onScrollChanged()方法,監聽滑動變化。當觀察者 mScrollViewObserver 不為 null 時,滑動監聽通知回撥觀察者 ScrollViewObserver。

```@Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { //滾動時通知 if (mScrollViewObserver != null) { mScrollViewObserver.NotifyOnScrollChanged(l, t, oldl, oldt); } super.onScrollChanged(l, t, oldl, oldt); }

``` 以上水平滾動 HorizontalScrollView 基本上已經完成,上面預留外部訪問介面:OnScrollChangedListener,在 Tab 欄水平滑動時,可以在 Adapter 中獲取滾動水平、垂直滾動位置,來設定 item 中第二部分控制元件位置。