引导页的圆点滑动效果

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

<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"
   >

    <android.support.v4.view.ViewPager
    android:id="@+id/vp_guide"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

    <Button
        android:id="@+id/btn_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="70dp"
        android:background="@drawable/btn_start_selector"
        android:textColor="@drawable/btn_starttextcolor_selector"
        android:text="开始体验" />
    
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="15dp"
        >
        <LinearLayout
        android:id="@+id/ll_point_grey"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
            >
        </LinearLayout>
        <View
        android:id="@+id/v_redPoint"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:background="@drawable/point_red"   
            />
    </RelativeLayout>

</RelativeLayout>

转载于:https://www.cnblogs.com/wangying222/p/5267923.html