【安卓笔记】切换图片（底部带有小点效果）

以下我们要实现这种效果：

我们将採用两种方式实现这样的效果：

1.使用ViewPager：

思路：ViewPager提供左右滑动图片操作的支持。下方小点在代码中动态创建，整个布局採用FrameLayout。

先看布局：

<FrameLayout 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:background="@android:color/black"
    tools:context=".MainActivity" >
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ></android.support.v4.view.ViewPager>
    <RelativeLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <LinearLayout 
            android:id="@+id/viewGroup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="30dp"
            android:gravity="center_horizontal"
            android:orientation="horizontal"
            ></LinearLayout>
    </RelativeLayout>
</FrameLayout>

再看代码：

package com.example.splash_viewpager;
import android.app.Activity;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
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.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class MainActivity extends Activity implements OnPageChangeListener
{
    private ViewPager mViewPager = null;
    private LinearLayout mViewGroup = null;
    
    private int[] mImageIds = {R.drawable.bg1,R.drawable.bg2,
            R.drawable.bg3,R.drawable.bg4,
            R.drawable.bg5,R.drawable.bg6,
            R.drawable.bg7};
    
    private ImageView[] mImageViews = null;
    
    private ImageView[] mTips = null;
    
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        mViewGroup = (LinearLayout) findViewById(R.id.viewGroup);
        mViewPager = (ViewPager) findViewById(R.id.viewPager);
        
        mTips = new ImageView[mImageIds.length];
        //动态创建小点并加到布局中
        for(int i = 0; i < mTips.length; i++)
        {
            ImageView iv = new ImageView(this);
            iv.setLayoutParams(new LayoutParams(10,10));
            mTips[i] = iv;
            
            if(i == 0)
            {
                iv.setBackgroundResource(R.drawable.page_indicator_focused);
            }else
            {
                iv.setBackgroundResource(R.drawable.page_indicator_unfocused);
            }
            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
            lp.leftMargin = 5;
            lp.rightMargin = 5;
            mViewGroup.addView(iv,lp);
        }
        mImageViews = new ImageView[mImageIds.length];
        for(int i = 0; i < mImageViews.length; i++)
        {
            ImageView iv = new ImageView(this);
            mImageViews[i] = iv;
            int reqWidth = getWindowManager().getDefaultDisplay().getWidth();
            int reqHeight = getWindowManager().getDefaultDisplay().getHeight();
            iv.setImageBitmap(decodeSampledBitmapFromResource(getResources(), mImageIds[i], reqWidth, reqHeight));
        }
        
        mViewPager.setAdapter(new MyPagerAdapter());
        mViewPager.setOnPageChangeListener(this);
        
    }
    
    class MyPagerAdapter extends PagerAdapter
    {
        @Override
        public int getCount()
        {
            return mImageIds.length;
        }
        @Override
        public boolean isViewFromObject(View arg0, Object arg1)
        {
            return arg0 == arg1;
        }
        @Override
        public Object instantiateItem(ViewGroup container, int position)
        {
            try
            {
                container.addView(mImageViews[position]);
            } catch (Exception e)
            {
            }
            return mImageViews[position];
        }
        @Override
        public void destroyItem(ViewGroup container, int position, Object object)
        {
        }
    }
    @Override
    public void onPageSelected(int arg0)
    {
        for(int i = 0; i < mTips.length; i++)
        {
            if(arg0 == i)
            {
                mTips[i].setBackgroundResource(R.drawable.page_indicator_focused);
            }else
            {
                mTips[i].setBackgroundResource(R.drawable.page_indicator_unfocused);
            }
        }    
    }
    @Override
    public void onPageScrollStateChanged(int arg0)
    {
    }
    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2)
    {
    }
    
    private static Bitmap decodeSampledBitmapFromResource(Resources res,int resId,int reqWidth,int reqHeight)
    {
        BitmapFactory.Options opts = new BitmapFactory.Options();
        opts.inJustDecodeBounds = true;
        BitmapFactory.decodeResource(res, resId);
        int inSampleSize = cacluateInSampledSize(opts, reqWidth, reqHeight);
        opts.inSampleSize = inSampleSize;
        opts.inJustDecodeBounds = false;
        return BitmapFactory.decodeResource(res,resId,opts);
    }
    
    private static int cacluateInSampledSize(BitmapFactory.Options opts,int width,int height)
    {
        if(opts == null)
        {
            return 1;
        }
        int inSampleSize = 1;
        int realWidth = opts.outWidth;
        int realHeight = opts.outHeight;
        
        if(realWidth > width || realHeight > height)
        {
            int heightRatio = realHeight/height;
            int widthRatio = realWidth/width;
            
            inSampleSize = (widthRatio > heightRatio) ? heightRatio : widthRatio;
        }
        return inSampleSize;
    }
}

2.使用ViewFlipper

思路：在ViewFlipper中填充多个ImageView，然后使用GestureDetector检測手势，小点仍然是通过动态产生。

布局：

<FrameLayout 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:background="@android:color/black"
    tools:context=".MainActivity" >
    
    <ViewFlipper 
        android:id="@+id/vf"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ></ViewFlipper>
    <RelativeLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <LinearLayout 
            android:id="@+id/viewGroup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="30dp"
            android:gravity="center_horizontal"
            ></LinearLayout>        
    </RelativeLayout>
