多种多样的App主界面Tab实现方法（三）：Fragment+ViewPager

hyman老师慕课网视频连接  http://www.imooc.com/learn/264    

  上篇我们用Fragment实现了底部Tab的效果，但是有一个问题，不能左右滑动，下面我们就借助ViewPager帮助他实现左右滑动的效果。

xml布局文件和第二篇中基本上没有变化，只是主页面布局中间换为viewpager控件。

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" />

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

由于FragmentPagerAdapter引用V4包，我们就把所有Fragment相关的包全部引用v4包。MainActivity需要继承自FragmentActivity，初始化FragmentManager实例的方法需改为getSupportFragmentManager()。

把Fragment放进List数组里，用List将FragmentPagerAdapter初始化，再用FragmentPagerAdapter将ViewPager初始化，这样ViewPager中就是可以左右滑动的Fragment了。

MainActivity.java

package com.example.tab03;

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.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

import com.example.fragment.AddFragment;
import com.example.fragment.FrdFragment;
import com.example.fragment.SettingFragment;
import com.example.fragment.WeiXinFragment;

public class MainActivity extends FragmentActivity implements OnClickListener{
	public ViewPager mViewPager;
	public FragmentPagerAdapter fragmentPA;
	public List<Fragment> mfragments;
			
	public LinearLayout weixin_tab;
	public LinearLayout frd_tab;
	public LinearLayout add_tab;
	public LinearLayout setting_tab;
	
	public ImageButton weixin_image;
	public ImageButton frd_image;
	public ImageButton add_image;
	public ImageButton setting_image;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		
		//初始化视图
		intViews();
		//初始化事件
		intEvents();
		
		//设置初始页面
		mViewPager.setCurrentItem(0);
	}

	@SuppressWarnings("deprecation")
	private void intViews() {
		//初始化ViewPager
		mViewPager=(ViewPager) findViewById(R.id.id_viewpager);
		
		//初始化LinearLayout和ImageButton
		weixin_tab=(LinearLayout) findViewById(R.id.weixin_tab);
		frd_tab=(LinearLayout) findViewById(R.id.frd_tab);
		add_tab=(LinearLayout) findViewById(R.id.add_tab);
		setting_tab=(LinearLayout) findViewById(R.id.setting_tab);
		weixin_image=(ImageButton) findViewById(R.id.weixin_img);
		frd_image=(ImageButton) findViewById(R.id.frd_img);
		add_image=(ImageButton) findViewById(R.id.add_img);
		setting_image=(ImageButton) findViewById(R.id.setting_img);
				
		//将Fragment实例装进List中7
		mfragments=new ArrayList<Fragment>();
		
		Fragment weixin_fragment=new WeiXinFragment();
		Fragment frd_fragment=new FrdFragment();
		Fragment add_fragment=new AddFragment();
		Fragment setting_fragment=new SettingFragment();
				
		mfragments.add(weixin_fragment);
		mfragments.add(frd_fragment);
		mfragments.add(add_fragment);
		mfragments.add(setting_fragment);
		
		
		//把List数据添加到FragmentPagerAdapter中
		fragmentPA=new FragmentPagerAdapter(getSupportFragmentManager()){

			@Override
			public Fragment getItem(int arg0) {
				return mfragments.get(arg0);
			}

			@Override
			public int getCount() {
				return mfragments.size();
			}			
		};
		
		//将FragmentPagerAdapter添加到ViewPager中
		mViewPager.setAdapter(fragmentPA);
		mViewPager.setOnPageChangeListener(new OnPageChangeListener(){

			@Override
			public void onPageScrollStateChanged(int arg0) {
				
			}

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

			@Override
			public void onPageSelected(int arg0) {
				resetImage();
				int currentItem = mViewPager.getCurrentItem();
				switch(currentItem){
				case 0:
					weixin_image.setImageResource(R.drawable.tab_weixin_pressed);
					break;
				case 1:
					frd_image.setImageResource(R.drawable.tab_find_frd_pressed);
					break;
				case 2:
					add_image.setImageResource(R.drawable.tab_address_pressed);
					break;
				case 3:					
					setting_image.setImageResource(R.drawable.tab_settings_pressed);
					break;
				default:
		            break;
				}				
			}			
		});		
	}

	private void intEvents() {
		// 设置LinearLayout的点击事件
		weixin_tab.setOnClickListener(this);
		frd_tab.setOnClickListener(this);
		add_tab.setOnClickListener(this);
		setting_tab.setOnClickListener(this);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		int id = item.getItemId();
		if (id == R.id.action_settings) {
			return true;
		}
		return super.onOptionsItemSelected(item);
	}

	@Override
	public void onClick(View v) {
		resetImage();
		switch(v.getId()){
		case R.id.weixin_tab:
			mViewPager.setCurrentItem(0);
			weixin_image.setImageResource(R.drawable.tab_weixin_pressed);
			break;
		case R.id.frd_tab:
			mViewPager.setCurrentItem(1);
			frd_image.setImageResource(R.drawable.tab_find_frd_pressed);
			break;
		case R.id.add_tab:
			mViewPager.setCurrentItem(2);
			add_image.setImageResource(R.drawable.tab_address_pressed);
			break;
		case R.id.setting_tab:
			mViewPager.setCurrentItem(3);
			setting_image.setImageResource(R.drawable.tab_settings_pressed);
			break;
		default:
            break;
		}
		
	}
	
	//将所有图片都设暗
		private void resetImage() {
			weixin_image.setImageResource(R.drawable.tab_weixin_normal);
			frd_image.setImageResource(R.drawable.tab_find_frd_normal);	
			add_image.setImageResource(R.drawable.tab_address_normal);
			setting_image.setImageResource(R.drawable.tab_settings_normal);			
		}
}

需要注意的是四个Fragment文件中，引入的包都要改为v4包。

import android.support.v4.app.Fragment;

WeiXinFragment.java

package com.example.fragment;

import com.example.tab02.R;

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

public class WeiXinFragment extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		return inflater.inflate(R.layout.weixin_tab, container, false);
	}

}

源码下载：http://pan.baidu.com/s/1o7twYoU

提取码：wqj6

若连接被和谐，可通过邮箱联系我。chunxiao123ouc@163.com