使用ViewPager实现广告自动轮播的效果
package com.loaderman.viewpgerlunbodemo;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
/**
* support v4 和 v7
* v4: 支持Android api4以上版本
* <p>
* v7中包含v4
*/
public class MainActivity extends AppCompatActivity {
private ViewPager mViewPager;
private final int[] mImageIds = new int[]{R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e};
// 图片标题集合
private final String[] mImageDes = {"巩俐不低俗,我就不能低俗", "朴树又回来啦!再唱经典老歌引万人大合唱", "揭秘北京电影如何升级", "乐视网TV版大派送", "热血屌丝的反杀"};
private TextView tvTitle;
private LinearLayout llContainer;
private Handler mHandler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
//切换到下一个页面
int currentItem = mViewPager.getCurrentItem();
mViewPager.setCurrentItem(++currentItem);
//继续发送消息, 形成类似递归的循环
mHandler.sendEmptyMessageDelayed(0, 3000);
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tvTitle = (TextView) findViewById(R.id.tv_title);
llContainer = (LinearLayout) findViewById(R.id.ll_container);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mViewPager.setAdapter(new MyAdapter());
//设置当前条目位置
//mViewPager.setCurrentItem(Integer.MAX_VALUE / 2);
mViewPager.setCurrentItem(mImageIds.length * 100000);
//添加页面切换的事件监听
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int
positionOffsetPixels) {
//页面滑动监听
}
@Override
public void onPageSelected(int position) {
//页面选中监听
position = position % mImageIds.length;
//更新标题
tvTitle.setText(mImageDes[position]);
//切换红点图片
//将所有点先初始化为灰点
for (int i = 0; i < mImageIds.length; i++) {
ImageView point = (ImageView) llContainer.getChildAt(i);
if (i != position) {
point.setImageResource(R.drawable.shape_gray);
} else {
point.setImageResource(R.drawable.shape_red);
}
}
}
@Override
public void onPageScrollStateChanged(int state) {
//页面状态发生变化
}
});
//手动初始化第一个页面的标题
tvTitle.setText(mImageDes[0]);
//根据新闻个数, 初始化小圆点
for (int i = 0; i < mImageIds.length; i++) {
ImageView point = new ImageView(this);
//设置margin
//当前控件的父控件是谁, 就使用谁的布局参数
//初始化布局参数, 宽高包裹内容
//一般来讲, 布局文件中控件的属性如果是layout_xxxx, 都需要通过布局参数来设置
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout
.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
//从第二个点开始设置左边距
if (i > 0) {
params.leftMargin = 10;
point.setImageResource(R.drawable.shape_gray);
} else {
point.setImageResource(R.drawable.shape_red);
}
//设置布局参数
point.setLayoutParams(params);
//将小圆点添加到线性布局上
llContainer.addView(point);
}
mHandler.sendEmptyMessageDelayed(0, 3000);
//给ViewPager设置触摸监听
mViewPager.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//停止轮播
//可以清除handler中的所有消息
mHandler.removeCallbacksAndMessages(null);
break;
case MotionEvent.ACTION_UP:
//继续轮播
mHandler.sendEmptyMessageDelayed(0, 3000);
break;
default:
break;
}
return false;//返回false表示不消费此事件, 允许viewpager底层处理触摸事件
}
});
}
class MyAdapter extends PagerAdapter {
//返回条目个数
@Override
public int getCount() {
// return mImageIds.length;
return Integer.MAX_VALUE;//条目个数返回整数最大值
}
//判断显示的view是不是就是返回的object对象
//只有是true, 才显示, 否则不显示
//一般永远这样写了
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
//初始化条目布局对象, 类似getView
//ViewPager: 如何避免内存溢出? 永远只最多加载3个页面对象, 当前页, 上一页, 下一页
@Override
public Object instantiateItem(ViewGroup container, int position) {
//初始化条目布局
ImageView view = new ImageView(MainActivity.this);
//0,1,2,3,4
//5,6,7,8,9-->0,1,2,3,4
//10->0 11->1
//15->0
//当前位置对集合大小取余, 返回0-4的位置信息
position = position % mImageIds.length;
final int tempPosition= position;
//view.setImageResource(mImageIds[position]);
view.setBackgroundResource(mImageIds[position]);
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "点击了"+tempPosition, Toast.LENGTH_SHORT).show();
}
});
//将条目布局添加给ViewPager容器
container.addView(view);
System.out.println("初始化条目:" + position);
//返回布局对象
return view;
}
//销毁布局对象
//一般永远这样写了
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
//super.destroyItem(container, position, object);
//从容器中移除布局对象
container.removeView((View) object);
System.out.println("销毁条目:" + position);
}
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="180dp">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="180dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#a000"
android:orientation="vertical"
android:padding="5dp">
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="标题"
android:textColor="#fff"
android:textSize="16sp"/>
<LinearLayout
android:id="@+id/ll_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>
</FrameLayout>
</LinearLayout>
页签的圆形的图形绘制:
shape_gray.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#ccc"/>
<size
android:width="10dp"
android:height="10dp"/>
</shape>
shape_red.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#f00"/>
<size
android:width="10dp"
android:height="10dp"/>
</shape>
效果图:

最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!
浙公网安备 33010602011771号