在android画面切换时设置跟随变动的小圆圈

首先还是老规律，上传两张效果图：

第一张图：     第二张图：   

前言：我们经常在使用各类安卓APP的时候发现会有如图所示的小圆圈显示当前页所在的，甚至一般来说我们的android桌面上也应该有类似的提示位置的控件。刚开始还以为这是一种控件，于是去查SDK文档，找了好一会都没有找到。于是在午休的时候想了想，终于想通了，这东西其实我们完全可以自己去做的，而且原理是相当的简单的。

好了，废话不多说，我们就来做一个。

首先这样的程序涉及到页面的切换，那么我们就先建立一个ViewFlipper来存放每一个View视图。。

其次我说想通了，想通的就是这个小圆圈控件我们完全可以自己去做一个，而且原理很简单，简单到一个LinearLayout就能实现。

我们主要布局结构为：

<RelativeLayout>

<ViewFlipper></ViewFlipper>//这里显示的就是切换的图

<LinearLayout></LinearLayout>//这里显示的小圆圈之间的切换

<RelativeLayout>

代码如下，这里使用的是纯代码布局，不需要用到xml文件。

public class MyViewFlipper extends RelativeLayout implements OnTouchListener,OnGestureListener{private ViewFlipper viewflipper;
private LogView logView;
private Context parentContext;
TextView textView;
TextView[] textViews;
RFIDDAQ rfiddaq;
final static int viewflipperid=100;
GestureDetector detector;//创建手势监听的对象/**
* 再次匹配的时间间隔 单位 秒
*/
private int time;
private String address;
private int maxshownum;//显示的最大数量，超过这个数量会刷新掉之前的数据。public MyViewFlipper(Context context) {
super(context);
this.parentContext=context;
detector=new GestureDetector(this);
init();
}private void init() {
// TODO Auto-generated method stub
// 创建滚动显示框对象
viewflipper = new ViewFlipper(parentContext);
viewflipper.setBackgroundColor(Color.CYAN);
viewflipper.setId(viewflipperid);
LayoutParams lpviewflipper = new LayoutParams(-1, 500);// 创建信息采集框对象，放入viewflipper中作为元素之一
//这里的rfiddaq以及下面的都可以logView都可以替换成自定义的View视图。当然也可以添加新的自定义试图，只需要添加到viewflipper中就可以了。
rfiddaq = new RFIDDAQ();
lpviewflipper.addRule(RelativeLayout.ALIGN_PARENT_TOP);
viewflipper.addView(rfiddaq);// 创建logView显示界面，放入viewflipper中作为元素之一
logView = new LogView(parentContext);
viewflipper.addView(logView);// 这里添加的LinearLayout是包含小圆点的集合
LinearLayout viewGroup = new LinearLayout(parentContext);
ViewGroup group = (ViewGroup) viewGroup;
textViews = new TextView[viewflipper.getChildCount()];
for (int i = 0; i < viewflipper.getChildCount(); i++) {
textView = new TextView(parentContext);
textView.setLayoutParams(new LayoutParams(30, 30));
textView.setPadding(0, 0, 2, 0);
textViews[i] = textView;
if (i == 0) {
// 默认进入程序后第一张图片被选中,因为viewflipper默认就是选中第一个视图
textViews[i].setBackgroundResource(R.drawable.radio_sel);
} else {
textViews[i].setBackgroundResource(R.drawable.radio);
}
group.addView(textViews[i]);
}
// 设置小圆圈的位置
LayoutParams lpgroup = new LayoutParams(-2, -2);
lpgroup.addRule(RelativeLayout.BELOW, viewflipperid);
lpgroup.addRule(RelativeLayout.CENTER_HORIZONTAL);// 把viewflipper和显示小圆圈框的viewGroup放入RelativeLayout中
addView(viewflipper, lpviewflipper);
addView(viewGroup, lpgroup);
viewflipper.setOnTouchListener(this);//添加动作监听
viewflipper.setLongClickable(true);//这一句必须添加，否则手势监听无法触发
}public RFIDDAQ getRfiddaq() {
return rfiddaq;
}public void setRfiddaq(RFIDDAQ rfiddaq) {
this.rfiddaq = rfiddaq;
}@Override
public boolean onDown(MotionEvent e) {
// TODO Auto-generated method stub
return false;
}@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
// TODO Auto-generated method stub
if(e2.getX()-e1.getX()>0){

//如果滑动到最后 则停止切换
if(viewflipper.getDisplayedChild() == 0){
viewflipper.stopFlipping();
}else{
/**
* 这里其实可以添加一些动画效果。
* 如：viewflipper.setInAnimation(parentContext,R.anim.push_right_in);
*/
viewflipper.showNext();
showRound(viewflipper.getDisplayedChild());
}
}else if(e2.getX()-e1.getX()<0){
//如果滑动到最后 则停止切换
if(viewflipper.getDisplayedChild() == 1){
viewflipper.stopFlipping();
}else{
viewflipper.showNext();
showRound(viewflipper.getDisplayedChild());
}
}else{}return false;
}@Override
public void onLongPress(MotionEvent e) {
// TODO Auto-generated method stub}@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
float distanceY) {
// TODO Auto-generated method stub
return false;
}@Override
public void onShowPress(MotionEvent e) {
// TODO Auto-generated method stub}@Override
public boolean onSingleTapUp(MotionEvent e) {
// TODO Auto-generated method stub
return false;
}@Override
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
detector.onTouchEvent(event);
return false;
}public void showRound(int position){
for(int i=0;i<textViews.length;i++){
if(i==position){
textViews[i].setBackgroundResource(R.drawable.radio_sel);
}else{
textViews[i].setBackgroundResource(R.drawable.radio);
}
}
}}