Android開發:APP引導頁啓動頁小Demo(實例)

從之前入門Android,一步一步的走到現在,過程真的難於言表,只有經歷過的人才知道吧,理解初學Android時痛苦,所以現在在Android上略窺門徑的時候,回過頭來寫一些小Demo,希望能夠幫助到需要的人,後面有空會經常寫一些實例Demo。

廢話不多說,這次講解APP的引導頁啓動頁,我使用在代碼中加入詳細的註釋的方式進行講解,對於以下不經常出現的API我都進行了註解,接下來直接開始吧。

先上效果圖(PS:動態圖沒來得及做,時間好晚了,可以直接下載我的項目運行,附GitHub鏈接):

java包如圖:

 

WelcomeActivity.java

package com.example.power.welcomepage;

import android.app.Activity;
import android.content.Intent;
import android.content.IntentFilter;
import android.os.Bundle;
import android.os.Handler;

import com.example.power.welcomepage.Activity.MainActivity;
import com.example.power.welcomepage.Activity.WelcomeGuideActivity;
import com.example.power.welcomepage.Util.SharedPreferencesUtil;

public class WelcomeActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        /*首先啓動該Activity,並判斷是否是第一次啓動,注意,需要添加默認值,
        * 如果是第一次啓動,則先進入功能引導頁*/
        boolean isFirstOpen = SharedPreferencesUtil.getBoolean(this, SharedPreferencesUtil.FIRST_OPEN, true);
        if(isFirstOpen){
            Intent intent = new Intent(this, WelcomeGuideActivity.class);
            startActivity(intent);
            /*注意,需要使用finish將該activity進行銷燬,否則,在按下手機返回鍵時,會返回至啓動頁*/
            finish();
            return;
        }
        /*如果不是第一次啓動app,則啓動頁*/
        setContentView(R.layout.activity_welcome);

        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                /*2秒後進入主頁*/
                enterHomeActivity();
            }
        },2000);
    }

    private void enterHomeActivity(){
        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}

WelcomeGuideActivity.java

package com.example.power.welcomepage.Activity;

import android.app.Activity;
import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.example.power.welcomepage.Adapter.GuideViewPagerAdapter;
import com.example.power.welcomepage.R;
import com.example.power.welcomepage.Util.SharedPreferencesUtil;
import com.example.power.welcomepage.WelcomeActivity;

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

/**
 * Created by Power on 2018/11/2.
 */

public class WelcomeGuideActivity extends Activity implements View.OnClickListener {
    private ViewPager viewPager;
    private GuideViewPagerAdapter adapter;
    private List<View> views;
    private Button startBtn;

    /*引導頁圖片資源*/
    private static final int[] pics = {  R.layout.guid_view1,
            R.layout.guid_view2, R.layout.guid_view3, R.layout.guid_view4 };

    /*底部小點圖片*/
    private ImageView[] dots;

    /*用於記錄當前選中位置*/
    private int currentIndex;

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

