Android:使用pagerslidingtabstrip做Tab

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.csdn.net/detail/cassiepython/9500924




你可能感兴趣的:(android)