Android学习-简易ViewPager的使用教程与Demo演示

最新推荐文章于 2023-06-20 08:00:00 发布
最新推荐文章于 2023-06-20 08:00:00 发布
阅读量105 收藏
点赞数
文章标签： 移动开发
原文链接：https://my.oschina.net/ryaneLee/blog/648837
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

摘要：最近在项目开发中使用到了ViewPager，结合自己几天下来的学习，总结一下ViewPager的使用方法以及实现过程。

实例效果

<!-- more -->

前言

这是谷歌官方文档给我们提供的一个兼容包里面的类，它说我们的ViewPager通常是配合Fragment使用的，而官方是提供了FragmentPagerAdapter和FragmentStatePagerAdapter两种方便我们将ViewPager和Fragment配合使用。下面我们主要讲ViewPager+Fragment的使用。

Demo剖析

这个Demo的难点主要在以下三部分，那么我们下面就对这三个部分进行剖析。

一、top_bar部分

这部分我们只需要设置一个外布局为LinearLayout（注意！这个Layout的高度一定不能为match_parent，只能为wrap_content，因为如果你这里使用了match_parent的话，那么就会遮挡了下面的ViewPager控件，详见我的main.xml布局文件以及top_bar.xml 布局文件，我的主布局为了代码布局清晰，所以通过定义了top_bar的layout，然后通过引入即可。）

二、下标部分

下标部分我们是通过一个imageview来实现。将此ImageView的背景设为一个蓝色的点九图，然后再逻辑文件中设置它的长度以及在滑动时的位置变化即可。

设置滑动条的宽度

/**
 * 设置滑动条的宽度为屏幕的1/3(根据Tab的个数而定)
 */
private void initTabLineWidth() {
	DisplayMetrics dpMetrics = new DisplayMetrics();
    getWindow().getWindowManager().getDefaultDisplay().getMetrics(dpMetrics);
    screenWidth = dpMetrics.widthPixels;
    LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) tab.getLayoutParams();
    lp.width = screenWidth / 3;
    tab.setLayoutParams(lp);
}

在onPagerScrolled方法中设置滑动条的位置变化


@Override
public void onPageScrolled(int position, float offset,
                           int offsetPixels) {
    LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) tablineIv.getLayoutParams();
    Log.i("mOffset", "offset:" + offset + ",position:" + position);
    /**
     * 利用currentIndex(当前所在页面)和position(下一个页面)以及offset来
     * 设置mTabLineIv的左边距 滑动场景：
     * 记3个页面,
     * 从左到右分别为0,1,2
     * 0->1; 1->2; 2->1; 1->0
     */
    if (currentIndex == 0 && position == 0)// 0->1
    {
        lp.leftMargin = (int) (offset * (screenWidth * 1.0 / 3) + currentIndex
                * (screenWidth / 3));

    } else if (currentIndex == 1 && position == 0) // 1->0
    {
        lp.leftMargin = (int) (-(1 - offset)
                * (screenWidth * 1.0 / 3) + currentIndex
                * (screenWidth / 3));

    } else if (currentIndex == 1 && position == 1) // 1->2
    {
        lp.leftMargin = (int) (offset * (screenWidth * 1.0 / 3) + currentIndex
                * (screenWidth / 3));
    } else if (currentIndex == 2 && position == 1) // 2->1
    {
        lp.leftMargin = (int) (-(1 - offset)
                * (screenWidth * 1.0 / 3) + currentIndex
                * (screenWidth / 3));
    }
    tablineIv.setLayoutParams(lp);
}

三、ViewPager实现部分

ViewPager的实现主要通过以下步骤：

  1. 把包含的Fragement存放到一个容器List里面去

  2. 创建一个FragmentPagerAdapter

  3. 为ViewPager绑定此FragmentPagerAdapter

  4. ViewPager设置默认当前的项

  5. ViewPager设置监听器，需要重写onPageScrollStateChanged，onPageScrolled，onPageSelected三个方法

代码实现

一、界面部分

在界面部分，需要将我们的顶部的内容和ViewPager分开。如下我们将top_bar内容和ViewPager分开。

main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- 顶部的内容 -->
    <include layout="@layout/top_bar" />

    <!-- ViewPager -->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </android.support.v4.view.ViewPager>

</LinearLayout>

top_bar.xml


