ViewPager和FragmentPagerAdapter适配器实现微信tab界面 （可实现左右拖动切换界面）...

效果：

一.主要步骤:

1.创建工程项目，建立四个Fragment.java文件（如 weixin_Fragment.java） 

2.建立四个tab.xml文件（如：tab01.xml）

3.创建top.xml文件（用于显示界面标题），bottom.xml文件（用于显示界面底下的四个ImageButton及对应textView）

4.完成activity_main.xml布局  （中间部分用ViewPager）

5.创建适配器：FragmentPagerAdapter

6.对需要的亮和暗色图片放入drawable中

二.代码实现：

1.Fragment.java文件格式：

如：

public class Weixin_Fragment extends Fragment {
@Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.tab01,container,false);
    }

2.tab.xml 代码格式：

如：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <TextView
        android:text="This is Weixin Tab"
        android:textSize="30sp"
        android:gravity="center"
        android:textStyle="bold"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

（这里只是作为识别界面用所以比较简单，平常用可以进行扩展）

3.标题栏 top.xml格式：

如：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="#464646"
    android:gravity="center"
    android:layout_height="55dp">

    <TextView
        android:gravity="center"
        android:text="微信"
        android:textSize="20sp"
        android:textColor="#ffffff"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

4.底部按钮布局：bottom.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:background="#ffffff"
    android:layout_height="65dp">

    <LinearLayout
        android:id="@+id/tab_weixin"
        android:layout_width="0dp"
        android:orientation="vertical"
        android:layout_weight="1"
        android:gravity="center"
        android:layout_height="match_parent">

        <ImageButton
            android:clickable="false"
            android:id="@+id/tab_weixin_img"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:src="@drawable/weixin_anse"
            android:background="#0000"
             />

        <TextView
            android:text="微信"
            android:textColor="#000000"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab_friend"
        android:layout_width="0dp"
        android:orientation="vertical"
        android:layout_weight="1"
        android:gravity="center"
        android:layout_height="match_parent">

        <!--当点击图片按钮没有作用时可设置： android:clickable="false" 图片不可点击即让LinearLayout 去实现点击事件-->
        <ImageButton
            android:clickable="false"
            android:id="@+id/tab_friend_img"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:src="@drawable/friend_anse"
            android:background="#00000000"
            />
        <!--android:background="#00000000"  设置为透明 和四个0效果一样-->

        <TextView
            android:text="朋友"
            android:textColor="#000000"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab_address"
        android:layout_width="0dp"
        android:orientation="vertical"
        android:layout_weight="1"
        android:gravity="center"
        android:layout_height="match_parent">

        <ImageButton
            android:clickable="false"
            android:id="@+id/tab_address_img"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:src="@drawable/zhibo_anse"
            android:background="#00000000"  //八个0和四个0均表示透明
            />

        <TextView
            android:text="直播"
            android:textColor="#000000"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab_setting"
        android:layout_width="0dp"  //宽度方向平分空间最好设为0dp
        android:orientation="vertical"
        android:layout_weight="1"  //分享剩余空间
        android:gravity="center"
        android:layout_height="match_parent">

        <ImageButton
            android:clickable="false"
            android:id="@+id/tab_setting_img"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:src="@drawable/shezhi_anse"
            android:background="#00000000"
            />

        <TextView
            android:text="设置"
            android:textColor="#000000"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:layout_height="0dp" />

    </LinearLayout>

</LinearLayout>

5.对主界面布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

   <include layout="@layout/top"/>   //引入布局


    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"></android.support.v4.view.ViewPager>

    <include layout="@layout/bottom"/>  //引入布局
    
</LinearLayout>

中间部分是用ViewPager进行填充

6.MainActivity.java实现：

public class MainActivity extends FragmentActivity implements View.OnClickListener {

private ViewPager mViewPager;
    private Fragment tab01;
    private Fragment tab02;
    private Fragment tab03;
    private Fragment tab04;

    private FragmentPagerAdapter mAdapter;  //适配器
    private List<Fragment> list_fragment;   //复制容器

    private LinearLayout mTabweixin;
    private LinearLayout mTabFriend;
    private LinearLayout mTabAddress;
    private LinearLayout mTabSetting;

