ViewPager实现引导页

1. 要使用ViewPager，必须要创建 PagerAdapter。这里创建一个 ViewPagerAdapter来继承PagerAdapter

public class ViewPagerAdapter extends PagerAdapter{

    private List<View> views;   // 我们引导页的list
    private Context context;    // 上下文

    public ViewPagerAdapter(List<View> views, Context context) {
        this.views = views;
        this.context = context;
    }


    // 移除一个view
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        //super.destroyItem(container, position, object);
        container.removeView(views.get(position));
    }


    // 加载一个view
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(views.get(position));
        return views.get(position);
    }

    @Override
    public int getCount() { // 必写的方法 返回当前views的数量
      return this.views.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) { //必写的方法 判断当前的view是否是我们需要的对象
        return (view == object);
    }
}

2. 创建我们引导页的视图

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--filpInterval 设置View之间切换的时间间隔 （在androidStudio上面跑不起来 可以不需要）
       persistentDrawingCache 持久化绘画缓存
   -->
    <android.support.v4.view.ViewPager
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#00000000"
        android:persistentDrawingCache="animation"
        android:id="@+id/viewpage"
        >
    </android.support.v4.view.ViewPager>
</RelativeLayout>

3. 创建引导页的图片视图 one.xml和two.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"

        android:background="@drawable/guide1"/>
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView2"
        android:background="@drawable/guide2"/>

</LinearLayout>

4. 在我们的activity中使用

 1 public class Guide extends Activity{
 2 
 3     private ViewPager vp;
 4     private ViewPagerAdapter vpAdapter;
 5     private List<View> views;
 6 
 7 
 8     protected void onCreate(Bundle savedInstanceState) {
 9         super.onCreate(savedInstanceState);
10         setContentView(R.layout.guide);//加载guide.xml 视图
11         this.initView();
12 
13         System.out.println("onCreate");
14     }
15 
16     // 初始化view
17     public void initView() {
18         /*
19         * Inflater英文意思是膨胀，在Android中应该是扩展的意思吧。
20           LayoutInflater的作用类似于 findViewById(),
21           不同点是LayoutInflater是用来找layout文件夹下的xml布局文件，并且实例化！
22           而 findViewById()是找具体某一个xml下的具体 widget控件(如:Button,TextView等)。
23         *
24         * */
25         LayoutInflater inflater = LayoutInflater.from(this);
26         views = new ArrayList<View>();
27         views.add(inflater.inflate(R.layout.one, null));  // 加载视图1
28         views.add(inflater.inflate(R.layout.two, null));  // 加载视图2
29 
30         vpAdapter = new ViewPagerAdapter(views, this);   // 创建我们的 adapter
31         vp = (ViewPager) findViewById(R.id.viewpage);
32         vp.setAdapter(vpAdapter);                        // viewpage绑定 adapter
33     }
34 }

5. 运行就有引导页的两张图片，可以来回切换。

6. 添加导航点

① 在原来的guide.xml中添加

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--filpInterval 设置View之间切换的时间间隔 （在androidStudio上面跑不起来 可以不需要）
       persistentDrawingCache 持久化绘画缓存
   -->
    <android.support.v4.view.ViewPager
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#00000000"
        android:persistentDrawingCache="animation"
        android:id="@+id/viewpage"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true">
    </android.support.v4.view.ViewPager>

    <!-- 新添加的 放导航点用的 -->
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
        android:layout_marginBottom="19dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/iv1"
            android:src="@drawable/login_selectd"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/iv2"
            android:src="@drawable/login_point"/>
    </LinearLayout>


</RelativeLayout>

② 在原来的代码的基础上添加新的代码

public class Guide extends Activity implements ViewPager.OnPageChangeListener{  // 实现监听接口

    private ViewPager vp;
    private ViewPagerAdapter vpAdapter;
    private List<View> views;

