Android 實現界面的滑動導航條指引效果

我們還是先來看一下效果圖,讓大傢清楚我們將要說的是一個怎麼效果,
androidkaifa(2)

筆者這用的圖片很爛,是隨便截瞭一個項目的界面做成的,
大傢從上面可以看出這是一個界面滑動效果,而且下面有導航條指引的,導航條和上面的界面是可以循環的,我們經常可以在一些軟件中看到這種效果,如騰訊微信在安裝後就有這一個效果,用此向用戶圖文介紹軟件的功能,其實這一功能很簡單,
簡單介紹一下要點:
上面的界面是一個ViewFlipper控件,通過對ViewFlipper加入數個界面,
下面的那導航條是一個LinearLayout控件,在它中加入一個imageview數組,通過數組的下標來控件當前選中的圖片,

下面androidkaifa.com就為大傢提供這個效果的代碼,希望對大傢有幫助:
public class ExtendsFrameLayoutView extends FrameLayout {
    private int mCurrentIndex=0;
    private Context context;
    //點擊屏幕的X左邊值.
    private float startX;
    //設備的寬度.
    private int mDisplayWidth;
    /**
     * 從左到右進入的動畫.
     */ 
    private Animation mLeft2RightInAnimation;      
    /**
     * 從左到右出去動畫.
     */ 
    private Animation mLeft2RightOutAnimation;      
    /**
     * 從右到左進入動畫.
     */ 
    private Animation mRight2LeftInAnimation;    
    /**
     * 從右到左出去動畫.
     */ 
    private Animation mRight2LeftOutAnimation; 
    private long duration=1000;
    private ViewFlipper mViewFlipper;
    //生成下面的那個點點的容器
    private LinearLayout mTipLinearLayout;
    //正常顯示的點點
    private Bitmap mPointNorBitmap;
    //被選中的點點
    private Bitmap mPointSelectBitmap;
   
    private int[] imgResIds = {R.drawable.test1,R.drawable.test2,R.drawable.test3, 
            R.drawable.test4,R.drawable.test5};
   
    public ExtendsFrameLayoutView(Context context, AttributeSet attrs,
            int defStyle) {
        super(context, attrs, defStyle);
        initView();
    }

    public ExtendsFrameLayoutView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

    public ExtendsFrameLayoutView(Context context) {
        super(context);
        initView();
    }
    //初始化控件
    public void initView(){
        context=getContext();
        mDisplayWidth=getResources().getDisplayMetrics().widthPixels;
        mViewFlipper=new ViewFlipper(context);
        mTipLinearLayout=new LinearLayout(context);
        mPointNorBitmap=BitmapFactory.decodeResource(context.getResources(), R.drawable.btn_normal);
        mPointSelectBitmap=BitmapFactory.decodeResource(getResources(), R.drawable.btn_focus);
        ////將圖片界面加入mViewFlipper佈局中
        for(int i=0;i<imgResIds.length;i++){
            ImageView imageView=new ImageView(context);
            imageView.setImageResource(imgResIds);
            mViewFlipper.addView(imageView);
        }
        //將下面的那些點點動態加入到LinearLayout佈局中
        for(int j=0;j<imgResIds.length;j++){
            ImageView imageView=new ImageView(context);
            if(j==0){
                imageView.setImageBitmap(mPointSelectBitmap);
            }else{
                imageView.setImageBitmap(mPointNorBitmap);
            }
            mTipLinearLayout.addView(imageView);
        }
        addView(mViewFlipper);
        addView(mTipLinearLayout);
        //設置下面的那些點點按底部和水平居中
        mTipLinearLayout.setGravity(Gravity.BOTTOM|Gravity.CENTER_HORIZONTAL);
        //初始化動畫
        mLeft2RightInAnimation = new TranslateAnimation(-mDisplayWidth, 0, 0, 0); 
        mLeft2RightInAnimation.setDuration(duration); 
        mLeft2RightOutAnimation = new TranslateAnimation(0, mDisplayWidth, 0, 0); 
        mLeft2RightOutAnimation.setDuration(duration); 
         
        mRight2LeftInAnimation = new TranslateAnimation(mDisplayWidth, 0, 0, 0); 
        mRight2LeftInAnimation.setDuration(duration); 
        mRight2LeftOutAnimation = new TranslateAnimation(0, -mDisplayWidth, 0, 0); 
        mRight2LeftOutAnimation.setDuration(duration);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch(event.getAction()){
        case MotionEvent.ACTION_DOWN:
            startX=event.getX();
            break;
        case MotionEvent.ACTION_UP:
            ImageView lastImageView=(ImageView)mTipLinearLayout.getChildAt(mCurrentIndex);
            //通過對觸摸屏幕時的X坐標的改變來判斷導航的方向
            if(event.getX()>startX){//後退
                mViewFlipper.setInAnimation(mLeft2RightInAnimation);
                mViewFlipper.setOutAnimation(mLeft2RightOutAnimation);
                mViewFlipper.showPrevious();
                mCurrentIndex–;
                if(mCurrentIndex<0){
                    mCurrentIndex=imgResIds.length-1;
                }
            }else if(event.getX()<startX){//前進
                mViewFlipper.setInAnimation(mRight2LeftInAnimation);
                mViewFlipper.setOutAnimation(mRight2LeftOutAnimation);
                mViewFlipper.showNext();
                mCurrentIndex++;
                if(mCurrentIndex>imgResIds.length-1){
                    mCurrentIndex=0;
                }
            }
            ImageView imageView=(ImageView)mTipLinearLayout.getChildAt(mCurrentIndex);
            imageView.setImageBitmap(mPointSelectBitmap);
            lastImageView.setImageBitmap(mPointNorBitmap);
            break;
        default :
                break;
        }
        return true;
    }
}
主activity類代碼:
protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(new ExtendsFrameLayoutView(this));
    }
看完上面的代碼,不知大傢會不會有同感,這功能其實很簡單,
可能有一些朋友需要讓這個效果是自動滾動的,如這樣,可自己另加一個線程,每隔多少時間讓它執行一次IF下面的語句(需將IF裡的代碼單獨放在一個方法中),整個項目代碼,筆者就沒有放上來瞭,需要的朋友,請留言,我發給你!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。