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

最新推荐文章于 2023-05-22 16:55:58 发布

原创最新推荐文章于 2023-05-22 16:55:58 发布 · 634 阅读

0 ·

CC 4.0 BY-SA版权

android整理专栏收录该内容

261 篇文章

订阅专栏

本文介绍了一个结合ViewPager与CirclePageIndicator实现动态标题与指示器的案例。通过自定义TabDetailPager类，实现了顶部轮播图与底部标题及指示器的联动效果。文章详细展示了XML布局配置与Java逻辑代码，并介绍了如何加载网络数据、解析JSON数据以及适配器的具体实现。

下方的标题使用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;
	}

	@Override
	public View initView() {
		View view = View.inflate(mActivity, R.layout.tab_detail_pager, null);
		ViewUtils.inject(this, view);

		//监听Viewager的滑动
		mViewPager.setOnPageChangeListener(this);
		
		// 向FrameLayout中动态添加布局
		return view;
	}
	
	@Override
	public void initData(){
		
		getDataFromServer();
		

	}
	
	/*
	 * 获取网络数据
	 */
	private void getDataFromServer() {
		//从服务器中获取数据
		HttpUtils utils = new HttpUtils();
		utils.send(HttpMethod.GET, mUrl, new RequestCallBack<String>(){

			@Override
			public void onSuccess(ResponseInfo<String> responseInfo) {
				//获取到返回的结果
				String result = (String) responseInfo.result;
				System.out.println("tab详情返回结果:" + result);

				parseData(result);
				
			}

			@Override
			public 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);
		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return mTabDetailData.data.topnews.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) {
			//初始化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;
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView((View) object);
		}
		
	}

	@Override
	public void onPageScrolled(int position, float positionOffset,
			int positionOffsetPixels) {
		// TODO Auto-generated method stub
		
	}

	//滑动的监听，当页面被选中的时候更新标题
	@Override
	public void onPageSelected(int position) {
		//TopNewsData topNewsData= mTabDetailData.data.topnews.get(position);
		tv_title.setText(mTopNewsList.get(position).title);
		
	}

	@Override
	public void onPageScrollStateChanged(int state) {
		// TODO Auto-generated method stub
		
	}

}