多种多样的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