ViewPager实现带引导小圆点与自动跳转的引导界面

最新推荐文章于 2020-03-03 10:28:44 发布

Homilier

最新推荐文章于 2020-03-03 10:28:44 发布

阅读量533

点赞数 10

分类专栏： Android UI 文章标签： viewpager 使用Fragment实现引导页引导页带引导小圆点的引导页可自动跳转的引导页

本文链接：https://blog.csdn.net/Honiler/article/details/78448864

版权

Android UI 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

实现引导小圆点的方法其实很简单，可直接在布局上放置与引导页面等量的ImageView，然后在切换页面的时候更改图片资源就好了。这里顺便提一下，有些APP是干脆在制作引导页面图片的时候加上引导小圆点，这种方式显然最简单不过了，但是既然是附在图片上的，在切换的时候也是随着图片滑动的，显然看起来效果并不是很好，甚至在我们需要加入小圆点的切换动画时，那就更不能这么去做了。

首先我们先来看看实现效果

这里我们的小圆点图片资源是采用shape绘制的，这里我弄的很随便，所以很粗糙，如果觉得不是很美观那就自行修改吧。如果你是直接使用png资源的话，可直接跳过这一步。

shape_ring_black_normal.xml（黑色小圆环）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid android:color="#FFFFFF" />

    <size android:width="24dp"
        android:height="24dp"/>

    <stroke android:color="#000000"
        android:width="1dp"/>

</shape>

shape_circle_blue_press.xml（蓝色小圆点）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid android:color="#0000F1"/>

    <size android:width="24dp"
        android:height="24dp"/>

</shape>

再来个选择器，直接用setSelected方法就可以切换图片了，为true是切换为shape_circle_blue_press.xml，否则为shape_ring_black_normal.xml，记得选择器的默认item一定要在最后，否则没有效果。你也可以直接在切换页面的时候替换图片资源。

selector_circle.xml（小圆点选择器）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true" android:drawable="@drawable/shape_circle_blue_press"/>
    <item android:drawable="@drawable/shape_ring_black_normal"/>

</selector>

页面布局很简单，ViewPage是重点来显示主要内容，再来一排ImageView显示小圆点，由于我们在最后一个页面需要有个按钮来跳转到主界面，这里我们加个Button先隐藏。

activity_guide.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:gravity="center"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btn_goto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:visibility="gone"
        android:text="跳转" />

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="24dp"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/imgv_circler1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/selector_circle"
            android:layout_margin="24dp"/>

        <ImageView
            android:id="@+id/imgv_circler2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="24dp"
            android:src="@drawable/selector_circle"/>

        <ImageView
            android:id="@+id/imgv_circler3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="24dp"
            android:src="@drawable/selector_circle"/>

    </LinearLayout>

</RelativeLayout>

还有一步准备工作，添加每个页面的数据源，继承PagerAdapter这个类

GuideAdapter.java

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import java.util.List;

public class GuideAdapter extends PagerAdapter {

    private List<View> mDatas;

    public GuideAdapter(List<View> datas) {
        this.mDatas = datas;
    }

    @Override
    public int getCount() {
        return mDatas != null ? mDatas.size() : 0;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(mDatas.get(position), 0);
        return mDatas.get(position);
    }

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

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

接下来就看看如何实现，代码很简单，不难看懂，直接贴出来。

GuideAdapter.java

import android.content.Intent;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.RelativeLayout;

import java.util.ArrayList;
import java.util.List;

public class GuideActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

    private ViewPager vp;
    private List<View> mDatas = new ArrayList<>();
    private Button btn;
    private GuideAdapter mGuideAdapter;

    private int[] res = {
            R.mipmap.ic_launcher,
            R.mipmap.ic_launcher,
            R.mipmap.ic_launcher
    };

    private ImageView[] imgv = new ImageView[res.length];

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide);

        initViews();
        initDatas();
        initEvents();
    }

    private void initViews() {
        vp = (ViewPager) findViewById(R.id.vp);
        btn = (Button) findViewById(R.id.btn_goto);
        imgv[0] = (ImageView) findViewById(R.id.imgv_circler1);
        imgv[1] = (ImageView) findViewById(R.id.imgv_circler2);
        imgv[2] = (ImageView) findViewById(R.id.imgv_circler3);
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);
        for (int i = 0; i < res.length; i++) {
            ImageView imgv = new ImageView(this);
            imgv.setLayoutParams(params);
            imgv.setImageResource(res[i]);
            mDatas.add(imgv);
        }
    }

    private void initDatas() {
        selectedDoto(0);
        mGuideAdapter = new GuideAdapter(mDatas);
        vp.setAdapter(mGuideAdapter);
    }

    private void selectedDoto(int index) {
        for (int i = 0; i < res.length; i++) {
            if (i == index) {
                imgv[i].setSelected(true);
            } else {
                imgv[i].setSelected(false);
            }
        }
    }

    private void initEvents() {
        vp.setOnPageChangeListener(this);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(GuideActivity.this, MainActivity.class);
                startActivity(intent);
                finish();
            }
        });
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

    @Override
    public void onPageSelected(int position) {
        if (position == res.length-1) // 如果是最后一个页面显示跳转按钮
            btn.setVisibility(View.VISIBLE);
        else
            btn.setVisibility(View.GONE);
        selectedDoto(position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {}
}

那如果每个页面不是一个控件这么简单呢？这时我们用Fragment，布局上还是差不多，但最后页面的按钮我们可以转移到最后一个Fragment布局上，因此直接删除Button,这里就不能继承Activity，要基础FragmentActivity。

接着我们就要弄三个Fragment出来，这里布局只简单放了个TextView，最后的页面还有个Button。我们就看看最后一个Fragment就好了。

fragment_guidec.xml

<FrameLayout 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.newcentury.testdemo.GuidecFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:drawableTop="@mipmap/ic_launcher"
        android:textSize="18sp"
        android:text="页面三"/>

    <Button
        android:id="@+id/btn_goto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="跳转"/>

</FrameLayout>

GuidecFragment.java

import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class GuidecFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_guidec, container, false);
        view.findViewById(R.id.btn_goto).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(getActivity(), MainActivity.class);
                startActivity(intent);
                getActivity().finish();
            }
        });
        return view;
    }

}

