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里面图片资源较多，文件有点大。。

时间： 2024-10-04 16:48:08

Android引导页Splash设计的相关文章

Android引导页设计

大家在安装好一个应用后,第一次打开时往往会出现一个使用引导页,形式一般为三.四张图片,随着我们的滑动进行切换,在最后一页会有一个进入应用的按钮,我们通过点击这个按钮可以进入应用,其实这其中没有太多的复杂的地方,切换的完成就是一个ViewPager,说了这么多,下面开始为大家解读代码: 开始我们的设计之前我们需要做一些准备工作,首先我们新建一个工程,然后选择工程通过右键单击properties,然后选择Java Build Path,点击右侧Libraries,再点击Add jar,将我们工程li

Xamarin.Android 引导页

http://blog.csdn.net/qq1326702940/article/details/78665588 https://www.cnblogs.com/catcher1994/p/5554456.html 第一次安装的APP,一般都会浏览几张引导图片,才进入APP 1.界面布局 [html] view plain copy <?xml version="1.0" encoding="utf-8"?> <RelativeLayout x

Android 引导页公共方法LeaderPager

SimpAndroidFarme是近期脑子突然发热想做的android快速开发的框架,目标是模块化 常用的控件,方便新手学习和使用.也欢迎老鸟来一起充实项目:项目地址 引导页是我们开发app很常用的功能,但是一般都是第一此运行才会执行,每写个项目 都要为这种一次性的东西写那么多重复代码太讨厌啦- 现在再也不用担心这个问题了! 一般引导有两种图片源 , 本地图片/ 网络图片 目标使用方法: 使用本地提供的图片 id 参数一: viewpager 参数二: 图片url集合(使用本地则传null) 参

Android引导页的实现

实现原理:使用ViewPager控件(com.android.support:support-v4:22.1.1),把引导页的layout文件放进ViewPager控件就可以了. ViewPager控件本质上也是个列表控件,横向滚动,一个页面一个页面的滚动,底下并没有滚动条,所以非常适合做引导页,和页签的tap控件来做横向滚动的页面也非常常用. 首先引用 com.android.support:support-v4:22.1.1 引导页面的layout <RelativeLayout xmlns

推荐4个Android引导页控件

Guideshow 快速实现引导页, 2015-08-03 更新 CircleIndicator 一个轻量级的viewpager指示器 ,类似于nexus5 启动器的效果 2015-08-02 更新 XhsWelcomeAnim 小红书欢迎引导第二版 2015-07-10 更新 AppIntro 非常简洁.漂亮的引导页控件,使用简单 2015-07-07 更新 http://www.see-source.com/androidwidget/list.html

Android 引导页的代码

布局代码 <android.support.v4.view.ViewPager android:id="@+id/viewpage" android:layout_width="match_parent" android:layout_height="match_parent" /> <!--android:background="@drawable/btnselector"--> <Button

Android 高级UI设计笔记22：Android 指示引导页（带圆点）

1. 引导页: 我们在安装某个软件首次运行时,大部分都会有一个引导页的提示,介绍软件新功能的加入或者使用说明等,支持滑动且下面会有几个圆点,显示共有多少页和当前图片的位置,类似如下效果: 2. 引导页具体实现功能如下: 可以左右滑动图片. 图片的索引圆点显示,看出当前图片所在的位置和图片的数量. 可任意左右滑动. 图片的索引圆点带有动画效果. 最后一页显示按钮,点击进入应用. 3. 引导页实现逻辑过程: 利用ViewPager实现用户引导界面. 在这里,我们需要用到google提到的一个支持包—

Android 1分钟教你打造酷炫的引导页(实现ViewPager淡入淡出切换)

纯手工自制的Android引导页,实现了Viewpager切换的淡入淡出(页面不移动!)切换以及文字动画. 下面是效果演示: 实现思路+心路历程...: 其实别的都还蛮简单的,就是这个ViewPager的淡入淡出切换动画比较棘手,以前都没有做过,然后去网上找了好久好久. 其中碰到各种坑无数,大概90%的人是引的 JazzyViewPager的包然后就balabala说自己实现了种种功能,真是醉了.... 结论是国内根本找不到这个效果的实现嘛.... 然后 在Github下了JazzyViewPa

如何做好App的引导页？（转）

http://uedc.163.com/12264.html 当你第一次打开一款应用的时候常常会看到精美的引导页设计,它们在你未使用产品之前提前告知你产品的主要功能与特点,第一次印象的好坏会极大地影响到后续的产品使用体验.因此各个公司都在努力将这几个页面设计好,从一开始就引人入胜.那接下来我跟大家一起来探讨关于引导页的设计. 一. 目的区分 根据引导页的目的.出发点不同,可以将其分为功能介绍类.使用说明类.推广类.问题解决类,一般引导页不会超过5页. 1.功能介绍类 功能介绍类引导页主要是对产品