ViewPager 和 TabLayout实现Fragment分页

实现的效果就是如下图

这里写图片描述

首先我们需要定义一个显示的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];
        }
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值