下面我们要实现这样的效果:
我们将采用两种方式实现这种效果:
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)
- {
- }
- }