快捷導(dǎo)航

ViewPager實(shí)現(xiàn)漂亮的引導(dǎo)頁

更新時(shí)間：2017年08月23日 09:22:02 作者：鉆石VIP

這篇文章主要為大家詳細(xì)介紹了ViewPager實(shí)現(xiàn)漂亮的引導(dǎo)頁，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

廢話就不多說了，直接上效果圖和代碼

fry.Activity01

package fry;

import java.util.ArrayList;
import java.util.Collection;
import java.util.Iterator;
import java.util.List;
import java.util.ListIterator;

import com.example.viewPager.R;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class Activity01 extends Activity implements OnPageChangeListener,OnClickListener{
 private ViewPager viewPager;
 private List<View> views;//用來存放放進(jìn)ViewPager里面的ImageView
 private int[] imageID;//
 private ImagePagerAdapter adapter;//適配器
 private LinearLayout linearLayout;
 private int currentPoint;//當(dāng)前被選中中頁面的下標(biāo)
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  // TODO Auto-generated method stub
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity01);
  initData();
  initView();
  
 }
 //初始化view
 void initView(){
  adapter=new ImagePagerAdapter(views);
  viewPager=(ViewPager) findViewById(R.id.viewPager);
  viewPager.setAdapter(adapter);
  linearLayout=(LinearLayout) findViewById(R.id.linearLayout);
  initPoint();
  viewPager.setOnPageChangeListener(this);
 }
 
 //初始化數(shù)據(jù)
 void initData(){
  //將圖片的id全部放到imageID集合中
  imageID=new int[]{R.drawable.guide1,R.drawable.guide2,R.drawable.guide3,R.drawable.guide4};
  views=new ArrayList<View>();
  //給iamgeView設(shè)置LayoutParams參數(shù)
  LayoutParams layoutParams=new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
  for(int i:imageID){
   //不確定1
   ImageView imageView=new ImageView(this);
   imageView.setImageResource(i);
   imageView.setLayoutParams(layoutParams);
   views.add(imageView);
  }
  
  
 }
 
 /*
  * 初始化頁面下方的點(diǎn)
  */
 private void initPoint(){
  ImageView[] imageView=new ImageView[imageID.length]; 
  for(int i=0;i<linearLayout.getChildCount();i++){
   imageView[i]=(ImageView) linearLayout.getChildAt(i);
   imageView[i].setImageResource(R.drawable.point_normal);
   imageView[i].setOnClickListener(this);
   imageView[i].setTag(i);
  }
  currentPoint=0;
  imageView[currentPoint].setImageResource(R.drawable.point_select);
 }
 /*
  * 將頁面下方的點(diǎn)全部置為未選中狀態(tài)
  */
 private ImageView[] clearPoint(){
  ImageView[] imageView=new ImageView[imageID.length]; 
  for(int i=0;i<linearLayout.getChildCount();i++){
   imageView[i]=(ImageView) linearLayout.getChildAt(i);
   imageView[i].setImageResource(R.drawable.point_normal);
  }
  return imageView;
 }

 @Override
 public void onPageScrollStateChanged(int arg0) {
  // TODO Auto-generated method stub
  
 }

 @Override
 public void onPageScrolled(int arg0, float arg1, int arg2) {
  // TODO Auto-generated method stub
  
 }

 /*
  * 頁面被選中時(shí)候執(zhí)行的方法
  * (non-Javadoc)
  * @see android.support.v4.view.ViewPager.OnPageChangeListener#onPageSelected(int)
  */
 @Override
 public void onPageSelected(int position) {
  // TODO Auto-generated method stub
  ImageView[] imageView= clearPoint();
  imageView[position].setImageResource(R.drawable.point_select);
 }
 
 //小圓點(diǎn)點(diǎn)擊事件
 @Override
 public void onClick(View v) {
  // TODO Auto-generated method stub
  int i=(Integer) v.getTag();
  viewPager.setCurrentItem(i);
 }
 
}

fry.ImagePagerAdapter

package fry;

import java.util.ArrayList;
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 ImagePagerAdapter extends PagerAdapter{

 private List<View> views;
 
 
 
 public ImagePagerAdapter(List<View> views) {
  this.views=views;
 }

 @Override
 public int getCount() {
  // TODO Auto-generated method stub
  return this.views.size();
 }
 /**
  * position是在viewPager中顯示圖片的位置
  * 我對應(yīng)的圖片放到對應(yīng)的位置就好了
  * instantiateItem和destroyItem是對應(yīng)的
  * 一個(gè)是創(chuàng)建item，一個(gè)是銷毀item
  */
 @Override
 public Object instantiateItem(ViewGroup container, int position) {
  ((ViewPager)container).addView(views.get(position));
  return views.get(position);
 }

 @Override
 public boolean isViewFromObject(View arg0, Object arg1) {
  // TODO Auto-generated method stub
  return arg0==arg1;
 }

 @Override
 public void destroyItem(ViewGroup container, int position, Object object) {
  ((ViewPager)container).removeView(views.get(position));
 }

}

/viewPager/res/layout/activity01.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="match_parent"
  >
  
 </android.support.v4.view.ViewPager>
 
 <LinearLayout 
  android:id="@+id/linearLayout"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:orientation="horizontal"
  android:layout_gravity="bottom|center"
  >
  <ImageView 
   android:id="@+id/point1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/point_select"
   android:padding="25dip"
   />
  <ImageView 
   android:id="@+id/point2"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/point_normal"
   android:padding="25dip"
   />
  <ImageView 
   android:id="@+id/point3"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/point_normal"
   android:padding="25dip"
   />
  <ImageView 
   android:id="@+id/point4"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/point_normal"
   android:padding="25dip"
   />
  
 </LinearLayout>

</FrameLayout>