Android零碎知識點（8）——啓動引導頁面

實現Android項目的啓動引導頁面

首先看下本Demo的項目結構目錄

首先應該考慮歡迎引導Activity及佈局

activity_welcome_guide.xml

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

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

    </FrameLayout>


    <!--引導頁面的四個小圓點-->
    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="24.0dip"
        android:orientation="horizontal">

        <Button
            android:id="@+id/button_firstDots"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_gravity="center"
            android:layout_marginRight="10dp"
            android:background="@drawable/button_shape_gray" />

        <Button
            android:id="@+id/button_secondDots"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_gravity="center"
            android:layout_marginRight="10dp"
            android:background="@drawable/button_shape_gray" />

        <Button
            android:id="@+id/button_thirdDots"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_gravity="center"
            android:layout_marginRight="10dp"
            android:background="@drawable/button_shape_gray" />

        <Button
            android:id="@+id/button_fourDots"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_gravity="center"
            android:background="@drawable/button_shape_gray" />

    </LinearLayout>

</RelativeLayout>

即如下：

ViewPager主要用來切換引導界面的不同頁，而下面的四個小圓點表示當前哪個頁面被選中了，如果被選中則改變背景色。

即button_shape_gray.xml

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

    <corners android:radius="0dp" />   <!-- 設置圓角弧度 -->
    <solid android:color="#D4D4D4" />   <!-- 設置背景顏色 -->
    <size
        android:width="3dp"
        android:height="3dp" />
</shape>

button_shape_white.xml

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

    <corners android:radius="0dp" />   <!-- 設置圓角弧度 -->
    <solid android:color="#fff" />   <!-- 設置背景顏色 -->
    <size
        android:width="3dp"
        android:height="3dp" />
</shape>

即當前引導頁面被選中則小圓點背景色切換成白色，否則（未被選中）爲灰色。

ViewPager控件的頁面內容是通過適配器進行填充的，所以創建適配器類GuideViewPagerAdapter.java

package com.example.administrator.myapplication;

import android.support.annotation.NonNull;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

/**
 * Created by Administrator on 2020/6/24.
 */

public class GuideViewPagerAdapter extends PagerAdapter {
    private List<View> viewList;

    public GuideViewPagerAdapter(List<View> viewList) {
        this.viewList = viewList;
    }

    @Override
    public int getCount() {
        if (viewList != null) {
            return viewList.size();
        }
        return 0;
    }

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

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

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

然後就是WelcomeGuideActivity.java設置活動內容了

package com.example.administrator.myapplication;

import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;

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

public class WelcomeGuideActivity extends AppCompatActivity {
    private ViewPager viewPager;
    private GuideViewPagerAdapter adapter;
    private List<View> viewList;
    private Button startBtn;
    // 引導頁圖片資源
    private int[] pics = {R.layout.guid_view1, R.layout.guid_view2, R.layout.guid_view3, R.layout.guid_view4};
    // 底部小圓點按鈕
    private Button[] dots;
    // 記錄當前選中位置
    private int currentIndex;

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

        // 初始化引導頁視圖列表
        initPageView();

        // 初始化小圓點狀態
        initDots();

        // 獲取ViewPager控件並填充頁面
        viewPager = (ViewPager) findViewById(R.id.vp_guide);
        adapter = new GuideViewPagerAdapter(viewList);// 初始化adapter
        viewPager.setAdapter(adapter);
        viewPager.setOnPageChangeListener(new PageChangeListener());
    }

    /**
     * 初始化頁面引導視圖
     */
    private void initPageView() {
        // 實例化視圖集合
        viewList = new ArrayList<View>();
        for (int i = 0; i < pics.length; i++) {
            View view = LayoutInflater.from(this).inflate(pics[i], null);
            if (i == pics.length - 1) {// 即到最後一頁時
                startBtn = (Button) view.findViewById(R.id.btn_login);// 進入首頁按鈕
                // 設置"進入"按鈕的事件監聽器
                startBtn.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        if (v.getId() == R.id.btn_login) {
                            Intent intent = new Intent(WelcomeGuideActivity.this, SplashActivity.class);
                            startActivity(intent);
                            Utils.putBoolean(WelcomeGuideActivity.this,"first_open",true);// 在打開過引導頁面後就設置爲true
                        }
                    }
                });
            }
            viewList.add(view);
        }

    }

    /**
     * 初始化小圓點狀態
     */
    private void initDots() {
        LinearLayout ll = (LinearLayout) findViewById(R.id.ll);
        dots = new Button[pics.length];

        // 循環取得小圓點
        for (int i = 0; i < pics.length; i++) {
            // 得到一個LinearLayout下面的每一個子元素
            dots[i] = (Button) ll.getChildAt(i);
            dots[i].setBackgroundResource(R.drawable.button_shape_gray);
        }
        // 設置第一個小圓點爲被選中狀態（即白色背景）
        dots[0].setBackgroundResource(R.drawable.button_shape_white);
        // 設置當前頁碼是第1頁
        currentIndex = 0;
    }

    /**
     * 設置當前指示點
     *
     * @param position 當前頁面位置（0~3）
     */
    private void setCurDot(int position) {
        // 判斷位置是否合法
        if (position < 0 || position > pics.length || currentIndex == position) {
            return;
        }
        // 設置當前選中的頁面的小圓點背景色爲白色
        dots[position].setBackgroundResource(R.drawable.button_shape_white);
        // 設置上一個頁面的小圓點背景色改爲灰色（即未選擇狀態）
        dots[currentIndex].setBackgroundResource(R.drawable.button_shape_gray);
        // 保存當前頁的位置
        currentIndex = position;
    }

    /**
     * 引導頁面被選中監聽器
     */
    private class PageChangeListener implements ViewPager.OnPageChangeListener {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            // 當滑動狀態改變時調用
        }

        @Override
        public void onPageSelected(int position) {
            // 當新的頁面被選中時調用
            // 設置翻頁後底部小圓點的狀態變化
            setCurDot(position);// position指的是當前第幾頁，從0開始計算的，所以0表示第1頁，1表示第2頁，...
        }

        @Override
        public void onPageScrollStateChanged(int state) {
            // 當滑動狀態改變時調用
        }
    }
}

