文档章节

Android 利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效

零点B5
 零点B5
发布于 2014/03/07 17:27
字数 794
阅读 8445
收藏 58

废话少说,先上效果:

1、添加android support包
因为几个类都是在android support包中才提供,我们先添加android-support-v4.jar文件到工程的libs目录下即可

2、新建ViewPager.xml,内容如下

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

    <!--
        注意事项:   
        1.这里ViewPager和 PagerTabStrip都要把包名写全了,不然会ClassNotFount  
        2.API中说:在布局xml把PagerTabStrip当做ViewPager的一个子标签来用,不能拿出来,不然还是会报错  
        3.在PagerTabStrip标签中可以用属性android:layout_gravity=TOP|BOTTOM来指定title的位置  
        4.如果要显示出PagerTabStrip某一页的title,需要在ViewPager的adapter中实现getPageTitle(int)
    -->

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager_demo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:background="#6B92A5" >

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pager_tabstrip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:background="#33b5e5"
            android:textColor="#ffffff" />

        <!-- <android.support.v4.view.PagerTitleStrip
            android:id="@+id/pagertitle"
            android:layout_width="fill_parent"
            android:layout_height="45dp"
            android:layout_gravity="bottom"
            android:visibility="gone" /> -->
    </android.support.v4.view.ViewPager>

</RelativeLayout>

这里面有两个控件PagerTitleStrip和PagerTabStrip,这两个控件必须当作ViewPager的子控件来用,否则会报错。

两个控件有什么区别呢?

简单的理解就是:

PagerTabStrip:交互式

PagerTitleStrip:非交互式

经过简单测试发现:

PagerTabStrip:

    1.点击上面的标题可以实现ViewPager的切换。

    2.选中的文字下方包含指引线

    3.显示全宽下划线(setDrawFullUnderline)

PagerTitleStrip:

    1.点击上面的标题无反应。

    2.无上述描述。

3、新建view_pager_fragment.xml内容如下:

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

    <TextView
        android:id="@+id/view_pager_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="top|center_horizontal"
        android:layout_marginTop="30dp" />

    <ImageView
        android:id="@+id/view_pager_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_below="@id/view_pager_text"
        android:layout_marginTop="10dp" />

</RelativeLayout>

用于在ViewPager中显示。

4、新建TitleViewPagerDemo页面

import java.util.ArrayList;
import java.util.List;
import com.lk.myandroidui.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
/**
 * 有标题的ViewPager
 * @author Administrator
 *
 */
public class TitleViewPagerDemo extends FragmentActivity {

    private static int TOTAL_COUNT = 5;// 标题数量

    @Override
    protected void onCreate(Bundle arg0) {
        // TODO Auto-generated method stub
        super.onCreate(arg0);
        setContentView(R.layout.view_pager_demo);
        
        PagerTabStrip mPagerTabStrip=(PagerTabStrip) findViewById(R.id.pager_tabstrip);
        //设置导航条的颜色
        mPagerTabStrip.setTabIndicatorColorResource(android.R.color.white);

        ViewPager mViewPager = (ViewPager) findViewById(R.id.view_pager_demo);
        ArrayList<Fragment> fragmentList = new ArrayList<Fragment>();//ViewPager中显示的数据
        ArrayList<String> titleList = new ArrayList<String>();// 标题数据
        //添加数据
        for (int i = 0; i < TOTAL_COUNT; i++) {
            ViewPagerFragment mViewPagerFragment = new ViewPagerFragment();
            Bundle bundle = new Bundle();
            bundle.putInt("upImageId", R.drawable.banner1);// 图片
            bundle.putString("text", "Page " + i);// 文字
            mViewPagerFragment.setArguments(bundle);// 设置参数
            titleList.add("Title " + (i+1));
            fragmentList.add(mViewPagerFragment);
        }
        mViewPager.setAdapter(new MyPagerFragmentAdapter(
                getSupportFragmentManager(), fragmentList, titleList));

    }
    //适配器
    private class MyPagerFragmentAdapter extends FragmentPagerAdapter {

        private List<Fragment> fragmentList;
        private List<String> titleList;

        public MyPagerFragmentAdapter(FragmentManager fm,
                List<Fragment> fragmentList, List<String> titleList) {
            super(fm);
            this.fragmentList = fragmentList;
            this.titleList = titleList;
        }

        // ViewPage中显示的内容
        @Override
        public Fragment getItem(int arg0) {
            // TODO Auto-generated method stub
            return (fragmentList == null || fragmentList.size() == 0) ? null
                    : fragmentList.get(arg0);
        }

