165.n1-viewIndicator实现tab

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);
	}

}