ViewPager——在Activity或Fragment中实现View左右滑动

小叮当不懒

已于 2022-10-23 15:28:46 修改

阅读量314

点赞数

分类专栏： Demo 文章标签： android viewpager

于 2021-03-27 17:17:02 首次发布

本文链接：https://blog.csdn.net/qq_46546793/article/details/115149805

版权

Demo 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

ViewPager和Activity实现滑动

XML文件

三个XML文件作为界面切换文件
work_clock.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="工作打卡页面"
        android:textSize="50sp"
        android:gravity="center"
        android:textStyle="bold"
        android:typeface="serif"/>

</androidx.constraintlayout.widget.ConstraintLayout>

work_log.xml 和 work_evaluate.xml文件和上述文件差不多。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

<!--    文本切换按钮-->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraint"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:layout_constraintTop_toTopOf="parent">

        <!--layout_weight这个属性为权重，让两个textview平分这个linearLayout-->
        <TextView
            android:id="@+id/work_clock"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:gravity="center"
            android:background="@color/purple_200"
            android:text="工作打卡"
            android:textColor="#000000"
            android:textSize="20sp"
            app:layout_constraintEnd_toStartOf="@+id/work_log"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent" />

        <TextView
            android:id="@+id/work_log"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:gravity="center"
            android:background="@color/design_default_color_secondary"
            android:text="工作日志"
            android:textColor="#000000"
            android:textSize="20sp"
            app:layout_constraintEnd_toStartOf="@+id/work_evaluate"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/work_clock" />

        <TextView
            android:id="@+id/work_evaluate"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="工作评价"
            android:background="@color/cardview_dark_background"
            android:textColor="#000000"
            android:textSize="20sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/work_log" />

    </androidx.constraintlayout.widget.ConstraintLayout>

<!--    滚动条-->
    <ImageView
        android:id="@+id/scrollbar"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_below="@id/constraint"
        android:scaleType="matrix"
        android:src="@drawable/salary"
        app:layout_constraintTop_toBottomOf="@+id/constraint" />

<!--    容器，viewpager实现滑动-->
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/scrollbar">
    </androidx.viewpager.widget.ViewPager>

</androidx.constraintlayout.widget.ConstraintLayout>

Java文件

package com.hnucm.myapplication;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;

