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

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





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

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)
{
}
}