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文件中修改成白色
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/fl_content" android:background="#fff" android:layout_width="match_parent" android:layout_height="match_parent" ></FrameLayout>
1.加上主题,ViewPagerIndicator就是这个主题,这个主题也是ViewPagerIndicator里边的,因为关联了,所以能用
<activity android:name=".MainActivity" android:theme="@style/Theme.PageIndicatorDefaults" />
2.修改主题,运行程序会发现几个页面不是自己想要的
<style name="Theme.PageIndicatorDefaults" parent="android:Theme"> <item name="vpiIconPageIndicatorStyle">@style/Widget.IconPageIndicator</item> <item name="vpiTabPageIndicatorStyle">@style/Widget.TabPageIndicator</item> </style>
主题用的是选择器,修改选择器,第一个是图标,第二个是标签,修改第二个
<style name="Widget.TabPageIndicator" parent="Widget"> <item name="android:gravity">center</item> <item name="android:background">@drawable/vpi__tab_indicator</item> <item name="android:paddingLeft">22dip</item> <item name="android:paddingRight">22dip</item> <item name="android:paddingTop">12dp</item> <item name="android:paddingBottom">12dp</item> <item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item> <item name="android:textSize">16sp</item> <item name="android:textColor">@drawable/vpi__tab_text_color_indicator</item>//在下面加了横线 <item name="android:maxLines">1</item> </style>
可以修改颜色和背景,可是根据自己需求修改,修改第一个,比如:
<!-- Non focused states --> <item android:state_focused="false" android:state_pressed="false" android:state_selected="false" android:color="#000"/> <item android:state_focused="false" android:state_pressed="false" android:state_selected="true" android:color="#f00"/>
菜单详情页-新闻
public class NewsMenuDetailPager extends BaseMenuDetailPager implements OnPageChangeListener { private ViewPager mViewPager; private ArrayList<TabDetailPager> mPagerList; private ArrayList<NewsTabData> mNewsTabData;// 页签网络数据 private TabPageIndicator mIndicator; public NewsMenuDetailPager(Activity activity, ArrayList<NewsTabData> children) { super(activity); mNewsTabData = children; } @Override public View initViews() { View view = View.inflate(mActivity, R.layout.news_menu_detail, null); mViewPager = (ViewPager) view.findViewById(R.id.vp_menu_detail); ViewUtils.inject(this, view); mIndicator = (TabPageIndicator) view.findViewById(R.id.indicator); // mViewPager.setOnPageChangeListener(this);//注意:当viewpager和Indicator绑定时, // 滑动监听需要设置给Indicator而不是viewpager mIndicator.setOnPageChangeListener(this); return view; } @Override public void initData() { mPagerList = new ArrayList<TabDetailPager>(); // 初始化页签数据 for (int i = 0; i < mNewsTabData.size(); i++) { TabDetailPager pager = new TabDetailPager(mActivity, mNewsTabData.get(i)); mPagerList.add(pager); } mViewPager.setAdapter(new MenuDetailAdapter()); mIndicator.setViewPager(mViewPager);// 将viewpager和mIndicator关联起来,必须在viewpager设置完adapter后才能调用 } // 跳转下一个页面 @OnClick(R.id.btn_next) public void nextPage(View view) { int currentItem = mViewPager.getCurrentItem(); mViewPager.setCurrentItem(++currentItem); } class MenuDetailAdapter extends PagerAdapter { /** * 重写此方法,返回页面标题,用于viewpagerIndicator的页签显示 */ @Override public CharSequence getPageTitle(int position) { return mNewsTabData.get(position).title; } @Override public int getCount() { return mPagerList.size(); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } @Override public Object instantiateItem(ViewGroup container, int position) { TabDetailPager pager = mPagerList.get(position); container.addView(pager.mRootView); pager.initData(); return pager.mRootView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } } @Override public void onPageScrollStateChanged(int arg0) { } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageSelected(int arg0) { System.out.println("onPageSelected:" + arg0); MainActivity mainUi = (MainActivity) mActivity; SlidingMenu slidingMenu = mainUi.getSlidingMenu(); if (arg0 == 0) {//只有在第一个页面(北京), 侧边栏才允许出来 slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN); } else { slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_NONE); } }}