import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private ViewPager viewPager;
    private ArrayList<View> pageview;
    private TextView workClockLayout;
    private TextView workLogLayout;
    private TextView workEvaluateLayout;
    // 滚动条图片
    private ImageView scrollbar;
    // 滚动条初始偏移量
    private int offset = 0;
    // 当前页编号
    private int currIndex = 0;
    // 滚动条宽度
    private int bmpW;
    //一倍滚动量
    private int one;
    //两倍滚动量
    private int two;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //初始化viewPager
        viewPager = findViewById(R.id.viewPager);
        //查找布局文件用LayoutInflater.inflate
        LayoutInflater inflater = getLayoutInflater();
        //查找布局文件，三个页面
        View workClock = inflater.inflate(R.layout.work_clock, null);
        View workLog = inflater.inflate(R.layout.work_log, null);
        View workEvaluate = inflater.inflate(R.layout.work_evaluate, null);
        //初始化文本按钮
        workClockLayout = findViewById(R.id.work_clock);
        workLogLayout = findViewById(R.id.work_log);
        workEvaluateLayout = findViewById(R.id.work_evaluate);
        //点击切换页面
        workClockLayout.setOnClickListener(this);
        workLogLayout.setOnClickListener(this);
        workEvaluateLayout.setOnClickListener(this);
        //初始化界面数组
        pageview = new ArrayList<View>();
        //添加想要切换的界面
        pageview.add(workClock);
        pageview.add(workLog);
        pageview.add(workEvaluate);
        //初始化滚动条
        initScrollbar();
        //数据适配器
        PagerAdapter mPagerAdapter = new PagerAdapter() {

            @Override
            //获取当前窗体界面数
            public int getCount() {
                // TODO Auto-generated method stub
                return pageview.size();
            }

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

            //使从ViewGroup中移出当前View
            public void destroyItem(View arg0, int arg1, Object arg2) {
                ((ViewPager) arg0).removeView(pageview.get(arg1));
            }

            //返回一个对象，这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPager中
            public Object instantiateItem(View arg0, int arg1) {
                ((ViewPager) arg0).addView(pageview.get(arg1));
                return pageview.get(arg1);
            }
        };
        //绑定适配器
        viewPager.setAdapter(mPagerAdapter);
        //设置viewPager的初始界面为第一个界面
        viewPager.setCurrentItem(0);
        //添加切换界面的监听器
        viewPager.addOnPageChangeListener(new MyOnPageChangeListener());
    }

    //滚动条设置
    public void initScrollbar() {
        //初始化滚动条
        scrollbar = findViewById(R.id.scrollbar);
        // 获取滚动条的宽度
        bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.salary).getWidth();
        //为了获取屏幕宽度，新建一个DisplayMetrics对象
        DisplayMetrics displayMetrics = new DisplayMetrics();
        //将当前窗口的一些信息放在DisplayMetrics类中
        getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        //得到屏幕的宽度
        int screenW = displayMetrics.widthPixels;
        //计算出滚动条初始的偏移量
        offset = (screenW / pageview.size() - bmpW) / 2;
        //计算出切换一个界面时，滚动条的位移量
        // 页卡1 -> 页卡2 偏移量
        one = offset * 2 + bmpW;
        // 页卡1 -> 页卡3 偏移量
        two = one * 2;
        Matrix matrix = new Matrix();
        matrix.postTranslate(offset, 0);
        //将滚动条的初始位置设置成与左边界间隔一个offset
        scrollbar.setImageMatrix(matrix);

    }

    //切换界面时的监听事件
    public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        public void onPageSelected(int arg0) {
            //页面切换
            Animation animation = null;
            switch (arg0) {
                case 0:
                    /**
                     * TranslateAnimation的四个属性分别为
                     * float fromXDelta 动画开始的点离当前View X坐标上的差值
                     * float toXDelta 动画结束的点离当前View X坐标上的差值
                     * float fromYDelta 动画开始的点离当前View Y坐标上的差值
                     * float toYDelta 动画开始的点离当前View Y坐标上的差值
                     **/
                    //跳转第一个页面的滑动过程
                    if (currIndex == 1) {
                        animation = new TranslateAnimation(one, 0, 0, 0);
                    } else if (currIndex == 2) {
                        animation = new TranslateAnimation(two, 0, 0, 0);
                    }
                    break;
                case 1:
                    //跳转第二个界面的滑动过程
                    if (currIndex == 0) {
                        animation = new TranslateAnimation(offset, one, 0, 0);
                    } else if (currIndex == 2) {
                        animation = new TranslateAnimation(two, one, 0, 0);
                    }
                    break;
                case 2:
                    //跳转第三个界面的滑动过程
                    if (currIndex == 0) {
                        animation = new TranslateAnimation(offset, two, 0, 0);
                    } else if (currIndex == 1) {
                        animation = new TranslateAnimation(one, two, 0, 0);
                    }
                    break;
            }
            //arg0为切换到的页的编码
            currIndex = arg0;
//            System.out.println("当前第" + (currIndex + 1) + "页");
            // 将此属性设置为true可以使得图片停在动画结束时的位置
            animation.setFillAfter(true);
            //动画持续时间，单位为毫秒
            animation.setDuration(200);
            //滚动条开始动画
            scrollbar.startAnimation(animation);
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
            /*从右往左滚动：
            arg0：滚动时代表当前页数角标，滚动结束表示滚动停止时的页数角标
            arg1：0 – 1 变化
            arg2：从0到屏幕的宽度数值*/

           /* 从左往右滚动：
            arg0：滚动时代表目标页的角标，滚动结束表示滚动停止时的页数角标
            arg1：1 – 0 变化
            arg2：从屏幕的宽度数值到0
            */
//            Log.e("Scroll", "arg0：" + arg0);
//            Log.e("Scroll", "arg1：" + arg1);
//            Log.e("Scroll", "arg2：" + arg2);
        }

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
    }

    @Override
    //点击切换页面的具体实现
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.work_clock:
                //点击"工作打卡“时切换到第一页
                viewPager.setCurrentItem(0);
                break;
            case R.id.work_log:
                //点击“工作日志”时切换的第二页
                viewPager.setCurrentItem(1);
                break;
            case R.id.work_evaluate:
                //点击“工作评价”时切换的第三页
                viewPager.setCurrentItem(2);
                break;
        }
    }
}

