Android学习（40） -- 自定义控件（4）广告轮播（ViewPager）

最新推荐文章于 2022-11-08 13:38:18 发布

idiandi

最新推荐文章于 2022-11-08 13:38:18 发布

阅读量613

点赞数

分类专栏： Android基础知识 Android自定义控件

本文链接：https://blog.csdn.net/idiandi/article/details/51226642

版权

Android基础知识同时被 2 个专栏收录

63 篇文章 1 订阅

订阅专栏

Android自定义控件

9 篇文章 0 订阅

订阅专栏

ViewPager是3.0之后才出现的，之前版本使用v4包

ViewPager预加载机制：最多保存3个page，超过的将需要使用destroyItem被销毁掉

效果图片

1、在layout布局文件中定义布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="200dp" >
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/viewPager"
        android:background="#77000000"
        android:orientation="vertical"
        android:padding="8dp" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="我是文本"
            android:textColor="#ffffff"
            android:textSize="14sp" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

2、在Java代码中创建ViewPager对象并添加适配器

在PagerAdapter中我们要明白什么是预加载机制

a、当滑动图片的时候，存在对滑动的View 和将要进来的View的判断是否是同一个 true: 表示不去创建，使用缓存 false:去重新创建 view

b、ViewPager预加载机制：最多保存3个page，超过的将需要使用destroyItem被销毁掉

注意：要去掉destroyItem中调用父类中的方法，因为该方法中只存在一个异常并建议子类重写。

还有要自己重写instantiateItem 和 destroyItem方法

</pre><pre name="code" class="html">public class MainActivity extends Activity {

	private ViewPager viewPage;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		initView();

		initData();
	}

	/**
	 * 初始化View
	 */
	private void initView() {
		setContentView(R.layout.activity_main);
		viewPage = (ViewPager) findViewById(R.id.viewPager);

	}

	/**
	 * 初始化数据
	 */
	private void initData() {

		// 绑定Adapter
		viewPage.setAdapter(new MyPagerAdapter());
	}

	private class MyPagerAdapter extends PagerAdapter {

		/**
		 * 返回多少页
		 */
		@Override
		public int getCount() {
			return 0;
		}

		/**
		 * 判断当前滑动的View 和 将要进来的View是否是同一个 true: 表示不去创建，使用缓存 false:去重新创建 view：
		 * 当前滑动的view object：将要进入的新创建的view，由instantiateItem方法创建
		 */
		@Override
		public boolean isViewFromObject(View view, Object object) {
			return view == object;
		}

		/**
		 * 类似于BaseAdapger的getView方法 用了将数据设置给view 由于它最多就3个界面，不需要viewHolder
		 */
		@Override
		public Object instantiateItem(ViewGroup container, int position) {

			return super.instantiateItem(container, position);
		}

		/**
		 * 销毁page position： 当前需要消耗第几个page object:当前需要消耗的page
		 */
		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			// super.destroyItem(container, position, object); 要注释掉
			container.removeView((View) object);
		}

	}

}

3、创建数据

3.1 创建一个Ad类用于封装数据

public class Ad {

	private int resId;
	private String intro;

	public Ad(int resId, String intro) {
		super();
		this.resId = resId;
		this.intro = intro;
	}

	public String getIntro() {
		return intro;
	}

	public void setIntro(String intro) {
		this.intro = intro;
	}

	public int getResId() {
		return resId;
	}

	public void setResId(int resId) {
		this.resId = resId;
	}
}

3.2、在java中创建List 并封装数据

private ArrayList<Ad> list = new ArrayList<Ad>();

	private void initData() {
		list.add(new Ad(R.drawable.a, "不低俗，不能低俗"));
		list.add(new Ad(R.drawable.b, "回来了，再唱经典老歌引百万人同唱啊"));
		list.add(new Ad(R.drawable.c, "电影如何升级"));
		list.add(new Ad(R.drawable.d, "TV版大放送"));
		list.add(new Ad(R.drawable.e, "热血的反杀"));
		
		//绑定Adapter
		viewPage.setAdapter(new MyPagerAdapter());
	}

4、完善PagerAdapter操作

1、确定数据的总的数量

2、将数据添加到ImageView中

