17.Android项目引导页

前沿

学习笔记，便于后续查看。

摘抄自这位大神：http://blog.csdn.net/cjm2484836553/article/details/53292150

效果图

hehe.gif

撸代码

• GuideActivity.xml

<?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.meterdesginproject.GuideActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <Button
        android:id="@+id/button_skip"
        android:layout_alignParentRight="true"
        android:layout_marginTop="20dp"
        android:layout_marginRight="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:text="跳过"/>
    <RelativeLayout
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="40dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <LinearLayout
            android:id="@+id/ll_dot_group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"/>
        <ImageView
            android:id="@+id/iv_white_dot"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/white_dot_shape"/>
    </RelativeLayout>
</RelativeLayout>

• 第五张图片的View

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/splash_5" />

    <Button
        android:id="@+id/button_join"
        android:layout_marginBottom="80dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:text="立即体验" />
</FrameLayout>

• 白点和圆圈的shape

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <solid android:color="#fff"/>
    <corners android:radius="5dp"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size
        android:width="10dp"
        android:height="10dp"/>
    <stroke
        android:width="1dp"
        android:color="@android:color/white"/>
    <solid android:color="@android:color/transparent"/>
</shape>

• GuideActivity

public class GuideActivity extends AppCompatActivity implements View.OnClickListener{

    private View lastSplash;
    private ArrayList<ImageView> imageViews;
    private LinearLayout dotGroup;
    private ViewPager viewPager;
    private ImageView whiteDot;
    private int dotDistance;
    private Button mSkip;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //初始化视图
        initView();
        //初始化数据
        initData();
        //初始化监听
        initListener();
    }

    private void initView() {
        setContentView(R.layout.activity_guide);
        dotGroup = (LinearLayout)findViewById(R.id.ll_dot_group);
        viewPager = (ViewPager)findViewById(R.id.viewpager);
        whiteDot = (ImageView)findViewById(R.id.iv_white_dot);
        mSkip = (Button)findViewById(R.id.button_skip);
        mSkip.setOnClickListener(this);

        //最后一张
        lastSplash = View.inflate(this,R.layout.last_guide_view,null);
    }

    private void initData() {
        imageViews = new ArrayList<>();
        int dotWidth = DensityUtil.dip2px(this,10);
        int[] imagesId = {
                R.drawable.splash_1,
                R.drawable.splash_2,
                R.drawable.splash_3,
                R.drawable.splash_4,
        };
        for (int i = 0; i < imagesId.length+1; i++) {  //这里需要加1
            //创建小圆点
            ImageView dot = new ImageView(this);
            dot.setBackgroundResource(R.drawable.dot_normal_shape);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(dotWidth,dotWidth);
            if (i!=0){
                params.leftMargin =dotWidth;
            }
            dot.setLayoutParams(params);
            //添加小圆点
            dotGroup.addView(dot);

            if(i!=imagesId.length){
                ImageView imageView = new ImageView(this);
                imageView.setBackgroundResource(imagesId[i]);
                imageViews.add(imageView);
            }

            //ViewPager设置适配器
            viewPager.setAdapter(new ViewpagersAdapter());
        }

    }

    public class ViewpagersAdapter extends PagerAdapter{

        @Override
        public int getCount() {
            return imageViews.size()+1;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view==object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = null;
            if (position<imageViews.size()){
                view = imageViews.get(position);
            }else {
                view = lastSplash;
            }
            container.addView(view);
            return view;
        }

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

    private void initListener(){
        whiteDot.getViewTreeObserver().addOnGlobalLayoutListener(new MyOnGlobalLayoutListener());
        viewPager.addOnPageChangeListener(new MyOnPageChangeListener());
        lastSplash.findViewById(R.id.button_join).setOnClickListener(this);
    }

    private class MyOnGlobalLayoutListener implements ViewTreeObserver.OnGlobalLayoutListener{

        @Override
        public void onGlobalLayout() {
            //默认会调用两次，只需要一次，第一次进入就移除
            whiteDot.getViewTreeObserver().removeOnGlobalLayoutListener(MyOnGlobalLayoutListener.this);
            // 两点间距= 第1个dot距左边的距离 - 第0个dot距左边的距离
            dotDistance = dotGroup.getChildAt(1).getLeft()-dotGroup.getChildAt(0).getLeft();
        }
    }

    private class  MyOnPageChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            //红点移动的距离 = ViewPager页面的百分比* 间距
            //坐标 = 起始位置 + 红点移动的距离；
            int leftmagin = (int) (position * dotDistance + (positionOffset * dotDistance));
            RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) whiteDot.getLayoutParams();
            params.leftMargin = leftmagin;
            whiteDot.setLayoutParams(params);
        }

        @Override
        public void onPageSelected(int position) {

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.button_skip:
                startActivity(new Intent(GuideActivity.this,MainActivity.class));
                break;
            case R.id.button_join:
                startActivity(new Intent(GuideActivity.this,MainActivity.class));
                break;
        }
    }
}

• 用到的一个工具类

public class DensityUtil {
    /**
     * 根据手机的分辨率从 dip 的单位 转成为 px(像素)
     */
    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    /**
     * 根据手机的分辨率从 px(像素) 的单位 转成为 dp
     */
    public static int px2dip(Context context, float pxValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (pxValue / scale + 0.5f);
    }
}

结束……