ViewPager的使用（有底部小图片可切换页面）

这个例子修改以下把标题去掉，就可以变成启动一个程序开始的之前的界面。

有下面的小图标可以点击图标来切换页面，也可以滑动页面切换，还可以点击上面的标题来切换页面。

下面的代码，以便日后查询.

先看一下调试后的图片







在线生成图标的工具地址：

http://romannurik.github.io/AndroidAssetStudio/

1：activity_main.xml中首先引入android.support.v4.view.ViewPager和android.support.v4.view.PagerTabStrip，最下面的布局打算放三张小图标

<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:background="#E0E0E0" >

<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<android.support.v4.view.PagerTabStrip
android:id="@+id/pagertabStrip"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:background="#9E9E9E"
android:gravity="center" />
</android.support.v4.view.ViewPager>
<!-- 下面滑动的小图标 -->

<LinearLayout
android:id="@+id/mImgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:orientation="horizontal" >
</LinearLayout>

</RelativeLayout>

2.准备三个布局里面放一个ImageView控件。

index.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" >

<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/img1"
android:scaleType="fitXY" />

</LinearLayout>

其他连个页面布局和上面的一样，只是图片换了。

3.MainActivity.java

package com.example.viewpagerwithiconinbottom;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends Activity {
private ViewPager viewPager;// 存放多个页面的控件
private PagerTabStrip tabStrip;// 页面选项卡

private int[] layoutIds = new int[] { R.layout.index, R.layout.index2,
R.layout.index3 };// 页面的布局文件

private LinearLayout mImgs;// 存放底部图片的线性布局
private ImageView[] Imageview = new ImageView[layoutIds.length];

private String[] titles = new String[] { "标题一", "标题二", "标题三" };// 存放标题的集合

private List<View> list = new ArrayList<View>();// 存放所有页面的集合
private List<String> pagerTabTitles = new ArrayList<String>();// 存放所有标题的集合

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);

viewPager = (ViewPager) findViewById(R.id.viewPager);
tabStrip = (PagerTabStrip) findViewById(R.id.pagertabStrip);
mImgs = (LinearLayout) findViewById(R.id.mImgs);
tabStrip.setTextSpacing(300);// 设置选项卡之间的距离，默认情况下一个页面可以看到多个标题

// 初始化显示的页面，并将其添加到集合中
for (int i = 0; i < layoutIds.length; i++) {
View view = getLayoutInflater().inflate(layoutIds[i], null);
list.add(view);
pagerTabTitles.add(titles[i]);
}
viewPager.setAdapter(new MyPagerAdapter());// 添加适配器
initImage();
// 为ViewPager页面添加变换事件监听器
viewPager.setOnPageChangeListener(new MyPageChangedListener());

}

// 自定义PageChangedListener
public class MyPageChangedListener implements OnPageChangeListener {

@Override
public void onPageScrollStateChanged(int arg0) {

}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {

}

@Override
public void onPageSelected(int arg0) {
resetImage();
// 将当前页面的图片重置为选中状态
Imageview[arg0].setImageResource(R.drawable.choosed);
}

}

// 用于初始化底部图片并将其添加到集合中
private void initImage() {
for (int i = 0; i < Imageview.length; i++) {
Imageview[i] = new ImageView(MainActivity.this);
if (i == 0) {// 默认情况下第一张图片被选中
Imageview[i].setImageResource(R.drawable.choosed);
} else {
Imageview[i].setImageResource(R.drawable.unchoose);
}
Imageview[i].setPadding(20, 0, 0, 0);
Imageview[i].setId(i);
Imageview[i].setOnClickListener(mOnClickListener);
mImgs.addView(Imageview[i]);
}
}

// 下方图片的点击事件
private OnClickListener mOnClickListener = new OnClickListener() {

@Override
public void onClick(View v) {
resetImage();// 重置显示的图片，将素有的图片全部设置为未选中状态
// 将被单击的设置为选中的图片
((ImageView) v).setImageResource(R.drawable.choosed);
viewPager.setCurrentItem(v.getId());// 根据单击图片的id显示切换页面

}

};

private void resetImage() {
for (int i = 0; i < Imageview.length; i++) {
Imageview[i].setImageResource(R.drawable.unchoose);
}
}

// 自定义PagerAdapter
public class MyPagerAdapter extends PagerAdapter {

@Override
public int getCount() {// 返回页面的个数
return list.size();
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}

@Override
public CharSequence getPageTitle(int position) {// 返回页面的标题

return pagerTabTitles.get(position);
}

// 初始化指定的页面
@Override
public Object instantiateItem(ViewGroup container, int position) {
((ViewPager) container).addView(list.get(position));
return list.get(position);
}

// 销毁指定页面
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView(list.get(position));
}
}

}

源码