Adnroid ViewPage 使用

最新推荐文章于 2023-04-13 21:04:51 发布
最新推荐文章于 2023-04-13 21:04:51 发布
阅读量1.9k 收藏 3
点赞数 2
分类专栏： View使用 文章标签： android 布局 View
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zq2114522/article/details/51054962
版权

转载请标明出处：
http://blog.csdn.net/zq2114522/article/details/51054962；
本文出自:【梁大盛的博客】

ViewPage使用

引:很早之前就想写ViewPage的使用,但是因为各种原因拖了很久.
这段时间项目需要使用到ViewPage,借此机会写写对于ViewPage的一些认识.

ViewPage作为一个布局管理器,继承于ViewGroup和LinearLayout/FrameLayout等同属于布局管理器.一般ViewPage允许用户通过向左向右滑动实现页面的切换,当然你还需要实现一个PageAdapter来提供切换所需要的View.
现在ViewPage使用不得不提到Fragment了.ViewPage只负责进行页面的切换(Fragment的切换).Fragment负责提供视图并且管理自己的生命周期.绝配的一对!
我们需要要实现FragmentPageAdapter或者FragmentStatePagerAdapter其中一个即可.区别在于?
FragmentPageAdapter使用场景:页面不多并且是固定的
FragmentStatePagerAdapter使用场景:页面很多并且不固定的

接下来看看如何简单实用ViewPage

activity_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"
    android:orientation="vertical">

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

MainActivity.java

package com.example.dsliang.viewpagedemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    ViewPager mViewPageMainContent;

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

        mViewPageMainContent = (ViewPager) findViewById(R.id.viewPageMainContent);
        mViewPageMainContent.setAdapter(new ViewPagerontentAdapter(getSupportFragmentManager()));
    }

    //    class ViewPagerontentAdapter extends FragmentPagerAdapter {
    class ViewPagerontentAdapter extends FragmentStatePagerAdapter {

        public ViewPagerontentAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            Fragment fragment;
            Bundle args;

            fragment = new ViewPageContentFragment();
            args = new Bundle();
            args.putInt(ViewPageContentFragment.ARG_OBJECT, position + 1);
            fragment.setArguments(args);

            return fragment;
        }

        @Override
        public int getCount() {
            return 10;
        }
    }

    class ViewPageContentFragment extends Fragment {

        public static final String ARG_OBJECT = "object";
        public final String TAG = ViewPageContentFragment.class.getSimpleName();

        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            Toast.makeText(getActivity(), "onCreate", Toast.LENGTH_SHORT).show();
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            View view;
            view = inflater.inflate(R.layout.layout_viewpage, container, false);

            Bundle args = getArguments();
            ((TextView) view.findViewById(R.id.txtText)).setText(
                    Integer.toString(args.getInt(ARG_OBJECT)));
            return view;
        }

        @Override
        public void onDestroy() {
            super.onDestroy();
            Toast.makeText(getActivity(), "onDestroy", Toast.LENGTH_SHORT).show();
        }
    }
}

FragmentPagerAdapter或者FragmentStatePagerAdapter
只需要实现getCount,getItem函数即可

通过调用ViewPage.setAdapter(…)函数设置适配器,ViewPage就可以运行起来了

需要注意就是FragmentPagerAdapter和FragmentStatePagerAdapter区别在于
当切换到其他页面的时候FragmentStatePagerAdapter会把之前的Fragment销毁.而FragmentPagerAdapter并不会把之前的实例销毁会一直持有,意味着什么?如果一直持有那么切换回去的时候之前的状态也是会恢复.销毁了那么就什么都的重头再来呗.
如果当你会创建大量的Fragment的时候,千万别用FragmentPageAdapter了.估计随着页面的增多会越来越卡吧.(仅仅是猜测)

效果图:
这里写图片描述
这里写图片描述

ViewPage配合PagerTitleStrip/PagerTabStrip使用

ViewPage的使用没有Tab/Title怎么行?接下来看看怎么使用Tab/Title.

PagerTitleStrip

首先需要在ViewPage里面嵌入一个PagerTitleStrip控件.并且在ViewPage添加layout_gravity属性.layout_gravity可以设置为:TOP/BOTTOM.对应表示PagerTitleStrip是处于ViewPage的顶部还是底部.

FragmentPagerAdapter/FragmentStatePagerAdapter需要复写getPageTitle函数.getPageTitle提供Title的标识(字符串).

仅仅提供关键代码

MainActivity.java


...

 class ViewPagerontentAdapter extends FragmentPagerAdapter {

        public ViewPagerontentAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return "Title:" + String.valueOf(position);
        }

        @Override
        public Fragment getItem(int position) {
            Fragment fragment;
            Bundle args;

            fragment = new ViewPageContentFragment();
            args = new Bundle();
            args.putInt(ViewPageContentFragment.ARG_OBJECT, position + 1);
            fragment.setArguments(args);

            return fragment;
        }

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

activity_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"
    android:orientation="vertical">

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

        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/titleIndicator"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </android.support.v4.view.ViewPager>
</LinearLayout>

PagerTitleStrip效果图:
这里写图片描述

