ViewPager的介绍和使用

最新推荐文章于 2023-06-20 08:00:00 发布

zhoujiayin111111

最新推荐文章于 2023-06-20 08:00:00 发布

阅读量321

点赞数 1

本文链接：https://blog.csdn.net/weixin_45375472/article/details/98883628

版权

ViewPager的介绍和使用

ViewPager的介绍和使用

ViewPager的介绍和使用

使用效果图

在这里插入图片描述

Viewpager，视图翻页工具，提供了多页面切换的效果。Android 3.0后引入的一个UI控件，位于v4包中。低版本使用需要导入v4包，但是现在我们开发的APP一般不再兼容3.0及以下的系统版本，另外现在大多数使用Android studio进行开发，默认导入v7包，v7包含了v4，所以不用导包，越来越方便了。

Viewpager使用起来就是我们通过创建adapter给它填充多个view，左右滑动时，切换不同的view。Google官方是建议我们使用Fragment来填充ViewPager的，这样可以更加方便的生成每个Page，以及管理每个Page的生命周期。

ViewPager 直接继承了 ViewGroup，所有它是一个容器类，可以在其中添加其他的 view 类。
ViewPager 需要一个 PagerAdapter 适配器类给它提供数据。
ViewPager 经常和 Fragment 一起使用，并且提供了专门的 FragmentPagerAdapter 和 FragmentStatePagerAdapter 类供 Fragment 中的 ViewPager 使用。

viewPager
1.引入XML布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".Main2Activity">
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/vp"></android.support.v4.view.ViewPager>

</LinearLayout>

2.在layout文件中创建一个自定义viewPager布局文件
这里用了一个Textview和一个ImageView

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:hint="请输入内容"
        android:gravity="center"
        android:id="@+id/textview111"/>
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageview"/>

</LinearLayout>

3.创建适配器

import android.support.annotation.NonNull;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

public class MyVPAdapter extends PagerAdapter {
    //ViewPager总共有几个页面
    @Override
    public int getCount() {
        return 0;
    }

    //判断一个页面(View)是否与instantiateItem方法返回的Object一致
    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
        return false;
    }

    //创建一个页面
    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        return super.instantiateItem(container, position);
    }

    //销毁页面
    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        super.destroyItem(container, position, object);
    }
}

4.按照需求完善适配器方法

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;

public class MyVPAdapter extends PagerAdapter {
    private Context context;//上下文
    private List<String>list;//存放数据的集合
    private int[] image;//存放图片的数组

//有参构造
    public MyVPAdapter(Context context, List<String> list, int[] image) {
        this.context = context;
        this.list = list;
        this.image = image;
    }

    @Override
    public int getCount() {

        return list.size();
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
        return view==o;
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        View inflate = View.inflate(context, R.layout.layout, null);//加载布局
        TextView textView = inflate.findViewById(R.id.textview111);//寻找控件
        ImageView imageView = inflate.findViewById(R.id.imageview);
        imageView.setImageResource(image[position]);//添加图片
        textView.setText(list.get(position));//添加文字
        container.addView(inflate);//添加一个布局
        return inflate;//返回一个布局
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
//        super.destroyItem(container, position, object);//这句话删除或注释否则会报错
        container.removeView((View) object);
    }

}

5.在activity中初始化viewPager和adapter

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.LinearLayout;

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

public class MainActivity extends AppCompatActivity {
    private ViewPager vp;
    private LinearLayout linearLayout;
    private List<ImageView> images = new ArrayList<>();
    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        linearLayout = findViewById(R.id.linearLayout);
        //找到vp
        vp = findViewById(R.id.vp);
         //初始化数据
        final List<Fragment> list = new ArrayList<>();
        final int [] image={R.mipmap.pic,R.mipmap.pic2,R.mipmap.pic3,R.mipmap.timg};
        for (int i = 1; i <5 ; i++) {
            MainFragment mainFragment = new MainFragment();
            Bundle bundle = new Bundle();
            bundle.putInt("image",image[i-1]);
            bundle.putString("content","第"+i+"个Fragment");
            mainFragment.setArguments(bundle);
            list.add(mainFragment);
        }
            //设置adapter
        vp.setAdapter(new FragmentStatePagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int i) {
                return list.get(i);
            }

            @Override
            public int getCount() {
                return list.size();
            }
        });

效果图如下:
在这里插入图片描述

自动翻页

import android.os.Handler;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;
import java.util.Timer;
import java.util.TimerTask;