</FrameLayout>

代码：

package com.example.splash_viewflipper;
import android.app.Activity;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.Toast;
import android.widget.ViewFlipper;
public class MainActivity extends Activity implements OnGestureListener
{
    private ViewFlipper mViewFlipper = null;
    private LinearLayout mViewGroup = null;
    
    private GestureDetector mGestureDetector = null;
    
    private int[] mImageIds = {
            R.drawable.bg1,R.drawable.bg2,
            R.drawable.bg3,R.drawable.bg4,
            R.drawable.bg5,R.drawable.bg6,
            R.drawable.bg7
    };
    
    private ImageView[] mImageViews = null;
    private ImageView[] mTips = null;
    
    private int currentIndex = 0;
    
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        mViewFlipper = (ViewFlipper) findViewById(R.id.vf);
        mViewGroup = (LinearLayout) findViewById(R.id.viewGroup);
        
        mGestureDetector = new GestureDetector(this,this);
        
        mImageViews = new ImageView[mImageIds.length];
        for(int i = 0; i < mImageViews.length; i++)
        {
            ImageView iv = new ImageView(this);
            int reqWidth = getWindowManager().getDefaultDisplay().getWidth();
            int reqHeight = getWindowManager().getDefaultDisplay().getHeight();
            iv.setImageBitmap(decodeSampledBitmapFromResource(getResources(),mImageIds[i], reqWidth, reqHeight));
            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);
            mViewFlipper.addView(iv,lp);
        }
        
        mTips = new ImageView[mImageIds.length];
        for(int i = 0; i < mTips.length; i++)
        {
            ImageView iv = new ImageView(this);
            iv.setLayoutParams(new LayoutParams(10,10));
            mTips[i] = iv;
            
            if(i == 0)
            {
                iv.setBackgroundResource(R.drawable.page_indicator_focused);
            }else
            {
                iv.setBackgroundResource(R.drawable.page_indicator_unfocused);
            }
            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
            lp.leftMargin = 5;
            lp.rightMargin = 5;
            mViewGroup.addView(iv,lp);
        }
    }
    
    @Override
    public boolean onTouchEvent(MotionEvent event)
    {
        return mGestureDetector.onTouchEvent(event);
    }
    
    private static Bitmap decodeSampledBitmapFromResource(Resources res,int resId,int reqWidth,int reqHeight)
    {
        BitmapFactory.Options opts = new BitmapFactory.Options();
        opts.inJustDecodeBounds = true;
        BitmapFactory.decodeResource(res, resId);
        int inSampleSize = cacluateInSampledSize(opts, reqWidth, reqHeight);
        opts.inSampleSize = inSampleSize;
        opts.inJustDecodeBounds = false;
        return BitmapFactory.decodeResource(res,resId,opts);
    }
    
    private static int cacluateInSampledSize(BitmapFactory.Options opts,int width,int height)
    {
        if(opts == null)
        {
            return 1;
        }
        int inSampleSize = 1;
        int realWidth = opts.outWidth;
        int realHeight = opts.outHeight;
        
        if(realWidth > width || realHeight > height)
        {
            int heightRatio = realHeight/height;
            int widthRatio = realWidth/width;
            
            inSampleSize = (widthRatio > heightRatio) ? heightRatio : widthRatio;
        }
        return inSampleSize;
    }
    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
            float velocityY)
    {
        if(e1.getX() - e2.getX() > 120)//显示下一张
        {
            if(currentIndex != mTips.length-1)
            {
                currentIndex++;
                setImageBackground(currentIndex);
                Animation in_right = AnimationUtils.loadAnimation(this,R.anim.in_right_);
                Animation out_left = AnimationUtils.loadAnimation(this,R.anim.out_left_);
                mViewFlipper.setInAnimation(in_right);
                mViewFlipper.setOutAnimation(out_left);
                mViewFlipper.showNext();
            }else
            {
                Toast.makeText(this,"已经是最后一张..",0).show();
            }
        }else if(e1.getX() - e2.getX() < -120)//显示上一张
        {
            if(currentIndex != 0)
            {
                currentIndex--;
                setImageBackground(currentIndex);
                Animation in_left = AnimationUtils.loadAnimation(this,R.anim.in_left_);
                Animation out_right = AnimationUtils.loadAnimation(this,R.anim.out_right_);
                mViewFlipper.setInAnimation(in_left);
                mViewFlipper.setOutAnimation(out_right);
                mViewFlipper.showPrevious();
            }else
            {
                Toast.makeText(this,"已经是第一张..",0).show();
            }
        }
        return true;
    }
    private void setImageBackground(int selectItems)
    {    
        for(int i = 0; i < mTips.length; i++)
        {    
            if(i == selectItems)
            {    
                mTips[i].setBackgroundResource(R.drawable.page_indicator_focused);    
            }else
            {    
                mTips[i].setBackgroundResource(R.drawable.page_indicator_unfocused);    
            }    
        }    
    }
    @Override
    public boolean onDown(MotionEvent e)
    {
        return false;
    }
    @Override
    public void onShowPress(MotionEvent e)
    {
    }
    @Override
    public boolean onSingleTapUp(MotionEvent e)
    {
        return false;
    }
    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
            float distanceY)
    {
        return false;
    }
    @Override
    public void onLongPress(MotionEvent e)
    {
    }
}