        views = 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);
                /*這裏使用setTag方法進行標註。在View中的setTag(Onbect)表示給View
                添加一個格外的數據,以後可以用getTag()將這個數據取出來。可以用在
                多個Button添加一個監聽器,每個Button都設置不同的setTag。這個監聽
                器就通過getTag來分辨是哪個Button 被按下。*/
                startBtn.setTag("enter");
                startBtn.setOnClickListener(this);
            }
            views.add(view);
        }

        viewPager = (ViewPager)findViewById(R.id.vp_guide);
        /*初始化adapter*/
        adapter = new GuideViewPagerAdapter(views);
        viewPager.setAdapter(adapter);
        /*需要設置頁面改變的監聽器,這樣我們能把我頁面改變時的具體操作細節,所以
        需要創建PageChangeListener,實現OnPageChangeListener接口*/
        viewPager.addOnPageChangeListener(new PageChangeListener());
        initDots();
    }

    @Override
    protected void onResume() {
        super.onResume();
    }

    @Override
    protected void onPause() {
        super.onPause();
        /*如果切換到後臺,就設置下次不進入功能引導頁*/
        SharedPreferencesUtil.setBoolean(WelcomeGuideActivity.this, SharedPreferencesUtil.FIRST_OPEN, false);
        finish();
    }

    @Override
    protected void onStop() {
        super.onStop();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
    }

    private void initDots(){
        LinearLayout linearLayout = (LinearLayout)findViewById(R.id.ll);
        dots = new ImageView[pics.length];

        /*循環取得小點圖片*/
        for(int i = 0; i < pics.length; i++){
            /*得到一個LinearLayout下面的每一個子元素*/
            dots[i] = (ImageView)linearLayout.getChildAt(i);
            dots[i].setEnabled(false);//設置成灰色
            dots[i].setOnClickListener(this);
            dots[i].setTag(i);//設置位置tag,方便取出與當前位置對應,原理同上
        }
        currentIndex = 0;
        dots[currentIndex].setEnabled(true); // 設置爲白色,即選中狀態
    }

    /**
     * 設置當前view
     *
     * @param position
     */
    private void  setCurrentView(int position){
        if(position < 0 || position > pics.length){
            return;
        }
        viewPager.setCurrentItem(position);
    }

    /**
     * 設置當前指示點
     *
     * @param position
     */
    private void setCurDot(int position) {
        if (position < 0 || position > pics.length || currentIndex == position) {
            return;
        }
        dots[position].setEnabled(true);
        dots[currentIndex].setEnabled(false);
        currentIndex = position;
    }

    @Override
    public void onClick(View v) {
        if(v.getTag().equals("enter")){
            enterMainActivity();
            return;
        }
        int position = (Integer) v.getTag();
        setCurrentView(position);
        setCurDot(position);
    }

    private void enterMainActivity(){
        Intent intent = new Intent(WelcomeGuideActivity.this, WelcomeActivity.class);
        startActivity(intent);
        SharedPreferencesUtil.setBoolean(WelcomeGuideActivity.this, SharedPreferencesUtil.FIRST_OPEN, false);
        finish();
    }

    private class PageChangeListener implements ViewPager.OnPageChangeListener{
        /*當滑動狀態改變時調用*/

        @Override
        public void onPageScrollStateChanged(int state) {
            /*arg0 ==1的時辰默示正在滑動,arg0==2的時辰默示滑動完畢了,arg0==0的時辰默示什麼都沒做。*/
        }

        /*當前頁面被滑動時調用*/

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            // arg0 :當前頁面,及你點擊滑動的頁面
            // arg1:當前頁面偏移的百分比
            // arg2:當前頁面偏移的像素位置
        }

        /*當新的頁面被選中時調用*/
        @Override
        public void onPageSelected(int position) {
            setCurDot(position);
        }
    }
}
SharedPreferencesUtil.java
package com.example.power.welcomepage.Util;

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

/**
 * Created by Power on 2018/11/2.
 */

/*我們使用SharedPreferences的數據儲存方式進行存取,所以我們創建這個工具類進行封裝操作,較爲方便可行。
* 在這裏我以我們要使用到的getBoolean和setBoolean進行舉例講解,其餘類型原理一致*/

public class SharedPreferencesUtil {
    private static final String FILE_NAME = "welcomePage";
    public static final String FIRST_OPEN = "first_open";

    public static Boolean getBoolean(Context context, String strKey,
                                     Boolean strDefault){
        /*使用Context.MODE_PRIVATE模式創建shared preference文件,意味着只用本應用程序
        * 能夠使用,還包括MODE_WORLD_READABLE或者MODE_WORLD_WRITEABLE 模式的,這兩種
        * 模式下,其他任何app均可通過文件名訪問該文件。*/
        SharedPreferences sharedPreferences = context.getSharedPreferences(
                FILE_NAME, Context.MODE_PRIVATE
        );
        /*在文件中獲取一個Boolean類型值,strDefault是默認值,可以省略,其意義是查找的
        key不存在時函數的返回值。*/
        Boolean result = sharedPreferences.getBoolean(strKey, strDefault);

        return result;
    }

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

    public static void setBoolean(Context context, String strKey,
                                  Boolean strData){
        SharedPreferences sharedPreferences = context.getSharedPreferences(
                FILE_NAME, Context.MODE_PRIVATE
        );
        /*往shared preference文件中寫入值時,我們需要用到SharedPreferences.Editor*/
        SharedPreferences.Editor editor = sharedPreferences.edit();
        editor.putBoolean(strKey, strData);
        editor.commit();
    }