PagerTabStrip

有了PagerTitleStrip为何还需PagerTabStrip?留意上面的图片其实点击Title并没有切换到相应的Page,PagerTabStrip就是为了这个理由而存在?
当然官方文档写的清清楚楚了.区别在于”交互”二字.

这里写图片描述

这里写图片描述

PagerTabStrip使用上和PagerTitleStrip基本是大同小异.

activity_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"
    android:orientation="vertical">

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

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/titleIndicator"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </android.support.v4.view.ViewPager>
</LinearLayout>

PagerTabStrip效果图:

这里写图片描述

ViewPage配合PagerTitleStrip/PagerTabStrip使用起来很简单.但是不得不说原生的Tab/Title真的做的很丑陋!

ViewPage配合ActionBar使用

当然在ActionBar里面还可以嵌入Tab!ActionBar赋予了太多功能了吧?接下来说说怎么使用ActionBar的Tab模式.ActionBar可以配合ViewPage一起使用实现Tab+ViewPage效果.

TabViewPageActivity.java

package com.example.dsliang.viewpagedemo;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Created by dsliang on 2016/4/4.
 */
public class TabViewPageActivity extends AppCompatActivity {

    ActionBar mActionBar;
    ActionBar.TabListener mTabListener;
    ViewPager mViewPager;

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

        mViewPager = (ViewPager) findViewById(R.id.viewPageMainContent);

        mActionBar = getSupportActionBar();
        mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        mTabListener = new ActionBar.TabListener() {
            @Override
            public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {

            }

            @Override
            public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {

            }

            @Override
            public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {

            }
        };

        for (int i = 0; i < 3; i++) {
            mActionBar.addTab(mActionBar.newTab().setText("Tab " + i + 1)
                    .setTabListener(mTabListener));

        }

        mViewPager.setAdapter(new ViewPagerontentAdapter(getSupportFragmentManager()));
    }

    class ViewPagerontentAdapter extends FragmentPagerAdapter {

        public ViewPagerontentAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return "Title:" + String.valueOf(position);
        }

        @Override
        public Fragment getItem(int position) {
            Fragment fragment;
            Bundle args;

            fragment = new ViewPageContentFragment();
            args = new Bundle();
            args.putInt(ViewPageContentFragment.ARG_OBJECT, position + 1);
            fragment.setArguments(args);

            return fragment;
        }

        @Override
        public int getCount() {
            return 3;
        }
    }

    class ViewPageContentFragment extends Fragment {

        public static final String ARG_OBJECT = "object";
        public final String TAG = ViewPageContentFragment.class.getSimpleName();

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            View view;
            view = inflater.inflate(R.layout.layout_viewpage, container, false);

            Bundle args = getArguments();
            ((TextView) view.findViewById(R.id.txtText)).setText(
                    Integer.toString(args.getInt(ARG_OBJECT)));
            return view;
        }

    }
}

activityt_tab_viewpage.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"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPageMainContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="top" />
</LinearLayout>

效果图:
这里写图片描述

ViewPage部分代码和之前一样.
ActionBar部分.首先获取ActionBar实例然后设置成NAVIGATION_MODE_TABS模式.然后添加Tab到ActionBar就可以实现Tab功能.如效果图那样,但是还没把ViewPage和Tab关联起来.

实现ActionBar和ViewPage联动.
实现ActionBar.TabListener和ViewPager.OnPageChangeListener即可.


...

tabListener = new ActionBar.TabListener() {
            @Override
            public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
                mViewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {

            }

            @Override
            public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {

            }
        };

...

mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                getSupportActionBar().setSelectedNavigationItem(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

...

效果图:
这里写图片描述

作为一个Mark.

参考:

http://android.xsoftlab.net/training/implementing-navigation/lateral.html#swipe-tabs

http://android.xsoftlab.net/reference/android/support/v4/view/ViewPager.html

http://android.xsoftlab.net/reference/android/support/v4/view/PagerTabStrip.html

http://android.xsoftlab.net/reference/android/support/v4/view/PagerTitleStrip.html

dsliang12
关注
专栏目录
android的ViewPage基础使用代码
06-21
本资源是提供给各位刚了解ViewPage使用的小伙伴。不过这个资源我按照了开发的模式，抽取了一些基类来写这个简单的功能，就当练习。希望小伙伴能看懂ViewPage的使用。代码在basedemo这个模块里面写的。而代码用androidstudio软件写的。获取控件id是使用butterknife插件生成的。简单的一段代码用了被我用了很麻烦，就是想练练敲代码的逻辑，希望见谅！
ViewPage的使用与介绍
yaojiangyu的博客
03-03 6486
介绍 1.Viewpager，视图翻页工具，提供了多页面切换的效果。Android 3.0后引入的一个UI控件，位于v4包中。低版本使用需要导入v4包，但是现在我们开发的APP一般不再兼容3.0及以下的系统版本，另外现在大多数使用Android studio进行开发，默认导入v7包，v7包含了v4，所以不用导包，越来越方便了。 2.Viewpager使用起来就是我们通过创建adapter给它填充多...
Android ViewPager控件
假装你是大灰狼的专栏
10-16 5552
前言 ViewPager可以实现多个界面的左右滑动。 1. ViewPager简单应用 (1) 布局文件 &amp;amp;amp;lt;android.support.v4.view.ViewPager android:id=&amp;amp;quot;@+id/view_pager&amp;amp;quot; android:layout_width=&amp;amp;quot;match_parent&amp;amp;quot;
翻页类视图 ViewPager
威威的博客
11-04 1570
翻页类视图 ViewPager 用法解析
ViewPage的基本使用以及动画效果的添加
zccon的博客
03-31 7882
viewpage效果： 项目结构： layout1，layout2，layout3,是三个view视图的布局 代码实现： 1.activity_main.xml代码： 加入viewpage控件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.and...
android viewPage使用+水平滑动组件
03-28
android viewPage使用+水平滑动组件 没什么特别的，就是基本的viewPage使用方法DEMO+一个水平滑动。今天第一次接触viewPage，貌似是4.0以后出来的 ，以前多屏幕滑动用的是继承viewGroup自己写，现在google倒是考虑到...
Android viewpage分页demo
06-14
在这个"Android viewpage分页demo"中，我们可以深入理解`ViewPager`的工作原理以及如何在实际项目中应用它。 首先，`ViewPager`是Android支持库中的一个组件，它继承自`ViewGroup`，并实现了`PagerAdapter`接口。`...
Android实现ViewPage轮播图效果
08-27
`viewpage_images`数组存储了轮播图的图片资源ID，`viewpage_imageList`将用于存储`ViewPager`的页面视图。 4. **数据绑定**： 为了将图片加载到`ViewPager`，我们需要创建一个适配器。虽然示例代码没有直接提供...
android使用ViewPage实现卡片式画廊效果
10-27
本教程将详细介绍如何使用`ViewPager`组件在Android中实现这种效果。 `ViewPager`是Android Support Library中的一个强大组件，它允许用户左右滑动来切换页面，非常适合用来创建类似卡片式画廊的界面。以下是如何...
Android viewpage实现禁止滑动的功能
09-01
// 如果使用AndroidX库，导入androidx.viewpager.widget.ViewPager import android.util.AttributeSet; import android.view.MotionEvent; public class CustomViewPager extends ViewPager { private boolean ...
Android：ViewPage使用教程
weixin_42814000的博客
06-29 2277
目录 1. 定义 ViewPager是Android扩展包v4包中的类 android.support.v4.view.ViewPager 类似于LinearLayout，ViewPager类直接继承了ViewGroup类，是一个容器，需要在里面添加我们想要显示的内容。 类似于ListView，ViewPager类需要PagerAdapter适配器类提供数据。 2. 作用 左右切换当前的view，实现滑动切换的效果。 3. 使用 建立ViewPage的步骤： 在XML布局中加入andro
Android ViewPage2使用
最新发布
嘴巴吃糖了
04-13 4549
ViewPager2是AndroidX库中的一个控件，用于实现滑动切换不同页面的功能。它是ViewPager的升级版，相比于ViewPager，ViewPager2具有以下优点：1、支持垂直滑动：ViewPager2可以支持水平和垂直两种滑动方式，而ViewPager只支持水平滑动。2、更好的性能：ViewPager2使用RecyclerView作为底层实现，相比于ViewPager，它具有更好的性能和更少的内存占用。
Android基础：ViewPage
在路上
03-07 3460
ViewPager
Android viewpager使用
qq_33782617的博客
09-17 7587
介绍android viewpager的使用
Android UI之ViewPage实现当前视图放大左右视图露边及点击事件跳转
ZJQ990909的博客
09-16 198
Android UI之ViewPage实现当前视图放大左右视图露边及点击事件跳转
Android ViewPage使用
今晚看星星的博客
05-05 1790
文章目录1 ViewPage介绍2 使用多个layout进行展示3 PagerAdapter 联合多个界面4 在`MainActivity` 中创建并应用适配器 1 ViewPage介绍 它是Android 3.0后引入的一个UI控件（视图滑动切换工具） 通过手势滑动可以完成View的切换，一般是用来做APP的引导页或者实现图片轮播 2 使用多个layout进行展示 //获取启动页面,将布局加载到UI //LayoutInflater 将布局的.xml文件转换成View对象 LayoutInflate
Android---ViewPager
qq_44950283的博客
12-24 4442
一、ViewPager 缓存页面与预加载先有缓存页面，然后再预加载。因此，缓存的目的就是为了预加载。
18、Android -- ViewPager(滑动) 基础学习
u013059089的博客
07-10 823
android -- 学习笔记
安卓基础之Fragment与ViewPager
wygsqsj的博客
09-02 2896
viewPager与Fragment的组合方式是可以说是当前App开发的标配，所以放在一篇博客中进行描述。 Fragment Fragment是Acttivity界面一个组成部分，基本上目前使用到多个页面的情况下都会用到，其实Fragment最大的作用是分担Activity的代码压力，为了后期维护方便，不把所有的代码罗列到一个Activity中。 构建Fragment 1.Activity布局文件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值