android ViewPager（广告条）
1，实现效果
viewPager实现效果 ，handler实现轮播。 小圆点自己绘制
2，实现逻辑
【1】布局声明
<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/vp"
android:layout_width="match_parent"
android:layout_height="180dp" >
</android.support.v4.view.ViewPager>
</RelativeLayout>
【2】获取控件，初始化数据，创建适配器
-
获取控件
vp = (ViewPager) findViewById(R.id.vp);
-
初始化数据 ，数据的内容是一个ImageView
private int[] imageResIds = {R.drawable.icon_1, R.drawable.icon_2, R.drawable.icon_3,
R.drawable.icon_4, R.drawable.icon_5};
//初始化viewpager的数据
private void initVpData() {
ivs = new ArrayList<ImageView>();
for (int i = 0; i < imageResIds.length; i++) {
ImageView iv = new ImageView(this);
//[1]给iv设置背景图片
iv.setBackgroundResource(imageResIds[i]);
//[2]把iv加入到集合
ivs.add(iv);
}
}-
创建适配器
instantiateItem 预加载第二个页面，isViewFromObject多次判断 destroyItem移除用不到的方法
//创建viewpager需要的适配器
class MyPagerAdapter extends PagerAdapter{
//展示viewpager条目的数量
@Override
public int getCount() {
return ivs.sice（）;
}
/**
* Object:就是在instantiateItem方法里面返回的内容
*/
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
/**
* 初始化条目的内容 类似lsitview getView方法
* container:就是viewPager
* position:每个页面的对应的位置
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
position = position % ivs.size();
//[1]根据位置 去集合里面取数据
ImageView iv = ivs.get(position);
//[2]获取到每个iv后加入到viewpager中
container.addView(iv);
return iv;
}
/**
* 移除不用到页面
* container:viewPager
* object:就是instantiateItem方法里面的返回值
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}创建
滑动第二个先进行销毁，在初始化一个
【3】添加小圆点
-
添加圆点存放的位置
<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/vp"
android:layout_width="match_parent"
android:layout_height="180dp" >
</android.support.v4.view.ViewPager>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/vp"
android:background="#66000000"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingBottom="5dp"
android:paddingTop="5dp" >
<TextView
android:id="@+id/tv_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我是小圆点对应的内容"
android:textColor="#ffffff"
android:textSize="17sp" />
<!-- 动态的往布局里面添加小圆点 -->
<LinearLayout
android:id="@+id/ll_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:orientation="horizontal" >
<!-- <View
android:layout_width="5dp"
android:layout_height="5dp"
android:background="@drawable/dot_selector" /> -->
</LinearLayout>
</LinearLayout>
</RelativeLayout>-
初始化UI 初始化小圆点的数据
private String[] descs = {"为梦想坚持", "大傻吊", "傻吊", "Google/IO", "灌灌灌灌"};
LayoutParams 你要存放在那个布局就导入对应的包
//初始化小圆点的数据
private void initDotdata() {
dotLists = new ArrayList<View>();
for (int i = 0; i < descs.length; i++) {
//[1]初始化小圆点的view
View dotView = new View(getApplicationContext());
//[2]设置dotView宽和高
LayoutParams params = new LayoutParams(5, 5);
//[3]让小圆点之间有点距离
if (i!=0) {
params.leftMargin = 7;
}
dotView.setLayoutParams(params);
dotView.setBackgroundResource(R.drawable.dot_selector);
//[4]把dotview加入到水平的线性布局里
ll_layout.addView(dotView);
//[5]把dotview加入到集合
dotLists.add(dotView);
}
}-
viewPager 设置监听
//初始化ui
private void initUI() {
vp = (ViewPager) findViewById(R.id.vp);
tv_content = (TextView) findViewById(R.id.tv_content);
ll_layout = (LinearLayout) findViewById(R.id.ll_layout);
//[2]viewpager展示数据的原理和listview一样 需要适配器 (pagerAdapter) 把集合里目的数据展示到viewpager里
vp.setAdapter(new MyPagerAdapter());
//[3]给viewpager设置滑动监听
vp.setOnPageChangeListener(listener);
}-
提取出监听的方法
//代表viewpager的监听
OnPageChangeListener listener = new OnPageChangeListener() {
//当一个新的页面被选中的时候调用
@Override
public void onPageSelected(int position) {
position = position % ivs.size();
changeDotstateAndText(position);
}
//当页面开始滚动
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
}
//当滑动页面的状态改变的时候调用
@Override
public void onPageScrollStateChanged(int state) {
}
};
改小圆点状态和文本内容
-
定义一个View 代表被选中的点
/**代表选中的点**/
private View currentDotView;
/**改变小圆点的状态和对应文本的内容**/
private void changeDotstateAndText(int position) {
//[1]动态改变小圆点的文本内容 数据在哪里存着就去哪里取
tv_content.setText(descs[position]);
if (currentDotView!=null) {
currentDotView.setSelected(false);
}
//[2]更新小圆点的状态 小圆点在集合里面存着
dotLists.get(position).setSelected(true);
//[3]把dotLists.get(position)赋值给currentDotView
currentDotView = dotLists.get(position);
}
第一个被选中的初始化
//[4]初始化设置小圆点对应文本的内容和小圆点的状态 一定要保证集合初始化在更新小圆点的状态
changeDotstateAndText(0);
【4】实现无线轮播
-
定义轮播的次数
private int vpMaxSize = 1000000 * imageResIds.length;
-
适配器
//创建viewpager需要的适配器
class MyPagerAdapter extends PagerAdapter{
//展示viewpager条目的数量
@Override
public int getCount() {
return vpMaxSize;
}
/**
* 初始化条目的内容 类似lsitview getView方法
* container:就是viewPager
* position:每个页面的对应的位置
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
position = position % ivs.size();
//[1]根据位置 去集合里面取数据
ImageView iv = ivs.get(position);
//[2]获取到每个iv后加入到viewpager中
container.addView(iv);
return iv;
}
}-
监听中onPageSelected改变position的值
position = position % ivs.size();
-
onStart开启循环
//当界面可见的时候执行
@Override
protected void onStart() {
//4秒钟后 显示下一个页面的内容
// handler.sendEmptyMessageDelayed(10, 4000);
super.onStart();
}
-
更改图片文字
//创建handler对象
private Handler handler = new Handler(){
//处理消息
public void handleMessage(android.os.Message msg) {
//显示viewpager下个页面的内容
vp.setCurrentItem(vp.getCurrentItem()+1);
handler.sendEmptyMessageDelayed(10, 4000);
};
};
-
关闭轮播
//当界面不可见的是 移除消息
@Override
protected void onStop(){
handler.removeMessages(10);
super.onStop();
}
3，全部代码
package com.xiaoshuai.www.ad;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
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.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends Activity {
private int[] imageResIds = {R.drawable.icon_1, R.drawable.icon_2, R.drawable.icon_3,
R.drawable.icon_4, R.drawable.icon_5};
private String[] descs = {"为梦想坚持", "哈哈哈哈", "哈哈哈哈", "Google/IO", "哈哈哈哈哈哈"};
//代表viewpger数据集合
private List<ImageView> ivs;
//代表小圆点的集合
private List<View> dotLists;
private LinearLayout ll_layout;
private TextView tv_content;
/**代表选中的点**/
private View currentDotView;
private int vpMaxSize = 1000000 * imageResIds.length;
//创建handler对象
private Handler handler = new Handler(){
//处理消息
public void handleMessage(android.os.Message msg) {
//显示viewpager下个页面的内容
vp.setCurrentItem(vp.getCurrentItem()+1);
handler.sendEmptyMessageDelayed(10, 4000);
};
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initVpData();
//[1]找到控件
initUI();
//[2]初始化小圆点的数据
initDotdata();
//[4]初始化设置小圆点对应文本的内容和小圆点的状态 一定要保证集合初始化在更新小圆点的状态
changeDotstateAndText(0);
vp.setCurrentItem(vpMaxSize/2);
}
//当界面可见的时候执行
@Override
protected void onStart() {
//4秒钟后 显示下一个页面的内容
handler.sendEmptyMessageDelayed(10, 4000);
super.onStart();
}
//当界面不可见的是 移除消息
@Override
protected void onStop(){
handler.removeMessages(10);
super.onStop();
}
//初始化小圆点的数据
private void initDotdata() {
dotLists = new ArrayList<View>();
for (int i = 0; i < descs.length; i++) {
//[1]初始化小圆点的view
View dotView = new View(getApplicationContext());
//[2]设置dotView宽和高
LayoutParams params = new LayoutParams(5, 5);
//[3]让小圆点之间有点距离
if (i!=0) {
params.leftMargin = 7;
}
dotView.setLayoutParams(params);
dotView.setBackgroundResource(R.drawable.dot_selector);
//[4]把dotview加入到水平的线性布局里
ll_layout.addView(dotView);
//[5]把dotview加入到集合
dotLists.add(dotView);
}
}
//初始化ui
private void initUI() {
vp = (ViewPager) findViewById(R.id.am_vp);
tv_content = (TextView) findViewById(R.id.tv_content);
ll_layout = (LinearLayout) findViewById(R.id.ll_layout);
//[2]viewpager展示数据的原理和listview一样 需要适配器 (pagerAdapter) 把集合里目的数据展示到viewpager里
vp.setAdapter(new MyPagerAdapter());
//[3]给viewpager设置滑动监听
vp.setOnPageChangeListener(listener);
}
//初始化viewpager的数据
private void initVpData() {
ivs = new ArrayList<ImageView>();
for (int i = 0; i < imageResIds.length; i++) {
ImageView iv = new ImageView(this);
//[1]给iv设置背景图片
iv.setBackgroundResource(imageResIds[i]);
//[2]把iv加入到集合
ivs.add(iv);
}
}
//创建viewpager需要的适配器
class MyPagerAdapter extends PagerAdapter{
//展示viewpager条目的数量
@Override
public int getCount() {
return vpMaxSize;
}
/**
* Object:就是在instantiateItem方法里面返回的内容
*/
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
/**
* 初始化条目的内容 类似lsitview getView方法
* container:就是viewPager
* position:每个页面的对应的位置
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
position = position % ivs.size();
//[1]根据位置 去集合里面取数据
ImageView iv = ivs.get(position);
//[2]获取到每个iv后加入到viewpager中
container.addView(iv);
return iv;
}
/**
* 移除不用到页面
* container:viewPager
* object:就是instantiateItem方法里面的返回值
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
/**改变小圆点的状态和对应文本的内容**/
private void changeDotstateAndText(int position) {
//[1]动态改变小圆点的文本内容 数据在哪里存着就去哪里取
tv_content.setText(descs[position]);
if (currentDotView!=null) {
currentDotView.setSelected(false);
}
//[2]更新小圆点的状态 小圆点在集合里面存着
dotLists.get(position).setSelected(true);
//[3]把dotLists.get(position)赋值给currentDotView
currentDotView = dotLists.get(position);
}
//代表viewpager的监听
OnPageChangeListener listener = new OnPageChangeListener() {
//当一个新的页面被选中的时候调用
@Override
public void onPageSelected(int position) {
position = position % ivs.size();
changeDotstateAndText(position);
}
//当页面开始滚动
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
}
//当滑动页面的状态改变的时候调用
@Override
public void onPageScrollStateChanged(int state) {
}
};
private ViewPager vp;
}