美团App首页实现之Category_HeaderView可翻页实现

美团App首页实现之Category_HeaderView可翻页实现

一。主要实现功能:

    自定义indicator,侧滑页面切换页面内容,indicator跟着变化;

二。实现步奏:

    1.自定义ViewPagerIndicator

      ①:定义三个不同颜色的画笔

          

美团App首页实现之Category_HeaderView可翻页实现

       ②:在画布上画三个静态圆

                    美团App首页实现之Category_HeaderView可翻页实现

       ③:改变CX值使indicator居中

                      float CX =(float) (ScreenUtils.getScreenWidth(getContext()) / 2 - (num - 1) * 1.5 * RADIUS);

       ④:设置移动的方法,当移动到最后一个时,不能再移动

                      美团App首页实现之Category_HeaderView可翻页实现

    2.实现片段添加

      ①: 新建空白main_header_category,viewPager和indicator同级,如下图

                    美团App首页实现之Category_HeaderView可翻页实现

      ②:新建片段category01,实现布局:

                      美团App首页实现之Category_HeaderView可翻页实现

     ③:在categoryFragment中根据页码设置不同数据源

          

美团App首页实现之Category_HeaderView可翻页实现

        特别注意textView中drawable数据源要如此设置:

          美团App首页实现之Category_HeaderView可翻页实现

      ④: 在主页所在片段中初始化该headerView及其所包含的ViewPage和indicator

美团App首页实现之Category_HeaderView可翻页实现

      ⑤: 设置该headerview的PagerChangerListener,设置其适配器,使其根据PagerPosition切换页面数据来源,从而改变内容

        美团App首页实现之Category_HeaderView可翻页实现

   3.ListView添加HeaderView

     

美团App首页实现之Category_HeaderView可翻页实现

     最终首页多个HeaderView效果如下图

美团App首页实现之Category_HeaderView可翻页实现