ViewPager和Fragment实现滑动

XML文件

XML文件和上面的一样，并无变化。

Java文件

package com.hnucm.managersystem.fragment;

import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.os.Bundle;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
import com.hnucm.managersystem.R;
import java.util.ArrayList;

public class WorkFragment extends Fragment implements View.OnClickListener{
    private ViewPager viewPager;
    private ArrayList<View> pageview;
    private TextView workClockLayout;
    private TextView workLogLayout;
    private TextView workEvaluateLayout;
    // 滚动条图片
    private ImageView scrollbar;
    // 滚动条初始偏移量
    private int offset = 0;
    // 当前页编号
    private int currIndex = 0;
    // 滚动条宽度
    private int bmpW;
    //一倍滚动量
    private int one;
    //两倍滚动量
    private int two;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_work, container, false);
    }


    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        //初始化viewPager
        viewPager = (ViewPager) getActivity().findViewById(R.id.viewPager);
        //查找布局文件用LayoutInflater.inflate
        LayoutInflater inflater =getLayoutInflater();
        //查找布局文件，三个页面
        View workClock = inflater.inflate(R.layout.work_clock, null);
        View workLog = inflater.inflate(R.layout.work_log, null);
        View workEvaluate = inflater.inflate(R.layout.work_evaluate,null);
        //初始化文本按钮
        workClockLayout = getActivity().findViewById(R.id.work_clock);
        workLogLayout = getActivity().findViewById(R.id.work_log);
        workEvaluateLayout = getActivity().findViewById(R.id.work_evaluate);
        //点击切换页面
        workClockLayout.setOnClickListener(this);
        workLogLayout.setOnClickListener(this);
        workEvaluateLayout.setOnClickListener(this);
        //初始化界面数组
        pageview =new ArrayList<View>();
        //添加想要切换的界面
        pageview.add(workClock);
        pageview.add(workLog);
        pageview.add(workEvaluate);
        //初始化滚动条
        initScrollbar();
        //数据适配器
        PagerAdapter mPagerAdapter = new PagerAdapter(){

            @Override
            //获取当前窗体界面数
            public int getCount() {
                // TODO Auto-generated method stub
                return pageview.size();
            }

            @Override
            //判断是否由对象生成界面
            public boolean isViewFromObject(View arg0, Object arg1) {
                // TODO Auto-generated method stub
                return arg0==arg1;
            }
            //使从ViewGroup中移出当前View
            public void destroyItem(View arg0, int arg1, Object arg2) {
                ((ViewPager) arg0).removeView(pageview.get(arg1));
            }

            //返回一个对象，这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPager中
            public Object instantiateItem(View arg0, int arg1){
                ((ViewPager)arg0).addView(pageview.get(arg1));
                return pageview.get(arg1);
            }
        };
        //绑定适配器
        viewPager.setAdapter(mPagerAdapter);
        //设置viewPager的初始界面为第一个界面
        viewPager.setCurrentItem(0);
        //添加切换界面的监听器
        viewPager.addOnPageChangeListener(new MyOnPageChangeListener());
    }

    //滚动条设置
    public void initScrollbar(){
        //初始化滚动条
        scrollbar = getActivity().findViewById(R.id.scrollbar);
        // 获取滚动条的宽度
        bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.salary).getWidth();
        //为了获取屏幕宽度，新建一个DisplayMetrics对象
        DisplayMetrics displayMetrics = new DisplayMetrics();
        //将当前窗口的一些信息放在DisplayMetrics类中
        getActivity().getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        //得到屏幕的宽度
        int screenW = displayMetrics.widthPixels;
        //计算出滚动条初始的偏移量
        offset = (screenW / pageview.size() - bmpW) / 2;
        //计算出切换一个界面时，滚动条的位移量
        // 页卡1 -> 页卡2 偏移量
        one = offset * 2 + bmpW;
        // 页卡1 -> 页卡3 偏移量
        two = one * 2;
        Matrix matrix = new Matrix();
        matrix.postTranslate(offset, 0);
        //将滚动条的初始位置设置成与左边界间隔一个offset
        scrollbar.setImageMatrix(matrix);

    }

    //切换界面时的监听事件
    public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        public void onPageSelected(int arg0) {
            //页面切换
            Animation animation = null;
            switch (arg0) {
                case 0:
                    /**
                     * TranslateAnimation的四个属性分别为
                     * float fromXDelta 动画开始的点离当前View X坐标上的差值
                     * float toXDelta 动画结束的点离当前View X坐标上的差值
                     * float fromYDelta 动画开始的点离当前View Y坐标上的差值
                     * float toYDelta 动画开始的点离当前View Y坐标上的差值
                     **/
                    //跳转第一个页面的滑动过程
                    if (currIndex == 1) {
                        animation = new TranslateAnimation(one, 0, 0, 0);
                    } else if (currIndex == 2) {
                        animation = new TranslateAnimation(two, 0, 0, 0);
                    }
                    break;
                case 1:
                    //跳转第二个界面的滑动过程
                    if (currIndex == 0) {
                        animation = new TranslateAnimation(offset, one, 0, 0);
                    } else if (currIndex == 2) {
                        animation = new TranslateAnimation(two, one, 0, 0);
                    }
                    break;
                case 2:
                    //跳转第三个界面的滑动过程
                    if (currIndex == 0) {
                        animation = new TranslateAnimation(offset, two, 0, 0);
                    } else if (currIndex == 1) {
                        animation = new TranslateAnimation(one, two, 0, 0);
                    }
                    break;
            }
            //arg0为切换到的页的编码
            currIndex = arg0;
//            System.out.println("当前第" + (currIndex + 1) + "页");
            // 将此属性设置为true可以使得图片停在动画结束时的位置
            animation.setFillAfter(true);
            //动画持续时间，单位为毫秒
            animation.setDuration(200);
            //滚动条开始动画
            scrollbar.startAnimation(animation);
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
            /*从右往左滚动：
            arg0：滚动时代表当前页数角标，滚动结束表示滚动停止时的页数角标
            arg1：0 – 1 变化
            arg2：从0到屏幕的宽度数值*/

           /* 从左往右滚动：
            arg0：滚动时代表目标页的角标，滚动结束表示滚动停止时的页数角标
            arg1：1 – 0 变化
            arg2：从屏幕的宽度数值到0
            */
//            Log.e("Scroll", "arg0：" + arg0);
//            Log.e("Scroll", "arg1：" + arg1);
//            Log.e("Scroll", "arg2：" + arg2);
        }

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
    }

    @Override
    //点击切换页面的具体实现
    public void onClick(View view){
        switch (view.getId()){
            case R.id.work_clock:
                //点击"工作打卡“时切换到第一页
                viewPager.setCurrentItem(0);
                break;
            case R.id.work_log:
                //点击“工作日志”时切换的第二页
                viewPager.setCurrentItem(1);
                break;
            case R.id.work_evaluate:
                //点击“工作评价”时切换的第三页
                viewPager.setCurrentItem(2);
                break;
        }
    }
}

小叮当不懒

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ViewPager——在Activity或Fragment中实现View左右滑动

目录ViewPager和Activity实现滑动XML文件Java文件ViewPager和Fragment实现滑动XML文件Java文件ViewPager和Activity实现滑动XML文件三个XML文件作为界面切换文件work_clock.xml<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://
复制链接

扫一扫