Android课堂笔记——ViewPager

使用ViewPager制作简单的第一次打开APP的欢迎界面

mainActivity：

package com.briup.viewpager;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
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.ViewTreeObserver.OnGlobalLayoutListener;
import android.view.Window;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.ToggleButton;

/**
 * 使用ViewPager来制作新手导航界面 1.ViewPager该怎么使用 1.1-布局文件中定义ViewPager 1.2-声明实例
 * 1.3-为ViewPager去指定一个PagerAdapter 1.3.1-自己写个类去继承PagerApdater
 * 1.3.2-实现里面的方法（默认需要我们实现两个，但是其实我们需要实现四个） 1.3.3-为ViewPager去指定一个PagerAdapter
 * 2.下面那几个小圆点怎么能够跟随着ViewPager发生改变 3.那么按钮是怎么实现的
 * 
 * @author wengshaobo
 * 
 */
public class MainActivity extends Activity {

    private int[] images = { R.drawable.guide_1, R.drawable.guide_2, R.drawable.guide_3, R.drawable.guide_4 };
    private ViewPager viewPager;

    private List<ImageView> iamgeList;
    // 放4个小灰点的线性布局
    private LinearLayout linearLayout;
    private ImageView lan_Iv;

    private int pointWidth;

    private Button btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 放在setContentView()之前运行
        requestWindowFeature(Window.FEATURE_NO_TITLE);

        setContentView(R.layout.activity_main);

        initView();

        for (int i = 0; i < images.length; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setScaleType(ScaleType.FIT_XY);
            iamgeList.add(imageView);

            // 根据图片的个数去放置相应数量的小灰点
            ImageView huiImageView = new ImageView(this);
            huiImageView.setImageResource(R.drawable.hui_bg);

            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
            huiImageView.setLayoutParams(layoutParams);

            if (i > 0) {
                // 给边距
                layoutParams.leftMargin = 20;
            }

            linearLayout.addView(huiImageView);
        }

        // 我们的代码现在都写在onCreate方法中，onCreate在调用的时候，界面底层的绘制工作还没有完成。所有，如果我们直接在onCreate方法里去拿距离，拿不到
        // addOnGlobalLayoutListener：在视图树全部都绘制完成的时候调用
        lan_Iv.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

            @Override
            public void onGlobalLayout() {
                // TODO Auto-generated method stub
                pointWidth = linearLayout.getChildAt(1).getLeft() - linearLayout.getChildAt(0).getLeft();
                //System.out.println(pointWidth);
            }
        });

        viewPager.setAdapter(new MyAdapter());

        viewPager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                // TODO Auto-generated method stub
                if (position == images.length - 1) {
                    btn.setVisibility(View.VISIBLE);
                } else {
                    btn.setVisibility(View.GONE);

                }
            }

            @Override
            // 在Viewpger的界面不断滑动的时候会触发
            // position：当前滑到了第几页

            public void onPageScrolled(int position, float offset, int arg2) {
                // TODO Auto-generated method stub

                RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) lan_Iv.getLayoutParams();
                layoutParams.leftMargin = (int) (pointWidth * offset + position * pointWidth);
                lan_Iv.setLayoutParams(layoutParams);
                System.out.println("当前滑动的百分比   " + offset);

            }

            @Override
            public void onPageScrollStateChanged(int state) {
                // TODO Auto-generated method stub

            }
        });

        viewPager.setPageTransformer(true, new DepthPageTransformer());

    }

    /**
     * 用于初始化相关控件的方法
     */
    private void initView() {
        lan_Iv = (ImageView) findViewById(R.id.lan_Iv);
        linearLayout = (LinearLayout) findViewById(R.id.ll);
        btn = (Button) findViewById(R.id.btn);
        viewPager = (ViewPager) findViewById(R.id.vp);
        iamgeList = new ArrayList<ImageView>();
    }

    class MyAdapter extends PagerAdapter {

        @Override
        // 返回ViewPager里面有几页
        public int getCount() {
            // TODO Auto-generated method stub
            return images.length;
        }

        @Override
        // 用于判断是否有对象生成界面
        public boolean isViewFromObject(View view, Object object) {
            // TODO Auto-generated method stub
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            // TODO Auto-generated method stub
            /*
             * 代码写的有问题，每次翻页的时候都需要new出新的ImageView，太浪费资源 ImageView imageView = new
             * ImageView(MainActivity.this);
             * imageView.setImageResource(images[position]);
             * imageView.setScaleType(ScaleType.FIT_XY);
             * container.addView(imageView);
             */
            ImageView imageView = iamgeList.get(position);
            imageView.setImageResource(images[position]);
            container.addView(imageView);

            return imageView;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            // TODO Auto-generated method stub
            container.removeView((View) object);
        }

    }

}

activity_main：

<RelativeLayout 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"
    tools:context=".MainActivity" >



    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp" >

        <LinearLayout
            android:id="@+id/ll"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
        </LinearLayout>

        <ImageView
             android:id="@+id/lan_Iv"
             android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/lan_bg"/>

    </RelativeLayout>

    <Button 
        android:id="@+id/btn"
        android:visibility="gone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="开始体验"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="50dp"/>

</RelativeLayout>