zl程序教程

您现在的位置是:首页 >  移动开发

当前栏目

Android ViewPager 实现滑动效果

Android 实现 效果 滑动 Viewpager
2023-09-14 09:04:24 时间

效果图:

图1:

在这里插入图片描述

图2:

在这里插入图片描述

图3:

在这里插入图片描述

activity_main.xml:

<?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"
android:orientation="horizontal"
tools:context=".MainActivity">

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

</RelativeLayout>

ly_one.xml:

<?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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="界面一"
        android:textColor="#000"
        android:textSize="50dp"
        android:layout_centerInParent="true"/>

</RelativeLayout>

ly_two.xml:

<?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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="界面二"
        android:textColor="#000"
        android:textSize="50dp"
        android:layout_centerInParent="true"/>

</RelativeLayout>

ly_three.xml:

<?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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="界面一"
        android:textColor="#000"
        android:textSize="50dp"
        android:layout_centerInParent="true"/>

</RelativeLayout>

MyPagerAdapter.java:

public class MyPagerAdapter extends PagerAdapter {
    private ArrayList<View> pageList = null;        /// 接收构造方法中传来的view

    public MyPagerAdapter(ArrayList<View> pageList) {
        this.pageList = pageList;
    }

    @Override
    public int getCount() {
        return pageList.size();     //  返回 view 列表的大小,即 view 的数目
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return view == object;  //  返回当前显示的 view 是否与列表中的对象一致
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        View pageView = pageList.get(position); //  获取当前位置的 view
        container.addView(pageView);        //  设置当前 view 为显示对象
        return pageView;
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView(pageList.get(position));       //移除当前位置的额view
    }
}

MainActivity.java:

public class MainActivity extends AppCompatActivity  {
    private ViewPager viewPager;
    private View lyOne,lyTwo,lyThree;
    private ArrayList<View> viewArrayList = null;
    private MyPagerAdapter adapter = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = findViewById(R.id.viewpager);
        /**
         *      获取三个布局文件,生成 View 对象
         */
        LayoutInflater inflater = getLayoutInflater();
        lyOne = inflater.inflate(R.layout.ly_one,null);
        lyTwo = inflater.inflate(R.layout.ly_two,null);
        lyThree = inflater.inflate(R.layout.ly_three,null);

        viewArrayList = new ArrayList<>();  //存储类型为 View
        viewArrayList.add(lyOne);           // 将每一个 view 对象添加到集合中
        viewArrayList.add(lyTwo);
        viewArrayList.add(lyThree);

        //  让 PagerAdapter 梳理一下这些 view界面 的数据源,将 viewArrayList 集合传入
        adapter = new MyPagerAdapter(viewArrayList);

        //  最后给 viewPager 设置数据源
        viewPager.setAdapter(adapter);
    }

}

点击运行即可!~