android UI之ViewPager多頁面滑動效果

標籤：des   android   style   blog   http   io   ar   os   sp   



viewPager實現引導頁
ViewPager多頁面滑動效果
1.Android的左右滑動在實際編程經常能用到，比如查看多張圖片，左右
切換tab頁。
2.自android 3.0之後的SDK中提供了android-support-V4包用以實現
版本相容，讓老版本系統下的應用通過加入jar包實現擴充，其中有一
個可以實現左右滑動的類ViewPager

今天我們就用ViewPager類來實現引導頁的實戰案例
實現功能：
1.實現ViewPager多頁面滑動效果。
2.下方的顯示當前焦點頁的原點可以同步。
3.點擊原點可以跳轉到當前原點的焦點頁面。

一、在布局中（xml）

<FrameLayout 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.support.v4.view.ViewPager    android:id="@+id/viewPager"    android:layout_width="match_parent"    android:layout_height="match_parent"> </android.support.v4.view.ViewPager>  <LinearLayout      android:id="@+id/pointsLayout"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:orientation="horizontal"     android:layout_gravity="bottom|center_horizontal">     <ImageView          android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:src="@drawable/point_normal"         android:padding="15dp"/>      <ImageView          android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:src="@drawable/point_normal"         android:padding="15dp"/>       <ImageView          android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:src="@drawable/point_normal"         android:padding="15dp"/> </LinearLayout></FrameLayout>

二、在java代碼中（主類）

package com.example.viewpager;import java.util.ArrayList;import java.util.List;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup.LayoutParams;import android.widget.ImageView;import android.widget.LinearLayout;public class MainActivity extends Activity implements OnPageChangeListener,OnClickListener{private ViewPager viewPager;private List<View> views;private ViewPagerAdapter adapter;//引導頁介面3張圖片的初始化private int[] guideImages={R.drawable.show01,R.drawable.show02,R.drawable.show03};private ImageView[] points;private LinearLayout pointsLayout;//當前選擇頁下標private int currentPoint;protected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();initData();}//初始化viewprivate void initView(){pointsLayout=(LinearLayout) findViewById(R.id.pointsLayout);viewPager=(ViewPager) findViewById(R.id.viewPager);views=new ArrayList<View>();adapter=new ViewPagerAdapter(views);/*向ViewPagerAdapter即綁定資料類中傳遞參數views*/}//初始化資料private void initData(){LayoutParams layoutParams=new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);for(int i:guideImages){ImageView imageView=new ImageView(this);imageView.setImageResource(i);imageView.setLayoutParams(layoutParams);views.add(imageView);}initPoint();viewPager.setAdapter(adapter);/*向ViewPagerAdapter即綁定資料類中傳遞參數views,前面已對adapter初始化*/viewPager.setOnPageChangeListener(this);/*設定viewPager的改變事件*/}//初始化原點private void initPoint(){points=new ImageView[guideImages.length];for(int i=0;i<pointsLayout.getChildCount();i++){points[i]=(ImageView) pointsLayout.getChildAt(i);/*遍曆LinearLayout中的子ImageView*/points[i].setImageResource(R.drawable.point_normal);/*擷取原點的初始狀態*/points[i].setOnClickListener(this);/*設定原點的點擊事件*/points[i].setTag(i);/*設定原點標籤，便於後面的onClick方法擷取點擊的那個原點*/}currentPoint=0;points[currentPoint].setImageResource(R.drawable.point_select);}//這裡是實現OnPageChangeListener的三個方法，用到了其中的onPageSelected@Overridepublic void onPageScrollStateChanged(int arg0){}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2){}//當新的頁面被選中時調用@Overridepublic void onPageSelected(int position){setCurrentPoint(position);}    private void setCurrentPoint(int position){    for(int i=0;i<pointsLayout.getChildCount();i++)    {points[i]=(ImageView) pointsLayout.getChildAt(i);points[i].setImageResource(R.drawable.point_normal);}    points[position].setImageResource(R.drawable.point_select);}@Override//點擊事件的實現方法public void onClick(View v){//利用getTag方法來擷取當前點擊的原點int i=(int) v.getTag();//設定當前顯示頁viewPager.setCurrentItem(i);}}

三、ViewPagerAdapter類的實現（次類）

package com.example.viewpager;import java.util.List;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.View;import android.view.ViewGroup;public class ViewPagerAdapter extends PagerAdapter{private List<View> views;public ViewPagerAdapter( List<View> views){this.views=views;}//擷取當前頁面數public int getCount(){return this.views.size();}//初始化position位置的介面public Object instantiateItem(ViewGroup container, int position){((ViewPager)container).addView(views.get(position));return views.get(position);}//判斷是否有對象產生介面public boolean isViewFromObject(View arg0, Object arg1){return arg0==arg1;}@Override//銷毀頁面public void destroyItem(ViewGroup container, int position, Object object){((ViewPager)container).removeView(views.get(position));}}

四、實現效果

android UI之ViewPager多頁面滑動效果