Tablayout与ViewPager的结合使用

Tablayout想要实现：首先必须添加V7包下的资源

compile ‘com.android.support:design:23.0.0’

主Activity的布局

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

<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scrollbars="none">
</android.support.v4.view.ViewPager>

<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabBackground="#EFEFEF"
app:tabGravity="fill"
app:tabIndicatorHeight="0dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#12c8cf"
app:tabTextColor="#000">
</android.support.design.widget.TabLayout>

</LinearLayout>

主Activity的代码实现

/**
* 实现底部的Tablayout
*/
public class ThreeActivity extends FragmentActivity {

private TabLayout mTablayout;
private ViewPager mViewPager;
private TabLayout.Tab one;
private TabLayout.Tab two;
private TabLayout.Tab three;
private TabLayout.Tab four;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_three);
//初始化控件
initViews();
initListen();
}

//给TabLayout加监听
private void initListen() {
mTablayout.setOnTabSelectedListener(new     TabLayout.OnTabSelectedListener() {
//选中了tab的逻辑
@Override
public void onTabSelected(TabLayout.Tab tab) {
if (tab == mTablayout.getTabAt(0)) {
tab.setIcon(R.mipmap.toolbar_home_pre);
mViewPager.setCurrentItem(0);//用来点击tab时切换
} else if (tab == mTablayout.getTabAt(1)) {
tab.setIcon(R.mipmap.toolbar_message_pre);
mViewPager.setCurrentItem(1);
} else if (tab == mTablayout.getTabAt(2)) {
tab.setIcon(R.mipmap.toolbar_my_pre);
mViewPager.setCurrentItem(2);
} else if (tab == mTablayout.getTabAt(3)) {
tab.setIcon(R.mipmap.toolbar_home_pre);
mViewPager.setCurrentItem(3);
}
}

//没有选中了tab的逻辑
@Override
public void onTabUnselected(TabLayout.Tab tab) {
if (tab == mTablayout.getTabAt(0)) {
tab.setIcon(R.mipmap.toolbar_home);
} else if (tab == mTablayout.getTabAt(1)) {
tab.setIcon(R.mipmap.toolbar_message);
} else if (tab == mTablayout.getTabAt(2)) {
tab.setIcon(R.mipmap.toolbar_my);
} else if (tab == mTablayout.getTabAt(3)) {
tab.setIcon(R.mipmap.toolbar_home);
}
}
//再次选择的逻辑
@Override
public void onTabReselected(TabLayout.Tab tab) {

}
});

}

private void initViews() {
mTablayout = (TabLayout) findViewById(R.id.tabLayout);
mViewPager = (ViewPager) findViewById(R.id.viewPager);

final String names[] = {"喜", "怒", "哀", "乐"};

//送数据
mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return Pagefragment.newInstance(position + 1);
}

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

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

//将TabLayout和viewpager联系起来
mTablayout.setupWithViewPager(mViewPager);

//给TabLayout上添加tab
one = mTablayout.getTabAt(0);
two = mTablayout.getTabAt(1);
three = mTablayout.getTabAt(2);
four = mTablayout.getTabAt(3);

//给Tab页上添加图标
one.setIcon(R.mipmap.toolbar_home_pre);
two.setIcon(R.mipmap.toolbar_message);
three.setIcon(R.mipmap.toolbar_my);
four.setIcon(R.mipmap.toolbar_home);
}
}

Fragment的代码实现

public class Pagefragment extends Fragment {

public static final String ARG_PAGE = "ARG_PAGE";
private int mPage;

public static Pagefragment newInstance(int page) {
Bundle args = new Bundle();
args.putInt(ARG_PAGE, page);
Pagefragment pageFragment = new Pagefragment();
pageFragment.setArguments(args);
return pageFragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mPage = getArguments().getInt(ARG_PAGE);
}

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment, container, false);
TextView textView = (TextView) view;
textView.setText("Fragment #" + mPage);
return view;
}

fragment的布局

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="展示传来的值"/>

//有一个问题（滑动的时候图标改变有问题，点击的时候没错）