当然在前面用到的Adapter是用不了了，这里需要继承FragmentPagerAdapter类。

GuideAdapter.java

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.List;

public class GuideAdapter extends FragmentPagerAdapter {

    private List<Fragment> mDatas;

    public GuideAdapter(FragmentManager fm, List<Fragment> datas) {
        super(fm);
        this.mDatas = datas;
    }

    @Override
    public Fragment getItem(int position) {
        return mDatas.get(position);
    }

    @Override
    public int getCount() {
        return mDatas.size();
    }
}

GuideActivity.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;

import java.util.ArrayList;
import java.util.List;

public class GuideActivity extends FragmentActivity implements ViewPager.OnPageChangeListener {

    private ViewPager vp;
    private List<Fragment> mDatas = new ArrayList<>();
    private GuideAdapter mGuideAdapter;

    private int[] res = {
            R.mipmap.ic_launcher,
            R.mipmap.ic_launcher,
            R.mipmap.ic_launcher
    };

    private ImageView[] imgv = new ImageView[res.length];

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide);

        initViews();
        initDatas();
        initEvents();
    }

    private void initViews() {
        vp = (ViewPager) findViewById(R.id.vp);
        imgv[0] = (ImageView) findViewById(R.id.imgv_circler1);
        imgv[1] = (ImageView) findViewById(R.id.imgv_circler2);
        imgv[2] = (ImageView) findViewById(R.id.imgv_circler3);
    }

    private void initDatas() {
        selectedDoto(0);
        mDatas.add(new GuideaFragment());
        mDatas.add(new GuidebFragment());
        mDatas.add(new GuidecFragment());
        mGuideAdapter = new GuideAdapter(getSupportFragmentManager(), mDatas);
        vp.setAdapter(mGuideAdapter);
    }

    private void selectedDoto(int index) {
        for (int i = 0; i < res.length; i++) {
            if (i == index) {
                imgv[i].setSelected(true);
            } else {
                imgv[i].setSelected(false);
            }
        }
    }

    private void initEvents() {
        vp.setOnPageChangeListener(this);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

    @Override
    public void onPageSelected(int position) {
        selectedDoto(position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {}
}

实现效果如下：

从上面还可以看到一个倒计时，那是怎么实现倒计时自动跳转呢？我们可以直接开个线程完成倒计时操作，当计时为0时便自动跳转，但用户很可能会回滑到上一个界面，也可能用户会手动点击跳转按钮进行跳转，因此，要把控好线程的关闭与开启。代码贴出来如下：

public void AutoGotoThread(boolean start) {
    if (start) {
        mGotoMainThread = new GotoMainThread();
        mGotoMainThread.start();
    } else {
        if (mGotoMainThread != null && mGotoMainThread.isAlive()) {
            mGotoMainThread.stopThread();
        }
    }
}

private void startActivity() {
    Intent intent = new Intent(getActivity(), MainActivity.class);
    startActivity(intent);
    mGotoMainThread.stopThread();
    getActivity().finish();
}

private class GotoMainThread extends Thread {
    private volatile boolean isRun = true;
    private Object lock = new Object();

    @Override
    public void run() {
        synchronized (lock) {
            while (isRun) {
                try {
                    Message msg = Message.obtain();
                    msg.what = 101;
                    msg.obj = "跳转 " + mTimeValues--;
                    mHandler.sendMessage(msg);
                    sleep(1000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }

            }
        }
    }

    public void stopThread() {
        mTimeValues = 5;
        isRun = false;
    }
}

final Handler mHandler = new Handler() {
    public void handleMessage(Message msg) {
        switch (msg.what) {
            case 101:
                btn.setText((String) msg.obj);
                if (mTimeValues < 0) {
                    startActivity();
                }
                break;
        }
    }
};

Homilier

关注

10
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
3
评论
ViewPager实现带引导小圆点与自动跳转的引导界面

实现引导小圆点的方法其实很简单，可直接在布局上放置与引导页面等量的ImageView，然后在切换页面的时候更改图片资源就好了。这里顺便提一下，有些APP是干脆在制作引导页面图片的时候加上引导小圆点，这种方式显然最简单不过了，但是既然是附在图片上的，在切换的时候也是随着图片滑动的，显然看起来效果并不是很好，甚至在我们需要加入小圆点的切换动画时，那就更不能这么去做了。首先我们先来看看实现效果
复制链接

扫一扫