    // 导航点
    private ImageView[] dots;
    private int[] ids = {R.id.iv1, R.id.iv2};


    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.guide);//加载guide.xml 视图
        this.initView();
        this.initDots();
        System.out.println("onCreate");
    }

    // 初始化view
    public void initView() {
        /*
        * Inflater英文意思是膨胀，在Android中应该是扩展的意思吧。
          LayoutInflater的作用类似于 findViewById(),
          不同点是LayoutInflater是用来找layout文件夹下的xml布局文件，并且实例化！
          而 findViewById()是找具体某一个xml下的具体 widget控件(如:Button,TextView等)。
        *
        * */
        LayoutInflater inflater = LayoutInflater.from(this);
        views = new ArrayList<View>();
        views.add(inflater.inflate(R.layout.one, null));  // 加载视图1
        views.add(inflater.inflate(R.layout.two, null));  // 加载视图2

        vpAdapter = new ViewPagerAdapter(views, this);   // 创建我们的 adapter
        vp = (ViewPager) findViewById(R.id.viewpage);
        vp.setAdapter(vpAdapter);                        // viewpage绑定 adapter
        vp.setOnPageChangeListener(this);                // ViewPager 监听自己
    }


    private void initDots() {                           // 初始化 我们的导航点
        this.dots = new ImageView[this.views.size()];
        for (int i=0; i<this.views.size(); i++) {
            dots[i] = (ImageView) this.findViewById(this.ids[i]);
        }
    }


    // 监听 页面滑动的方法
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        for (int i=0; i<this.ids.length; i++) {
            if (position == i) {
                this.dots[i].setImageResource(R.drawable.login_selectd);  // 变成选中的
            } else {
                this.dots[i].setImageResource(R.drawable.login_point);    //变成不选中的
            }
        }
    }

    //选中
    @Override
    public void onPageSelected(int position) {

    }

    // 滑动状态改变
    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

7. 添加进入按钮

① 在two.xml中添加一个按钮

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView2"
        android:background="@drawable/guide2"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true" />


    <!-- 添加进去按钮 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:orientation="horizontal"
        android:gravity="center"
        >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="进入"
            android:id="@+id/btn_start" />

    </LinearLayout>


</RelativeLayout>

② 监听按钮进去MainActivity

public class Guide extends Activity implements ViewPager.OnPageChangeListener{  // 实现监听接口

    private ViewPager vp;
    private ViewPagerAdapter vpAdapter;
    private List<View> views;

    // 导航点
    private ImageView[] dots;
    private int[] ids = {R.id.iv1, R.id.iv2};

    // 开始按钮
    private Button bt;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.guide);//加载guide.xml 视图
        this.initView();
        this.initDots();
        System.out.println("onCreate");
    }

    // 初始化view
    public void initView() {
        /*
        * Inflater英文意思是膨胀，在Android中应该是扩展的意思吧。
          LayoutInflater的作用类似于 findViewById(),
          不同点是LayoutInflater是用来找layout文件夹下的xml布局文件，并且实例化！
          而 findViewById()是找具体某一个xml下的具体 widget控件(如:Button,TextView等)。
        *
        * */
        LayoutInflater inflater = LayoutInflater.from(this);
        views = new ArrayList<View>();
        views.add(inflater.inflate(R.layout.one, null));  // 加载视图1
        views.add(inflater.inflate(R.layout.two, null));  // 加载视图2

        vpAdapter = new ViewPagerAdapter(views, this);   // 创建我们的 adapter
        vp = (ViewPager) findViewById(R.id.viewpage);
        vp.setAdapter(vpAdapter);                        // viewpage绑定 adapter
        vp.setOnPageChangeListener(this);                // ViewPager 监听自己


        // 进入按钮
        this.bt = (Button) views.get(1).findViewById(R.id.btn_start);
        this.bt.setOnClickListener(new View.OnClickListener() {  // 监听
            @Override
            public void onClick(View v) {
                Intent i = new Intent(Guide.this, MainActivity.class);  // 进去MainActivity
                startActivity(i);
                finish();  //销毁当前的Activity
            }
        });
    }


    private void initDots() {                           // 初始化 我们的导航点
        this.dots = new ImageView[this.views.size()];
        for (int i=0; i<this.views.size(); i++) {
            dots[i] = (ImageView) this.findViewById(this.ids[i]);
        }
    }


    // 监听 页面滑动的方法
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        for (int i=0; i<this.ids.length; i++) {
            if (position == i) {
                this.dots[i].setImageResource(R.drawable.login_selectd);  // 变成选中的
            } else {
                this.dots[i].setImageResource(R.drawable.login_point);    //变成不选中的
            }
        }
    }

    //选中
    @Override
    public void onPageSelected(int position) {

    }

    // 滑动状态改变
    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

posted on 2016-09-24 22:44 邵邵阅读(2746) 评论(0) 编辑收藏举报