废话少说,先上效果:
1、添加android support包
因为几个类都是在android support包中才提供,我们先添加android-support-v4.jar文件到工程的libs目录下即可
2、新建ViewPager.xml,内容如下
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<!--
注意事项:
1.这里ViewPager和 PagerTabStrip都要把包名写全了,不然会ClassNotFount
2.API中说:在布局xml把PagerTabStrip当做ViewPager的一个子标签来用,不能拿出来,不然还是会报错
3.在PagerTabStrip标签中可以用属性android:layout_gravity=TOP|BOTTOM来指定title的位置
4.如果要显示出PagerTabStrip某一页的title,需要在ViewPager的adapter中实现getPageTitle(int)
-->
<android.support.v4.view.ViewPager
android:id="@+id/view_pager_demo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#6B92A5" >
<android.support.v4.view.PagerTabStrip
android:id="@+id/pager_tabstrip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#33b5e5"
android:textColor="#ffffff" />
<!-- <android.support.v4.view.PagerTitleStrip
android:id="@+id/pagertitle"
android:layout_width="fill_parent"
android:layout_height="45dp"
android:layout_gravity="bottom"
android:visibility="gone" /> -->
</android.support.v4.view.ViewPager>
</RelativeLayout>
这里面有两个控件PagerTitleStrip和PagerTabStrip,这两个控件必须当作ViewPager的子控件来用,否则会报错。
两个控件有什么区别呢?
简单的理解就是:
PagerTabStrip:交互式
PagerTitleStrip:非交互式
经过简单测试发现:
PagerTabStrip:
1.点击上面的标题可以实现ViewPager的切换。
2.选中的文字下方包含指引线
3.显示全宽下划线(setDrawFullUnderline)
PagerTitleStrip:
1.点击上面的标题无反应。
2.无上述描述。
3、新建view_pager_fragment.xml内容如下:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="@+id/view_pager_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="top|center_horizontal"
android:layout_marginTop="30dp" />
<ImageView
android:id="@+id/view_pager_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_below="@id/view_pager_text"
android:layout_marginTop="10dp" />
</RelativeLayout>
用于在ViewPager中显示。
4、新建TitleViewPagerDemo页面
import java.util.ArrayList;
import java.util.List;
import com.lk.myandroidui.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
/**
* 有标题的ViewPager
* @author Administrator
*
*/
public class TitleViewPagerDemo extends FragmentActivity {
private static int TOTAL_COUNT = 5;// 标题数量
@Override
protected void onCreate(Bundle arg0) {
// TODO Auto-generated method stub
super.onCreate(arg0);
setContentView(R.layout.view_pager_demo);
PagerTabStrip mPagerTabStrip=(PagerTabStrip) findViewById(R.id.pager_tabstrip);
//设置导航条的颜色
mPagerTabStrip.setTabIndicatorColorResource(android.R.color.white);
ViewPager mViewPager = (ViewPager) findViewById(R.id.view_pager_demo);
ArrayList<Fragment> fragmentList = new ArrayList<Fragment>();//ViewPager中显示的数据
ArrayList<String> titleList = new ArrayList<String>();// 标题数据
//添加数据
for (int i = 0; i < TOTAL_COUNT; i++) {
ViewPagerFragment mViewPagerFragment = new ViewPagerFragment();
Bundle bundle = new Bundle();
bundle.putInt("upImageId", R.drawable.banner1);// 图片
bundle.putString("text", "Page " + i);// 文字
mViewPagerFragment.setArguments(bundle);// 设置参数
titleList.add("Title " + (i+1));
fragmentList.add(mViewPagerFragment);
}
mViewPager.setAdapter(new MyPagerFragmentAdapter(
getSupportFragmentManager(), fragmentList, titleList));
}
//适配器
private class MyPagerFragmentAdapter extends FragmentPagerAdapter {
private List<Fragment> fragmentList;
private List<String> titleList;
public MyPagerFragmentAdapter(FragmentManager fm,
List<Fragment> fragmentList, List<String> titleList) {
super(fm);
this.fragmentList = fragmentList;
this.titleList = titleList;
}
// ViewPage中显示的内容
@Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
return (fragmentList == null || fragmentList.size() == 0) ? null
: fragmentList.get(arg0);
}
// Title中显示的内容
@Override
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return (titleList.size() > position) ? titleList.get(position) : "";
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return fragmentList == null ? 0 : fragmentList.size();
}
}
/** 使用Fragment显示ViewPager中的主要内容 */
public static class ViewPagerFragment extends Fragment {
public ViewPagerFragment() {
super();
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.view_pager_fragment_demo1,
container, false);
TextView tv = (TextView) view.findViewById(R.id.view_pager_text);
ImageView image = (ImageView) view
.findViewById(R.id.view_pager_image);
Bundle bundle = getArguments();
if (bundle != null) {
//设置图片
int upImageId = bundle.getInt("upImageId");
if (upImageId != 0) {
image.setImageResource(upImageId);
}
//设置文字
String text = bundle.getString("text");
tv.setText(text);
}
return view;
}
}
}
ok,结束。