public class Main2Activity extends AppCompatActivity {
   private ViewPager vp;
   private Handler handler = new Handler();

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main2);
       vp = findViewById(R.id.vp);
       final List<String> list = new ArrayList<>();
       int[] image ={R.mipmap.pic,R.mipmap.pic2,R.mipmap.pic3,R.mipmap.timg};
       for (int i = 1; i < 5; i++) {
           list.add("第"+i+"个");
       }
       vp.setAdapter(new MyVPAdapter(this,list,image));

//安卓自带的定时器方法
       Timer timer = new Timer();
       timer.schedule(new TimerTask() {
           int index=0;
           @Override
           public void run() {
               handler.post(new Runnable() {
                   @Override
                   public void run() {
                   //设置当前viewpager显示那个页面
                       vp.setCurrentItem(index);
                   }
               });
               index++;
               if (index==list.size()){
                   index=0;
               }

           }

       },0,2000);
       vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
           @Override
           public void onPageScrolled(int i, float v, int i1) {

           }

           @Override
           public void onPageSelected(int i) {
               Toast.makeText(Main2Activity.this,i+"",Toast.LENGTH_SHORT).show();
           }

           @Override
           public void onPageScrollStateChanged(int i) {

           }
       });
   }

翻页监听

1.设置方法

addOnPageChangeListener()

2.翻页监听接口

ViewPager.OnPageChangeListener

    vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int i) {
                for (int j = 0; j <list.size() ; j++) {
                    if (j==i){
                        images.get(j).setImageResource(R.drawable.circle_true);
                    }else{
                        images.get(j).setImageResource(R.drawable.circle_false);
                    }
                }
            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });

设置下方翻页圆点

1.在drawable文件下新建两个XML文件
显示当前页面的圆点设置

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#AD0842"></solid>
    <size android:width="10dp" android:height="10dp"></size>

</shape>

没有翻到的圆点设置

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#EB4EC2"></solid>
    <size android:width="10dp" android:height="10dp"></size>

</shape>

添加翻页的监听在onPageSelected实现

 vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int i) {
                for (int j = 0; j <list.size() ; j++) {
                    if (j==i){
                        images.get(j).setImageResource(R.drawable.circle_true);
                    }else{
                        images.get(j).setImageResource(R.drawable.circle_false);
                    }
                }
            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });

初始化,避免漏界面

 for (int i = 1; i <list.size()+1 ; i++) {

            imageView= new ImageView(this);
            if (i==1){
                imageView.setImageResource(R.drawable.circle_true);
            }else{
                imageView.setImageResource(R.drawable.circle_false);
            }

            linearLayout.addView(imageView);
            images.add(imageView);

        }

Activity完整代码

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.LinearLayout;

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

public class MainActivity extends AppCompatActivity {
    private ViewPager vp;
    private LinearLayout linearLayout;
    private List<ImageView> images = new ArrayList<>();
    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        linearLayout = findViewById(R.id.linearLayout);
        vp = findViewById(R.id.vp);
        final List<Fragment> list = new ArrayList<>();
        final int [] image={R.mipmap.pic,R.mipmap.pic2,R.mipmap.pic3,R.mipmap.timg};
        for (int i = 1; i <5 ; i++) {
            MainFragment mainFragment = new MainFragment();
            Bundle bundle = new Bundle();
            bundle.putInt("image",image[i-1]);
            bundle.putString("content","第"+i+"个Fragment");
            mainFragment.setArguments(bundle);
            list.add(mainFragment);
        }

        for (int i = 1; i <list.size()+1 ; i++) {

            imageView= new ImageView(this);
            if (i==1){
                imageView.setImageResource(R.drawable.circle_true);
            }else{
                imageView.setImageResource(R.drawable.circle_false);
            }

            linearLayout.addView(imageView);
            images.add(imageView);

        }
        vp.setAdapter(new FragmentStatePagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int i) {
                return list.get(i);
            }

            @Override
            public int getCount() {
                return list.size();
            }
        });

        vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int i) {
                for (int j = 0; j <list.size() ; j++) {
                    if (j==i){
                        images.get(j).setImageResource(R.drawable.circle_true);
                    }else{
                        images.get(j).setImageResource(R.drawable.circle_false);
                    }
                }
            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });


      }
}

zhoujiayin111111

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ViewPager的介绍和使用

ViewPager的介绍和使用ViewPager的介绍和使用自动翻页翻页监听设置下方翻页圆点ViewPager的介绍和使用使用效果图Viewpager，视图翻页工具，提供了多页面切换的效果。Android 3.0后引入的一个UI控件，位于v4包中。低版本使用需要导入v4包，但是现在我们开发的APP一般不再兼容3.0及以下的系统版本，另外现在大多数使用Android studio进行开发，...
复制链接

扫一扫