ViewFlipper实现滑屛(圆圈标识当前位置)

    现在很多客户端的页面上都有滑屛这样的功能：比如新闻客户端显示一系列主题，每个几秒展示一篇报道（图片）。。效果很炫，也很实用。Android机屏幕再大也是有限的，而这种方式正好合理利用布局，有提升用户体验~

    之前看觉得很高深，后来发现其实也很简单。用ViewFlipper就能实现滑屛效果，ViewFlipper继承自FrameLayout，对FrameLayout比较熟悉的话，就不难理解ViewFlipper所具有的属性，可以把它理解为一个容器，里面一层一层装了很多个子View，但是每次只能显示一个子View，也可以自动的进行不同子View 的切换。

                                         滑屛效果图

    至于图片底部的小圆圈序列也比较简单。使用ViewFlipper滑屛的时候，我们可以得到当前View 的位置信息，利用位置信息我们可以更新这个圆圈序列，从而指定或者标识当前展示的View的位置。

布局文件：一个ViewFlipper 和一个LinearLayout 分别显示图片和圆圈下标。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="wrap_content" >                       <ViewFlipper             android:id="@+id/viewFlipper1"             android:layout_width="match_parent"             android:layout_height="300dp" > </ViewFlipper>             <LinearLayout                 android:id="@+id/linerlayout"                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:gravity="right"                 android:layout_marginRight="10dp"                 android:layout_marginTop="270dp"                 android:orientation="horizontal" >             </LinearLayout>    </RelativeLayout></LinearLayout>

一个小技巧就是：为了在图片右下角显示圆圈序列，需设置LinearLayout的gravity熟悉为right 并且它的layout_width需要覆盖屏幕宽度。至于使用RelativeLayout这个可以让你自由布局，不然可能下标就不能与图片ViewFlipper 重合了。

主要代码：

public class MainActivity extends Activity implements OnGestureListener, AnimationListener {private GestureDetector detector = null;private ViewFlipper flipper = null;private Handler handler = new Handler();private int[] imgs = {R.drawable.img5,R.drawable.img2,R.drawable.img3,R.drawable.img6};private ImageView[] imageViews;private LinearLayout indicater;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);flipper = (ViewFlipper) findViewById(R.id.viewFlipper1);indicater = (LinearLayout) findViewById(R.id.linerlayout);detector = new GestureDetector(this);imageViews = new ImageView[imgs.length];for(int i=0;i<imgs.length;i++) {ImageView iv = new ImageView(this);iv.setImageResource(imgs[i]);iv.setScaleType(ImageView.ScaleType.FIT_XY);flipper.addView(iv,new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));imageViews[i] = new ImageView(this);imageViews[i].setLayoutParams(new LayoutParams(50,50));imageViews[i].setPadding(10, 0, 10, 0);//imageViews[i].if (i == 0)imageViews[i].setImageResource(R.drawable.indicator_focused);else imageViews[i].setImageResource(R.drawable.indicator);indicater.addView(imageViews[i]);}//设置view切换的动画效果Animation lInAnim = AnimationUtils.loadAnimation(this,R.anim.push_left_in);Animation lOutAnim = AnimationUtils.loadAnimation(this,R.anim.push_left_out);lOutAnim.setAnimationListener(this);flipper.setInAnimation(lInAnim);flipper.setOutAnimation(lOutAnim);//设置自动播放，间隔3秒flipper.setAutoStart(true);flipper.setFlipInterval(3000);if(flipper.isAutoStart() && flipper.isFlipping()) {flipper.startFlipping();}}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.main, menu);return true;}//接受触屏事件@Overridepublic boolean onTouchEvent(MotionEvent event) {// 点击事件//flipper.stopFlipping();//flipper.setAutoStart(false);//截获手势的触屏事件return detector.onTouchEvent(event);}@Overridepublic boolean onDown(MotionEvent arg0) {return false;}//实现手动滑屛效果，@Overridepublic boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,float velocityY) {    // 从左往右滑动，左进右出if (e2.getX() - e1.getX() > 120) {Animation rInAnim = AnimationUtils.loadAnimation(this,R.anim.push_right_in);Animation rOutAnim = AnimationUtils.loadAnimation(this,R.anim.push_right_out);rOutAnim.setAnimationListener(this);flipper.setInAnimation(rInAnim);flipper.setOutAnimation(rOutAnim);flipper.showPrevious();return true;} else if (e2.getX() - e1.getX() < -120) {Animation lInAnim = AnimationUtils.loadAnimation(this,R.anim.push_left_in);Animation lOutAnim = AnimationUtils.loadAnimation(this,R.anim.push_left_out);lOutAnim.setAnimationListener(this);flipper.setInAnimation(lInAnim);flipper.setOutAnimation(lOutAnim);flipper.showNext();return true;}return true;}@Overridepublic void onLongPress(MotionEvent arg0) {}@Overridepublic boolean onScroll(MotionEvent arg0, MotionEvent arg1, float arg2,float arg3) {return false;}@Overridepublic void onShowPress(MotionEvent arg0) {}@Overridepublic boolean onSingleTapUp(MotionEvent arg0) {return false;}/** * 更新远点图标 * @param id */public void updateImage(int id) {for (int i=0;i<imageViews.length;i++)if (i == id)imageViews[i].setImageResource(R.drawable.indicator_focused);else imageViews[i].setImageResource(R.drawable.indicator);}@Overridepublic void onAnimationEnd(Animation arg0) {}@Overridepublic void onAnimationRepeat(Animation arg0) {}@Overridepublic void onAnimationStart(Animation arg0) {//延迟圆圈下标图片的切换，提高体验度handler.postDelayed(r,1300);}private Runnable r = new Runnable() {@Overridepublic void run() {// TODO Auto-generated method stubupdateImage(flipper.getDisplayedChild());}};}