ViewPage滑动页面（1）

最新推荐文章于 2019-04-01 16:55:35 发布
原创 最新推荐文章于 2019-04-01 16:55:35 发布 · 572 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种使用ViewPager和Tab栏实现滑动效果的方法。通过设置ViewPager的Adapter，并结合底部Tab栏的点击和切换事件，实现了页面间的平滑切换及Tab栏的状态更新。

本博客是观看immoc上面的视频解说然后自己整理得到的，源码也是imooc上面的，谢谢。
第一种完成的方法：（使用传统的xml文件，重量级）
1、设置布局，其中需要注意的是ViewPager是在v4的包中，所以标签应该注明是v4包中的ViewPager的class文件，如下格式

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

2、初始化界面，将界面中的所有控件都找到，主要是ViewPager，然后给ViewPager设置Adapter,实现Adapter需要实现4个方法，分别是

getCount()
isViewFromObject
destroyItem(ViewGroup container, int position, Object object)
instantiateItem(ViewGroup container, int position)

而我们需要为我们的ViewPager里面放置多少个View可供滑动，那么我们需要使用一个List的集合进行保存我们的View对象，例如如下代码：

List<View>mViews=new List<View>();

通过寻找控件，然后设置适配器，我们已经可以实现ViewPager的滑动和界面的初始化，但是在这个时候我们滑动的时候我们的底下的图标并没有变化，同时底部的图标并没有点击事件。
3、最后是设置点击事件，滑动事件，为此我们需要为底部的按钮设置点击事件，通过判断id，然后我们可以实现将底部的按钮的颜色进行变化，同时将ViewPager.currentItem();设置为我们需要的。
而滑动事件，是为ViewPager进行监听，通过判断最后是滑动到那个状态，我们可以通过获取当前滑动的页面，然后进行替换。
具体代码如下：

package com.imooc.tab01;

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

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends Activity implements OnClickListener
{

    private ViewPager mViewPager;
    private PagerAdapter mAdapter;
    private List<View> mViews = new ArrayList<View>();
    // TAB

    private LinearLayout mTabWeixin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabAddress;
    private LinearLayout mTabSetting;

    private ImageButton mWeixinImg;
    private ImageButton mFrdImg;
    private ImageButton mAddressImg;
    private ImageButton mSettingImg;

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

        initView();

        initEvents();

    }

    private void initEvents()
    {
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabAddress.setOnClickListener(this);
        mTabSetting.setOnClickListener(this);

        mViewPager.setOnPageChangeListener(new OnPageChangeListener()
        {

            @Override
            public void onPageSelected(int arg0)
            {
                int currentItem = mViewPager.getCurrentItem();
                resetImg();
                switch (currentItem)
                {
                case 0:
                    mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
                    break;
                case 1:
                    mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
                    break;
                case 2:
                    mAddressImg
                            .setImageResource(R.drawable.tab_address_pressed);
                    break;
                case 3:
                    mSettingImg
                            .setImageResource(R.drawable.tab_settings_pressed);
                    break;

                }

            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2)
            {

            }

            @Override
            public void onPageScrollStateChanged(int arg0)
            {

            }
        });
    }

    private void initView()
    {
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
        // tabs
        mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
        mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
        mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);
        mTabSetting = (LinearLayout) findViewById(R.id.id_tab_settings);
        // ImageButton
        mWeixinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img);
        mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img);
        mAddressImg = (ImageButton) findViewById(R.id.id_tab_address_img);
        mSettingImg = (ImageButton) findViewById(R.id.id_tab_settings_img);

        LayoutInflater mInflater = LayoutInflater.from(this);
        View tab01 = mInflater.inflate(R.layout.tab01, null);
        View tab02 = mInflater.inflate(R.layout.tab02, null);
        View tab03 = mInflater.inflate(R.layout.tab03, null);
        View tab04 = mInflater.inflate(R.layout.tab04, null);
        mViews.add(tab01);
        mViews.add(tab02);
        mViews.add(tab03);
        mViews.add(tab04);

        mAdapter = new PagerAdapter()
        {

            @Override
            public void destroyItem(ViewGroup container, int position,
                    Object object)
            {
                container.removeView(mViews.get(position));
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position)
            {
                View view = mViews.get(position);
                container.addView(view);
                return view;
            }

            @Override
            public boolean isViewFromObject(View arg0, Object arg1)
            {
                return arg0 == arg1;
            }

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

        mViewPager.setAdapter(mAdapter);

    }

    @Override
    public void onClick(View v)
    {
        resetImg();
        switch (v.getId())
        {
        case R.id.id_tab_weixin:
            mViewPager.setCurrentItem(0);
            mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
            break;
        case R.id.id_tab_frd:
            mViewPager.setCurrentItem(1);
            mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
            break;
        case R.id.id_tab_address:
            mViewPager.setCurrentItem(2);
            mAddressImg.setImageResource(R.drawable.tab_address_pressed);
            break;
        case R.id.id_tab_settings:
            mViewPager.setCurrentItem(3);
            mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
            break;

        default:
            break;
        }
    }

    /**
     * 将所有的图片切换为暗色的
     */
    private void resetImg()
    {
        mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
        mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
        mAddressImg.setImageResource(R.drawable.tab_address_normal);
        mSettingImg.setImageResource(R.drawable.tab_settings_normal);
    }

}