    public static String getString(Context context, String strKey) {
        SharedPreferences setPreferences = context.getSharedPreferences(
                FILE_NAME, Context.MODE_PRIVATE);
        String result = setPreferences.getString(strKey, "");
        return result;
    }

    public static String getString(Context context, String strKey,
                                   String strDefault) {
        SharedPreferences setPreferences = context.getSharedPreferences(
                FILE_NAME, Context.MODE_PRIVATE);
        String result = setPreferences.getString(strKey, strDefault);
        return result;
    }

    public static void setString(Context context, String strKey, String strData) {
        SharedPreferences activityPreferences = context.getSharedPreferences(
                FILE_NAME, Context.MODE_PRIVATE);
        SharedPreferences.Editor editor = activityPreferences.edit();
        editor.putString(strKey, strData);
        editor.commit();
    }

    public static int getInt(Context context, String strKey) {
        SharedPreferences setPreferences = context.getSharedPreferences(
                FILE_NAME, Context.MODE_PRIVATE);
        int result = setPreferences.getInt(strKey, -1);
        return result;
    }

    public static int getInt(Context context, String strKey, int strDefault) {
        SharedPreferences setPreferences = context.getSharedPreferences(
                FILE_NAME, Context.MODE_PRIVATE);
        int result = setPreferences.getInt(strKey, strDefault);
        return result;
    }

    public static void setInt(Context context, String strKey, int strData) {
        SharedPreferences activityPreferences = context.getSharedPreferences(
                FILE_NAME, Context.MODE_PRIVATE);
        SharedPreferences.Editor editor = activityPreferences.edit();
        editor.putInt(strKey, strData);
        editor.commit();
    }

    public static long getLong(Context context, String strKey) {
        SharedPreferences setPreferences = context.getSharedPreferences(
                FILE_NAME, Context.MODE_PRIVATE);
        long result = setPreferences.getLong(strKey, -1);
        return result;
    }

    public static long getLong(Context context, String strKey, long strDefault) {
        SharedPreferences setPreferences = context.getSharedPreferences(
                FILE_NAME, Context.MODE_PRIVATE);
        long result = setPreferences.getLong(strKey, strDefault);
        return result;
    }

    public static void setLong(Context context, String strKey, long strData) {
        SharedPreferences activityPreferences = context.getSharedPreferences(
                FILE_NAME, Context.MODE_PRIVATE);
        SharedPreferences.Editor editor = activityPreferences.edit();
        editor.putLong(strKey, strData);
        editor.commit();
    }
}
GuideViewPagerAdapter.java
package com.example.power.welcomepage.Adapter;

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 Power on 2018/11/2.
 */

/*我們需要使用適配器來幫助我們更方便的使用ViewPager*/

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

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

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

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

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

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

XML資源文件

guid_view1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    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="@mipmap/welcomimg3"/>
    <!--我們在使用imageview時一些圖片的尺寸大小比例不一樣,爲了讓所有圖片都
    能填充整個imageview,就可以使用這個屬性,它可以讓圖片保持原有比例充滿imageview,
    並將超出屏幕的部分裁剪掉。-->
</LinearLayout>

guid_view2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    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="@mipmap/welcomimg5"/>
</LinearLayout>

guid_view3.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    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="@mipmap/welcomimg6"/>
</LinearLayout>

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">
    <!--第四個View佈局(也就是放置按鈕的那個佈局)要使用FrameLayout
    因爲需要使用Button在ImageView上方,普通的線性佈局做不到,所以需
    要使用幀佈局(FrameLayout),即後定義的佈局在上方,一層一層疊加-->
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@mipmap/welcomimg11"/>

    <!--正規來講,應該儘量把寬度高度等值放在values的資源文件中,
    這裏爲了方便,直接寫在了佈局文件中-->
    <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:background="@drawable/button_shape"
        android:text="立刻體驗"
        android:textColor="#ce102c"
        android:textSize="18sp"
        android:visibility="visible"/>

</FrameLayout>

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

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="10.0dip"
            android:src="@drawable/dot_selector" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="10.0dip"
            android:src="@drawable/dot_selector" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="10.0dip"
            android:src="@drawable/dot_selector" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="10.0dip"
            android:src="@drawable/dot_selector" />
    </LinearLayout>

</RelativeLayout>

以上就是較爲核心的代碼,想要了解整個項目的小夥伴,可以下載源碼查看哦,裏面進行了詳細的註解。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章