Android ViewPager Fragment 选项卡切换

功能：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);
}
}