Adnroid ViewPage 使用

引:很早之前就想谢谢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

时间： 2024-08-29 23:28:12

Adnroid ViewPage 使用的相关文章

自定义View 篇三 《手动打造ViewPage》

有了之前自定义View的理论基础,有了ViewPage.事件分发机制.滑动冲突.Scroller使用等相关知识的铺垫,今天纯手动打造一款ViewPage. 1.完成基本的显示: 在MainActivity中: public class MainActivity extends AppCompatActivity { private MyViewPage mViewPage; int[] imageIds = new int[]{ R.drawable.pic_0, R.drawable.pic_

Android第六期 - ViewPage与菜单栏本地页面监听滑动效果

首先是JiaoyuzixunActivity.java代码部分: package com.gaoxiaotong.ctone.jiaoyuzixun; import java.util.ArrayList; import java.util.HashMap; import java.util.Iterator; import java.util.List; import java.util.Map; import org.json.JSONArray; import org.json.JSONO

ViewPage相关笔记

只有步骤,备用 ViewPage+PagerAdapter 布局控件 在activity的布局文件中添加控件,控件标记名称为: android.support.v4.view.ViewPager 有两个子控件: android.support.v4.view.PagerTitleStrip(会在tab标题的上面,但是不知道怎么随着页面的左右滚动切换,所以暂时不知道如何使用这个控件) android.support.v4.view.PagerTabStrip(每个tab页面的标题,会随着页面的左右

解决ViewPage中嵌套有ListView或者滑动手势等造成滑动的冲突

public class ViewPagerCompat extends ViewPager { //mViewTouchMode表示ViewPager是否全权控制滑动事件,默认为false,即不控制 private boolean mViewTouchMode = false; public ViewPagerCompat(Context context, AttributeSet attrs) { super(context, attrs); } public void setViewTou

ViewPage+frament不预加载下一个Frament数据解决办法

在做一个ViewPage+Frament 滑动数效果,当滑动到每一页时加载哪一页的数据,但是ViewPage会预加载下一也数据,这个问题之前做项目是一直未解决,今天找到一个方法一下子就解决的这个问题,Frament里面有一个setUserVisibleHint方法,setUserVisibleHint每次fragment显示与隐藏都会调用,下面说一下这个方法的使用 @Override public void setUserVisibleHint(boolean isVisibleToUser)

ViewPage 大圣归来 原生示例

VP简介 android-support-v4.jar 是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api.而ViewPage就是其中之一,利用它,我们可以做很多事情,从最简单的导航,到页面菜单等等. ViewPager类提供了多界面切换的新效果,新效果有如下特征: <1>当前显示一组界面中的其中一个界面: <2>当用户通过左右滑动界面时,当前的屏幕显示当前界面和下一个界面的一部分: <3>滑动结束后,界面自动跳转到当前

ViewPage

最近实现了这样的一个效果:滑动界面出现拖拽效果,可翻动3屏,也可点击按钮翻动页面. 主要利用android.support.v4.view.ViewPager控件来实现. 第一个界面: 滑动屏幕: 换到下一屏: 布局文件: 主界面 main.xml <?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk

ViewPage+Frament+listView滑动效果

近期在做一个须要使用Frament+ViewPage制作一个滑动的效果,看了非常多资料,最终实现了,这与大家分享一下战果 总结一下.这里我做了一个Demo分享给大家 我的文件文件夹结构图 1.首先要有一个ViewPage组件,他是3.0以后出现的,所以要导入android.support.v4这个包 先来建立一个mian布局文件 activity_main.xml 这个布局使用RadioGroup和RadioButton组合,在上面显示第一页.和第二页.以下就是ViewPage <Relativ

ViewPage实现幻灯广告墙

ViewPage实现幻灯广告墙 功能简介 类似幻灯片功能 自动切换图片 触摸停止切换图片 自带标题功能和切换圆点 核心功能实现方法 1. 布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent&