实现微信布局的四种方式（四）

第四种：使用第三方库ViewPagerIndicator指示器。将ViewPager与FragmentPagerAdapter相结合来实现。

首先看一下今天要实现的效果

可能有些人不会使用第三方库，接下来我们来看一下如何使用

1. github上搜索viewpagerIndicator: https://github.com/JakeWharton/ViewPagerIndicator
2. 下载zip包，解压，eclipse中import->Android Existing Code->(注意只导入解压后下面的Library)
3. 导入后标记为Property->Android->isLibrary
4. 将indicator下面的libs下的support-v4的jar包copy到主项目文件下的libs覆盖，否则会报version mismatch
5. 在主项目中property->Android->AddLibrary添加进来
6. ctrl+Alt+T试着将TabPagexxx的class搜索出来，说明项目已经成功导入

接下来就是顶部布局top.xml的实现

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#58ACED"
    android:gravity="center_vertical"
    android:orientation="horizontal" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/idx_logo" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="imooc"
        android:textColor="#ffffff"
        android:layout_marginLeft="3dp"
        android:textSize="20sp"
        android:textStyle="bold" />

</LinearLayout>

接下来为四个Fragment共用一个布局文件，如果你想实现每个布局文件里面又有不同的布局，参照实现微信布局的前三种方法即可，在不同的布局文件里面添加不同的按钮等等各种信息，由于这里实现的功能较为简单，四个Fragment共用一个。其代码如下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="#ffffff"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/id_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textStyle="bold"
        android:textSize="22sp"
        android:text="helloworld" />

</RelativeLayout>

在接下来就是整体布局，整体布局要注意：需要使用我们的指示器，所以要将其包含在内，这与第一种略有不同

其代码如下

<LinearLayout 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"
    android:background="#C5DAED"
    android:orientation="vertical" >

    <include layout="@layout/top" />

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/id_indicator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent" >
    </com.viewpagerindicator.TabPageIndicator>

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    </android.support.v4.view.ViewPager>

</LinearLayout>

接下来创建四个Fragment.java的公共类

package com.imooc.tab04;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

@SuppressLint("ValidFragment")
public class TabFragment extends Fragment
{
	private int pos;

	@SuppressLint("ValidFragment")
	public TabFragment(int pos)
	{
		this.pos = pos;
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState)
	{
		View view = inflater.inflate(R.layout.frag, container, false);
		TextView tv = (TextView) view.findViewById(R.id.id_tv);
		tv.setText(TabAdapter.TITLES[pos]);
		return view;
	}
}

在接下来为四个Fragment创建FragmentPagerAdapter

package com.imooc.tab04;

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

public class TabAdapter extends FragmentPagerAdapter
{

	public static String[] TITLES = new String[]
	{ "课程", "问答", "求课", "学习", "计划" };

	public TabAdapter(FragmentManager fm)
	{
		super(fm);
	}

	@Override
	public Fragment getItem(int arg0)
	{
		TabFragment fragment = new TabFragment(arg0);
		return fragment;
	}

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

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

}

最后在MainActivity.java类中，加载四个Fragment，并实现相应的功能。

package com.imooc.tab04;

import java.util.List;

import android.app.Fragment;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Window;

import com.viewpagerindicator.TabPageIndicator;

public class MainActivity extends FragmentActivity
{
	private ViewPager mViewPager;
	private TabPageIndicator mTabPageIndicator;
	private TabAdapter mAdapter ;

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

	private void initView()
	{
		mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
		mTabPageIndicator = (TabPageIndicator) findViewById(R.id.id_indicator);
		mAdapter = new TabAdapter(getSupportFragmentManager());
		mViewPager.setAdapter(mAdapter);
		
		mTabPageIndicator.setViewPager(mViewPager, 0);
	}
	
	

}

有以上实现的过程可以看到 用了第三方库：指示器，不需要自己再去写tab简化了代码。。

有的同学可能会报错

<style name="MyWidget.TabPageIndicator" parent="Widget">这个会报错?

\res\values\styles.xml:29: error: Error retrieving parent for item: No resource found that matches the given name 'Widget'.

可能是你的路径没有对