<?xml version="1.0" encoding="utf-8"?>
<!--注意最外层布局的高度不能使用match_parent，不然将会遮挡了ViewPager部分-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:baselineAligned="false"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/mainTv"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="首页"
            android:textColor="#0000FF"
            android:textSize="18dp" />

        <TextView
            android:id="@+id/momentTv"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="朋友圈"
            android:textColor="@android:color/black"
            android:textSize="18dp" />

        <TextView
            android:id="@+id/settingTv"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="设置"
            android:textColor="@android:color/black"
            android:textSize="18dp" />


    </LinearLayout>

    <ImageView
        android:id="@+id/iv_tabline"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:contentDescription="tab"
        android:background="@drawable/tab" >
    </ImageView>

</LinearLayout>

还有我们的三个Fragment界面，基本一致。

fragment_main.xml


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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="首页"/>

</LinearLayout>

fragment_moment.xml


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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="朋友圈"/>

</LinearLayout>

fragment_setting.xml


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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="设置"/>

</LinearLayout>

二、逻辑代码

MainActivity.java


package com.example.ryan.viewpagerdemo;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.util.Log;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

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

/**
 * MainActivity需要继承FragmentActivity
 */
public class MainActivity extends FragmentActivity {

    private ViewPager viewPager;

    private List<Fragment> mFragmentList = new ArrayList<Fragment>();
    private FragmentAdapter mFragmentAdapter;

    //Tab显示内容TextView
    private TextView mainTv, momentTv, settingTv;
    //Tab的那个引导线
    private ImageView tablineIv;

    //三个Fragment页面
    private MainFragment mainFg;
    private MomentFragment momentFg;
    private SettingFragment settingFg;

    //ViewPager的当前选中页
    private int currentIndex;

    //屏幕的宽度
    private int screenWidth;

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

    }

    /**
     * 找到控件ID
     */
    private void findById() {
        mainTv = (TextView) this.findViewById(R.id.mainTv);
        momentTv = (TextView) this.findViewById(R.id.momentTv);
        settingTv = (TextView) this.findViewById(R.id.settingTv);
        tablineIv = (ImageView) this.findViewById(R.id.iv_tabline);
        viewPager = (ViewPager) this.findViewById(R.id.viewpager);
    }

    /**
     * 初始化ViewPager和设置监听器
     */
    private void init() {
        mainFg = new MainFragment();
        momentFg = new MomentFragment();
        settingFg = new SettingFragment();
        //将三个页面添加到容器里面
        mFragmentList.add(mainFg);
        mFragmentList.add(momentFg);
        mFragmentList.add(settingFg);

        //重写一个FragmentAdapter继承FragmentPagerAdapter，需要传FragmentManager和存放页面的容器过去
        mFragmentAdapter = new FragmentAdapter(this.getSupportFragmentManager(), mFragmentList);
        //ViewPager绑定监听器
        viewPager.setAdapter(mFragmentAdapter);
        //ViewPager设置默认当前的项
        viewPager.setCurrentItem(0);
        //ViewPager设置监听器，需要重写onPageScrollStateChanged，onPageScrolled，onPageSelected三个方法
        viewPager.addOnPageChangeListener(new OnPageChangeListener() {

            /**
             * state滑动中的状态 有三种状态（0，1，2） 1：正在滑动 2：滑动完毕 0：什么都没做。
             * 三个方法的执行顺序为：用手指拖动翻页时，最先执行一遍onPageScrollStateChanged（1），
             * 然后不断执行onPageScrolled，放手指的时候，直接立即执行一次onPageScrollStateChanged（2），
             * 然后立即执行一次onPageSelected，然后再不断执行onPageScrolled，
             * 最后执行一次onPageScrollStateChanged（0）。
             */

            /**
             * state滑动中的状态 有三种状态（0，1，2） 1：正在滑动 2：滑动完毕 0：什么都没做。
             */
            @Override
            public void onPageScrollStateChanged(int state) {
                Log.i("PageScroll：", "onPageScrollStateChanged" + ":" + state);
            }

            /**
             * position :当前页面，及你点击滑动的页面 offset:当前页面偏移的百分比
             * offsetPixels:当前页面偏移的像素位置
             */
            @Override
            public void onPageScrolled(int position, float offset,
                                       int offsetPixels) {
                LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) tablineIv.getLayoutParams();
                Log.i("mOffset", "offset:" + offset + ",position:" + position);
                /**
                 * 利用currentIndex(当前所在页面)和position(下一个页面)以及offset来
                 * 设置mTabLineIv的左边距 滑动场景：
                 * 记3个页面,
                 * 从左到右分别为0,1,2
                 * 0->1; 1->2; 2->1; 1->0
                 */
                if (currentIndex == 0 && position == 0)// 0->1
                {
                    lp.leftMargin = (int) (offset * (screenWidth * 1.0 / 3) + currentIndex
                            * (screenWidth / 3));

                } else if (currentIndex == 1 && position == 0) // 1->0
                {
                    lp.leftMargin = (int) (-(1 - offset)
                            * (screenWidth * 1.0 / 3) + currentIndex
                            * (screenWidth / 3));

                } else if (currentIndex == 1 && position == 1) // 1->2
                {
                    lp.leftMargin = (int) (offset * (screenWidth * 1.0 / 3) + currentIndex
                            * (screenWidth / 3));
                } else if (currentIndex == 2 && position == 1) // 2->1
                {
                    lp.leftMargin = (int) (-(1 - offset)
                            * (screenWidth * 1.0 / 3) + currentIndex
                            * (screenWidth / 3));
                }
                tablineIv.setLayoutParams(lp);
            }

            /**
             * 将当前选择的页面的标题设置字体颜色为蓝色
             */
            @Override
            public void onPageSelected(int position) {
                Log.i("PageScroll：", "onPageSelected" + ":" + position);
                resetTextView();
                switch (position) {
                    case 0:
                        mainTv.setTextColor(Color.BLUE);
                        break;
                    case 1:
                        momentTv.setTextColor(Color.BLUE);
                        break;
                    case 2:
                        settingTv.setTextColor(Color.BLUE);
                        break;
                }
                currentIndex = position;
            }
        });

    }

    /**
     * 设置滑动条的宽度为屏幕的1/3(根据Tab的个数而定)
     */
    private void initTabLineWidth() {
        DisplayMetrics dpMetrics = new DisplayMetrics();
        getWindow().getWindowManager().getDefaultDisplay().getMetrics(dpMetrics);
        screenWidth = dpMetrics.widthPixels;
        LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) tablineIv.getLayoutParams();
        lp.width = screenWidth / 3;
        tablineIv.setLayoutParams(lp);
    }

    /**
     * 重置颜色
     */
    private void resetTextView() {
        mainTv.setTextColor(Color.BLACK);
        momentTv.setTextColor(Color.BLACK);
        settingTv.setTextColor(Color.BLACK);
    }

}

