自定义view--仿照 体育app，股票，基金，区块链APP 数据信息栏展示

Posted 2022-02-03 彬彬杨

我是个球迷，喜欢看各种篮球 足球比赛，所以手机里面也安装了各种体育类APP，之前就发现了一个有趣的自定义view，很多场景都能通用 比如：

（虎扑）体育app，球队积分/比赛数据自定view

股票，基金，区块链页面等

下面上图

以上是别人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<OnScrollChangedListener> 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 中第二部分控件位置。