在Android开发中经常简单会用到 ViewPager无限轮播与小点点,下面就简单介绍一下,其中的小点点可以找美工绘制,Android工程师也可以自己手动简易制作
定义XML布局文件
<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" >
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="200dp" />
<LinearLayout
android:id="@+id/ll_dots"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_alignBottom="@id/viewPager" >
</LinearLayout>
</RelativeLayout>
Android工程师自己手动简易制作小点点
- 在res目录下建一个drawable的文件夹,
- 在drawable文件夹中建二个xml文件,其类型是shape, 其中一个作为选中时的小点点颜色,另一个作为没有选中时的小点点颜色,下面是xml文件
选中时的小点点颜色为红色
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#ff0000" />
<corners android:radius="8dp" />
</shape>
- 没有选中时的小点点颜色 灰色
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#88000000" />
<corners android:radius="8dp" />
</shape>
代码
activity中的代码
package com.example.roolpage;
import java.util.ArrayList;
import android.app.Activity;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
public class MainActivity extends Activity {
protected static final String TAG = "MainActivity";
//图片数据
String[] picUrls = new String[] { "http://169.254.238.174:8080/ab.jpg",
"http://169.254.238.174:8080/ae.jpg",
"http://169.254.238.174:8080/af.jpg",
"http://169.254.238.174:8080/ah.jpg",
"http://169.254.238.174:8080/bd.jpg" };
private ViewPager viewPager;
private LinearLayout ll_dots;
private ArrayList<ImageView> dotsList;
//定义Handler接收发送消息
Handler handler = new Handler() {
public void handleMessage(android.os.Message msg) {
if (msg.what == 0) {
//获取viewPager当前的位置
int currentItem = viewPager.getCurrentItem();
currentItem++;
//设置viewPager的位置
viewPager.setCurrentItem(currentItem);
// 继续轮播
Log.i(TAG, "bobobo.....");//测试
//调用发送消息的方法
startRool();
}
};
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//查找控件
viewPager = (ViewPager) findViewById(R.id.viewPager);
ll_dots = (LinearLayout) findViewById(R.id.ll_dots);
// 初始化小点
initDots();
// 设置适配器
viewPager.setAdapter(new MyPagerAdapter(this, picUrls, handler));
// 设置当前页
viewPager.setCurrentItem(picUrls.length * 10000);
// 设置ViewPager的监听
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
//遍历存放图片的数组
for (int i = 0; i < picUrls.length; i++) {
//判断小点点与当前的图片是否对应,对应设置为亮色 ,否则设置为暗色
if (i == position % picUrls.length) {
dotsList.get(i).setImageDrawable(
getResources().getDrawable(
R.drawable.dots_focuse));
} else {
dotsList.get(i).setImageDrawable(
getResources().getDrawable(
R.drawable.dots_normal));
}
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
// 调用发送消息的方法
startRool();
}
/**
* 每隔2秒发送一次消息
*/
private void startRool() {
// 开始轮播
handler.sendEmptyMessageDelayed(0, 2000);
}
/**
* 初始化小点
*/
private void initDots() {
//创建存放小点点的集合
dotsList = new ArrayList<ImageView>();
//每次初始化之前清空集合
dotsList.clear();
// 每次初始化之前 移除 布局中的所有小点
ll_dots.removeAllViews();
for (int i = 0; i < picUrls.length; i++) {
//创建小点点图片
ImageView imageView = new ImageView(this);
Drawable drawable = null;
if (i == 0) {
// 亮色图片
drawable = getResources().getDrawable(R.drawable.dots_focuse);
} else {
drawable = getResources().getDrawable(R.drawable.dots_normal);
}
imageView.setImageDrawable(drawable);
// 考虑屏幕适配
LayoutParams params = new LayoutParams(dip2px(this, 10), dip2px(this, 10));
//设置小点点之间的间距
params.setMargins(dip2px(this, 5), 0, dip2px(this, 5), 0);
//将小点点添加大线性布局中
ll_dots.addView(imageView, params);
// 将小点的控件添加到集合中
dotsList.add(imageView);
}
}
/**
* 根据手机的分辨率从 dp 的单位 转成为 px(像素)
*/
public int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
@Override
protected void onDestroy() {
// 移除所有的handler信息
handler.removeCallbacksAndMessages(null);
super.onDestroy();
}
}
- ViewPager适配器代码
package com.example.roolpage;
import android.content.Context;
import android.os.Handler;
import android.support.v4.view.PagerAdapter;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.widget.ImageView;
import com.lidroid.xutils.BitmapUtils;
public class MyPagerAdapter extends PagerAdapter {
private String[] urls;
private Context context;
private Handler handler;
public MyPagerAdapter(Context context, String[] urls,Handler handler) {
this.handler=handler;
this.context = context;
this.urls = urls;
}
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
// ImageView
ImageView imageView = new ImageView(context);
BitmapUtils bitmapUtils = new BitmapUtils(context);
bitmapUtils.display(imageView, urls[position % urls.length]);
imageView.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//移除handler消息
handler.removeCallbacksAndMessages(null);
Log.i("MainActivity", "down....");
break;
case MotionEvent.ACTION_UP:
Log.i("MainActivity", "up....");
handler.sendEmptyMessageDelayed(0, 2000);
break;
case MotionEvent.ACTION_CANCEL:
Log.i("MainActivity", "cancel....");
handler.sendEmptyMessageDelayed(0, 2000);
break;
default:
break;
}
//处理这个事件
return true;
}
});
container.addView(imageView);
return imageView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
代码中的Log仅为了测试,
添加权限
<uses-permission android:name="android.permission.INTERNET"/>