Android-自定义多TAB悬浮控件实现蘑菇街首页效果

</pre><img src="https://img-blog.csdn.net/20151114155444074?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></p><p></p><p>    因为项目的一些需求需要用到此种展现方式.  找了市面上大部分有类似功能的应用.  基本思路嵌套ScrollView 转换事件分发给listview 实现. 但是此种方案有个缺点.</p><p>   在ScrollView切换给Listview 事件的时候. 会卡顿.   体验效果并不好.    应用此方案的应用: 蘑菇街.   口袋夺宝 .    蘑菇街在快速滑动时才会卡顿.  优化处理过.</p><p></p><p>   在找DEMO过程中. 发现此控件的方案更少. 仅有的几个问题颇多. 例如listview 长度不一时,切换VIewpager会造成大片空白. 需要重绘viewpager界面,</p><p>    但是即使重绘了. 在Viewpager左右滑切换过程中. 会造成闪屏现象.    于是只能自己重写开始.</p><p>  </p><p>   ---------------------------下班时间到--------------回家再更新.</p><p></p><p></p><p> 于是想了2种方案.</p><p>  方案一: listview实现,  </p><p><span style="white-space:pre"></span>此方案实现相比之下较简单,不需要处理太多繁杂的地方. 但是有个致命缺点.  由于listview无法直接获取到滑动距离. 只能通过计算item高度来间接获取.  而当手势快速滑动时, 会产生惯性滑动,而惯性滑动是无法正确的获取到滑动的高度的, 且滑动效果并不流畅. 于是此方案放弃.</p><p> 方案二: scrollview 嵌套listview实现. </p><p><span style="white-space:pre"></span>此Demo就采用了这种写法.  至于为什么要用Scrollview嵌套?  因为Scrollview 能准确的获得滑动的高度. 实现滑动切换非常流畅. 并且不需要重写事件分发.</p><p><span style="white-space:pre"></span>就不会有了卡顿现象;</p><p><span style="white-space:pre"></span>此方案并非是在整体界面中用Scrollview 嵌套所有布局.  而是在Viewpager的item里面   ScrollView嵌套listview;</p><p><span style="white-space:pre"></span></p><p>  难点:     整个控件的难点就在于 公共区域头部的处理.   悬浮窗反而是最简单的. (题外话: 主要目的就是为了写悬浮窗效果, 结果反而最简单. 蛋疼有木有!!!(╮(╯▽╰)╭ )</p><p><span style="white-space:pre"></span>另外一个难点就在于Viewpager切换时的状态保存了.  此段比较绕.  我也是绕了好久才绕明白了.   </p><p></p><p> 最后:      由于是测试Demo 代码杂乱. 勿怪.  这几天将会抽取成库, 另外加上下拉刷新及加载更多功能. 希望能帮到有用的同学们把.</p><p><span style="white-space:pre"></span>Demo周一附上(忘记上传网盘了.在公司电脑(。_°☆╲(- – ) </p><p></p><p></p><p><span style="white-space:pre"></span>注: 转载注明出处. 谢谢各位!</p><p></p><p>     下载链接:<br style="" /></p><p style=""> <a target=_blank target="_blank" href="http://pan.baidu.com/s/1i397CqT">http://pan.baidu.com/s/1i397CqT</a> </p><p> ---------------------------------------------------------------------2015.11.16分割线---------------------------------------------------------------</p><p></p><p> 经测试. Scrollview嵌套listview  listview的自定义ViewHolder, setTag 以及缓存机制完全无法用上, 若是改用LinearLayout . 需要自行添加Adapter,notifydatachanged</p><p> 需要改动的代码量太大.  </p><p> 只能重回listview ,从listview上解决问题.  </p><h2>-------------------------------------------------2015.11.19分割线-----------------------------------</h2><div>   因为培训了几天, 耽搁了更新. 目前改为事件分发转换实现.  优化还没有做.   先上传了吧.</div><div></div><div>  http://pan.baidu.com/s/1bnt5et5  </div><div></div><div><h2>-------------------------------------------------2015.11.27分割线-----------------------------------</h2><div>好吧. 终于有空更新了. 目前已封装完毕 增加了下拉刷新功能; </div><div></div><div>核心代码:  </div></div><div> 通过滑动的距离来 控制事件拦截 进行Scrollview和listview的交替执行,</div><div><pre name="code" class="java">  @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        LogUtils.w("滑动距离------" + t);
        ScrollY = t;
        CheckMargin(t);

        if (t >= offsetHeight - 2) {//上啦过程
            mSupListView.setVisibility(View.VISIBLE);
            if (t >= offsetHeight - 2) {
                Constant.RET = false; //不拦截
            } else {
                Constant.RET = true; //拦截
            }
        } else {
            mSupListView.setVisibility(View.GONE);
            Constant.RET = true; //拦截
        }
        super.onScrollChanged(l, t, oldl, oldt);


    }

 

 

    配合拦截

 @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        if (mHorizontalListView.getTop() > 0 && mHorizontalListView.getTop() <= Constant.offsetHeight - 2) {
            Constant.RET = super.onInterceptTouchEvent(ev);
        }
        LogUtils.w("super.onInterceptTouchEvent(ev)=" + super.onInterceptTouchEvent(ev));

        return Constant.RET && mGestureDetector.onTouchEvent(ev);
    }