自己写的代码如下：

package com.example.viewpager01;

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

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends Activity implements OnClickListener {

    private ViewPager viewpager;

    private LinearLayout TabWeiXin;
    private LinearLayout Friend;
    private LinearLayout Address;
    private LinearLayout Setting;

    private ImageButton settings_img;
    private ImageButton address_img;
    private ImageButton frd_img;
    private ImageButton weixin_img;

    private List<View> mViews;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initView();
        intiEvents();

    }

    private void intiEvents() {
        TabWeiXin.setOnClickListener(this);
        Friend.setOnClickListener(this);
        Address.setOnClickListener(this);
        Setting.setOnClickListener(this);
        // 给Viewpager设置滑动监听
        viewpager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {
                resetImg();
                int currentPage = viewpager.getCurrentItem();
                switch (currentPage) {
                case 0:
                    weixin_img.setImageResource(R.drawable.tab_weixin_pressed);
                    break;
                case 1:
                    frd_img.setImageResource(R.drawable.tab_find_frd_pressed);
                    break;
                case 2:
                    address_img.setImageResource(R.drawable.tab_address_pressed);
                    break;
                case 3:
                    settings_img.setImageResource(R.drawable.tab_settings_pressed);
                    break;

                default:
                    break;
                }

            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });
    }

    private void initView() {
        // 初始化界面
        viewpager = (ViewPager) findViewById(R.id.id_viewpager);

        TabWeiXin = (LinearLayout) findViewById(R.id.id_tab_weixin);
        Friend = (LinearLayout) findViewById(R.id.id_tab_frd);
        Address = (LinearLayout) findViewById(R.id.id_tab_address);
        Setting = (LinearLayout) findViewById(R.id.id_tab_settings);

        settings_img = (ImageButton) findViewById(R.id.id_tab_settings_img);
        address_img = (ImageButton) findViewById(R.id.id_tab_address_img);
        frd_img = (ImageButton) findViewById(R.id.id_tab_frd_img);
        weixin_img = (ImageButton) findViewById(R.id.id_tab_weixin_img);

        // 给List增加布局文件
        LayoutInflater inflater = LayoutInflater.from(this);
        mViews = new ArrayList<View>();
        View mView_weixin = inflater.inflate(R.layout.tab01, null);
        View mView_friend = inflater.inflate(R.layout.tab02, null);
        View mView_address = inflater.inflate(R.layout.tab03, null);
        View mView_setting = inflater.inflate(R.layout.tab04, null);

        mViews.add(mView_weixin);
        mViews.add(mView_friend);
        mViews.add(mView_address);
        mViews.add(mView_setting);

        // 设置适配器
        viewpager.setAdapter(new MyAdapter());
    }

    class MyAdapter extends PagerAdapter {

        // 还需要复写初始化和销毁两个方法

        @Override
        public int getCount() {

            return mViews.size();
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {

            container.removeView(mViews.get(position));
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(mViews.get(position));
            return mViews.get(position);
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {

            return arg0 == arg1;
        }

    }

    private void resetImg() {
        weixin_img.setImageResource(R.drawable.tab_weixin_normal);
        frd_img.setImageResource(R.drawable.tab_find_frd_normal);
        address_img.setImageResource(R.drawable.tab_address_normal);
        settings_img.setImageResource(R.drawable.tab_settings_normal);
    }

    @Override
    public void onClick(View v) {
        resetImg();
        switch (v.getId()) {
        case R.id.id_tab_weixin:
            viewpager.setCurrentItem(0);
            weixin_img.setImageResource(R.drawable.tab_weixin_pressed);
            break;
        case R.id.id_tab_frd:
            viewpager.setCurrentItem(1);
            frd_img.setImageResource(R.drawable.tab_find_frd_pressed);
            break;
        case R.id.id_tab_address:
            viewpager.setCurrentItem(2);
            address_img.setImageResource(R.drawable.tab_address_pressed);
            break;
        case R.id.id_tab_settings:
            viewpager.setCurrentItem(3);
            settings_img.setImageResource(R.drawable.tab_settings_pressed);
            break;

        default:
            break;
        }

    }

}

其实刚才遇到一个问题You need to use a Theme.AppCompat theme (or descendant) with this activity,解决办法就是将ActionBarActivity换成Activity，然后再导包就可以了

Android ViewPager和Fragment 实现滑动切换页面
10-27
使用ViewPager + Fragment实现滑动切换页面的简单样例
用TabLayout，ViewPager实现左右滑动切换页面的效果
06-25
学习android两周多了，这几天在根据产品的要求改页面，刚好是左右滑动切换界面。于是把这部分单独拿出来搞了个Demo。希望对跟我一样初学android的朋友有所帮助。Demo主要用到的知识点包括：TabLayout， ViewPager，左右滑动切换tab界面，点击选项卡也可切换界面，一个activity包含多个fragment。tab页界面布局一致，但加载数据不同。
viewpager滑动页面
weixin_43489211的博客
04-01 301
布局 <?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="htt...
ViewPage(滑动视图)使用详解！
玖
04-21 553
public class Huadong_Ac extends Activity { private ViewPager viewPager; private List list1; private Button bt1; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstance
主页面内部ViewPager滑动效果
小磊's blog
12-24 1060
在主页面新闻页签中，当选中新闻选项时，可以向左滑动N个页面。 中国和国际两个页签是滑动效果进行切换的，是在Fragment中添加了一个ViewPager布局，并用了N个ViewPager进行填充切换。 这里是主页面的布局中Fragment的xml文件： <FrameLayout android:id="@+id/fl_content"
viewpage滑动
08-13
在Android开发中，`ViewPager` 是一个非常常用的组件，它允许用户通过左右滑动来浏览多个页面，通常用于实现类似轮播图或者标签页的效果。`ViewPager` 的滑动操作流畅自然，为用户提供了一种直观的多页面交互方式。...
Android viewpage实现禁止滑动的功能
09-01
在Android开发中，`ViewPager` 是一个非常常用的组件，它允许用户通过左右滑动来浏览多个页面，通常用于实现Tab切换或轮播图等效果。然而，在某些特定场景下，我们可能需要禁止用户滑动`ViewPager`，比如当某个页面...
安卓欢迎界面引导页面viewpager相关-ViewPage滑动加载大图和点击关注效果.rar
07-29
ViewPager是一个强大的视图切换工具，允许用户通过滑动来浏览多个页面，非常适合用于创建教程或者介绍应用新功能的场景。 【描述】提到的是一个关于ViewPager实现的滑动加载大图和点击关注效果的示例项目。这个项目...
简洁的viewpage滑动主页
03-24
本项目“简洁的viewpage滑动主页”提供了一个基础的ViewPage实现，适用于快速构建具有滑动功能的主界面。下面我们将深入探讨这个项目中的关键知识点。 1. **ViewPage**：ViewPage是Android SDK中的一个视图组件，它...
ViewPage Fragment页面滑动切换
05-21
`ViewPager`允许用户左右滑动浏览多个页面，而`Fragment`则为应用程序提供了模块化视图，使得一个Activity可以包含多个独立的、可交互的部分。本篇将深入讲解如何结合`ViewPager`和`Fragment`实现页面滑动切换的功能...
利用ViewPageIndicator+ViewPager实现左右滑动带图标tab标签功能
岳小川的专栏
11-03 4596
略
使用ViewPager进行页面滑动切换
晓剑
01-23 919
android上边需要滑动切换的地方太频繁了，一般引导页，主框架用得都比较多， 而使用ViewPager可以很方便的实现 一：实现一个简单的滑动切换需要3个东东 1:页面增加一个android.support.v4.view.ViewPager布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/an
Android UI设计（引导界面）：ViewPager之二滑动切换效果
danfengw的博客
09-02 1671
一、为什么要学习引导界面的滑动切换效果　　　　在之前的博客中介绍了ViewPager的基本用法，但是ViewPager作为一种引导界面，我们单单学会基本用法是远远不够的，如果细心观察我们会发现界面的切换也是有所不同的，为了在以后的做出更加酷炫的APP，给用户以更好的体验，我们一起来学习一下利用goole官方提供的两种方式实现界面的切换效果。二、两种滑动效果的实现　　首先我们来看下布局文件，布局文件的
Android ViewPager 如何判断当前页面是从前一页还是后一页滑动过来
fkaking的专栏
06-07 3766
在Android开发中，ViewPager是最常用的控件之一。它提供的左右滑动的功能，可以让我们轻松实现图片查看器、Tab页切换等功能。今天要讲的是使用过程中的一个小收获。当我们在左右滑动时，有时候需要知道当前页面是从前一页滑过来还是从后一页滑过来，因为Android SDK并没有提供这样的API，因此需要我们写一点代码来实现，当然这也是依靠Android提供的API来间接实现的。 我们在处理V
ViewPager 切换页面
blue的博客
07-16 3932
package com.gaoo.apptab; /** * ViewPager 实现tab * * 代码中存在一个小问题: 点击底部导航栏时,点击下面的文字没有问题可以正常切换,而点击标签文字上方的图片就不能实现正常切换了,这是为什么? * 因为我们在底部导航栏 4个 LinearLayout 布局中 图片的展示的控件是 ImageButton ,而它本身具备消费点击事件的能力,自己把点
ViewPager 详解（五）-----使用Fragment实现ViewPager滑动
热门推荐
启舰
08-18 11万+
前言：前几篇文章讲解了ViewPager的普通实现方法，但android官方最推荐的一种实现方法却是使用fragment，下面我们使用fragment来重新实现一下第一篇《ViewPager 详解（一）---基本入门》所实现的效果。 系列文章： 1、《ViewPager 详解（一）---基本入门》 2、《ViewPager 详解（二）---详解四大函数》 3、《ViewPage...
ViewPager 滑动切换效果
Yang_RT的博客
09-30 4085
    ViewPager是一个允许页面左右滑动的布局管理器，不同的页面可以有不同数据。我们可以通过实现ViewPager.PageTransformer接口来自定义滑动切换效果。        我们需重写transformPage方法，这个方法有2个参数。第一个参数是指需要设置滑动效果的页面，包括即将滑出页面，即将滑入页面，已经滑出的页面，我们可以通过第二个参数判断第一个参数是指哪个页面。...
Android滑动页面ViewPager的详细总结
wenzhi的博客
12-12 1万+
ViewPager是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包，里面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一利用它，我们可以做很多事情，从最简单的导航，到页面菜单等等。
【Android进阶】自定义带动画切换效果的ViewPager
自由世界的专栏
07-27 3570
1.引言 ViewPager是我们比较熟悉的一个控件，用于视图切换或作为首页的切换，默认是没有动画切换效果的，当然我们可以通过setPageTransform来添加各种各样的动画，这里我们介绍另外一种方法，自定义自带动画切换效果的ViewPager。 2.准备工作 首先分析我们要实现动画切换效果，我们必须要准备的工作： 1.首先必须获取两个切换的视图，mLeftView 和 mRightV
微信风格的ViewPage左右滑动页面实现教程
在实际开发中，要模拟微信等应用中的左右滑动页面效果，ViewPage可以作为一个容器，放置多个子视图，每个子视图中可以包含一个或多个TextView。通过设置ViewPage的适配器，可以将一组视图与ViewPage绑定，实现滑动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值