【安卓筆記】切換圖片（底部帶有小點效果）

標籤：android   des   style   blog   class   code   

下面我們要實現這樣的效果：

我們將採用兩種方式實現這種效果： 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)    {    }}