ViewPagerIndicator库的使用
ViewPager指针项目,在使用ViewPager的时候能够指示ViewPager所在的位置,就像Google Play中切换的效果一样,还能使用在应用初始化的介绍页面
1. 引入ViewPagerIndicator库
2. 编写布局文件
4. 重写PagerAdapter方法,返回页面标题
/**
* 重写此方法,返回页面标题,用于viewpagerIndicator的页签显示
ViewPager指针项目,在使用ViewPager的时候能够指示ViewPager所在的位置,就像Google Play中切换的效果一样,还能使用在应用初始化的介绍页面
1. 引入ViewPagerIndicator库
2. 编写布局文件
<com.viewpagerindicator.TabPageIndicator
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
3. mIndicator.setViewPager(mViewPager);//将viewpager和mIndicator关联起来,必须在viewpager设置完adapter后才能调用
4. 重写PagerAdapter方法,返回页面标题
/**
* 重写此方法,返回页面标题,用于viewpagerIndicator的页签显示
*/
@Override
public CharSequence getPageTitle(int position) {
return mNewsTabData.get(position).title;
}
5. 自定义样式修改,添加图标
MainIfest.xml中添加样式在PageIndicatorDefaults中可以修改自定义的样式
<activity android:name=".MainActivity"
android:theme="@style/Theme.PageIndicatorDefaults"
></activity>
布局文件,防止父类窗体枪事件fragment_content.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<!-- 内容栏 -->
<!-- 上边的内容栏 -->
<!-- 继承一个不能滑动的ViewPager -->
<com.ldw.beijing.view.NoScrollViewPager
android:id="@+id/vp_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
/>
<!-- 下边的点击栏 -->
<RadioGroup
android:id="@+id/rg_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bottom_tab_bg"
android:orientation="horizontal"
>
<RadioButton
android:id="@+id/rb_home"
style="@style/BottomTabStyle"
android:drawableTop="@drawable/btn_tab_home_selector"
android:text="首页"
/>
<RadioButton
android:id="@+id/rb_news"
style="@style/BottomTabStyle"
android:drawableTop="@drawable/btn_tab_news_selector"
android:text="新闻中心"
/>
<RadioButton
android:id="@+id/rb_smart"
style="@style/BottomTabStyle"
android:drawableTop="@drawable/btn_tab_smart_selector"
android:text="智慧服务"
/>
<RadioButton
android:id="@+id/rb_gov"
style="@style/BottomTabStyle"
android:drawableTop="@drawable/btn_tab_gov_selector"
android:text="政务"
/>
<RadioButton
android:id="@+id/rb_setting"
style="@style/BottomTabStyle"
android:drawableTop="@drawable/btn_tab_setting_selector"
android:text="设置"
/>
</RadioGroup>
</LinearLayout>
ViewPager事件分发,把事件抛给子类处理
package com.ldw.beijing.view;
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
/*
* 不让主页的ViewPager滑动,只让其可以点击
*/
public class NoScrollViewPager extends ViewPager {
public NoScrollViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
}
public NoScrollViewPager(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
// 表示事件是否拦截, 返回false表示不拦截,让子view去执行
@Override
public boolean onInterceptTouchEvent(MotionEvent arg0) {
return false;
}
/*
* 重写onTouchEvent事件,什么都不用做
*/
@Override
public boolean onTouchEvent(MotionEvent arg0) {
return false;
}
}
new_menu_details.xml处理使用库初始化的tab以外添加了一个ImageButton
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<!-- 使用开源的框架PageIndicator实现Tab -->
<com.viewpagerindicator.TabPageIndicator
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageButton
android:id="@+id/btn_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:background="@android:color/transparent"
android:padding="5dp"
android:src="@drawable/news_cate_arr" />
</LinearLayout>
<!-- 详情的viewpager -->
<android.support.v4.view.ViewPager
android:id="@+id/vp_menu_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
NewsMenuDetailPager.java使用注解来注释图片按钮,添加点击事件,MenuDetailAdapter中重写titile方法
package com.ldw.news.base.menudetails;
import java.util.ArrayList;
import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import com.ldw.news.R;
import com.ldw.news.base.BaseMenuDetailPager;
import com.ldw.news.base.TabDetailPager;
import com.ldw.news.domain.NewsData.NewsTabData;
import com.lidroid.xutils.ViewUtils;
import com.lidroid.xutils.view.annotation.event.OnClick;
import com.viewpagerindicator.TabPageIndicator;
/*
* 菜单详情页-新闻
*/
public class NewsMenuDetailPager extends BaseMenuDetailPager {
private ViewPager vp_menu_detail;
private ArrayList<TabDetailPager> mPagerList;
private ArrayList<NewsTabData> mNewsTabData;//页签的网络数据
private TabPageIndicator mIndicator;
public NewsMenuDetailPager(Activity activity, ArrayList<NewsTabData> children) {
super(activity);
//接受传过来的children数据,有11个
mNewsTabData = children;
}
@Override
public View initView() {
View view = View.inflate(mActivity, R.layout.news_menu_details, null);
vp_menu_detail = (ViewPager) view.findViewById(R.id.vp_menu_detail);
mIndicator = (TabPageIndicator) view.findViewById(R.id.indicator);
//xUtils使用注解
ViewUtils.inject(this, view);
return view;
}
@Override
public void initData(){
//数据是通过从服务器中获取大数据来初始化
mPagerList = new ArrayList<TabDetailPager>();
for(int i = 0; i < mNewsTabData.size(); i++){
TabDetailPager tabDetailPager = new TabDetailPager(mActivity, mNewsTabData.get(i));
//添加到链表
mPagerList.add(tabDetailPager);
}
vp_menu_detail.setAdapter(new MenuDetailAdapter());
//在vp_menu_detail设置完成adapter以后才能调用,viewpager和indicator关联
mIndicator.setViewPager(vp_menu_detail);
}
//监听右边的箭头,切换内容,内容+1
@OnClick(R.id.btn_next)
public void nextPage(View view){
int currentItem = vp_menu_detail.getCurrentItem();
vp_menu_detail.setCurrentItem(++ currentItem);
}
class MenuDetailAdapter extends PagerAdapter{
//使用开源的框架PageIndicator初始化标题,重写这个方法设置tab
@Override
public CharSequence getPageTitle(int position) {
return mNewsTabData.get(position).title;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return mPagerList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
// TODO Auto-generated method stub
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
//初始化页面
TabDetailPager tabDetailPager = new TabDetailPager(mActivity, mNewsTabData.get(position));
//添加view
container.addView(tabDetailPager.mRebootView);
//初始化数据
tabDetailPager.initData();
//显示界面
return tabDetailPager.mRebootView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
}
ContentFragment.java创建左边菜单栏的四个pager,解析新闻的json数据,并将数据传递到详情的tab里面
package com.ldw.beijing.fragment;
import java.util.ArrayList;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import com.ldw.beijing.R;
import com.ldw.beijing.base.BasePager;
import com.ldw.beijing.base.impl.GovAffairsPager;
import com.ldw.beijing.base.impl.HomePager;
import com.ldw.beijing.base.impl.NewsCenterPager;
import com.ldw.beijing.base.impl.SettingPager;
import com.ldw.beijing.base.impl.SmartServicePager;
import com.lidroid.xutils.ViewUtils;
import com.lidroid.xutils.view.annotation.ViewInject;
/*
* 主界面
*/
public class ContentFragment extends BaseFragment{
@ViewInject(R.id.rg_group)
private RadioGroup rg_group;
@ViewInject(R.id.vp_content)
private ViewPager mViewPager;
private ArrayList<BasePager> mPagerList;
//初始化布局
@Override
public View initViews() {
View view = View.inflate(mActivity, R.layout.fragment_content, null);
//获取的id注入view
ViewUtils.inject(this, view);
return view;
}
//初始化数据
@Override
public void initData(){
//默认勾选home
rg_group.check(R.id.rb_home);
mPagerList = new ArrayList<BasePager>();
//初始化5个页面
/*
for(int i = 0; i < 5; i++){
BasePager pager = new BasePager(mActivity);
mPagerList.add(pager);
}
*/
mPagerList.add(new HomePager(mActivity));
mPagerList.add(new NewsCenterPager(mActivity));
mPagerList.add(new SmartServicePager(mActivity));
mPagerList.add(new GovAffairsPager(mActivity));
mPagerList.add(new SettingPager(mActivity));
mViewPager.setAdapter(new ContentAdapter());
//监听rg_group的点击事件切换屏幕
rg_group.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
// 根据checkedId来判断显示哪一个
switch(checkedId){
case R.id.rb_home:
// mViewPager.setCurrentItem(0);// 设置当前页面
mViewPager.setCurrentItem(0, false);// false参数的作用是去掉切换页面的动画
break;
case R.id.rb_news:
mViewPager.setCurrentItem(1, false);// 设置当前页面
break;
case R.id.rb_smart:
mViewPager.setCurrentItem(2, false);// 设置当前页面
break;
case R.id.rb_gov:
mViewPager.setCurrentItem(3, false);// 设置当前页面
break;
case R.id.rb_setting:
mViewPager.setCurrentItem(4, false);// 设置当前页面
break;
default:
break;
}
}
});
//监听mViewPager对象,来切换动画,当前的ViewPager被选中以后,就初始化该页面的数据
mViewPager.setOnPageChangeListener(new OnPageChangeListener(){
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
// TODO Auto-generated method stub
}
@Override
public void onPageSelected(int position) {
// 获取当前被选中的页面, 初始化该页面数据
mPagerList.get(position).initData();
}
@Override
public void onPageScrollStateChanged(int state) {
// TODO Auto-generated method stub
}
});
// 初始化首页数据,因为页面点击的时候才会初始化数据,因此刚进入的时候,第一页没有初始化,需要手动初始化数据
mPagerList.get(0).initData();
}
class ContentAdapter extends PagerAdapter{
@Override
public int getCount() {
// TODO Auto-generated method stub
return mPagerList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
// TODO Auto-generated method stub
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
//获取到某个位置的pager
BasePager 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);
}
}
//获取到new的Pager
public BasePager getNewsCenterPager(){
return mPagerList.get(1);
}
}
新闻客户端的json数据解析NewsData.java
package com.ldw.beijing.domain;
import java.util.ArrayList;
/*
* 网络分类信息的封装
* 各个字段的名名字需要一直,方便Gson解析
*/
public class NewsData {
public int retcode;//返回值
public ArrayList<NewsMenuData> data;//字段数据
//data下面又有一组4个数据
// 侧边栏数据对象
public class NewsMenuData {
public String id;
public String title;
public int type;
public String url;
//解析children的数据
public ArrayList<NewsTabData> children;
@Override
public String toString() {
return "NewsMenuData [title=" + title + ", children=" + children
+ "]";
}
}
// 新闻页面下11个子页签的数据对象
public class NewsTabData {
public String id;
public String title;
public int type;
public String url;
@Override
public String toString() {
return "NewsTabData [title=" + title + "]";
}
}
@Override
public String toString() {
return "NewsData [data=" + data + "]";
}
}
TabDetailPager.java左侧新闻右边展示的内容,是一个ViewPager
package com.ldw.news.base;
import com.ldw.news.domain.NewsData.NewsTabData;
import android.app.Activity;
import android.graphics.Color;
import android.view.Gravity;
import android.view.View;
import android.widget.TextView;
/**
* 页签详情页
*
*/
public class TabDetailPager extends BaseMenuDetailPager {
NewsTabData mTabData;
private TextView tvText;
public TabDetailPager(Activity activity, NewsTabData newsTabData) {
super(activity);
mTabData = newsTabData;
}
@Override
public View initViews() {
tvText = new TextView(mActivity);
tvText.setText("页签详情页");
tvText.setTextColor(Color.RED);
tvText.setTextSize(25);
tvText.setGravity(Gravity.CENTER);
return tvText;
}
@Override
public void initData() {
tvText.setText(mTabData.title);
}
}