上一篇我们用Fragment的方式实现了Tab的切换:Android Tab切换之Fragment方法
今天我们将利用ViewPager+FragmentPageAdapter的方式实现。
将之前内容区域Fragment替换为ViewPager并且ViewPager中包含的也是Fragment。这样的好处就是可以通过滑动ViewPager进行内容区域的切换。
该DEMO依然沿用之前的代码,只是主界面XML和MainActivity有变动:
主界面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/title_ui" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<include layout="@layout/tab_ui" />
</LinearLayout>
MainActivity.java:
package com.example.viewpagertabdemo01;
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.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class MainActivity extends FragmentActivity implements OnClickListener {
private ViewPager viewPager;
private LinearLayout layoutTab01;//Tab四个按钮区域
private LinearLayout layoutTab02;
private LinearLayout layoutTab03;
private LinearLayout layoutTab04;
private ImageView imageView01;
private ImageView imageView02;
private ImageView imageView03;
private ImageView imageView04;
private List<Fragment> list = new ArrayList<Fragment>();;
private FragmentPagerAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
initEvent();
setSelect(0);
}
/**
* 高亮指定Tab图片
*/
private void setSelect(int i) {
clearImageView();
switch (i) {
case 0:
imageView01.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
imageView02.setImageResource(R.drawable.tab_address_pressed);
break;
case 2:
imageView03.setImageResource(R.drawable.tab_settings_pressed);
break;
case 3:
imageView04.setImageResource(R.drawable.tab_find_frd_pressed);
break;
default:
break;
}
}
private void clearImageView() {
//将Tab区域的图片都变灰
imageView01.setImageResource(R.drawable.tab_weixin_normal);
imageView02.setImageResource(R.drawable.tab_address_normal);
imageView03.setImageResource(R.drawable.tab_settings_normal);
imageView04.setImageResource(R.drawable.tab_find_frd_normal);
}
private void initEvent() {
layoutTab01.setOnClickListener(this);
layoutTab02.setOnClickListener(this);
layoutTab03.setOnClickListener(this);
layoutTab04.setOnClickListener(this);
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
//viewPager滑动后显示在屏幕上的Page时触发
@Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
int CurrentId = viewPager.getCurrentItem();
switch (CurrentId) {
case 0:
setSelect(CurrentId);
break;
case 1:
setSelect(CurrentId);
break;
case 2:
setSelect(CurrentId);
break;
case 3:
setSelect(CurrentId);
break;
default:
break;
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
});
}
private void initView() {
viewPager = (ViewPager) findViewById(R.id.viewpager);
layoutTab01 = (LinearLayout) findViewById(R.id.tab01);
layoutTab02 = (LinearLayout) findViewById(R.id.tab02);
layoutTab03 = (LinearLayout) findViewById(R.id.tab03);
layoutTab04 = (LinearLayout) findViewById(R.id.tab04);
imageView01 = (ImageView) findViewById(R.id.tabImage01);
imageView02 = (ImageView) findViewById(R.id.tabImage02);
imageView03 = (ImageView) findViewById(R.id.tabImage03);
imageView04 = (ImageView) findViewById(R.id.tabImage04);
FragmenAddr fragmenAddr = new FragmenAddr();
FragmenFriend fragmenFriend = new FragmenFriend();
FragmenSetting fragmenSetting = new FragmenSetting();
FragmenWeixin fragmenWeixin = new FragmenWeixin();
list.add(fragmenWeixin);
list.add(fragmenAddr);
list.add(fragmenSetting);
list.add(fragmenFriend);
adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public int getCount() {
// TODO Auto-generated method stub
return list.size();
}
@Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
return list.get(arg0);
}
};
viewPager.setAdapter(adapter);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.tab01:
setSelect(0);
viewPager.setCurrentItem(0);
break;
case R.id.tab02:
setSelect(1);
viewPager.setCurrentItem(1);
break;
case R.id.tab03:
setSelect(2);
viewPager.setCurrentItem(2);
break;
case R.id.tab04:
setSelect(3);
viewPager.setCurrentItem(3);
break;
default:
break;
}
}
}
效果图和前一篇没什么区别,这里就不上了 。
不过使用这种方式实现的时候,假如Fragment内容区域内有一个ListView等控件,可能会造成ViewPager与ListView的冲突