功能：ViewPager + Fragment 選項卡切換

控制元件：<android.support.v4.view.ViewPager />、ImageButton

Java類：ViewPager、FragmentPagerAdapter、List<Fragment>

描述：ViewPager滑動切換時，相對應的ImageButton切換到選中狀態，
            ImageButton點選是，相對應的ViewPager切換到選中狀態。

主要事件：
1、FragmentPagerAdapter
2、ViewPager的滑動事件：mViewPager.setOnPageChangeListener(new OnPageChangeListener() {}
3、ImageButton點選事件：View.OnClickListener{}

主介面：activity_vpager_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="500dip"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <LinearLayout
                android:id="@+id/linearLayout1"
                android:layout_width="90dip"
                android:layout_height="wrap_content"
                android:paddingBottom="5dip"
                android:paddingTop="10dip">

                <ImageButton
                    android:id="@+id/btn_tab_bottom_weixin"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:gravity="center"
                    android:src="@drawable/ic_launcher"  />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/linearLayout2"
                android:layout_width="90dip"
                android:layout_height="wrap_content"
                android:paddingBottom="5dip"
                android:paddingTop="10dip">

                <ImageButton
                    android:id="@+id/btn_tab_bottom_friend"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:gravity="center"
                    android:src="@drawable/ic_launcher"  />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/linearLayout3"
                android:layout_width="90dip"
                android:layout_height="wrap_content"
                android:paddingBottom="5dip"
                android:paddingTop="10dip">

                <ImageButton
                    android:id="@+id/btn_tab_bottom_contact"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:gravity="center"
                    android:src="@drawable/ic_launcher"  />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/linearLayout4"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:paddingBottom="5dip"
                android:paddingTop="10dip">
                <ImageButton
                    android:id="@+id/btn_tab_bottom_setting"
                    android:layout_width="100dip"
                    android:layout_height="fill_parent"
                    android:gravity="center"
                    android:src="@drawable/ic_launcher"  />
            </LinearLayout>
        </LinearLayout>
        </LinearLayout>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <android.support.v4.view.ViewPager
            android:id="@+id/vPager"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="#a83737">
        </android.support.v4.view.ViewPager>
    </LinearLayout>
</LinearLayout>
 

選項卡子介面

layout1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#9F35FF">

    <TextView
        android:id="@+id/tv_hello"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />

</LinearLayout>
 

layout2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#00DB00">
    <ListView
        android:id="@+id/myListView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</LinearLayout>

layout3.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="match_parent"
    android:background="#ff0000"
    android:orientation="vertical">
</LinearLayout>

Java程式碼

package com.info.activity;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class VpagerFragmentActivity extends FragmentActivity {

    private ViewPager mViewPager;
    private FragmentPagerAdapter mAdapter;
    private List<Fragment> mFragments = new ArrayList<Fragment>();

    /**
     * 底部四個按鈕
     */
    private LinearLayout mTabBtnWeixin;
    private LinearLayout mTabBtnFrd;
    private LinearLayout mTabBtnAddress;

    private ImageButton btn1, btn2, btn3;

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

        initView();

        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int arg0) {
                return mFragments.get(arg0);
            }

            @Override
            public int getCount() {
                Log.e("T", String.valueOf(mFragments.size()));
                return mFragments.size();
            }
        };

        mViewPager = (ViewPager) findViewById(R.id.vPager);

        mViewPager.setAdapter(mAdapter);

        /**
         * 滑動viewpager按鈕切合
         * */
        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
            private int currentIndex;

            @Override
            public void onPageSelected(int position) {
                resetTabBtn();
                switch (position) {
                    case 0:
                        ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))
                                .setImageResource(R.drawable.headimg);
                        Log.e("T", "1");
                        break;
                    case 1:
                        ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))
                                .setImageResource(R.drawable.headimg);
                        Log.e("T", "2");
                        break;
                    case 2:
                        ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))
                                .setImageResource(R.drawable.headimg);
                        Log.e("T", "3");
                        break;
                }
                currentIndex = position;
            }

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

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
            }
        });
    }

    protected void resetTabBtn() {
        ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin))
                .setImageResource(R.drawable.ic_launcher);
        ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend))
                .setImageResource(R.drawable.ic_launcher);
        ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact))
                .setImageResource(R.drawable.ic_launcher);
    }

    private void initView() {
        mTabBtnWeixin = (LinearLayout) findViewById(R.id.linearLayout1);
        mTabBtnFrd = (LinearLayout) findViewById(R.id.linearLayout2);
        mTabBtnAddress = (LinearLayout) findViewById(R.id.linearLayout3);

        btn1 = ((ImageButton) mTabBtnWeixin.findViewById(R.id.btn_tab_bottom_weixin));
        btn2 = ((ImageButton) mTabBtnFrd.findViewById(R.id.btn_tab_bottom_friend));
        btn3 = ((ImageButton) mTabBtnAddress.findViewById(R.id.btn_tab_bottom_contact));

        btn1.setOnClickListener(new MyOnClickListener(0));
        btn2.setOnClickListener(new MyOnClickListener(1));
        btn3.setOnClickListener(new MyOnClickListener(2));

        MainTab01 tab01 = new MainTab01();
        MainTab02 tab02 = new MainTab02();
        MainTab03 tab03 = new MainTab03();

        mFragments.add(tab01);
        mFragments.add(tab02);
        mFragments.add(tab03);
    }

    public class MyOnClickListener implements View.OnClickListener {
        private int index = 0;

        public MyOnClickListener(int i) {
            index = i;
            Log.e("T", String.valueOf(index));
        }

        @Override
        public void onClick(View v) {
            mViewPager.setCurrentItem(index);
        }
    }
}

3個選項卡子介面

package com.info.activity;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by jie on 2016-02-29.
 */
public class MainTab01 extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        return  inflater.inflate(R.layout.layout1, container, false);
    }
}

package com.info.activity;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by jie on 2016-02-29.
 */
public class MainTab02 extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        return  inflater.inflate(R.layout.layout2, container, false);
    }
}

package com.info.activity;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by jie on 2016-02-29.
 */
public class MainTab03 extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        return  inflater.inflate(R.layout.layout3, container, false);
    }
}