Android引導頁Splash設計

標籤：

Android_Splash引導頁就是在應用第一次安裝時用來介紹應用的部分功能的動畫頁面，讓使用者大致的瞭解這個應用有啥功能。當使用者首次安裝時會有引導頁面，使用者下次啟動的時候，就會直接進入首頁面。

SpUtils.java

package com.zwb.splashdemo.utils;import android.content.Context;import android.content.SharedPreferences;/** * 類描述:SharedPreferences工具類 * zwb * 時間：16-5-7 11:32 * 郵箱：[email protected] */public class SpUtils {    private static final String spFileName = "app";    public static String getString(Context context, String strKey) {        SharedPreferences setPreferences = context.getSharedPreferences(                spFileName, Context.MODE_PRIVATE);        String result = setPreferences.getString(strKey, "");        return result;    }    public static String getString(Context context, String strKey,                                   String strDefault) {        SharedPreferences setPreferences = context.getSharedPreferences(                spFileName, Context.MODE_PRIVATE);        String result = setPreferences.getString(strKey, strDefault);        return result;    }    public static void putString(Context context, String strKey, String strData) {        SharedPreferences activityPreferences = context.getSharedPreferences(                spFileName, Context.MODE_PRIVATE);        SharedPreferences.Editor editor = activityPreferences.edit();        editor.putString(strKey, strData);        editor.commit();    }    public static Boolean getBoolean(Context context, String strKey) {        SharedPreferences setPreferences = context.getSharedPreferences(                spFileName, Context.MODE_PRIVATE);        Boolean result = setPreferences.getBoolean(strKey, false);        return result;    }    public static Boolean getBoolean(Context context, String strKey,                                     Boolean strDefault) {        SharedPreferences setPreferences = context.getSharedPreferences(                spFileName, Context.MODE_PRIVATE);        Boolean result = setPreferences.getBoolean(strKey, strDefault);        return result;    }    public static void putBoolean(Context context, String strKey,                                  Boolean strData) {        SharedPreferences activityPreferences = context.getSharedPreferences(                spFileName, Context.MODE_PRIVATE);        SharedPreferences.Editor editor = activityPreferences.edit();        editor.putBoolean(strKey, strData);        editor.commit();    }    public static int getInt(Context context, String strKey) {        SharedPreferences setPreferences = context.getSharedPreferences(                spFileName, 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(                spFileName, Context.MODE_PRIVATE);        int result = setPreferences.getInt(strKey, strDefault);        return result;    }    public static void putInt(Context context, String strKey, int strData) {        SharedPreferences activityPreferences = context.getSharedPreferences(                spFileName, 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(                spFileName, 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(                spFileName, Context.MODE_PRIVATE);        long result = setPreferences.getLong(strKey, strDefault);        return result;    }    public static void putLong(Context context, String strKey, long strData) {        SharedPreferences activityPreferences = context.getSharedPreferences(                spFileName, Context.MODE_PRIVATE);        SharedPreferences.Editor editor = activityPreferences.edit();        editor.putLong(strKey, strData);        editor.commit();    }}

AppConstants.java

package com.zwb.splashdemo.utils;/** * 類描述: * zwb * 時間：16-5-7 11:34 * 郵箱：[email protected] */public class AppConstants {    public static final String FIRST_OPEN = "first_open";}

布局資源檔

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>        <Button         android:id="@+id/btn_enter"        android:layout_width="200dp"        android:layout_height="50dp"        android:textSize="20sp"        android:textColor="@android:color/white"        android:background="#B6292D"        android:layout_marginTop="410dp"        android:layout_centerHorizontal="true"        android:visibility="gone"        />    <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>

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="@mipmap/img01"         /></LinearLayout>

activity_splash.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:id="@+id/iv_splash"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:adjustViewBounds="true"        android:contentDescription="@null"        android:scaleType="centerCrop"        android:src="@mipmap/splash" /></LinearLayout>

動畫資源檔案

dot_focused.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="oval" >    <solid android:color="#aaFFFFFF" />    <corners android:radius="5dip" /></shape>

dot_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="#33000000" />    <corners android:radius="5dip" /></shape>

dot_selector.xml

<?xml version="1.0" encoding="UTF-8"?><selector  xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_enabled="true" android:drawable="@drawable/point2" />    <item android:state_enabled="false" android:drawable="@drawable/point1" /></selector>

button_shape.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <!--     <solid android:color="#ce102c"/> -->        <stroke android:width="0.5dp"         android:color="#ce102c"/>    <corners android:radius="200dp" />        <solid        android:color="@android:color/transparent"         />    <padding        android:bottom="5dp"        android:left="5dp"        android:right="5dp"        android:top="5dp" /></shape>

啟動的Splash頁面
SplashActivity.java

package com.zwb.splashdemo.activity;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.os.Handler;import com.zwb.splashdemo.MainActivity;import com.zwb.splashdemo.R;import com.zwb.splashdemo.utils.AppConstants;import com.zwb.splashdemo.utils.SpUtils;/** * 啟動的Splash */public class SplashActivity extends Activity{    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        //判斷是否第一次啟動該應用        boolean isFirstOpen = SpUtils.getBoolean(this , AppConstants.FIRST_OPEN);        //如果是第一次啟動，則先進入功能引導頁        if(!isFirstOpen){            startActivity(new Intent(this, WelcomeGuideActivity.class));            finish();            return;        }        //如果不是第一次啟動        setContentView(R.layout.activity_splash);        new Handler().postDelayed(new Runnable() {            @Override            public void run() {                enterHomeActivity();            }        } , 1500);    }    private void enterHomeActivity(){        startActivity(new Intent(this , MainActivity.class));        finish();    }}

引導頁的Activity

WelcomeGuideActivity.java

package com.zwb.splashdemo.activity;import android.app.Activity;import android.content.Intent;import android.os.Bundle;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.zwb.splashdemo.R;import com.zwb.splashdemo.adapter.GuideViewPagerAdapter;import com.zwb.splashdemo.utils.AppConstants;import com.zwb.splashdemo.utils.SpUtils;import java.util.ArrayList;import java.util.List;/** * 引導頁的Activity */public class WelcomeGuideActivity extends Activity implements View.OnClickListener {    private ViewPager vp;    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(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_guide);        views = new ArrayList<>();        //4769.71        //初始化引導頁視圖列表        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.setTag("enter");                startBtn.setOnClickListener(this);            }            views.add(view);        }        vp = ((ViewPager) findViewById(R.id.vp_guide));        //初始化Adapter        adapter = new GuideViewPagerAdapter(views);        vp.setAdapter(adapter);        vp.setOnPageChangeListener(new PageChangeListener());        initDots();    }    @Override    protected void onResume() {        super.onResume();    }    @Override    protected void onPause() {        super.onPause();        // 如果切換到後台，就設定下次不進入功能引導頁        SpUtils.putBoolean(WelcomeGuideActivity.this, AppConstants.FIRST_OPEN, true);        finish();    }    @Override    protected void onStop() {        super.onStop();    }    @Override    protected void onDestroy() {        super.onDestroy();    }    private void initDots() {        LinearLayout ll = (LinearLayout) findViewById(R.id.ll);        dots = new ImageView[pics.length];        // 迴圈取得小點圖片        for (int i = 0; i < pics.length; i++) {            // 得到一個LinearLayout下面的每一個子項目            dots[i] = (ImageView) ll.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 setCurView(int position) {        if (position < 0 || position >= pics.length) {            return;        }        vp.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();        setCurView(position);        setCurDot(position);    }    private void enterMainActivity() {        Intent intent = new Intent(WelcomeGuideActivity.this,                SplashActivity.class);        startActivity(intent);        SpUtils.putBoolean(WelcomeGuideActivity.this, AppConstants.FIRST_OPEN, true);        finish();    }    private class PageChangeListener implements ViewPager.OnPageChangeListener {        // 當滑動狀態改變時調用        @Override        public void onPageScrollStateChanged(int position) {            // arg0 ==1的時辰默示正在滑動，arg0==2的時辰默示滑動完畢了，arg0==0的時辰默示什麼都沒做。        }        // 當前頁面被滑動時調用        @Override        public void onPageScrolled(int position, float arg1, int arg2) {            // arg0 :當前頁面，及你點擊滑動的頁面            // arg1:當前頁面位移的百分比            // arg2:當前頁面位移的像素位置        }        // 當新的頁面被選中時調用        @Override        public void onPageSelected(int position) {            // 設定底部小點選中狀態            setCurDot(position);        }    }}

引導頁的Adapter

GuideViewPagerAdapter.java

package com.zwb.splashdemo.adapter;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.View;import android.view.ViewGroup;import java.util.List;/** * 引導頁的Adpter */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(ViewGroup container, int position, Object object) {        ((ViewPager) container).removeView(views.get(position));    }    @Override    public boolean isViewFromObject(View view, Object object) {        return view == ((View) object);    }    @Override    public Object instantiateItem(ViewGroup container, int position) {        ((ViewPager) container).addView(views.get(position), 0);        return views.get(position);    }}

大功告成，下面附上Demo的。。。。。。。。

http://download.csdn.net/detail/zuo_0625/9512895

Demo裡面圖片資源較多，檔案有點大。。

Android引導頁Splash設計