3、将View添加到ViewPager中并将View返回

	private class MyPagerAdapter extends PagerAdapter{

		/**
		 * 返回多少页
		 */
		@Override
		public int getCount() {
			return list.size();
		}
		/**
		 * 判断当前滑动的View 和 将要进来的View是否是同一个
		 * true: 表示不去创建，使用缓存  false:去重新创建
		 * view： 当前滑动的view
		 * object：将要进入的新创建的view，由instantiateItem方法创建
		 */
		@Override
		public boolean isViewFromObject(View view, Object object) {
			return view == object;
		}

		/**
		 * 类似于BaseAdapger的getView方法
		 * 用了将数据设置给view
		 * 由于它最多就3个界面，不需要viewHolder
		 */
		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			//将广告布局添加进来
			View view = View.inflate(MainActivity.this, R.layout.adapter_ad, null);
			
			//获取到布局中ImageView 
			ImageView imageView = (ImageView) view.findViewById(R.id.img);
			
			//获取到集合中指定的AD数据
			Ad ad = list.get(position);
			//将图片设置到ImageView上
			imageView.setImageResource(ad.getResId());
			
			//一定不能少，将view加入到viewPager中
			container.addView(view);
			
			return view;
		}
		/**
		 * 销毁page
		 * position： 当前需要消耗第几个page
		 * object:当前需要消耗的page
		 */
		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			//super.destroyItem(container, position, object);  要注释掉
			container.removeView((View)object);
		}
		
		
	}
	
}

5、我们此时就可以显示图片数据了

6、将文本进行显示

1、创建TextView对象

2、使用viewPage的OnPageChangeListener监听获取到ViewPager滑动时候获取当前是第几页

	/**
	 * ViewPager监听
	 */
	private void initListener() {
		viewPage.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			/*
			 * 此方法是页面跳转完后得到调用，
			 * position是你当前选中的页面的position（位置编号）
			 */
			public void onPageSelected(int position) {
				updateIntroAndDot();
			}
			
			@Override
			/*
			 * 当页面在滑动的时候会调用此方法，在滑动被停止之前，此方法回一直得到调用。
			 * 其中三个参数的含义分别为：
			 * position :当前页面，及你点击滑动的页面
			 * positionOffset:当前页面偏移的百分比
			 * positionOffsetPixels:当前页面偏移的像素位置  
			 * 
			 */
			public void onPageScrolled(int position, float positionOffset,
					int positionOffsetPixels) {
			}
			
			@Override
			/*
			 *  此方法是在状态改变的时候调用，其中state这个参数有三种状态（0，1，2）。
			 *  state ==1的时辰默示正在滑动，
			 *  state==2的时辰默示滑动完毕了，
			 *  state==0的时辰默示什么都没做。 
			 */
			public void onPageScrollStateChanged(int state) {
			}
		});
	}

	/**
	 * 更新文本
	 */
	private void updateIntroAndDot() {
		//获取到当前第几页
		int currentPage = viewPage.getCurrentItem() ;
		//设置文本信息
		tv.setText(list.get(currentPage).getIntro());
	}

注意：在初始化数据的时候也要指定获取第一个文本否则第一次打开的时候会没有数据显示的

tv.setText(list.get(0).getIntro());

布局文件中TextView中要添加如下两个属性

 android:singleLine="true"
android:ellipsize="end"

7、添加图片显示的“点” 页面指示器(小圆点)

1、创建“点”布局

在res下创建一个drawable目录

在drawable目录下创建名称dot_focus.xml的shape文件，用于表现 “小白点”表示选中状态

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval">
    <solid android:color="#ffffff"/>
</shape>

在drawable目录下创建名称dot_unfocus.xml的shape文件，用于表现 “小黑点”表示选中状态

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval">
    <solid android:color="#aa000000"/>
</shape>

为了方便使用，我们创建一个名称为selector_dot.xm l的 selector，用来切换图片

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <item android:state_enabled="true" android:drawable="@drawable/dot_focus"></item>
	<item android:drawable="@drawable/dot_unfocus"></item>
</selector>

2、在布局中对应的布局处添加id

3、在java文件中创建对象

4、创建一个初始化“点”的方法（在数据确定数据个数后创建）

	/**
	 * 初始化“点”方法
	 */
	private void initDot(){
		for (int i = 0; i < list.size(); i++) {
			View view = new View(this);
			//封装了View中宽度和高度
			LayoutParams params = new LayoutParams(8, 8);
			//点和点之间的距离
			if (i != 0) {
				params.leftMargin = 5;
			}
			view.setLayoutParams(params);
			//设置个背景
			view.setBackgroundResource(R.drawable.selector_dot);
			lay_dot.addView(view);
		}
	}

5、在更新文本中处理点、文字、图片的关联，依赖关系

	/**
	 * 更新文本
	 */
	private void updateIntroAndDot() {
		//获取到当前第几页
		int currentPage = viewPage.getCurrentItem() ;
		//设置文本信息
		tv.setText(list.get(currentPage).getIntro());
		
		for (int i = 0; i < lay_dot.getChildCount(); i++) {
			lay_dot.getChildAt(i).setEnabled(i == currentPage);
		}
	}

idiandi

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Android学习（40） -- 自定义控件（4）广告轮播（ViewPager）

ViewPager是3.0之后才出现的，之前版本使用v4包ViewPager预加载机制：最多保存3个page，超过的将需要使用destroyItem被销毁掉效果图片1、在layout布局文件中定义布局<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t
复制链接

扫一扫