Android学习笔记：使用ViewPager组件实现图片切换
在很多App中，尤其是第一次安装启动后，都会出现几个图片进行一些app的介绍和说明，图片可以随着滑动而切换。
我们这里利用 ViewPager组件来演示如何实现这一点。
1、创建一个app工程，默认创建一个主 Activity
2、设置该Activity的布局文件activity_main.xml内容如下：
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns: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的代码
package com.example.showviewpager;
import java.util.ArrayList;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
public class MainActivity extends Activity {
private static final int VIEW_NUM = 5;
private ViewPager viewPager;
private ImageView[] tagImageViews = new ImageView[VIEW_NUM];
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
addTagImage();
initViewPager();
}
private void addTagImage() {
LinearLayout layout = (LinearLayout)findViewById(R.id.tagView);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
params.setMargins(15, 0, 0, 0);
for (int i = 0; i < VIEW_NUM; i++) {
ImageView tagImageView = new ImageView(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);
}
}
private void initViewPager() {
viewPager = (ViewPager) findViewById(R.id.viewPager);
viewPager.setAdapter(new MyAdapter());
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
for (int i = 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
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
viewPager.setCurrentItem(0);
}
class MyAdapter extends PagerAdapter{
private ArrayList<View> viewList;
public MyAdapter(){
viewList = new ArrayList<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));
}
private View createPagerImageView(int resid){
LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
LinearLayout layout = new LinearLayout(MainActivity.this);
layout.setLayoutParams(params);
layout.setOrientation(LinearLayout.VERTICAL);
ImageView imageView = new ImageView(MainActivity.this);
imageView.setLayoutParams(params);
imageView.setScaleType(ScaleType.CENTER_CROP);
imageView.setImageResource(resid);
layout.addView(imageView);
return layout;
}
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
((ViewPager) container).addView(viewList.get(position % VIEW_NUM),0);
return viewList.get(position % VIEW_NUM);
}
@Override
public void destroyItem(View container, int position, Object object) {
((ViewPager) container).removeView(viewList
.get(position % VIEW_NUM));
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
5、如果需要不显示activity的标题栏，可修改manifest中的activity中的配置,设置样式为：
android:theme="@android:style/Theme.Black.NoTitleBar"
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns: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>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
其它配置文件、代码等都是采用eclipse创建的默认设置。
