ViewPage是安卓V4包中提供的一个组件,作为一个布局管理器,继承于ViewGroup和LinearLayout/FrameLayout等同属于布局管理器.一般ViewPage允许用户通过向左向右滑动实现页面的切换,当然你还需要实现一个PageAdapter来提供切换所需要的View.wPage作为一个布局管理器,那有时候项目可能会需要你来实现一个能在各个选项卡之间来回切换的功能,那么ViewPager就是首选了
ViewPager实现起来跟listView差不多,也需要自定义Adapter,然后往里面添加数据,具体怎么操作我都写在代码注释里面了,下面把代码贴出来跟大家分享
功能代码:
public class MainActivity extends ActionBarActivity implements ViewPager.OnPageChangeListener {
private ViewPager viewPager;
private PagerTabStrip pagerTabStrip;
private ArrayList<View> views=new ArrayList<>(); //list集合用于装载View对象
private String titles[] ={"第1项","第2项","第3项","第4项"}; //pagerTab的标题
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ActionBar actionBar =getSupportActionBar();
actionBar.setTitle("导航条"); //给actionbar设置标题
actionBar.setDisplayHomeAsUpEnabled(true); //设置actionbar上的向上箭头(<-)
actionBar.hide(); //隐藏acitonbar
viewPager = (ViewPager) findViewById(R.id.viewpager);
pagerTabStrip = (PagerTabStrip) findViewById(R.id.pagertab);
initViews();
viewPager.setAdapter(new MyPagerAdapter());
viewPager.setCurrentItem(2); //设置默认显示的选项卡
//注册viewpager的状态监听事件
viewPager.setOnPageChangeListener(this);
}
/**
* 为每一个pager装载内容
*/
private void initViews() {
LayoutInflater inflater = getLayoutInflater().from(this);
//把从LayoutInflater获得的布局装载进list集合
views.add(inflater.inflate(R.layout.layout1,null));
views.add(inflater.inflate(R.layout.layout2,null));
views.add(inflater.inflate(R.layout.layout3,null));
views.add(inflater.inflate(R.layout.layout4,null));
//设置标题栏的属性
pagerTabStrip.setBackgroundColor(Color.BLUE);
pagerTabStrip.setTabIndicatorColor(getResources().getColor(R.color.material_blue_grey_800));
pagerTabStrip.setTextColor(Color.WHITE);
}
//重写选项卡的状态监听事件
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
Toast.makeText(this,"pager---"+position,Toast.LENGTH_SHORT).show();
}
@Override
public void onPageScrollStateChanged(int state) {
}
/**
* 自定义PagerAdapter
*/
class MyPagerAdapter extends PagerAdapter{
//实例化当前的选项卡,即View对象
@Override
public Object instantiateItem(ViewGroup container, int position) {
View v = views.get(position);
container.addView(v);
return v;
}
//删除当前的 选项卡
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(views.get(position));
}
//得到当前选项卡的位置
@Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
}
//设置选项卡的标题
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
//得到选项卡的数量
@Override
public int getCount() {
return views.size();
}
//判断当前的视图是否为返回的对象
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
}
}
主布局代码:
注意一定要引入v4的支持包,否则ViewPager控件加载不进来,还有选项卡PagerTabStrip控件一定要放在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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:id="@+id/viewpager"
>
<!--选项卡控件-->
<android.support.v4.view.PagerTabStrip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:id="@+id/pagertab"
/>
</android.support.v4.view.ViewPager>
</RelativeLayout>
各个子布局文件基本一致,我只贴出来一个做参考,其他几个类似就不一一贴出来了
第一个子布局代码
<?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">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/a"
android:scaleType="centerCrop"
/>
</LinearLayout>