Fragment+viewpagerIndicator第三方控件实现APP主界面

Fragment+viewpagerIndicator实现APP主界面是现在是各种新闻客户端等APP开发最常用的。
通过第三方控件 viewpagerIndicator 来管理主界面的TAB 的样式和界面的滑动。 同样和前边一样这个内容区域也是用Fragment 来填充，方便代码的维护和管理
效果图

例子代码
Fragment+viewpagerIndicator实现APP主界面.zip
源码下载后的目录

library 的values 的style 中定义tab 的样式 最后在AndroidManifest.xml中引用

1.如何使用开源框架
第1步：导入library项目
我的例子代码中有library
也可以去Github 上下载viewpagerIndicator 的library ，
下载后导入eclips
第2步：导入library进我们自己新建的项目
从Github上Download下来这个zip包之后，里面会有一个library文件，是库工程，还有一个sample，是作者提供的例子（将sample这个项目import，可以看到作者提供的各种样式的Indicator，作为参考）。如果要在作者例子的基础上自己开发样式，需要将library项目import进Eclipse（library是库工程，我们需要将其作为我们自己项目的依赖库）。然后创建一个新项目，新建的项目libs目录下面有android-support-v4.jar，这个必须删除，因为ViewPageIndicator里面有这个库，我们项目中不允许两个android-support-v4.jar，不删除我们的项目是不能编译的。右键项目—Properties—Android选项卡—Add—选择library库工程—OK，导入完毕。

工程目录

关于Fragment1.java Fragment2.java Fragment3.java 和 tab1.xml tab2.xml tab3.xml 的代码我就不写了可以参照我的这篇博客（和这个一样）Fragment实现APP主界面Tab页面切换和点击事件

下边是 MainActivity.java 的代码（导包注意android.support.v4.app）

import com.viewpagerindicator.TabPageIndicator;import android.os.Bundle;import android.view.Window;import android.support.v4.app.FragmentActivity;import android.support.v4.view.ViewPager;public class MainActivity extends FragmentActivity {private ViewPager viewPager;private TabPageIndicator tabpageindicator;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() {    viewPager=(ViewPager) findViewById(R.id.id_viewpager);    tabpageindicator=(TabPageIndicator) findViewById(R.id.id_indicator);    mAdapter=new TabAdapter(getSupportFragmentManager());    viewPager.setAdapter(mAdapter);    //tabpageindicator 决定Tab的样式    tabpageindicator.setViewPager(viewPager,0);    }}

TabAdapter.java

import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;public class TabAdapter extends FragmentPagerAdapter {    //标题确定有多少个Fragment    public static String[] TITLES = new String[] { "课程", "问答", "求课" };    private Fragment fragment;    public TabAdapter(FragmentManager fm) {        super(fm);    }    @Override    public Fragment getItem(int arg0) {        switch (arg0) {        case 0:             fragment = new Fragment1();            break;        case 1:             fragment = new Fragment2();            break;        case 2:             fragment = new Fragment3();            break;        }        return fragment;    }    @Override    public int getCount() {        return TITLES.length;    }    @Override    public CharSequence getPageTitle(int position) {        return TITLES[position];    }}

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/ic_launcher"/>    <TextView         android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:textSize="20sp"        android:textColor="#ffffff"        android:textStyle="bold"        android:layout_marginLeft="3dp"                android:text="fragment"/></LinearLayout>

activity_main.xml (注意控件名称大小写不要写错)

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

AndroidManifest.xml 的android:theme 要修改为library的style 格式 关于library的style 格式则自己在library的values 的style 中设置 。这个可以下载源码查看

<application        android:allowBackup="true"        android:icon="@drawable/ic_launcher"        android:label="@string/app_name"        android:theme="@style/Theme.PageIndicatorDefaults" >        <activity            android:name=".MainActivity"            android:label="@string/app_name" >            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application>