ViewPager 、TabLayout和Fragment实现标签滑动

之前记录过一篇实现“标签滑动导航栏”的博客ViewPager与PagerTabStrip，在查看过其他前辈的博客后，写了demo感觉效果也挺好的！记录并且分享……

1：添加TabLayout的依赖库：

compile 'com.android.support:design:24.2.1'

compile 'com.android.support:support-v4:24.2.1'

2：这是要用到的XML布局



3：在页面中我设置了五个Tab, 所以需要Tabs 和 五个fragment 和 ViewPager来实现

定义五个fragment文件，以及fragment的 布局文件，

【TabFragmentAllOrder】

package ......;

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

/**
* Created by xxx on 2016/9/19.
* 订单界面
*/

public class TabFragmentAllOrder extends BaseFragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_All_Order,container,false);
return view;
}
}

fragment布局文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.xxxxxx.xxxxxx.xxxxxx.percenter.TabFragmentAllOrder ">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cf9fcf"
android:text="tab----2"
android:textSize="35sp"
android:gravity="center"
/>
</FrameLayout>

其他的Fragment与布局文件和上面是一样的，所以就不依次累述了……

这里来看一下具体实现的Activity:

package ......;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
......;

/**
* Created by xxx on 2016/9/18.
* 主界面
*/

public class MyOrderActivity extends BaseNetActivity {
private TabLayout mTabLayout;
private ViewPager mViewPager;
private String tabTitle[]={"全部订单","待付款","待发货","待收货","退货"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.center_personal_my_order_activity);
intiUI();
initData();
}

//初始化控件
private void intiUI() {
mTabLayout = (TabLayout) findViewById(R.id.mTabLayout);
mViewPager = (ViewPager) findViewById(R.id.mViewPager);
}
//初始化数据
private void initData() {
//将标签全部加进去TabLayout
for(int i=0;i<tabTitle.length;i++){
mTabLayout.addTab(mTabLayout.newTab().setText(tabTitle[i]));
}
//设置文字居中
mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
//设置顶部标签指示条的颜色
mTabLayout.setSelectedTabIndicatorColor(Color.parseColor("#4ac2b4"));
//设置标签 “未选中" 和 “选中” 的颜色
mTabLayout.setTabTextColors(Color.parseColor("#656565"),Color.parseColor("#4ac2b4"));
/**
* 需要注意的是:
* 因为在fragment中创建的MyFragmentStatePagerAdapter,所以要传getSupportFragmentManager进去
*/
mViewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(),tabTitle));
//在设置viewPager界面滑动时，创建tab滑动监听
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));

mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){

@Override
public void onTabSelected(TabLayout.Tab tab) {
//在选中的顶部标签时，为viewpager设置currentitem,显示viewPager对应的界面
mViewPager.setCurrentItem(tab.getPosition());
}

@Override
public void onTabUnselected(TabLayout.Tab tab) {

}

@Override
public void onTabReselected(TabLayout.Tab tab) {

}
});
}
}

MyFragmentPagerAdapter 适配器

package ......;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

/**
* Created by xxx on 2016/9/19.
* MyFragmentPagerAdapter
*/

public class MyFragmentPagerAdapter extends FragmentStatePagerAdapter {
private String[] mTabTitles;

public MyFragmentPagerAdapter(FragmentManager fm, String[] tabTitles) {
super(fm);
this.mTabTitles = tabTitles;
}

@Override
public Fragment getItem(int position) {
switch (position){
case 0:
return new TabFragment1();  //全部订单
case 1:
return new TabFragment2();  //待付款
case 2:
return new TabFragment3();  //待发货
case 3:
return new TabFragment4();  //待收货
case 4:
return new TabFragment5();  //退货
}
return null;
}

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

运行后的大致界面……







参考链接：http://blog.csdn.net/ppyyzz628/article/details/52335618

http://blog.csdn.net/fumier/article/details/46793153