169.n1-banner下方的标题和使用ViewPagerIndicator实现圆点

下方的标题使用TextView显示，监听滑动事件，当页面被选中的时候，加载相应的title,圆点是使用ViewPagerIndicator实现，

tab_detail_pager.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >        <RelativeLayout         android:layout_width="match_parent"    android:layout_height="200dp"        ><!-- banner图,继承处理以后的ViewPager，防止父类拦截 -->    <com.ldw.news.view.TopNewsViewPager        android:id="@+id/vp_news"        android:layout_width="match_parent"    android:layout_height="200dp"        />    <!-- 下方的页签和文本 -->    <RelativeLayout         android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_alignParentBottom="true"    android:padding="5dp"    android:background="#a000"        >       <TextView            android:id="@+id/tv_title"           android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:textColor="#ffffff"    android:textSize="16sp"    android:text=""           />       <!-- 使用viewpagerindicator实现小圆点 -->       <com.viewpagerindicator.CirclePageIndicator        android:id="@+id/indicator"        android:padding="10dip"        android:layout_height="wrap_content"        android:layout_alignParentRight="true"        android:layout_width="wrap_content"        app:radius="4dp"        app:fillColor="#FF0000"        app:pageColor="@android:color/darker_gray"        app:strokeWidth="2dp"        />    </RelativeLayout>    </RelativeLayout>    <!-- 下面的新闻条目 -->    <ListView         android:id="@+id/lv_list"        android:layout_width="match_parent"    android:layout_height="0dp"    android:layout_weight="1"        ></ListView></LinearLayout>

逻辑文件TabDetailPager.java,加载数据监听滑动事件

package com.ldw.news.base;import java.util.ArrayList;import android.app.Activity;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.ImageView;import android.widget.ImageView.ScaleType;import android.widget.TextView;import android.widget.Toast;import com.google.gson.Gson;import com.ldw.news.R;import com.ldw.news.domain.NewsData.NewsTabData;import com.ldw.news.domain.TabData;import com.ldw.news.domain.TabData.TopNewsData;import com.ldw.news.global.ClobalContants;import com.lidroid.xutils.BitmapUtils;import com.lidroid.xutils.HttpUtils;import com.lidroid.xutils.ViewUtils;import com.lidroid.xutils.exception.HttpException;import com.lidroid.xutils.http.ResponseInfo;import com.lidroid.xutils.http.callback.RequestCallBack;import com.lidroid.xutils.http.client.HttpRequest.HttpMethod;import com.lidroid.xutils.view.annotation.ViewInject;import com.viewpagerindicator.CirclePageIndicator;/* * 左边菜单栏右边详情页，最上面对应的tab，页签 */public class TabDetailPager extends BaseMenuDetailPager implements OnPageChangeListener{//携带数据详情的数据private NewsTabData mTabData;private TextView text;private String mUrl;private TabData mTabDetailData;@ViewInject(R.id.vp_news)private ViewPager mViewPager;@ViewInject(R.id.tv_title)private TextView tv_title;//banner的标题@ViewInject(R.id.indicator)private CirclePageIndicator indicator;//banner下面的小圆点private ArrayList<TopNewsData> mTopNewsList;//banner的数据public TabDetailPager(Activity activity, NewsTabData newsTabData) {super(activity);mTabData = newsTabData;//图片的地址mUrl = ClobalContants.SERVER_URL + mTabData.url;}@Overridepublic View initView() {View view = View.inflate(mActivity, R.layout.tab_detail_pager, null);ViewUtils.inject(this, view);//监听Viewager的滑动mViewPager.setOnPageChangeListener(this);// 向FrameLayout中动态添加布局return view;}@Overridepublic void initData(){getDataFromServer();}/* * 获取网络数据 */private void getDataFromServer() {//从服务器中获取数据HttpUtils utils = new HttpUtils();utils.send(HttpMethod.GET, mUrl, new RequestCallBack<String>(){@Overridepublic void onSuccess(ResponseInfo<String> responseInfo) {//获取到返回的结果String result = (String) responseInfo.result;System.out.println("tab详情返回结果:" + result);parseData(result);}@Overridepublic void onFailure(HttpException error, String msg) {Toast.makeText(mActivity, msg, Toast.LENGTH_SHORT).show();//打印错误信息error.printStackTrace();}});}/* * 解析网络数据 */protected void parseData(String result) {//使用Gson解析Gson gson = new Gson();mTabDetailData = gson.fromJson(result, TabData.class);System.out.println("解析结果:" + mTabDetailData);mTopNewsList = mTabDetailData.data.topnews;mViewPager.setAdapter(new TopNewsAdapter());//banner下面的小圆点，需要在adapter初始化以后才能显示indicator.setViewPager(mViewPager);indicator.setSnap(true);//支持快照显示indicator.setOnPageChangeListener(this);//添加监听，修改文本内容indicator.onPageSelected(0);//默认选择第一个，防止图片和远点不对应//解析数据的时候初始化标题tv_title.setText(mTopNewsList.get(0).title);}/* * 头条新闻,banner */class TopNewsAdapter extends PagerAdapter{private BitmapUtils utils;//构造函数public TopNewsAdapter(){utils = new BitmapUtils(mActivity);//加载数据过程中，设置默认加载的图片utils.configDefaultLoadingImage(R.drawable.topnews_item_default);}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn mTabDetailData.data.topnews.size();}@Overridepublic boolean isViewFromObject(View view, Object object) {// TODO Auto-generated method stubreturn view == object;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {//初始化banner图ImageView image = new ImageView(mActivity);//填充布局对象//image.setImageResource(R.drawable.topnews_item_default);//填充平铺布局,基于控件的大小image.setScaleType(ScaleType.FIT_XY);//获取到图片资源的数据的地址TopNewsData topNewsData = mTabDetailData.data.topnews.get(position);utils.display(image, topNewsData.topimage);//添加image数据container.addView(image);return image;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView((View) object);}}@Overridepublic void onPageScrolled(int position, float positionOffset,int positionOffsetPixels) {// TODO Auto-generated method stub}//滑动的监听，当页面被选中的时候更新标题@Overridepublic void onPageSelected(int position) {//TopNewsData topNewsData= mTabDetailData.data.topnews.get(position);tv_title.setText(mTopNewsList.get(position).title);}@Overridepublic void onPageScrollStateChanged(int state) {// TODO Auto-generated method stub}}