第13天ViewPager案例1：向导页（***）

ViewPager

一.ViewPager介绍

• android.support.v4.view.ViewPager

• 特点:
  继承于ViewGroup, 是一个容器, 添加一系列的View

  数据填充需要通过PagerAdapter（向导页）

  ViewPager 通常和Fragment一起使用FragmentPagerAdapter（底部导航栏）

二.效果

1.自动轮播
2.滑动小圆点跟着走
3.最后一页显示立即体验按钮
4.最后一页，右上角倒计时
5.第一次打开有向导页，当第2次打开没有向导页，直接是首页

三.思路：1个ViewPager+4个View+1个PagerAdapter

1.容器：ViewPager------>Listview
2.数据：ArrayList<View.
3.适配器：PagerAdapter-------->BaseAdapter

重写的方法：
（1）getCount()：返回数据源的总数量
（2）isViewFromObject() 判断当前显示的View 和instantiateItem() 返回的页面是否一致
（3）instantiateItem() 根据下标, 创建ViewPager中显示的页面
（4）destroyItem() 根据下标, 移除ViewPager 中的页面

四.代码

（1）布局activity_main.xml:ViewPager+小圆点+开始体验+右上角倒计时

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <!--ViewPager-->
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
    <!--小圆点-->
    <LinearLayout
        android:id="@+id/ll"
        android:gravity="center_horizontal"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/icon1"
            android:src="@drawable/icon01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <ImageView
            android:id="@+id/icon2"
            android:src="@drawable/icon02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <ImageView
            android:id="@+id/icon3"
            android:src="@drawable/icon02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <ImageView
            android:id="@+id/icon4"
            android:src="@drawable/icon02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <ImageView
            android:id="@+id/icon5"
            android:src="@drawable/icon02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <!--开始体验-->
    <Button
        android:visibility="gone"
        android:id="@+id/start"
        android:background="@null"
        android:textSize="30sp"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="100dp"
        android:text="开始体验"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <!--右上角倒计时-->
    <TextView
        android:visibility="gone"
        android:id="@+id/time_tv"
        android:layout_alignParentRight="true"
        android:textColor="#000000"
        android:text="剩余时间:10秒"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</RelativeLayout>

(2)Java代码：MainActivity.java

