7.ViewPagerIndicator

 ViewPager指针项目,在使用ViewPager的时候能够指示ViewPager所在的位置,就像Google Play中切换的效果一样,还能使用在应用初始化的介绍页面

1. 引入ViewPagerIndicator库
2. 编写布局文件

         <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/indicator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

3. mIndicator.setViewPager(mViewPager);//将viewpager和mIndicator关联起来,必须在viewpager设置完adapter后才能调用

4. 重写PagerAdapter方法,返回页面标题

        /**
         * 重写此方法,返回页面标题,用于viewpagerIndicator的页签显示
         */
        @Override
        public CharSequence getPageTitle(int position) {
            return mNewsTabData.get(position).title;
        }

5. 自定义样式修改
运行程序会发现界面是黑的,因为这个主题就是黑的,所以在main_activity.xml文件中修改成白色
  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:id="@+id/fl_content"
  3. android:background="#fff"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent" >
  6. </FrameLayout>

1.加上主题,ViewPagerIndicator就是这个主题,这个主题也是ViewPagerIndicator里边的,因为关联了,所以能用
  1. <activity
  2. android:name=".MainActivity"
  3. android:theme="@style/Theme.PageIndicatorDefaults" />
2.修改主题,运行程序会发现几个页面不是自己想要的
  1. <style name="Theme.PageIndicatorDefaults" parent="android:Theme">
  2. <item name="vpiIconPageIndicatorStyle">@style/Widget.IconPageIndicator</item>
  3. <item name="vpiTabPageIndicatorStyle">@style/Widget.TabPageIndicator</item>
  4. </style>
主题用的是选择器,修改选择器,第一个是图标,第二个是标签,修改第二个
  1. <style name="Widget.TabPageIndicator" parent="Widget">
  2. <item name="android:gravity">center</item>
  3. <item name="android:background">@drawable/vpi__tab_indicator</item>
  4. <item name="android:paddingLeft">22dip</item>
  5. <item name="android:paddingRight">22dip</item>
  6. <item name="android:paddingTop">12dp</item>
  7. <item name="android:paddingBottom">12dp</item>
  8. <item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item>
  9. <item name="android:textSize">16sp</item>
  10. <item name="android:textColor">@drawable/vpi__tab_text_color_indicator</item>//在下面加了横线
  11. <item name="android:maxLines">1</item>
  12. </style>
可以修改颜色和背景,可是根据自己需求修改,修改第一个,比如:
  1. <!-- Non focused states -->
  2. <item android:state_focused="false" android:state_pressed="false" android:state_selected="false" android:color="#000"/>
  3. <item android:state_focused="false" android:state_pressed="false" android:state_selected="true" android:color="#f00"/>
菜单详情页-新闻  
  1. public class NewsMenuDetailPager extends BaseMenuDetailPager implements
  2. OnPageChangeListener {
  3. private ViewPager mViewPager;
  4. private ArrayList<TabDetailPager> mPagerList;
  5. private ArrayList<NewsTabData> mNewsTabData;// 页签网络数据
  6. private TabPageIndicator mIndicator;
  7. public NewsMenuDetailPager(Activity activity,
  8. ArrayList<NewsTabData> children) {
  9. super(activity);
  10. mNewsTabData = children;
  11. }
  12. @Override
  13. public View initViews() {
  14. View view = View.inflate(mActivity, R.layout.news_menu_detail, null);
  15. mViewPager = (ViewPager) view.findViewById(R.id.vp_menu_detail);
  16. ViewUtils.inject(this, view);
  17. mIndicator = (TabPageIndicator) view.findViewById(R.id.indicator);
  18. // mViewPager.setOnPageChangeListener(this);//注意:当viewpager和Indicator绑定时,
  19. // 滑动监听需要设置给Indicator而不是viewpager
  20. mIndicator.setOnPageChangeListener(this);
  21. return view;
  22. }
  23. @Override
  24. public void initData() {
  25. mPagerList = new ArrayList<TabDetailPager>();
  26. // 初始化页签数据
  27. for (int i = 0; i < mNewsTabData.size(); i++) {
  28. TabDetailPager pager = new TabDetailPager(mActivity,
  29. mNewsTabData.get(i));
  30. mPagerList.add(pager);
  31. }
  32. mViewPager.setAdapter(new MenuDetailAdapter());
  33. mIndicator.setViewPager(mViewPager);// 将viewpager和mIndicator关联起来,必须在viewpager设置完adapter后才能调用
  34. }
  35. // 跳转下一个页面
  36. @OnClick(R.id.btn_next)
  37. public void nextPage(View view) {
  38. int currentItem = mViewPager.getCurrentItem();
  39. mViewPager.setCurrentItem(++currentItem);
  40. }
  41. class MenuDetailAdapter extends PagerAdapter {
  42. /**
  43. * 重写此方法,返回页面标题,用于viewpagerIndicator的页签显示
  44. */
  45. @Override
  46. public CharSequence getPageTitle(int position) {
  47. return mNewsTabData.get(position).title;
  48. }
  49. @Override
  50. public int getCount() {
  51. return mPagerList.size();
  52. }
  53. @Override
  54. public boolean isViewFromObject(View arg0, Object arg1) {
  55. return arg0 == arg1;
  56. }
  57. @Override
  58. public Object instantiateItem(ViewGroup container, int position) {
  59. TabDetailPager pager = mPagerList.get(position);
  60. container.addView(pager.mRootView);
  61. pager.initData();
  62. return pager.mRootView;
  63. }
  64. @Override
  65. public void destroyItem(ViewGroup container, int position, Object object) {
  66. container.removeView((View) object);
  67. }
  68. }
  69. @Override
  70. public void onPageScrollStateChanged(int arg0) {
  71. }
  72. @Override
  73. public void onPageScrolled(int arg0, float arg1, int arg2) {
  74. }
  75. @Override
  76. public void onPageSelected(int arg0) {
  77. System.out.println("onPageSelected:" + arg0);
  78. MainActivity mainUi = (MainActivity) mActivity;
  79. SlidingMenu slidingMenu = mainUi.getSlidingMenu();
  80. if (arg0 == 0) {//只有在第一个页面(北京), 侧边栏才允许出来
  81. slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
  82. } else {
  83. slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE);
  84. }
  85. }
  86. }






posted @ 2015-10-27 21:56  梦和远方  阅读(209)  评论(0编辑  收藏  举报