wKioL1WNYcGCAWC_AAB0m_mGCis903.jpg

wKiom1WNYATg_d-bAACTRz9BN0s370.jpg

一。主要实现功能:

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

二。实现步奏:

1.自定义ViewPagerIndicator

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

wKioL1WNZaqzeD2OAAEa2uIYizc765.jpg

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

wKioL1WNZ2eQtgvNAACtmRlHL9s882.jpg

③:改变CX值使indicator居中

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

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

wKiom1WNZ07g_qKGAADCm0o23d0589.jpg

2.实现片段添加

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

wKiom1WNaDzxUj0lAADuWHX9jig536.jpg

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

wKiom1WNag2jYftKAADmLRSZOJ0948.jpg

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

wKioL1WNbwfQsBAZAAG15-zua0c094.jpg

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

wKioL1WNb57gdWXPAAEFYMnwZyg202.jpg

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

wKioL1WNcIXAcjyZAAFU8amiVO0271.jpg

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

wKiom1WNb2ah6wDIAAHuh2i6J3g188.jpg

3.ListView添加HeaderView

wKioL1WNcpHQFExzAAL0EmeZTI0897.jpg

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

wKiom1WNcNWjMsP-AAFrprdIZmk920.jpg