Android學習筆記：使用ViewPager組件實現圖片切換

標籤：des   android   style   blog   http   io   ar   os   使用   

在很多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];@Overrideprotected 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() {@Overridepublic 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);}}}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic 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;}@Overridepublic int getCount() {return Integer.MAX_VALUE;}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {((ViewPager) container).addView(viewList.get(position % VIEW_NUM),0);return viewList.get(position % VIEW_NUM);}@Overridepublic void destroyItem(View container, int position, Object object) {((ViewPager) container).removeView(viewList.get(position % VIEW_NUM));}}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.main, menu);return true;}@Overridepublic 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建立的預設設定。

 

Android學習筆記：使用ViewPager組件實現圖片切換