ViewPager 和 TabLayout实现Fragment分页

原创 2015年11月19日 12:04:11
实现的效果就是如下图

这里写图片描述

首先我们需要定义一个显示的xml文件,定义为activity_fragment.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.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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

        />

</LinearLayout>
从代码中,很简单,上面有一个TabLayout的控件,下面定义了一个ViewPager用于显示需要显示的Fragment.

定义一个TestFragment.java类。,这里需要继承FragmentActivity,并且在onCreate方法,初始化
package com.example.glc.testtabfragments;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

/**
 * Created by GLC on 2015/11/19.
 */
public class TestFragment extends FragmentActivity {
    private ViewPager mViewPager;
    private TabLayout mTabLayout;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_fragment);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mTabLayout = (TabLayout) findViewById(R.id.tablayout);

    }
}
做好上面的准备后,我们需要给TabLayout动态赋值Title,并且定义存放Fragment的容器。
package com.example.glc.testtabfragments;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

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

/**
 * Created by GLC on 2015/11/19.
 */
public class TestFragment extends FragmentActivity {
    private ViewPager mViewPager;
    private TabLayout mTabLayout;
    private List<Fragment> mList;
    private String[] mTitles;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_fragment);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mTabLayout = (TabLayout) findViewById(R.id.tablayout);
        mList = new ArrayList<>();
        mList.add(0, new OneFragment());
        mList.add(1, new TwoFragment());
        mTitles = new String[]{"第一页", "第二页"};
    }
}
这里我们很简单的设置了一个两个Fragment,onefragment
<?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">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="第一页"

        />
</LinearLayout>
package com.example.glc.testtabfragments;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by GLC on 2015/11/19.
 */
public class OneFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.onefragment, container, false);
    }
}
然后我们需要定义将数据与ViewPager联系起来的适配器,MyFragmentPagerAdapter,需要继承FragmentStatePagerAdapter,然后重写三个方法,下面在代码中注释这三个方法的作用,
 private class MyFragmentPagerAdapter extends FragmentStatePagerAdapter {
        private List<Fragment> mList;
        private String[] mTitles;
        //适配器,绑定数据
        public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> mList, String[] mTitles) {
            super(fm);
            this.mList = mList;
            this.mTitles = mTitles;

        }
    //根据索引,显示fragment
        @Override
        public Fragment getItem(int position) {
            return mList.get(position);
        }
    //计算全部的fragment的数量
        @Override
        public int getCount() {
            return mList.size();
        }
    //根据索引显示不同的tab的title
        @Override
        public CharSequence getPageTitle(int position) {
            return mTitles[position];
        }
    }
然后需要给ViewPager设置页面变化的监听事件,implements OnPageChangeListener 并且实现三个方法,
    //当页面滑动的时候调用
 @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }
    //当页面被选中的时候调用,
    @Override
    public void onPageSelected(int position) {

    }

    //当页面状态发生改变的时候得到调用
    @Override
    public void onPageScrollStateChanged(int state) {

    }
最后我们给ViewPager和TabLayout设置一些属性。完成整个效果
//给viewpager设置监听事件
 mViewPager.addOnPageChangeListener(this);
//给viewpager设置适配器
 mViewPager.setAdapter(myFragmentPagerAdapter);
//给tablayout设置模式
 mTabLayout.setTabMode(TabLayout.MODE_FIXED);
//将tablayout与viewpager联系起来
 mTabLayout.setupWithViewPager(mViewPager);
//个体tablayout设置适配器          mTabLayout.setTabsFromPagerAdapter(myFragmentPagerAdapter);
这样,功能就算实现好了,下面贴上完整的代码。
package com.example.glc.testtabfragments;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;

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

/**
 * Created by GLC on 2015/11/19.
 */
public class TestFragment extends FragmentActivity implements ViewPager.OnPageChangeListener {
    private ViewPager mViewPager;
    private TabLayout mTabLayout;
    private List<Fragment> mList;
    private String[] mTitles;
    private MyFragmentPagerAdapter myFragmentPagerAdapter;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fragment);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mTabLayout = (TabLayout) findViewById(R.id.tablayout);
        mList = new ArrayList<>();
        mList.add(0, new OneFragment());
        mList.add(1, new TwoFragment());

        mTitles = new String[]{"第一页", "第二页"};
        myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), mList, mTitles);
        mViewPager.addOnPageChangeListener(this);
        mViewPager.setAdapter(myFragmentPagerAdapter);

        mTabLayout.setTabMode(TabLayout.MODE_FIXED);
        mTabLayout.setupWithViewPager(mViewPager);
        mTabLayout.setTabsFromPagerAdapter(myFragmentPagerAdapter);

    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    private class MyFragmentPagerAdapter extends FragmentStatePagerAdapter {
        private List<Fragment> mList;
        private String[] mTitles;

        public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> mList, String[] mTitles) {
            super(fm);
            this.mList = mList;
            this.mTitles = mTitles;

        }

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

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

        @Override
        public CharSequence getPageTitle(int position) {
            return mTitles[position];
        }
    }
}

高仿QQ空间项目实战开发(带服务器端程序)

大家好,今天我在这里分享一个小程序。高仿QQ空间的APP,这里给大家分享一个安卓APP和PHP写的服务器程序。想提高安卓开发能力或安卓和后台服务器一起做的初学者值得一看,老鸟跳过。 接下来我们看看效果...

智慧XX项目的总结

又经过经过两个星期的不懈努力,又完成了一个的练习项目——智慧广州。现在稍稍做一下总结。 有5大功能,首页,新闻中心,智慧服务,政务,设置,由于其他功能类似,其中只实现了首页新闻中心的内容。...

使用fragment+TabLayout+Viewpager实现页卡式界面

实现:通过使用design库中的控件TabLayout,并将TabLayout与ViewPager绑定,Fragment作为ViewPager的装填内容,可以通过点击不同页卡项或左右滑动切换fragm...

使用fragment+TabLayout+Viewpager实现页卡式界面

通过使用design库中的控件TabLayout,并将TabLayout与ViewPager绑定,Fragment作为ViewPager的装填内容,可以通过点击不同页卡项或左右滑动切换fragment...

结合Tab,ViewPager,Fragment实现简单分页滑动

在APP设计当中,使用ViewPager和Fragment来实现分页滑动并不少见,该设计可以利用少量的空间来实现多内容的展示。效果图如下: 一下是实现该功能的代码:MainActivitypub...

使用FragmentTabHost+Fragment+viewpager 实现滑动分页

之前分页效果一直用TabActivity+TabHost,但是android3.0后就不在推荐使用了,而是推荐使用Fragment,经过研究加参考其他朋友代码实现了滑动分页的效果,代码简单附上。 ...
  • strliu
  • strliu
  • 2014年03月07日 22:15
  • 2225
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ViewPager 和 TabLayout实现Fragment分页
举报原因:
原因补充:

(最多只允许输入30个字)