Android学习笔记：使用ViewPager组件实现图片切换

时间：2023-03-10 02:20:43
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创建的默认设置。

相关文章