Android中启动界面左右滑动实例

一、首先看一下界面

下面是我的实现，一个xml布局，一个GuideActivity和一个GuidePageAdapter.

先上XML.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<?xml version= "1.0" encoding= "utf-8" ?> <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"      tools:context= "com.example.nanchen.guidepagedemo.GuideActivity" >        <android.support.v4.view.ViewPager          android:id= "@+id/guide_vp"          android:layout_width= "match_parent"          android:layout_height= "match_parent" >      </android.support.v4.view.ViewPager>        <LinearLayout          android:id= "@+id/guide_ll_point"          android:layout_width= "match_parent"          android:layout_height= "wrap_content"          android:orientation= "horizontal"          android:layout_alignParentBottom= "true"          android:layout_marginBottom= "40dp"          android:gravity= "center_horizontal" >      </LinearLayout>        <ImageButton          android:layout_width= "wrap_content"          android:layout_height= "wrap_content"          android:id= "@+id/guide_ib_start"          android:src= "@mipmap/btn_start"          android:layout_centerHorizontal= "true"          android:layout_above= "@+id/guide_ll_point"          android:background= "@null"          android:visibility= "gone" /> </RelativeLayout>

　　

在准备一个Adapter,这个没什么好说的、

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

package com.example.nanchen.guidepagedemo;   import android.support.v4.view.PagerAdapter; import android.view.View; import android.view.ViewGroup;   import java.util.List;   /**   * Created by 南尘 on 2016/7/10.   */ public class GuidePageAdapter extends PagerAdapter {        private List<View> viewList;        public GuidePageAdapter(List<View> viewList) {          this .viewList = viewList;      }        /**       * @return 返回页面的个数       */      @Override      public int getCount() {          if (viewList != null ){              return viewList.size();          }          return 0 ;      }        /**       * 判断对象是否生成界面       * @param view       * @param object       * @return       */      @Override      public boolean isViewFromObject(View view, Object object) {          return view == object;      }        /**       * 初始化position位置的界面       * @param container       * @param position       * @return       */      @Override      public Object instantiateItem(ViewGroup container, int position) {          container.addView(viewList.get(position));          return viewList.get(position);      }          @Override      public void destroyItem(ViewGroup container, int position, Object object) {          container.removeView(viewList.get(position));      } }

　　

最后就是我们的Activity了

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148

package com.example.nanchen.guidepagedemo;   import android.content.Intent; import android.os.Bundle; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.view.ViewGroup; import android.view.Window; import android.widget.ImageButton; import android.widget.ImageView; import android.widget.LinearLayout;   import java.util.ArrayList; import java.util.List;   /**   * 实现首次启动的引导页面   */ public class GuideActivity extends Activity implements ViewPager.OnPageChangeListener{        private ViewPager vp;      private int []imageIdArray; //图片资源的数组      private List<View> viewList; //图片资源的集合      private ViewGroup vg; //放置圆点        //实例化原点View      private ImageView iv_point;      private ImageView []ivPointArray;        @Override      protected void onCreate(Bundle savedInstanceState) {          super .onCreate(savedInstanceState);          supportRequestWindowFeature(Window.FEATURE_NO_TITLE);          setContentView(R.layout.activity_guide);            //加载ViewPager          initViewPager();            //加载底部圆点          initPoint();      }        /**       * 加载底部圆点       */      private void initPoint() {          //这里实例化LinearLayout          vg = (ViewGroup) findViewById(R.id.guide_ll_point);          //根据ViewPager的item数量实例化数组          ivPointArray = new ImageView[viewList.size()];          //循环新建底部圆点ImageView，将生成的ImageView保存到数组中          int size = viewList.size();          for ( int i = 0 ;i<size;i++){              iv_point = new ImageView( this );              iv_point.setLayoutParams( new ViewGroup.LayoutParams( 20 , 20 ));              iv_point.setPadding( 30 , 0 , 30 , 0 ); //left,top,right,bottom              ivPointArray[i] = iv_point;              //第一个页面需要设置为选中状态，这里采用两张不同的图片              if (i == 0 ){                  iv_point.setBackgroundResource(R.mipmap.full_holo);              } else {                  iv_point.setBackgroundResource(R.mipmap.empty_holo);              }              //将数组中的ImageView加入到ViewGroup              vg.addView(ivPointArray[i]);          }            }        /**       * 加载图片ViewPager       */      private void initViewPager() {          vp = (ViewPager) findViewById(R.id.guide_vp);          //实例化图片资源          imageIdArray = new int []{R.mipmap.guide1,R.mipmap.guide2,R.mipmap.guide3};          viewList = new ArrayList<>();          //获取一个Layout参数，设置为全屏          LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(                  LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT);            //循环创建View并加入到集合中          int len = imageIdArray.length;          for ( int i = 0 ;i<len;i++){              //new ImageView并设置全屏和图片资源              ImageView imageView = new ImageView( this );              imageView.setLayoutParams(params);              imageView.setBackgroundResource(imageIdArray[i]);                //将ImageView加入到集合中              viewList.add(imageView);          }            //View集合初始化好后，设置Adapter          vp.setAdapter( new GuidePageAdapter(viewList));          //设置滑动监听          vp.setOnPageChangeListener( this );      }          @Override      public void onPageScrolled( int position, float positionOffset, int positionOffsetPixels) {        }        /**       * 滑动后的监听       * @param position       */      @Override      public void onPageSelected( int position) {          //循环设置当前页的标记图          int length = imageIdArray.length;          for ( int i = 0 ;i<length;i++){              ivPointArray[position].setBackgroundResource(R.mipmap.full_holo);              if (position != i){                  ivPointArray[i].setBackgroundResource(R.mipmap.empty_holo);              }          }        }          @Override      public void onPageScrollStateChanged( int state) {        } }