public class MainActivity extends AppCompatActivity {
    private ViewPager viewPager;//ViewPager容器
    private TextView time_tv;//5秒倒计时
    private Button start;//开始体验按钮
    private MyPagerAdapter myPagerAdapter;//适配器
    private ArrayList<View> list=new ArrayList<>();//数据：4张View
    private ArrayList<ImageView> icon_list=new ArrayList<>();//小圆点图片
    private int current_item=0;//默认显示页
    private int time=5;//默认剩余时间
    private SharedPreferences preferences;//第2次打开不走向导页
    private Handler handler=new Handler(){
        @Override
        public void handleMessage(Message msg) {//handler：自动轮播+5秒到技术
            super.handleMessage(msg);
            if(msg.what==101){//自动轮播
                viewPager.setCurrentItem(++current_item);//设置滚动下一页
            }else  if(msg.what==102){//5秒倒计时
                time_tv.setText("剩余时间"+(--time));
                if(time==0){//页面跳转
                        Intent intent=new Intent(MainActivity.this,Main2Activity.class);
                        startActivity(intent);
                }
            }
        }
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //设置二次打开不走向导页
        preferences= getSharedPreferences("welcome", MODE_PRIVATE);
        boolean flag=preferences.getBoolean("isdone",false);
        if(flag){//若是第二次打开直接页面跳转
            Intent intent=new Intent(MainActivity.this,Main2Activity.class);
            startActivity(intent);
        }
        //TODO 加载视图
        initview();
        //TODO 加载圆点
        initicon();
        //TODO 加载数据
        initdata();
        //TODO 设置适配器
        initadpter();
        //TODO 设置事件监听
        initListener();

        //TODO 自动轮播
        final Timer timer=new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                if(current_item!=list.size()-1){//不是最后一页
                    handler.sendEmptyMessage(101);//发送一个空的消息
                }else{
                    timer.cancel();//如果是最后一页，直接取消定时器
                }
            }
        },0,1000);

    }

    private void initListener() {
        //开始按钮点击事件
        start.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent=new Intent(MainActivity.this,Main2Activity.class);
                startActivity(intent);
            }
        });
        //滑动viewPager的时候小圆点跟着走
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            //当页面滑动的时候调用
            @Override
            public void onPageScrolled(int i, float v, int i1) {
            }
            //当页面被选择的时候
            @Override
            public void onPageSelected(int i) {//1
                //TODO 将所有圆点变白，当前变灰
                for(int j=0;j<icon_list.size();j++){
                    icon_list.get(j).setImageResource(R.drawable.icon02);
                }
                icon_list.get(i).setImageResource(R.drawable.icon01);

                //TODO 当最后一个页面的时候显示按钮,和显示倒计时
                if(i==icon_list.size()-1){
                    start.setVisibility(View.VISIBLE);
                    time_tv.setVisibility(View.VISIBLE);
                    //TODO 倒计时更新剩余时间
                    final Timer timer=new Timer();
                    timer.schedule(new TimerTask() {
                        @Override
                        public void run() {
                            if(time>0){
                                handler.sendEmptyMessage(102);
                            }else{
                                timer.cancel();
                            }
                        }
                    },0,1000);
                }else{
                    start.setVisibility(View.GONE);
                    time_tv.setVisibility(View.GONE);
                }
            }
            //当页面滑动状态改变的时候
            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });
    }

    private void initadpter() {
        myPagerAdapter=new MyPagerAdapter(list,this);
        viewPager.setAdapter(myPagerAdapter);
    }

    private void initview() {
        viewPager=findViewById(R.id.pager);
        start=findViewById(R.id.start);
        time_tv=findViewById(R.id.time_tv);
    }

    private void initdata() {
        ImageView imageView1= new ImageView(this);
        imageView1.setImageResource(R.drawable.tp);
        list.add(imageView1);
        ImageView imageView2= new ImageView(this);
        imageView2.setImageResource(R.drawable.tp_01);
        list.add(imageView2);
        ImageView imageView3= new ImageView(this);
        imageView3.setImageResource(R.drawable.tp_02);
        list.add(imageView3);
        ImageView imageView4= new ImageView(this);
        imageView4.setImageResource(R.drawable.tp_04);
        list.add(imageView4);
        ImageView imageView5= new ImageView(this);
        imageView5.setImageResource(R.drawable.tp_06);
        list.add(imageView5);
    }
    private void initicon() {
        icon_list.add((ImageView) findViewById(R.id.icon1));
        icon_list.add((ImageView) findViewById(R.id.icon2));
        icon_list.add((ImageView) findViewById(R.id.icon3));
        icon_list.add((ImageView) findViewById(R.id.icon4));
        icon_list.add((ImageView) findViewById(R.id.icon5));
    }
}

（3）Main2Activity.java :页面跳转

public class Main2Activity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        //SP 存储
        SharedPreferences.Editor welcome = getSharedPreferences("welcome", MODE_PRIVATE).edit();
        welcome.putBoolean("isdone",true);
        welcome.commit();
    }
}

（4）适配器代码：

public class MyPagerAdapter extends PagerAdapter {
    private ArrayList<View> list;//数据
    private Context context;
    public MyPagerAdapter(ArrayList<View> list, Context context) {
        this.list = list;
        this.context = context;
    }
    //TODO 返回数量
    @Override
    public int getCount() {
        return list.size();
    }
    //TODO 判断view是否来自集合中
    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
        return view==o;
    }
    //TODO 根据下标加载View
    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        //向容器中添加View
        Log.i("aaaaa", position+"加载了: ");
        container.addView(list.get(position));
        return list.get(position);
    }
    //TODO 根据下标移除:不是移除集合中的,而是移除Viewgroup里面的
    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
 //       super.destroyItem(container, position, object);//注意：该方法不要写
        //从容器中移除View
        Log.i("aaaaa", position+"溢出了: ");
        container.removeView(list.get(position));

    }
}

源代码：