        // Title中显示的内容
        @Override
        public CharSequence getPageTitle(int position) {
            // TODO Auto-generated method stub
            return (titleList.size() > position) ? titleList.get(position) : "";
        }

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return fragmentList == null ? 0 : fragmentList.size();
        }

    }
    /** 使用Fragment显示ViewPager中的主要内容 */
    public static class ViewPagerFragment extends Fragment {
        public ViewPagerFragment() {
            super();
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            View view = inflater.inflate(R.layout.view_pager_fragment_demo1,
                    container, false);
            TextView tv = (TextView) view.findViewById(R.id.view_pager_text);
            ImageView image = (ImageView) view
                    .findViewById(R.id.view_pager_image);

            Bundle bundle = getArguments();
            if (bundle != null) {
                //设置图片
                int upImageId = bundle.getInt("upImageId");
                if (upImageId != 0) {
                    image.setImageResource(upImageId);
                }
                //设置文字
                String text = bundle.getString("text");
                tv.setText(text);
            }
            return view;
        }
    }
}

ok,结束。

© 著作权归作者所有

零点B5
粉丝 3
博文 23
码字总数 15975
作品 0
深圳
高级程序员
私信 提问
加载中

评论(3)

天王盖地虎626
天王盖地虎626
代码貌似不完整
岚风暴
我一般不留言的. 不过看了楼主帖子,豁然开朗. 虽然跟楼主帖子关系不太大, 不过多谢楼主了
shane2015
shane2015
求源码包
【求指教!!】Fragment ViewPager相关问题

想实现类似于微信的效果,点击Footer的tab整个页面的内容跟着变化,但是页面切换不需要滑动(页面切换包括手势切换和点击Footer的tab切换,默认ViewPager是手势切换和点击Footer的tab切换都有...

Summersize
2013/12/16
338
3
android中ViewPager详解--视图滑动、界面卡等效果 (一)

这是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一。利用它,我们可以做很多事情,从最简单的导航,到页面菜单...

一别经年
2014/01/21
4.7K
0
一起学Android之ViewPager

本文以一个简单的小例子,简述在Android开发中ViewPager的常见用法,仅供学习分享使用。 概述 ViewPager是一个支持使用者左右滑动的布局管理控件,可以通过一个实现的(适配器)PageAdapter...

Alan.hsiang
01/27
0
0
使用ViewPager+Fragment来实现带滚动条的多屏滑动-IndicatorFragmentActivity

转载请注明出处:http://blog.csdn.net/singwhatiwanna/article/details/17201587 介绍 在android应用中,多屏滑动是一种很常见的风格,博主之前也写过一些多屏滑动的demo,比如滚动banner(...

长平狐
2013/12/25
40.7K
2
viewpager实现画廊(一屏多个Fragment)效果

本文主要介绍 如何利用ViewPager实现Gallery的画廊效果,即一屏显示多个Fragment 。 在使用Gallery的时候大家会发现有几个问题(1). 无法控制每次滑动只滑动一页, (2). Gallery默认第一个ite...

Trinea
2013/04/08
5.8K
1

没有更多内容

加载失败,请刷新页面

加载更多

VMware vSphere ESXi主机的访问控制

在vShpere中,访问ESXi主机的途径很多,如下: ESXi DCUI ESXi Shell ESXi SSH ESXi Host Client vCenter --> vSphere web client / vSphere Client VMware vSphere ESXi主机的访问控制,除了......

大别阿郎
30分钟前
4
0
大神讲解CGI、FastCGI和PHP-FPM关系图解

参考资料 概念了解:CGI,FastCGI,PHP-CGI与PHP-FPM:http://www.nowamagic.net/librarys/veda/detail/1319 php中fastcgi和php-fpm是什么东西:https://www.zybuluo.com/phper/note/50231 ......

网络小虾米
39分钟前
4
0
《DNS攻击防范科普系列3》 -如何保障 DNS 操作安全

引言 前两讲我们介绍了 DNS 相关的攻击类型,以及针对 DDoS 攻击的防范措施。这些都是更底层的知识,有同学就来问能否讲讲和我们的日常操作相关的知识点,今天我们就来说说和我们日常 DNS 操...

Mr_zebra
40分钟前
4
0
zk中ServerCnxn

实现接口Stats, Watcher 内部类 DisconnectReason CloseRequestException EndOfStreamException(流关闭) 属性 方法 getSessionTimeout 获取session失效时间 sendResponse 发送回复数据 se......

writeademo
45分钟前
4
0
如何将 Redis 用于微服务通信的事件存储

来源:Redislabs 作者:Martin Forstner 翻译:Kevin (公众号:中间件小哥) 以我的经验,将某些应用拆分成更小的、松耦合的、可协同工作的独立逻辑业务服务会更易于构建和维护。这些服务(也...

中间件小哥
48分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部