Android如何实现引导页

今天药忘吃喽~ 2021-06-24 16:10 553阅读 0赞

需要添加三个后台文件

SplashActivity(判断是否是第一次登陆)
    WelcomeActivity（引导页）
    ViewPagerAdapter（ViewPager控件适配器）

ViewPager是一种通过添加视图来实现左右滑动的控件，非常适合用来做引导页。  
在应用第一次开启时，首先进入SplashActivity页面，通过SharePreferences存储判断登陆的布尔类型值判断用户是否是第一次打开应用，若是，跳转至引导页，否则直接跳到登陆页面。  
在引导页面，使用ViewPager的addView(View v)方法添加多个视图，并且添加OnPageChangeListener监听器来监听用户的手势滑动，通过指定方法获取视图索引，从而实现视图切换。  
话不多说，直接上代码：  
**SplashActivity**

public class SplashActivity extends Activity {
    
    private Context context;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    context=SplashActivity.this;
    boolean isFirstOpen=SharePerferenceUtil.IsFirstLogin(context);
    if(!isFirstOpen){//不是第一次登陆
    Intent intent=new Intent(context,LoginActivity.class);
    startActivity(intent);
    finish();
    return;
    }
    setContentView(R.layout.activity_splash);
    new Handler().postDelayed(new Runnable() {//第一次登陆时1秒后跳到引导页
    @Override
    public void run() {
    Intent intent=new Intent(context,WelcomeActivity.class);
    startActivity(intent);
    finish();
    overridePendingTransition(android.R.anim.fade_in, android.R.anim.fade_out);
    }
    }, 1000);
    }
    }

**ViewPagerAdapter**

public class ViewPagerAdapter extends PagerAdapter {
    
    private List views;
    public ViewPagerAdapter(List views2){
    this.views=views2;
    }
    //获得视图总数
    @Override
    public int getCount() {
    if(views!=null){
    return views.size();
    }
    return 0;
    }
    //判断是否由对象生成视图
    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
    return (arg0==arg1);
    }
    //初始化position位置的视图
    @Override
    public Object instantiateItem(View container, int position) {
    ((ViewPager)container).addView(views.get(position), 0);
    return views.get(position);
    }
    //销毁position位置的视图
    @Override
    public void destroyItem(View container, int position, Object object) {
    ((ViewPager)container).removeView(views.get(position));
    }
    }

**WelcomeActivity**

public class WelcomeActivity extends Activity implements OnClickListener,OnPageChangeListener{
    
    private ViewPager viewPager;
    private LinearLayout pointLayout;
    private ViewPagerAdapter adapter;
    private List views;
    private Button startBtn;
    private int[] guidePics = { R.layout.view_guide1, R.layout.view_guide2,
    R.layout.view_guide3 };//引导页中的三张图片布局
    private ImageView[] dots;//代表视图索引的圆圈
    private int currentIndex;//表示前一个视图的索引
    private Context context;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.activity_welcome);
    context = WelcomeActivity.this;
    if (Build.VERSION.SDK_INT >= 19) {// android 4.4 以上 沉浸式状态栏
    Window window = getWindow();
    window.addFlags(67108864);
    }
    AndroidBug5497Workaround.assistActivity(WelcomeActivity.this);//解决沉浸式bug
    viewPager = (ViewPager) findViewById(R.id.viewPager);
    pointLayout=(LinearLayout) findViewById(R.id.pointLayout);
    views = new ArrayList();
    initGuidePage();
    setViewPagerAdapter();
    initDots();
    }
    
    @Override
    protected void onPause() {
    super.onPause();
    // 如果切换到后台，就设置下次不进入功能引导页
    // SharePerferenceUtil.setFirstLogin(context, false);
    }
    //初始化引导页视图
    private void initGuidePage() {
    for (int i = 0; i < guidePics.length; i++) {
    View view=LayoutInflater.from(context).inflate(guidePics[i], null);
    if(i==guidePics.length-1){
    startBtn=(Button) view.findViewById(R.id.btnStart);
    startBtn.setTag("start");
    startBtn.setOnClickListener(this);
    }
    views.add(view);
    }
    }
    //设置ViewPager适配器
    private void setViewPagerAdapter() {
    adapter=new ViewPagerAdapter(views);
    viewPager.setAdapter(adapter);
    viewPager.setOnPageChangeListener(this);
    }
    //初始化圆圈
    private void initDots() {
    dots=new ImageView[guidePics.length];
    for (int i = 0; i < guidePics.length; i++) {
    dots[i]=(ImageView) pointLayout.getChildAt(i);
    dots[i].setEnabled(true);
    dots[i].setOnClickListener(this);
    dots[i].setTag(i);
    }
    currentIndex=0;
    dots[currentIndex].setEnabled(false);
    }
    
    @Override
    public void onClick(View v) {
    if(v.getTag().equals("start")){
    enterToLoginActivity();//点击“立即开启” 进入登陆页面
    return;
    }
    //圆圈点击后执行
    int position=(Integer) v.getTag();
    setCurrentView(position);
    setCurrentDot(position);
    }
    //设置当前视图
    private void setCurrentView(int position) {
    if(position<0||position>guidePics.length-1){
    return;
    }
    viewPager.setCurrentItem(position);
    }
    //设置当前圆圈状态
    private void setCurrentDot(int position) {
    if(position<0||position>guidePics.length-1||currentIndex==position){
    return;
    }
    dots[position].setEnabled(false);
    dots[currentIndex].setEnabled(true);
    currentIndex=position;
    }
    //通过SplashActivity中转进入LoginActivity
    private void enterToLoginActivity() {
    Intent intent=new Intent(context,SplashActivity.class);
    startActivity(intent);
    SharePerferenceUtil.setFirstLogin(context, false);//设置不是第一次登陆
    finish();
    overridePendingTransition(android.R.anim.fade_in, android.R.anim.fade_out);
    }
    @Override
    public void onPageScrollStateChanged(int arg0) {
    // arg0 ==1的时辰默示正在滑动，arg0==2的时辰默示滑动完毕了，arg0==0的时辰默示什么都没做。
    }
    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
    // arg0 :当前页面，及你点击滑动的页面
            // arg1:当前页面偏移的百分比
            // arg2:当前页面偏移的像素位置
    }
    @Override
    public void onPageSelected(int position) {
    setCurrentDot(position);//设置圆圈状态
    }
    }

**引导页布局文件**

< 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/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/ >
        < LinearLayout 
            android:id="@+id/pointLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
            android:layout_marginBottom="40dp"
            android:orientation="horizontal">    
    底部的三个小圆圈
            < ImageView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:clickable="true"
                android:padding="15dp"
                android:src="@drawable/point_bg"/ >
            < ImageView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:clickable="true"
                android:padding="15dp"
                android:src="@drawable/point_bg"/ >
            < ImageView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:clickable="true"
                android:padding="15dp"
                android:src="@drawable/point_bg"/ >
        < /LinearLayout>
    < /RelativeLayout>

**引导页视图（三个），这里仅贴出最后一个视图布局**

< RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
        android:layout_height="match_parent" >
        < ImageView 
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/guide_3"
            android:scaleType="fitXY"  / >
        < Button 
            android:id="@+id/btnStart"
            android:layout_width="200dp"
            android:layout_height="50dp"
            android:text="立即开启"
            android:textColor="@color/orange_express"
            android:layout_centerHorizontal="true"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="150dp"
            android:background="@drawable/startbtn_bg"/>
    < /RelativeLayout>