引导页的圆点滑动效果

1.Activity文件

package com.example.zhihuibeijing;

import java.util.ArrayList;

import com.example.zhihuibeijing.Utils.SharePrefersUtils;

import android.app.Activity;
import android.content.Intent;
import android.content.SharedPreferences;
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.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.RelativeLayout;

public class GuideActivity extends Activity {

private static final int[] guideimage=new int[]{R.drawable.guide_1,R.drawable.guide_2,R.drawable.guide_3};
private ViewPager vp_guide;
int pointWidth;
private Button btn_start;
LinearLayout ll_point_grey;
ArrayList<ImageView> mimagelist;
private View v_redPoint;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide);
        vp_guide=(ViewPager) findViewById(R.id.vp_guide);
        ll_point_grey=(LinearLayout) findViewById(R.id.ll_point_grey);
        v_redPoint=findViewById(R.id.v_redPoint);
        btn_start=(Button) findViewById(R.id.btn_start);

        inivs();
        vp_guide.setAdapter(new GuideAdpter());//使用GuideAdper适配器
        vp_guide.setOnPageChangeListener(new GuidePagerListener());
        btn_start.setOnClickListener(new OnClickListener() {

           @Override
           public void onClick(View v) {
               //更新sp
               SharePrefersUtils.putboolean(GuideActivity.this, "guide_showed", true);

               startActivity(new Intent(GuideActivity.this,MainActivity.class));
           }
       });
   }


   //初始化界面
   private void inivs() {
        mimagelist=new ArrayList<ImageView>();
       for(int i=0;i<guideimage.length;i++){
           ImageView image=new ImageView(this);
           image.setBackgroundResource(guideimage[i]);//设置引导页背景资源
           mimagelist.add(image);//将背景资源放置列表中
       }

//初始化引导页的圆点
       for(int i=0;i<guideimage.length;i++){
           View point=new View(this);
           point.setBackgroundResource(R.drawable.point_grey);//设置引导页圆点颜色

           LinearLayout.LayoutParams params=new LayoutParams(10, 10);
           if(i>0){
               params.leftMargin=10;//设置圆点间距
           }
           point.setLayoutParams(params);//设置圆点大小

           ll_point_grey.addView(point);//将圆点放置LinnearLayout中
       }

       //测量圆点距离，使用视图树的方式（因为inivs方法在oncreate中调用，layout并未绘制完成，不能直接测量圆点距离）
       ll_point_grey.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

           @Override
           public void onGlobalLayout() {
               System.out.println("layout已经结束");
               ll_point_grey.getViewTreeObserver().removeGlobalOnLayoutListener(this);//防止方法重复使用
               //measure（测量大小） layout（界面） ondraw（绘制）
               pointWidth=ll_point_grey.getChildAt(1).getLeft()
                       -ll_point_grey.getChildAt(0).getLeft();
               System.out.println("圆点距离:"+pointWidth);

           }
       });

   }

   //设置viewpager适配器
   class GuideAdpter extends PagerAdapter{

       @Override
       public int getCount() {
           // TODO Auto-generated method stub
           return guideimage.length;
       }

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

       @Override
       public Object instantiateItem(ViewGroup container, int position) {
           container.addView(mimagelist.get(position));//从列表中加载view
           return mimagelist.get(position);
       }

       @Override
       public void destroyItem(ViewGroup container, int position, Object object) {
           container.removeView((View)object);//从列表中除去view
       }
   }

   //设置viewpager滑动监听
   class GuidePagerListener implements OnPageChangeListener{

       //滑动事件
       @Override
       public void onPageScrolled(int position, float positionOffset,
               int positionOffsetPixels) {
           System.out.println("当前位置:"+position+";位置百分比:"+positionOffset
                   +";滑动距离:"+positionOffsetPixels);
           //设置小红点的相关属性（通过设置小红点的leftmargin实现小红点的移动）
           RelativeLayout.LayoutParams redparams= (RelativeLayout.LayoutParams)
                   v_redPoint.getLayoutParams();//为小红点设置布局参数
           int len=(int) (pointWidth*positionOffset+position*pointWidth);//计算小红点在随着滑动过程中该移动的距离
           redparams.leftMargin=len;
           v_redPoint.setLayoutParams(redparams);

       }

       //选中
       @Override
       public void onPageSelected(int position) {
           if(position==guideimage.length-1){//最后的引导页
               btn_start.setVisibility(View.VISIBLE);
           }
           else {
               btn_start.setVisibility(View.INVISIBLE);
           }
       }

       //滑动状态变化
       @Override
       public void onPageScrollStateChanged(int state) {
           // TODO Auto-generated method stub

       }




   }
}

2.activity_guide

引导页的圆点滑动效果

相关推荐