FragmentAdapter.java


package com.example.ryan.viewpagerdemo;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

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

public class FragmentAdapter extends FragmentPagerAdapter {

    List<Fragment> fragmentList = new ArrayList<Fragment>();
    public FragmentAdapter(FragmentManager fm,List<Fragment> fragmentList) {
        super(fm);
        this.fragmentList = fragmentList;
    }

    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }

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

}

源码下载

ps：此Demo是使用Android Studio编写的，请使用AS打开。

下载地址：http://download.csdn.net/detail/ljcitworld/9474994

Github地址：https://github.com/ryanlijianchang/ViewPagerDemo

转载于:https://my.oschina.net/ryaneLee/blog/648837

weixin_33909059
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android ViewpagerDemo
09-14
Android ViewPager使用实例，内存回收，如何复用等.
android ViewPagerDemo
10-15
给Android移动开发初级开发者的资源，写的不好，请多多指教
Android 之 ViewPager 的简单使用
最新发布
leyang0910的博客
06-20 4330
ViewPager就是一个简单的页面切换组件，我们可以往里面填充多个View，然后我们可以左 右滑动，从而切换不同的View，我们可以通过setPageTransformer()方法为我们的ViewPager 设置切换时的动画效果，当然，动画我们还没学到，所以我们把为ViewPager设置动画 放到下一章绘图与动画来讲解！
AndroidUI-ViewPager简单demo模仿App翻页效果
Kid_TH的博客
01-09 3672
ViewPager简单demo模仿App翻页效果效果图 首先创建引导界面和布局： MyGuide.java myguide.xmlmyguide.xml<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
Android ViewPager 垂直滑动 纵向滑动 VerticalViewPager
Qzhongwenze的博客
10-19 916
转载自：http://blog.csdn.net/tiantianshangcha/article/details/50804954 项目里头需要用到一个在垂直方向滑动页签的效果， 这可难道宝宝了，不过google 还是强大的 ， 在stackoverflow 找到了人生的真谛。 具体链接 传送门 特么的里面居然出现了四五种方案，选择困难症啊。。。。。。
androidx-auto-scroll-view-pager:自动滚动ViewPager与Androidx库一起使用
05-24
与AndroidX库兼容的ViewPager。 用Kotlin编写的ViewPager并已得到长期支持。谢谢非常感谢因为该图书馆是他的最新Kotlin版本。 我们支持AndroidX库，因此，如果您在迁移到AndroidX时遇到问题，则此版本应该可以正常...
android-sticky-viewpager.zip
07-30
【标题】"android-sticky-viewpager.zip"是一个与Android开发相关的压缩包，它包含了一个名为"android-sticky-viewpager-master"的项目源码。这个项目很可能是为了实现一个具有粘性（sticky）效果的ViewPager组件。...
Android代码-Navigation Viewpager – Live-O
08-06
NavigationDrawer ViewPage (Example) Example material design app: NavigationDrawerViewPage Live-O How to use? Very simple! : D Duvida ou sugestões (Questions or suggestions) Nome: Rudson Lima ...
Android照片墙加强版，使用ViewPager实现画廊效果Demo
11-13
通过这个Demo，开发者向我们展示了如何利用Android的ViewPager组件构建一个功能丰富的照片墙应用，涵盖了图片加载、布局设计、手势识别等多个关键点。如果你想要深入了解或复制这个功能，可以从提供的...
Android-把ViewPager的PageTransformer显示为堆栈
08-13
"Android-把ViewPager的PageTransformer显示为堆栈"这个主题就是关于如何实现一个让ViewPager页面在滑动时呈现出类似堆栈卡片效果的教程。 首先，我们需要理解PageTransformer接口。这个接口提供了一个`...
android ViewPager应用demo
11-04
利用ViewPager实现屏幕的滑动，里面有三个简单的demo，分别是：屏幕滑动，表情滑动，惯性滑动。希望程序的思路对您有所用。
android viewpager demo
09-29
android viewpager用法，易扩展易懂
Android的ViewPager的三种用法Demo
01-20
Demo中有三个功能：1.简单手滑图片ViewPager+底部小圆点导航；2.简单手滑图片可缩放ViewPager+底部小圆点导航；3.简单图片自动轮播ViewPager+底部小圆点导航
ViewPagerDemo
07-16
ViewPagerDemo 这是我博客里的demo代码
ViewPager引导界面Demo
01-22
ViewPager做引导界面，并解决了ViewPager向右滑动到最后，再向右滑动无法实现界面跳转的问题。
Android ViewPager实现引导页
oden的博客
08-15 885
Android ViewPager实现引导页概述利用ViewPager简单地实现引导页功能，到达最后一页后再次滑动跳转到其他Activityxml布局放入ViewPager控件，同时放入几个小圆点图片用来指示当前滑到第几页<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.andro
Android的Viewpager视差滑动效果小demo
dreamsever的专栏
10-28 2340
Android的Viewpager视差滑动效果前言以前下载app，发现有的app的欢迎页做的是动态的视差的那种效果，作为一个比较关心技术的，又有点懒惰的Android开发者我虽然一直对这个效果耿耿于怀，但是一直没有去动手实现。最近发现一个理财app上面有Viewpager的滑动视差效果，就想试着实现下，先看效果：目标效果：实现效果：实现关于这种视差效果我在网上也是找了好几种实现，感觉比较符合我想要的
Android-ViewPager的使用
Kid_TH的博客
04-05 1892
Android-ViewPager的使用ViewPager是安卓App很常用的工具类，通常是用来设置界面导航，比如微信，QQ都是使用这种，还有就是新闻类App，很常见 比如： 这就是一个典型的例子。 复习一下这个知识点。大致步骤和之前的ListView差不多。 1.构造适配器 2.数据源 3.加载适配器 activity_main.xml<LinearLayout xmlns:a
AndroidViewPager使用详解
03-02
使用Android ViewPager的基本步骤如下： 1. 集成至布局文件: 在XML布局文件中，你需要添加`<android.support.v4.view.ViewPager>`组件。这是一个用于承载多个子视图并实现滑动切换的关键组件，通过指定`android:id...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值