Android中ViewPager组件的基本用法及实现图片切换的示例
ViewPager是android-support-v4.jar包里的组件。在布局文件里标签需要连包名一起
写全称<android.support.v4.view.ViewPager/>
基本用法
ViewPager的基本用法我概括为三步
第一步在主布局文件里放一个ViewPager组件
第二步为每个页面建立布局文件,把界面写好
第三步在主Activity里获取ViewPager组件,并为它设定Adapter。
Adapter详细讲讲,ViewPager对应的Adapter继承自PagerAdapter,
也是android.support.v4.view包里的,继承类需要实现四个方法:
- intgetCount():返回页面数目
- ObjectinstantiateItem(ViewGroup,intposition):创建position位置的页面视图,加入到ViewGroup中,并返回该视图的Key。Key可以是该视图,也可以是其他唯一与该视图对应的对象:
- booleanisViewFromObject(View,Object):判断Object所代表的Key是否对应指定的View。
- voiddestroyItem(ViewGroup,intposition,Object):从ViewGroup里删除position位置的View。
我们先用LayoutInflater将前面为每个页面建立的界面加载进来,并放在一个ArrayList之类的容器里面。然后在PagerAdapter的这四个方法里,我们操作的,就是与这些页面对应的View。
使用ViewPager组件实现图片切换
上面说的这些步骤可能听起来挺空洞的,下面我们来看这个使用ViewPager组件实现图片切换的实例:
在很多App中,尤其是第一次安装启动后,都会出现几个图片进行一些app的介绍和说明,图片可以随着滑动而切换。
我们这里利用ViewPager组件来演示如何实现这一点。
1、创建一个app工程,默认创建一个主Activity
2、设置该Activity的布局文件activity_main.xml内容如下:
<?xmlversion="1.0"encoding="utf-8"?> <FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="wrap_content"/> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:id="@+id/tagView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="20dp" android:gravity="center_horizontal" android:orientation="horizontal"> </LinearLayout> </RelativeLayout> </FrameLayout>
因为我们希望再切换图片上,能有一些点点形状的图标(或者数字)显示当前图片。所以这里的activity采用了FrameLayout布局(可以实现view重叠放置)。
第一个控件就是ViewPager(注意ViewPager是在support.v4包中的,新的andorid中并没有移植该组件)。
第二个控件是放置一个RelativeLayout,其中放置一个LinearLayout(位于屏幕的底部位置),该LinearLayout采用水平布局,用来放置小的图标。
3、准备图片
准备5张用于切换显示的图片,如pic1.jpg、pic2.jpg、pic3.jpg、pic4.jpg、pic5.jpg,再准备两个小图标图片page_current.png、page_not_current.png。
将这些图片放到drawable-hdpi目录下(或相应尺寸的drawable目录下)。
4、编写activity的代码
packagecom.example.showviewpager;
importjava.util.ArrayList;
importandroid.app.Activity;
importandroid.os.Bundle;
importandroid.support.v4.view.PagerAdapter;
importandroid.support.v4.view.ViewPager;
importandroid.support.v4.view.ViewPager.OnPageChangeListener;
importandroid.view.Menu;
importandroid.view.MenuItem;
importandroid.view.View;
importandroid.view.ViewGroup;
importandroid.widget.ImageView;
importandroid.widget.ImageView.ScaleType;
importandroid.widget.LinearLayout;
importandroid.widget.LinearLayout.LayoutParams;
publicclassMainActivityextendsActivity{
privatestaticfinalintVIEW_NUM=5;
privateViewPagerviewPager;
privateImageView[]tagImageViews=newImageView[VIEW_NUM];
@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
addTagImage();
initViewPager();
}
privatevoidaddTagImage(){
LinearLayoutlayout=(LinearLayout)findViewById(R.id.tagView);
LinearLayout.LayoutParamsparams=newLinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
params.setMargins(15,0,0,0);
for(inti=0;i<VIEW_NUM;i++){
ImageViewtagImageView=newImageView(this);
tagImageView.setLayoutParams(params);
tagImageViews[i]=tagImageView;
if(i==0){
tagImageView.setBackgroundResource(R.drawable.page_current);
}else{
tagImageView.setBackgroundResource(R.drawable.page_not_current);
}
layout.addView(tagImageView);
}
}
privatevoidinitViewPager(){
viewPager=(ViewPager)findViewById(R.id.viewPager);
viewPager.setAdapter(newMyAdapter());
viewPager.setOnPageChangeListener(newOnPageChangeListener(){
@Override
publicvoidonPageSelected(intarg0){
for(inti=0;i<tagImageViews.length;i++){
if(i==arg0%VIEW_NUM){
tagImageViews[i].setBackgroundResource(R.drawable.page_current);
}else{
tagImageViews[i].setBackgroundResource(R.drawable.page_not_current);
}
}
}
@Override
publicvoidonPageScrolled(intarg0,floatarg1,intarg2){
}
@Override
publicvoidonPageScrollStateChanged(intarg0){
}
});
viewPager.setCurrentItem(0);
}
classMyAdapterextendsPagerAdapter{
privateArrayList<View>viewList;
publicMyAdapter(){
viewList=newArrayList<View>();
viewList.add(createPagerImageView(R.drawable.pic1));
viewList.add(createPagerImageView(R.drawable.pic2));
viewList.add(createPagerImageView(R.drawable.pic3));
viewList.add(createPagerImageView(R.drawable.pic4));
viewList.add(createPagerImageView(R.drawable.pic5));
}
privateViewcreatePagerImageView(intresid){
LayoutParamsparams=newLayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);
LinearLayoutlayout=newLinearLayout(MainActivity.this);
layout.setLayoutParams(params);
layout.setOrientation(LinearLayout.VERTICAL);
ImageViewimageView=newImageView(MainActivity.this);
imageView.setLayoutParams(params);
imageView.setScaleType(ScaleType.CENTER_CROP);
imageView.setImageResource(resid);
layout.addView(imageView);
returnlayout;
}
@Override
publicintgetCount(){
returnInteger.MAX_VALUE;
}
@Override
publicbooleanisViewFromObject(Viewarg0,Objectarg1){
returnarg0==arg1;
}
@Override
publicObjectinstantiateItem(ViewGroupcontainer,intposition){
((ViewPager)container).addView(viewList.get(position%VIEW_NUM),0);
returnviewList.get(position%VIEW_NUM);
}
@Override
publicvoiddestroyItem(Viewcontainer,intposition,Objectobject){
((ViewPager)container).removeView(viewList
.get(position%VIEW_NUM));
}
}
@Override
publicbooleanonCreateOptionsMenu(Menumenu){
getMenuInflater().inflate(R.menu.main,menu);
returntrue;
}
@Override
publicbooleanonOptionsItemSelected(MenuItemitem){
intid=item.getItemId();
if(id==R.id.action_settings){
returntrue;
}
returnsuper.onOptionsItemSelected(item);
}
}
5、如果需要不显示activity的标题栏,可修改manifest中的activity中的配置,设置样式为:
android:theme="@android:style/Theme.Black.NoTitleBar"
<?xmlversion="1.0"encoding="utf-8"?> <manifestxmlns:android="http://schemas.android.com/apk/res/android" package="com.example.showviewpager" android:versionCode="1" android:versionName="1.0"> <uses-sdk android:minSdkVersion="16" android:targetSdkVersion="21"/> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme"> <activity android:name=".MainActivity" android:label="@string/app_name" android:theme="@android:style/Theme.Black.NoTitleBar"> <intent-filter> <actionandroid:name="android.intent.action.MAIN"/> <categoryandroid:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity> </application> </manifest>
其它配置文件、代码等都是采用eclipse创建的默认设置。