    private ImageButton mImgWeixin;
    private ImageButton mImgFriend;
    private ImageButton mImgAddress;
    private ImageButton mImgSetting;



    private GoogleApiClient client;


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

        initView();
        initEvent();
        setSelect(0);
        //client = new GoogleApiClient.Builder(this).addApi(AppIndex.API).build();
    }

private void initEvent() {
mTabweixin.setOnClickListener(this);
        mTabFriend.setOnClickListener(this);
        mTabAddress.setOnClickListener(this);
        mTabSetting.setOnClickListener(this);
    }

private void initView() {
mViewPager = (ViewPager) findViewById(R.id.id_viewpager);

        mTabweixin= (LinearLayout) findViewById(R.id.tab_weixin);
        mTabFriend= (LinearLayout) findViewById(R.id.tab_friend);
        mTabAddress= (LinearLayout) findViewById(R.id.tab_address);
        mTabSetting= (LinearLayout) findViewById(R.id.tab_setting);

        mImgWeixin= (ImageButton) findViewById(R.id.tab_weixin_img);
        mImgFriend= (ImageButton) findViewById(R.id.tab_friend_img);
        mImgAddress= (ImageButton) findViewById(R.id.tab_address_img);
        mImgSetting= (ImageButton) findViewById(R.id.tab_setting_img);

        //加载资源
        list_fragment=new ArrayList<Fragment>();
        Fragment tab01=new Weixin_Fragment();
        Fragment tab02=new Friend_Fragment();
        Fragment tab03=new Address_Fragment();
        Fragment tab04=new Setting_Fragment();
        list_fragment.add(tab01);
        list_fragment.add(tab02);
        list_fragment.add(tab03);
        list_fragment.add(tab04);

        mAdapter=new FragmentPagerAdapter(getSupportFragmentManager()) {  //适配器直接new出来
            @Override
            public Fragment getItem(int position) {
return list_fragment.get(position);//直接返回
            }

@Override
            public int getCount() {
return list_fragment.size();
            }

};


        mViewPager.setAdapter(mAdapter);  //加载适配器
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {  //监听界面拖动
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}
@Override
            public void onPageSelected(int position) {
int currentItem=mViewPager.getCurrentItem(); //获取当前界面
                resetImg();  //将所有图标变暗
                tab(currentItem); //切换图标亮度
            }
@Override
            public void onPageScrollStateChanged(int state) {

}

});

    } //initView

    private void tab(int i){  //用于屏幕脱拖动时切换底下图标，只在监听屏幕拖动中调用
        switch (i){
case 0:{
mImgWeixin.setImageResource(R.drawable.weixin_lang);
                break;
            }
case 1:

{
mImgFriend.setImageResource(R.drawable.shezhi_liang);
                break;
            }
case 2:

{
mImgAddress.setImageResource(R.drawable.zhibo_liang);
                break;
            }
case 3:

{
mImgSetting.setImageResource(R.drawable.shezhi_liang);
                break;
            }

}

}//tab()


    //自定义一个方法
    private void setSelect(int i){

mViewPager.setCurrentItem(i);//切换界面

    }  //setSelect()


    @Override
    public void onClick(View view) {  //设置点击的为；亮色
        resetImg();
        switch (view.getId()){
case R.id.tab_weixin:{

setSelect(0);
                mImgWeixin.setImageResource(R.drawable.weixin_lang);
                break;
            }
case R.id.tab_friend:

{

setSelect(1);
                mImgFriend.setImageResource(R.drawable.shezhi_liang);
                break;
            }
case R.id.tab_address:

{

setSelect(2);
                mImgAddress.setImageResource(R.drawable.zhibo_liang);
                break;
            }
case R.id.tab_setting:

{

setSelect(3);
                mImgSetting.setImageResource(R.drawable.shezhi_liang);
                break;
            }


}


} //onclick()


//设置按钮暗色
    private void resetImg() {
mImgWeixin.setImageResource(R.drawable.weixin_anse);
        mImgFriend.setImageResource(R.drawable.friend_anse);
        mImgAddress.setImageResource(R.drawable.zhibo_anse);
        mImgSetting.setImageResource(R.drawable.shezhi_anse);
    }


}

项目地址：https://github.com/linyuanbin/FragmentPagerAdapter.git