可以看到裏面用四個佈局即guid_view1、guid_view2、guid_view3、guid_view4，分別表示四個頁面顯示的內容。

guid_view1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:scaleType="centerCrop"
        android:src="@drawable/xsx"
         />

</LinearLayout>

guid_view2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:scaleType="centerCrop"
        android:src="@drawable/fcj"
         />

</LinearLayout>

guid_view3.xml

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/qlr"
        />

</FrameLayout>

guid_view4.xml

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/jtj" />

    <Button
        android:id="@+id/btn_login"
        android:layout_width="160dp"
        android:layout_height="42dp"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="100dp"
        android:text="點擊進入"
        android:textColor="#ce102c"
        android:textSize="18sp"
        android:visibility="visible" />

</FrameLayout>

展示下guid_view4的視圖

剩下的問題就是SplashActivity和MainActivity了，前者是歡迎引導界面WelcomeGuideActivity到主界面MainActivity的過渡頁面（即判斷是否要去歡迎引導頁面的這麼一個活動），後者就是主界面（Android程序的“首頁”，可以這麼來說）。

先說SplashActivity

activity_splash.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"
    android:orientation="vertical"
    tools:context="com.example.administrator.myapplication.SplashActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="歡迎使用！"
        android:textSize="28dp" />

</RelativeLayout>

沒有什麼內容，這個頁面想怎麼定義都可以。

SplashActivity.java

package com.example.administrator.myapplication;

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 判斷是否是第一次啓動軟件
        boolean isFirstOpen = Utils.getBoolean(this, "first_open");
        // 如果是第一次啓動，則先進入功能引導頁
        if (!isFirstOpen) {
            Intent intent = new Intent(this, WelcomeGuideActivity.class);
            startActivity(intent);
            finish();
        } else {
            // 如果不是第一次啓動app，則正常顯示啓動屏
            setContentView(R.layout.activity_splash);
            // 然後延遲加載主頁面
            new Handler().postDelayed(new Runnable() {
                @Override
                public void run() {
                    Intent intent = new Intent(SplashActivity.this, MainActivity.class);
                    startActivity(intent);
                    finish();
                }
            }, 2000);
        }
    }
}

主要就是添加了對於是否是第一次啓動軟件的判斷，而如果不是第一次啓動那麼SharedPreferences中的“first_open"肯定爲false，而!isFirstOpen即爲true，表示要去歡迎引導界面，在歡迎引導界面通過guid_view4.xml中“點擊進入”按鈕事件將"first_open"設置爲了true，那麼再次在SplashActivity進行判斷時，isFirstOpen就爲true了，那麼!isFirstOpen就爲false，就執行進入主界面MainActivity。

上圖即是在初次進入歡迎引導後“點擊進入”按鈕的事件配置，以後就不會進入歡迎引導頁面了。

主界面MainActivity如下：

activity_main.xml

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

    <Button
        android:id="@+id/clear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="清除SharedPreferences"
        />

</RelativeLayout>

MainActivity.java

package com.example.administrator.myapplication;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 獲取控件
        Button clear = (Button) findViewById(R.id.clear);
        clear.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Utils.clear(MainActivity.this);
            }
        });
    }

}

設置了一個清除SharedPreferences的按鈕，可以試驗引導頁面的作用

其他的一些文件如下：

Utils.java

package com.example.administrator.myapplication;

import android.content.Context;
import android.content.SharedPreferences;

/**
 * Created by Administrator on 2020/6/24.
 */

public class Utils {
    private static String name="app";

    public static void putBoolean(Context context, String key, boolean value){
        SharedPreferences activityPreferences = context.getSharedPreferences(name, Context.MODE_PRIVATE);
        SharedPreferences.Editor editor = activityPreferences.edit();
        editor.putBoolean(key, value);
        editor.apply();
    }

    public static Boolean getBoolean(Context context, String key) {
        SharedPreferences setPreferences = context.getSharedPreferences(name, Context.MODE_PRIVATE);
        return setPreferences.getBoolean(key, false);
    }

    public static void clear(Context context){
        SharedPreferences preferences = context.getSharedPreferences(name, Context.MODE_PRIVATE);
        SharedPreferences.Editor editor = preferences.edit();
        editor.clear();
        editor.apply();
    }
}

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.administrator.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="啓動引導"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".SplashActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".WelcomeGuideActivity" />
        <activity android:name=".MainActivity"/>
    </application>

</manifest>

關於幾張圖片就不放了。

演示如下：

完整代碼地址

Android零碎知識點（8）——啓動引導頁面

Window 安裝 Python 失敗 0x80070643，發生嚴重錯誤

AndroidStudio報錯“Error while Launching activity”

修改MySQL的登陸密碼

Android零碎知識點（7）——抽屜佈局DrawerLayout的簡單使用

Android零碎知識點（8）——啓動引導頁面

考研數據結構之樹（6.1）——二叉樹的遍歷算法（C表示）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結