ImageSwitcher實現引導頁效果

dfd7 9年前發布 | 761 次閱讀 Java Android

布局代碼:

<?xml version="1.0" encoding="UTF-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android&quot;
             android:layout_width="fill_parent"
             android:layout_height="fill_parent">

<ImageSwitcher
    android:id="@+id/imageSwitcher"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
</ImageSwitcher>

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/ll_view"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="30dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal">
    </LinearLayout>
</RelativeLayout>

</FrameLayout></pre>

頁面代碼:

public class ImageSwitcherActivity extends Activity implements ViewSwitcher.ViewFactory, View.OnTouchListener {
    private int[] imgIds;//圖片id數組
    private int currentPosition;//當前選中的圖片id序號
    private ImageSwitcher mImageSwitcher;//ImagaSwitcher 的引用

private float downX;//按下點的X坐標
private ImageView[] tips;//點點數組
private LinearLayout linearLayout;//裝載點點的容器

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_switcher);

    imgIds = new int[]{R.drawable.bg, R.drawable.c2, R.drawable.c3, R.drawable.c4, R.drawable.c5, R.drawable.c6, R.drawable.c7, R.drawable.c8, R.drawable.c9};

    mImageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher);//實例化ImageSwitcher
    mImageSwitcher.setFactory(this); //設置Factory
    mImageSwitcher.setOnTouchListener(this);//設置OnTouchListener,我們通過Touch事件來切換圖片

    linearLayout = (LinearLayout) findViewById(R.id.ll_view);//指示器布局
    tips = new ImageView[imgIds.length];
    for (int i = 0; i < imgIds.length; i++) {
        ImageView mImageView = new ImageView(this);
        tips[i] = mImageView;
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
        layoutParams.rightMargin = 3;
        layoutParams.leftMargin = 3;

        mImageView.setBackgroundResource(R.drawable.page_indicator_unfocused);
        linearLayout.addView(mImageView, layoutParams);
    }

    //上一個界面傳過來的位置
    currentPosition = getIntent().getIntExtra("position", 0);
    mImageSwitcher.setImageResource(imgIds[currentPosition]);

    setImageBackground(currentPosition);

}

//設置選中的tip的背景
private void setImageBackground(int selectItems) {
    for (int i = 0; i < tips.length; i++) {
        if (i == selectItems) {
            tips[i].setBackgroundResource(R.drawable.page_indicator_focused);
        } else {
            tips[i].setBackgroundResource(R.drawable.page_indicator_unfocused);
        }
    }
}

@Override
public View makeView() {
    final ImageView i = new ImageView(this);
    i.setBackgroundColor(0xff000000);
    i.setScaleType(ImageView.ScaleType.CENTER_CROP);
    i.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
    return i;
}

@Override
public boolean onTouch(View v, MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN: {
            downX = event.getX();//手指按下的X坐標
            break;
        }
        case MotionEvent.ACTION_UP: {
            float lastX = event.getX();
            //抬起的時候的X坐標大于按下的時候就顯示上一張圖片
            if (lastX > downX) {
                if (currentPosition > 0) {
                    //設置動畫
                    mImageSwitcher.setInAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.left_in));
                    mImageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.right_out));
                    currentPosition--;
                    mImageSwitcher.setImageResource(imgIds[currentPosition % imgIds.length]);
                    setImageBackground(currentPosition);
                } else {
                    Toast.makeText(getApplication(), "已經是第一張", Toast.LENGTH_SHORT).show();
                }
            }

            if (lastX < downX) {
                if (currentPosition < imgIds.length - 1) {
                    mImageSwitcher.setInAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.right_in));
                    mImageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.lift_out));
                    currentPosition++;
                    mImageSwitcher.setImageResource(imgIds[currentPosition]);
                    setImageBackground(currentPosition);
                } else {
                    Toast.makeText(getApplication(), "到了最后一張", Toast.LENGTH_SHORT).show();
                }
            }
        }

        break;
    }

    return true;
}

}</pre>

 本文由用戶 dfd7 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!