1.首先,转自:
(1).《ViewPager 详解(三)---PagerTabStrip与PagerTitleStrip添加标题栏的异同》 这篇文章写得不错,大家可以参考一下。
(2). ViewPager与Fragment的使用方法 首先是参考这篇文章的代码,发现标题栏里的标题不能显示出来,可能代码中为ViewPager设置适配器时,有些问题,使用上面第一篇文章一改便可以了!
2.接下来新建一个项目,项目名称为ViewPagerTest,先看下效果,效果如下:
3.打开activity_main文件,如果没有android.support.v4.jar包,要下载并导入这个jar包,才能使用ViewPager实现滑动效果,代码如下:
<RelativeLayout 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.support.v4.view.ViewPager
android:id="@+id/viewPager1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.PagerTabStrip
android:id="@+id/pagerTabStrip1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"/>
</android.support.v4.view.ViewPager>
</RelativeLayout>
4.我们在layout目录下新建3个xml文件,用于分别显示视图:
fragment1.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:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:text="@string/text"
android:textColor="#CC99CC"
android:textSize="21sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/text1"
android:textSize="19sp" />
</LinearLayout>
fragment2.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:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:text="@string/text2"
android:textColor="#CC99CC"
android:textSize="21sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/text3"
android:textSize="19sp" />
</LinearLayout>
fragment3.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:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:text="@string/text4"
android:textColor="#CC99CC"
android:textSize="21sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/text5"
android:textSize="19sp" />
<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/background"/>
</LinearLayout>
在这里需要的字符放在了strings.xml文件下,strings.xml文件代码如下:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">ViewPagerTest</string>
<string name="hello_world">Hello world!</string>
<string name="action_settings">Settings</string>
<string name="text">如风</string>
<string name="text1">来又如风离又如风,或世事通通不过是场梦,人在途中人在时空,相识也许不过擦过梦中,来又如风离又如风,或我亦不应再这般心痛,但我不过是人非梦,总有些真笑亦有真痛.</string>
<string name="text2">棋子</string>
<string name="text3">我像是一颗棋,进退任由你决定,我不是你眼中唯一将领,却是不起眼的小兵,我像是一颗棋子,来去全不由自己,举手无回你从不曾犹豫,我却受控在你手里。</string>
<string name="text4">王菲</string>
<string name="text5">王菲:1969年8月8日出生于北京,中国女歌手、影视演员。</string>
</resources>
5.接下来打开MainActivity.java文件,代码如下:
package xg.viewpagertest;
import java.util.ArrayList;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class MainActivity extends FragmentActivity {
private ViewPager viewPager1;
private View view1,view2,view3;
//页面列表
private ArrayList<View> viewList;
//标题列表
ArrayList<String> titleList=new ArrayList<String>();
//通过pagerTabStrip可以设置标题的属性
private PagerTabStrip pagerTabStrip1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager1=(ViewPager)findViewById(R.id.viewPager1);
LayoutInflater inflater=getLayoutInflater();
view1=inflater.inflate(R.layout.fragment1,null);
view2=inflater.inflate(R.layout.fragment2, null);
view3=inflater.inflate(R.layout.fragment3, null);
viewList=new ArrayList<View>();//将要分页显示的视图装入ArrayList中
viewList.add(view1);
viewList.add(view2);
viewList.add(view3);
titleList=new ArrayList<String>();//每个页面的标题数据
titleList.add("第一页");
titleList.add("第二页");
titleList.add("第三页");
pagerTabStrip1=(PagerTabStrip)findViewById(R.id.pagerTabStrip1);
//设置下划线的颜色
pagerTabStrip1.setTabIndicatorColor(getResources().getColor(android.R.color.holo_green_dark));
//设置背景的颜色
pagerTabStrip1.setBackgroundColor(getResources().getColor(android.R.color.holo_blue_dark));
viewPager1.setAdapter(new MyViewPagerAdapter());//为ViewPager设置适配器
}
public class MyViewPagerAdapter extends PagerAdapter{
@Override
public int getCount() {
// TODO Auto-generated method stub
return viewList.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0==arg1;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(viewList.get(position));
}
@Override
public CharSequence getPageTitle(int position) {
return titleList.get(position);
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewList.get(position));
return viewList.get(position);
}
}
}
这样就可以实现上面的那种效果了,如果想要理解更深的,可以借鉴这篇文章http://blog.csdn.net/harvic880925/article/details/38521865,这位大牛还写了关于ViewPager的系列文章,可以参考!