先给大家展示效果图：
1.新建TestFragmen继承Fragment
public class TestFragment extends Fragment { private static final String TAG = "TestFragment"; private String hello;// = "hello android"; private String defaultHello = "default value"; private Map<string, object=""> maplist; static TestFragment newInstance(String s, Map<string, object=""> map) { TestFragment newFragment = new TestFragment(); // Bundle bundle = new Bundle(); // bundle.putString("hello", s); // newFragment.setArguments(bundle); final SerializableMap myMap=new SerializableMap(); myMap.setMap(map); Bundle bundle = new Bundle(); bundle.putSerializable("map", myMap); newFragment.setArguments(bundle); return newFragment; } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Log.d(TAG, "TestFragment-----onCreate"); Bundle args = getArguments(); // hello = args != null ? args.getString("hello") : defaultHello; Bundle bundle = getArguments(); SerializableMap serializableMap = (SerializableMap) bundle.get("map"); maplist =serializableMap.getMap(); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) { Log.d(TAG, "TestFragment-----onCreateView"); View view = inflater.inflate(R.layout.lay1, container, false); // TextView viewhello = (TextView) view.findViewById(R.id.tv_hello); //viewhello.setText(maplist.get("userid")+"time"); ListView lv = (ListView) view.findViewById(R.id.listView3); ContactAdapter hc = new ContactAdapter(getActivity().getApplicationContext(),getContact()); lv.setAdapter(hc); lv.setCacheColorHint(0); return view; } private ArrayList<contact> getContact(){ ArrayList<contact> hcList = new ArrayList<contact>(); for(int i=0;i<10;i++) { Contact c0 = new Contact(); c0.setTxPath(R.drawable.more_game+""); c0.setName(maplist.get("userid")+" 年龄："+maplist.get("age")); hcList.add(c0); } return hcList; } @Override public void onDestroy() { super.onDestroy(); Log.d(TAG, "TestFragment-----onDestroy"); } } </contact></contact></contact></string,></string,>
2.MyFragmentPagerAdapter继承FragmentPagerAdapter
public class MyFragmentPagerAdapter extends FragmentPagerAdapter { private ArrayList<fragment> fragmentsList; public MyFragmentPagerAdapter(FragmentManager fm) { super(fm); } public MyFragmentPagerAdapter(FragmentManager fm, ArrayList<fragment> fragments) { super(fm); this.fragmentsList = fragments; } @Override public int getCount() { return fragmentsList.size(); } @Override public Fragment getItem(int arg0) { return fragmentsList.get(arg0); } @Override public int getItemPosition(Object object) { return super.getItemPosition(object); } } </fragment></fragment>
3.MainActivity 要继承FragmentActivity
public class MainActivity extends FragmentActivity { private static final String TAG = "MainActivity"; private ViewPager mPager; private ArrayList<fragment> fragmentsList; private ImageView ivBottomLine; private TextView tvTabActivity, tvTabGroups, tvTabFriends, tvTabChat; private int currIndex = 0; private int bottomLineWidth; private int offset = 0; private int position_one; private int position_two; private int position_three; private Resources resources; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.main); resources = getResources(); InitWidth(); InitTextView(); InitViewPager(); } private void InitTextView() { tvTabActivity = (TextView) findViewById(R.id.tv_tab_activity); tvTabGroups = (TextView) findViewById(R.id.tv_tab_groups); tvTabFriends = (TextView) findViewById(R.id.tv_tab_friends); tvTabChat = (TextView) findViewById(R.id.tv_tab_chat); tvTabActivity.setOnClickListener(new MyOnClickListener(0)); tvTabGroups.setOnClickListener(new MyOnClickListener(1)); tvTabFriends.setOnClickListener(new MyOnClickListener(2)); tvTabChat.setOnClickListener(new MyOnClickListener(3)); } private void InitViewPager() { mPager = (ViewPager) findViewById(R.id.vPager); fragmentsList = new ArrayList<fragment>(); Map<string, object=""> paramMap = new HashMap<string, object="">(); paramMap.put("userid","小洪"); paramMap.put("age",23); Map<string, object=""> paramMap2 = new HashMap<string, object="">(); paramMap2.put("userid","vatty"); paramMap2.put("age",24); Map<string, object=""> paramMap3 = new HashMap<string, object="">(); paramMap3.put("userid","小明"); paramMap3.put("age",25); Map<string, object=""> paramMap4 = new HashMap<string, object="">(); paramMap4.put("userid","hongshengpeng.com"); paramMap4.put("age",26); Fragment activityfragment = TestFragment.newInstance("Hello Activity.",paramMap); Fragment groupFragment = TestFragment.newInstance("Hello Group.",paramMap2); Fragment friendsFragment=TestFragment.newInstance("Hello Friends.",paramMap3); Fragment chatFragment=TestFragment.newInstance("Hello Chat.",paramMap4); fragmentsList.add(activityfragment); fragmentsList.add(groupFragment); fragmentsList.add(friendsFragment); fragmentsList.add(chatFragment); mPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList)); mPager.setCurrentItem(0); mPager.setOnPageChangeListener(new MyOnPageChangeListener()); } private void InitWidth() { ivBottomLine = (ImageView) findViewById(R.id.iv_bottom_line); bottomLineWidth = ivBottomLine.getLayoutParams().width; Log.d(TAG, "cursor imageview width=" + bottomLineWidth); DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); int screenW = dm.widthPixels; offset = (int) ((screenW / 4.0 - bottomLineWidth) / 2); Log.i("MainActivity", "offset=" + offset); position_one = (int) (screenW / 4.0); position_two = position_one * 2; position_three = position_one * 3; } public class MyOnClickListener implements View.OnClickListener { private int index = 0; public MyOnClickListener(int i) { index = i; } @Override public void onClick(View v) { mPager.setCurrentItem(index); } }; public class MyOnPageChangeListener implements OnPageChangeListener { @Override public void onPageSelected(int arg0) { Animation animation = null; switch (arg0) { case 0: if (currIndex == 1) { animation = new TranslateAnimation(position_one, 0, 0, 0); tvTabGroups.setTextColor(resources.getColor(R.color.lightwhite)); } else if (currIndex == 2) { animation = new TranslateAnimation(position_two, 0, 0, 0); tvTabFriends.setTextColor(resources.getColor(R.color.lightwhite)); } else if (currIndex == 3) { animation = new TranslateAnimation(position_three, 0, 0, 0); tvTabChat.setTextColor(resources.getColor(R.color.lightwhite)); } tvTabActivity.setTextColor(resources.getColor(R.color.white)); break; case 1: if (currIndex == 0) { animation = new TranslateAnimation(0, position_one, 0, 0); tvTabActivity.setTextColor(resources.getColor(R.color.lightwhite)); } else if (currIndex == 2) { animation = new TranslateAnimation(position_two, position_one, 0, 0); tvTabFriends.setTextColor(resources.getColor(R.color.lightwhite)); } else if (currIndex == 3) { animation = new TranslateAnimation(position_three, position_one, 0, 0); tvTabChat.setTextColor(resources.getColor(R.color.lightwhite)); } tvTabGroups.setTextColor(resources.getColor(R.color.white)); break; case 2: if (currIndex == 0) { animation = new TranslateAnimation(0, position_two, 0, 0); tvTabActivity.setTextColor(resources.getColor(R.color.lightwhite)); } else if (currIndex == 1) { animation = new TranslateAnimation(position_one, position_two, 0, 0); tvTabGroups.setTextColor(resources.getColor(R.color.lightwhite)); } else if (currIndex == 3) { animation = new TranslateAnimation(position_three, position_two, 0, 0); tvTabChat.setTextColor(resources.getColor(R.color.lightwhite)); } tvTabFriends.setTextColor(resources.getColor(R.color.white)); break; case 3: if (currIndex == 0) { animation = new TranslateAnimation(0, position_three, 0, 0); tvTabActivity.setTextColor(resources.getColor(R.color.lightwhite)); } else if (currIndex == 1) { animation = new TranslateAnimation(position_one, position_three, 0, 0); tvTabGroups.setTextColor(resources.getColor(R.color.lightwhite)); } else if (currIndex == 2) { animation = new TranslateAnimation(position_two, position_three, 0, 0); tvTabFriends.setTextColor(resources.getColor(R.color.lightwhite)); } tvTabChat.setTextColor(resources.getColor(R.color.white)); break; } currIndex = arg0; animation.setFillAfter(true); animation.setDuration(300); ivBottomLine.startAnimation(animation); } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } } }</string,></string,></string,></string,></string,></string,></string,></string,></fragment></fragment>
4.分别新建lay1.xml、 lay2.xml 、lay3.xml
lay1.xml
<> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#fff" android:orientation="vertical"> <textview android:id="@+id/tv_hello" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" android:visibility="gone"> <listview android:id="@+id/listView3" android:layout_width="match_parent" android:layout_height="wrap_content" android:cachecolorhint="@android:color/transparent" android:divider="@drawable/reader_item_divider" android:listselector="@android:color/transparent"> </listview> </textview></linearlayout>
lay2.xml
<> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:background="#FF8684"> </linearlayout>
lay3.xml与lay2.xml类型
<> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:background="#1586FF"> </linearlayout>
main.xml
<> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:umadsdk="http://schemas.android.com/apk/res/com.LoveBus" android:layout_width="fill_parent" android:layout_height="fill_parent" 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="48dip" android:background="@drawable/android_title_bg"> <imageview android:id="@+id/imageView1" android:layout_width="36dip" android:layout_height="36dip" android:layout_gravity="center_vertical" android:layout_marginleft="10dip" android:src="@drawable/more_game"> <textview android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginleft="10dip" android:text="乐够GO" android:textappearance="?android:attr/textAppearanceLarge"> <imageview android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:paddingleft="10dip" android:src="@drawable/status_online" android:visibility="gone"> </imageview></textview></imageview></linearlayout> <linearlayout android:id="@+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingbottom="5dip" android:paddingtop="10dip" android:background="@color/coral"> <textview android:id="@+id/tv_tab_activity" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" android:gravity="center" android:text="@string/tab_1" android:textcolor="@color/white" android:textsize="18sp"> <textview android:id="@+id/tv_tab_groups" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" android:gravity="center" android:text="@string/tab_2" android:textcolor="@color/lightwhite" android:textsize="18sp"> <textview android:id="@+id/tv_tab_friends" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" android:gravity="center" android:text="@string/tab_3" android:textcolor="@color/lightwhite" android:textsize="18sp"> <textview android:id="@+id/tv_tab_chat" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" android:gravity="center" android:text="@string/tab_4" android:textcolor="@color/lightwhite" android:textsize="18sp"> </textview></textview></textview></textview></linearlayout> <linearlayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:orientation="vertical" android:paddingbottom="3dip"> <imageview android:id="@+id/iv_bottom_line" android:layout_width="40dip" android:layout_height="2dip" android:layout_marginleft="20dip" android:scaletype="matrix" android:src="#fff"> </imageview></linearlayout> </linearlayout> </android.support.v4.view.viewpager></linearlayout>
ps：ViewPager + Fragment实现滑动标签页
ViewPager 结合Fragment实现一个Activity里包含多个可滑动的标签页，每个标签页可以有独立的布局及响应。
activity_main.xml
<"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="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:id="@+id/tv_guid1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1.0" android:gravity="center" android:text="特性1" android:textSize="18sp"/> <TextView android:id="@+id/tv_guid2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1.0" android:gravity="center" android:text="特性2" android:textSize="18sp"/> <TextView android:id="@+id/tv_guid3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1.0" android:gravity="center" android:text="特性3 " android:textSize="18sp"/> <TextView android:id="@+id/tv_guid4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1.0" android:gravity="center" android:text="特性4" android:textSize="18sp"/> </LinearLayout> <ImageView android:id="@+id/cursor" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="matrix" android:src="@drawable/cursor"/> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="fill_parent" android:layout_height="fill_parent" android:flipInterval="30" android:persistentDrawingCache="animation"/> </LinearLayout>
MainActivity.java
package com.example.viewpagernfragment; import java.util.ArrayList; import android.graphics.BitmapFactory; import android.graphics.Matrix; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.util.DisplayMetrics; import android.view.Menu; import android.view.View; import android.view.animation.Animation; import android.view.animation.TranslateAnimation; import android.widget.ImageView; import android.widget.TextView; import android.widget.Toast; public class MainActivity extends FragmentActivity { private ViewPager mPager; private ArrayList<Fragment> fragmentList; private ImageView image; private TextView view1, view2, view3, view4; private int currIndex;//当前页卡编号 private int bmpW;//横线图片宽度 private int offset;//图片移动的偏移量 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); InitTextView(); InitImage(); InitViewPager(); } /* * 初始化标签名 */ public void InitTextView(){ view1 = (TextView)findViewById(R.id.tv_guid1); view2 = (TextView)findViewById(R.id.tv_guid2); view3 = (TextView)findViewById(R.id.tv_guid3); view4 = (TextView)findViewById(R.id.tv_guid4); view1.setOnClickListener(new txListener(0)); view2.setOnClickListener(new txListener(1)); view3.setOnClickListener(new txListener(2)); view4.setOnClickListener(new txListener(3)); } public class txListener implements View.OnClickListener{ private int index=0; public txListener(int i) { index =i; } @Override public void onClick(View v) { // TODO Auto-generated method stub mPager.setCurrentItem(index); } } /* * 初始化图片的位移像素 */ public void InitImage(){ image = (ImageView)findViewById(R.id.cursor); bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.cursor).getWidth(); DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); int screenW = dm.widthPixels; offset = (screenW/4 - bmpW)/2; //imgageview设置平移，使下划线平移到初始位置（平移一个offset） Matrix matrix = new Matrix(); matrix.postTranslate(offset, 0); image.setImageMatrix(matrix); } /* * 初始化ViewPager */ public void InitViewPager(){ mPager = (ViewPager)findViewById(R.id.viewpager); fragmentList = new ArrayList<Fragment>(); Fragment btFragment= new ButtonFragment(); Fragment secondFragment = TestFragment.newInstance("this is second fragment"); Fragment thirdFragment = TestFragment.newInstance("this is third fragment"); Fragment fourthFragment = TestFragment.newInstance("this is fourth fragment"); fragmentList.add(btFragment); fragmentList.add(secondFragment); fragmentList.add(thirdFragment); fragmentList.add(fourthFragment); //给ViewPager设置适配器 mPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList)); mPager.setCurrentItem(0);//设置当前显示标签页为第一页 mPager.setOnPageChangeListener(new MyOnPageChangeListener());//页面变化时的监听器 } public class MyOnPageChangeListener implements OnPageChangeListener{ private int one = offset *2 +bmpW;//两个相邻页面的偏移量 @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 } @Override public void onPageSelected(int arg0) { // TODO Auto-generated method stub Animation animation = new TranslateAnimation(currIndex*one,arg0*one,0,0);//平移动画 currIndex = arg0; animation.setFillAfter(true);//动画终止时停留在最后一帧，不然会回到没有执行前的状态 animation.setDuration(200);//动画持续时间0.2秒 image.startAnimation(animation);//是用ImageView来显示动画的 int i = currIndex + 1; Toast.makeText(MainActivity.this, "您选择了第"+i+"个页卡", Toast.LENGTH_SHORT).show(); } } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } }
谷歌官方认为，ViewPager应该和Fragment一起使用时，此时ViewPager的适配器是FragmentPagerAdapter，当你实现一个FragmentPagerAdapter,你必须至少覆盖以下方法:
getCount()
getItem()
如果ViewPager没有和Fragment一起，ViewPager的适配器是PagerAdapter，它是基类提供适配器来填充页面ViewPager内部，当你实现一个PagerAdapter,你必须至少覆盖以下方法:
instantiateItem(ViewGroup, int) destroyItem(ViewGroup, int, Object) getCount() isViewFromObject(View, Object) [java] view plaincopy package com.example.viewpagernfragment; import java.util.ArrayList; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; public class MyFragmentPagerAdapter extends FragmentPagerAdapter{ ArrayList<Fragment> list; public MyFragmentPagerAdapter(FragmentManager fm,ArrayList<Fragment> list) { super(fm); this.list = list; } @Override public int getCount() { return list.size(); } @Override public Fragment getItem(int arg0) { return list.get(arg0); } } [java] view plaincopy package com.example.viewpagernfragment; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Button; import android.widget.Toast; public class ButtonFragment extends Fragment{ Button myButton; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.guide_1, container, false);//关联布局文件 myButton = (Button)rootView.findViewById(R.id.mybutton);//根据rootView找到button //设置按键监听事件 myButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub Toast.makeText(ButtonFragment.this.getActivity(), "button is click!", Toast.LENGTH_SHORT).show(); } }); return rootView; } } [java] view plaincopy package com.example.viewpagernfragment; import android.os.Bundle; import android.support.v4.app.Fragment; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; public class TestFragment extends Fragment { private static final String TAG = "TestFragment"; private String hello;// = "hello android"; private String defaultHello = "default value"; static TestFragment newInstance(String s) { TestFragment newFragment = new TestFragment(); Bundle bundle = new Bundle(); bundle.putString("hello", s); newFragment.setArguments(bundle); //bundle还可以在每个标签里传送数据 return newFragment; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) { Log.d(TAG, "TestFragment-----onCreateView"); Bundle args = getArguments(); hello = args != null ? args.getString("hello") : defaultHello; View view = inflater.inflate(R.layout.guide_2, container, false); TextView viewhello = (TextView) view.findViewById(R.id.tv); viewhello.setText(hello); return view; } } <"1.0" encoding="UTF-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ff0000ff" > <Button android:id="@+id/mybutton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="hit me" android:gravity="center"/> </RelativeLayout> [html] view plaincopy <"1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:background="#158684" > <TextView android:id="@+id/tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" /> </RelativeLayout>