Fragment+TabPageIndicator+ViewPager实现蜜淘主体框架

最近研究了一下蜜淘的App，做的还不错，就试着写了一下，效果还可以，先上图：

这里用到了一个开源框架，大家可以去看一下，地址：点击打开链接

我们需要引入开源库的library，添加到自己的项目中

MainActivity布局如下：

<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" >

   <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <com.viewpagerindicator.TabPageIndicator
            android:id="@+id/indicator"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#000000" />

        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="fill_parent"
            android:layout_height="0.0dip"
            android:layout_weight="1.0" />
    </LinearLayout>

</RelativeLayout>

MainActivity 代码：

package com.example.fangmitao;

import com.viewpagerindicator.TabPageIndicator;

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;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Menu;
import android.view.Window;

/**
 * 整体结构框架
 * 
 * @author shihao
 * 
 */

public class MainActivity extends FragmentActivity {

	/**
	 * Tab标题
	 */
	private static final String[] TITLE = new String[] { "首页", "特卖", "保健",
			"包包", "母婴", "童装", "鞋子", "电子", "女装", "男装", "新事物" };

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);

		// ViewPager的adapter
		FragmentPagerAdapter adapter = new TabPageIndicatorAdapter(
				getSupportFragmentManager());
		ViewPager pager = (ViewPager) findViewById(R.id.pager);
		pager.setAdapter(adapter);

		// 实例化TabPageIndicator然后设置ViewPager与之关联
		TabPageIndicator indicator = (TabPageIndicator) findViewById(R.id.indicator);
		indicator.setViewPager(pager);

		// 如果我们要对ViewPager设置监听，用indicator设置就行了
		indicator.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int arg0) {
				// Toast.makeText(getApplicationContext(), TITLE[arg0],
				// Toast.LENGTH_SHORT).show();
			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {

			}
		});
	}

	/**
	 * ViewPager适配器
	 * 
	 */
	class TabPageIndicatorAdapter extends FragmentPagerAdapter {
		public TabPageIndicatorAdapter(FragmentManager fm) {
			super(fm);
		}

		@Override
		public Fragment getItem(int position) {
			// 新建一个Fragment来展示ViewPager 各个页面的内容，并传递参数
			Fragment fragment = new ContentFragment();
			Bundle args = new Bundle();
			args.putString("arg", TITLE[position]);
			fragment.setArguments(args);
			return fragment;
		}

		@Override
		public CharSequence getPageTitle(int position) {
			return TITLE[position % TITLE.length];
		}

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

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

ContentFragment 类不再展示，里边就是一个TextView 用来接收Intent 传递过来的参数

style 样式如下：

<style name="StyledIndicators" parent="@android:style/Theme.Light">
        <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
    </style>

    <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
        <item name="android:background">@drawable/tab_indicator</item>
        <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
        <item name="android:textSize">16.0sp</item>
        <item name="android:textColor">#ffffff</item>
        <item name="android:paddingLeft">8.0dip</item>
        <item name="android:paddingRight">8.0dip</item>
        <item name="android:fadingEdge">horizontal</item>
        <item name="android:fadingEdgeLength">8.0dip</item>
        <item name="android:minWidth">70.0dip</item>
    </style>

    <style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
        <item name="android:typeface">monospace</item>
        <item name="android:textColor">@drawable/selector_tabtext</item>
    </style>

然后在AndroidMainfest.xml的主题中把样式改为android:theme="@style/StyledIndicators"

这样就可以实现大体效果了。

源代码下载链接如下： http://download.csdn.net/detail/shr957250701/8156845

引入的jar包下载地址如下：http://download.csdn.net/detail/shr957250701/8157257