</pre><pre name="code" class="java">

</pre><pre name="code" class="java">//此方法为判断是否是左右滑动 处理Viewpager事件拦截 从而不需要再自定义一个Viewpager进行事件判断

 private class YScrollDetector extends GestureDetector.SimpleOnGestureListener {
        @Override
        public boolean onScroll(MotionEvent e1, MotionEvent e2,
                                float distanceX, float distanceY) {

            if (Math.abs(distanceY) >= Math.abs(distanceX)) {
                return true; //如果更相对于左右滑动 事件交给子控件处理.
            }
            return false;
        }
    }

如何调用

 @Override
    public View createSuccessView() {
        View view = View.inflate(getContext(), R.layout.home_fragment_context, null);
        mScrollContainer = (LinearLayout) view.findViewById(R.id.scrollview_container);
        mLinearLayout = (LinearLayout) view.findViewById(R.id.home_banner_header);//广告头的总布局;
        mViewPager = (FragmentViewPager) view.findViewById(R.id.home_viewpager);
        mHorizontalListView = (HorizontalListView) view.findViewById(R.id.user); //非悬浮导航
        mSupListView = (HorizontalListView) view.findViewById(R.id.Sup); //悬浮导航
        Constant.MY_INDICATOR = mSupListView;
        imageView = (ImageView) view.findViewById(R.id.myimage);
        mHorizontalListView.setAdapter(new OrderAdapter(getContext()));
        mSupListView.setAdapter(new OrderAdapter(getContext()));
        RefreshHeadView = (LinearLayout) view.findViewById(R.id.scrollView_refresh_head);
        mSuspendScrollView = (SuspendScrollView) view.findViewById(R.id.home_scrollview);
        //接受参数
        mSuspendScrollView.setView(mLinearLayout, mSupListView, RefreshHeadView, mHorizontalListView,mScrollContainer);
        mSuspendScrollView.setOnRefreshScrollViewListener(new SuspendScrollView.OnRefreshScrollViewListener() {
            @Override
            public void onRefresh() {
                UiUtils.showToast("下啦刷新中");
                //请求数据操作 子线程操作
                ThreadManager.getInstance().createLongPool().execute(new Runnable() {
                    @Override
                    public void run() {
                        SystemClock.sleep(1000);//模拟请求数据
                        mSuspendScrollView.completeRefresh();

                    }
                });
            }

            /**
             * 刷新完成时需要的操作  更新UI等
             */
            @Override
            public void onRefreshFinish() {
                UiUtils.showToast("刷新完成");
            }
        });
        mViewPager.setAdapter(new HomeFragmentViewPagerAdapter(getActivity().getSupportFragmentManager()));
        mViewPager.setOffscreenPageLimit(2);//设置预加载 防止切换时状态丢失
        setViewpagerHeight(mViewPager);
        initIndicator();
        return view;
    }

Scrollview 所需要接收的参数:

 

/**
     * 头部初始化
     *
     * @param banner           广告头
     * @param sup              悬浮的头布局
     * @param refreshHeadView  下啦刷新头布局 可不传, 暂时为实现
     * @param NoSup            不是悬浮的布局
     * @param mScrollContainer
     */
    public void setView(View banner, HorizontalListView sup, LinearLayout refreshHeadView, HorizontalListView NoSup, LinearLayout mScrollContainer) {

}
     

 优化了很多细节上的处理 , 此Demo 应该是最终版了.   更贴近项目~.

最后上个最后的效果图:

http://pan.baidu.com/s/1bn2tlIf Demo地址