Android:使用pagerslidingtabstrip做Tab
效果如下:
使用过程:
首先我们可以从官方 (https://github.com/astuetz/PagerSlidingTabStrip )下载 library 导入工程设置为library ,或者直接将源码和需要的资源(color string attr等添加进项目),当然也可以打包成jar包来使用。
看界面,我们需要一个activity中承载三个fragment,activity需要一个布局文件,每个fragment有一个布局文件,这里给出activity的布局:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.pagerSliding.pagersliding.MainActivity"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.astuetz.PagerSlidingTabStrip
android:textSize="16.0sp"
android:textColor="#fff"
android:background="#000"
android:id="@+id/tabs"
android:layout_width="match_parent"
app:pstsIndicatorColor="#345"
app:pstsUnderlineColor="#781"
android:layout_height="48dip" >
</com.astuetz.PagerSlidingTabStrip>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tabs"/>
</RelativeLayout>
接下来是我们的 Activity
package com.example.pagerslidingdemo;
import java.util.ArrayList;
import java.util.List;
import com.astuetz.PagerSlidingTabStrip;
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.ViewPager;
public class MainActivity extends FragmentActivity {
private ViewPager viewpager;
private PagerSlidingTabStrip tabs;
private Fragment f1, f2, f3;
private List<Fragment> pages = new ArrayList<Fragment>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 初始化
initPagers();
}
private void initPagers() {
viewpager = (ViewPager) findViewById(R.id.viewpager);
if (f1 == null) {
f1 = new Fragment1();
}
if (f2 == null) {
f2 = new Fragment2();
}
if (f3 == null) {
f3 = new Fragment3();
}
pages.add(f1);
pages.add(f2);
pages.add(f3);
viewpager.setAdapter(new MyPagerAdapter(getSupportFragmentManager(),
pages));
// 初始化 默认显示哪个
viewpager.setCurrentItem(0);
tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
tabs.setViewPager(viewpager);
}
// MyPagerAdapter要和上面实现的三个Fragment对应起来
class MyPagerAdapter extends FragmentPagerAdapter {
private final String[] TITLES = { "所有订单", "已完成订单", "未完成订单" };
private List<Fragment> fragmentlist;
public MyPagerAdapter(FragmentManager fm, List<Fragment> list) {
super(fm);
fragmentlist = list;
}
@Override
public CharSequence getPageTitle(int position) {
return TITLES[position];
}
@Override
public int getCount() {
return fragmentlist.size();
}
public Fragment getItem(int position) {
return fragmentlist.get(position);
}
}
}
然后只需要我们新建三个fragment,在不同的fragmnt中引入不同的布局,实现其对应的功能即可。
demo的下载地址:
http://download.youkuaiyun.com/detail/cassiepython/9500924