我們還是先來看一下效果圖,讓大傢清楚我們將要說的是一個怎麼效果,
筆者這用的圖片很爛,是隨便截瞭一個項目的界面做成的,
大傢從上面可以看出這是一個界面滑動效果,而且下面有導航條指引的,導航條和上面的界面是可以循環的,我們經常可以在一些軟件中看到這種效果,如騰訊微信在安裝後就有這一個效果,用此向用戶圖文介紹軟件的功能,其實這一功能很簡單,
簡單介紹一下要點:
上面的界面是一個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裡的代碼單獨放在一個方法中),整個項目代碼,筆者就沒有放上來瞭,需要的朋友,請留言,我發給你!