【Android UI设计与开发】第05期：引导界面（五）实现应用程序只启动一次引导界面

发表于 2013-7-11 14:42:02 浏览（229501）

这篇文章算是对整个引导界面开发专题的一个终结了吧，个人觉得大部分的引导界面基本上都是千篇一律的，只要熟练掌握了一个，基本上也就没什么好说的了，要是在今后的开发中遇到了更好玩，更有趣的引导界面，博主也会在这里及时的跟大家分享，今天的内容主要是教大家的应用程序只有在第一次启动的时候显示引导界面，以后在启动程序的时候就不再显示了。

其实要想实现这样的效果，只要使用SharedPreferences类，就会让程序变的非常简单，下面来详细介绍一下这个类的使用方法

一、SharedPreferences的详细介绍和用法

SharedPreferences介绍：       做软件开发应该都知道，很多软件会有配置文件，里面存放这程序运行当中的各个属性值，由于其配置信息并不多，如果采用数据库来存放并不划算，因为数据库连接跟操作等耗时大大影响了程序的效率，因此我们使用键值这种一一对应的关系来存放这些配置信息。SharedPreferences正是Android中用于实现这中存储方式的技术。

SharedPreferences的使用非常简单，能够轻松的存放数据和读取数据。SharedPreferences只能保存简单类型的数据，例如，String、int等。一般会将复杂类型的数据转换成Base64编码，然后将转换后的数据以字符串的形式保存在 XML文件中，再用SharedPreferences保存。

SharedPreferences使用方法：

<1> 使用Activity类的getSharedPreferences方法获得SharedPreferences对象，其中存储key-value的文件的名称由getSharedPreferences方法的第一个参数指定；

<2> 使用SharedPreferences接口的edit获得SharedPreferences.Editor对象；

<3> 通过SharedPreferences.Editor接口的putXxx方法保存key-value对。其中Xxx表示不同的数据类型。例如：字符串类型的value需要用putString方法；

<4> 通过SharedPreferences.Editor接口的commit方法保存key-value对。commit方法相当于数据库事务中的提交（commit）操作。

具体代码的书写流程为：

A、存放数据信息

<1> 打开Preferences，名称为setting，如果存在则打开它，否则创建新的Preferences

SharedPreferences settings = getSharedPreferences(“setting”, 0);

<2> 让setting处于编辑状态

SharedPreferences.Editor editor = settings.edit();

<3> 存放数据

editor.putString(“name”,”ATAAW”);
         editor.putString(“URL”,”ATAAW.COM”);

<4> 完成提交

editor.commit();

B、读取数据信息

<1> 获取Preferences

SharedPreferences settings = getSharedPreferences(“setting”, 0);

<2> 取出数据

String name = settings.getString(“name”,”默认值”);
         String url = setting.getString(“URL”,”default”);

以上就是SharedPreferences的使用方法，其中创建的Preferences文件存放位置可以在Eclipse中查看：

DDMS->File Explorer /<package name>/shared_prefs/setting.xml

二、实现的效果图

第一次启动程序：欢迎界面-->引导界面-->主页面

以后启动程序：启动页-->系统主页

第一次启动时的效果图

欢迎界面：

引导界面效果图1：

引导界面效果图2：

进入主页面：

以后启动程序的效果图

欢迎界面：

程序主页面：

三、程序的目录结构


四、具体的实现编码

1、  在引导布局界面中加入ViewPager组件,activity_guide.xml：

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="wrap_content"
  4. android:layout_height="wrap_content" >
  5. <android.support.v4.view.ViewPager
  6. android:id="@+id/viewpager"
  7. android:layout_width="fill_parent"
  8. android:layout_height="fill_parent" />
  9. </RelativeLayout>

复制代码

2、接着在guide_view01.xml等几个布局页面中添加引导界面要显示的图片和控件，因为这几个布局界面都大同小异，所以在这里我就不一一贴出来了吧，有需要的同学可以直接下载源码，guide_view01.xml：

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. android:background="@drawable/star_img1"
  6. android:orientation="vertical" >
  7. </RelativeLayout>

复制代码

3、然后是欢迎界面的布局界面，activity_welcome：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent"
  5. android:orientation="vertical"
  6. android:background="@drawable/welcome_background">
  7. </LinearLayout>

复制代码

4、最后是主界面的布局，activity_main：

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="wrap_content"
  4. android:layout_height="wrap_content" >
  5. <TextView
  6. android:id="@+id/textView1"
  7. android:layout_width="wrap_content"
  8. android:layout_height="wrap_content"
  9. android:layout_alignParentLeft="true"
  10. android:layout_alignParentTop="true"
  11. android:text="欢迎来到主页面！"
  12. android:textSize="25sp"/>
  13. </RelativeLayout>

复制代码

5、在这里还要创建一个xml文件来实现自定义按钮的效果，关于自定义按钮的效果实现我会在后面的文章中专题详细介绍，这里就不在赘述start_btn.xml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3. <item android:state_enabled="true" android:state_pressed="true"
  4. android:drawable="@drawable/login_button_select" /> <!--按下时的效果-->
  5. <item android:state_enabled="true" android:drawable="@drawable/login_button" />  <!--正常状态的效果-->
  6. </selector>

复制代码

6、布局界面已经讲解完毕，接下来让我们进行详细的代码讲解，ViewPager适配器代码，ViewPagerAdapter.java：

  1. package com.yangyu.myguideview04;
  2. import java.util.ArrayList;
  3. import android.support.v4.view.PagerAdapter;
  4. import android.support.v4.view.ViewPager;
  5. import android.view.View;
  6. /**
  7. * @author yangyu
  8. *        功能描述：ViewPager适配器，用来绑定数据和view
  9. */
  10. public class ViewPagerAdapter extends PagerAdapter {
  11. //界面列表
  12. private ArrayList<View> views;
  13. public ViewPagerAdapter (ArrayList<View> views){
  14. this.views = views;
  15. }
  16. /**
  17. * 获得当前界面数
  18. */
  19. @Override
  20. public int getCount() {
  21. if (views != null) {
  22. return views.size();
  23. }
  24. return 0;
  25. }
  26. /**
  27. * 初始化position位置的界面
  28. */
  29. @Override
  30. public Object instantiateItem(View view, int position) {
  31. ((ViewPager) view).addView(views.get(position), 0);
  32. return views.get(position);
  33. }
  34. /**
  35. * 判断是否由对象生成界面
  36. */
  37. @Override
  38. public boolean isViewFromObject(View view, Object arg1) {
  39. return (view == arg1);
  40. }
  41. /**
  42. * 销毁position位置的界面
  43. */
  44. @Override
  45. public void destroyItem(View view, int position, Object arg2) {
  46. ((ViewPager) view).removeView(views.get(position));
  47. }
  48. }

复制代码

7、引导界面Activity，GuideActivity.java：

  1. package com.yangyu.myguideview04;
  2. import java.util.ArrayList;
  3. import android.app.Activity;
  4. import android.content.Intent;
  5. import android.os.Bundle;
  6. import android.support.v4.view.ViewPager;
  7. import android.support.v4.view.ViewPager.OnPageChangeListener;
  8. import android.view.LayoutInflater;
  9. import android.view.View;
  10. import android.view.View.OnClickListener;
  11. import android.widget.Button;
  12. /**
  13. * @author yangyu
  14. *  功能描述：引导界面activity类
  15. */
  16. public class GuideActivity extends Activity implements OnPageChangeListener{
  17. // 定义ViewPager对象
  18. private ViewPager viewPager;
  19. // 定义ViewPager适配器
  20. private ViewPagerAdapter vpAdapter;
  21. // 定义一个ArrayList来存放View
  22. private ArrayList<View> views;
  23. // 定义各个界面View对象
  24. private View view1, view2, view3, view4;
  25. //定义开始按钮对象
  26. private Button startBt;
  27. @Override
  28. protected void onCreate(Bundle savedInstanceState) {
  29. super.onCreate(savedInstanceState);
  30. setContentView(R.layout.activity_guide);
  31. initView();
  32. initData();
  33. }
  34. /**
  35. * 初始化组件
  36. */
  37. private void initView() {
  38. //实例化各个界面的布局对象
  39. LayoutInflater mLi = LayoutInflater.from(this);
  40. view1 = mLi.inflate(R.layout.guide_view01, null);
  41. view2 = mLi.inflate(R.layout.guide_view02, null);
  42. view3 = mLi.inflate(R.layout.guide_view03, null);
  43. view4 = mLi.inflate(R.layout.guide_view04, null);
  44. // 实例化ViewPager
  45. viewPager = (ViewPager) findViewById(R.id.viewpager);
  46. // 实例化ArrayList对象
  47. views = new ArrayList<View>();
  48. // 实例化ViewPager适配器
  49. vpAdapter = new ViewPagerAdapter(views);
  50. //实例化开始按钮
  51. startBt = (Button) view4.findViewById(R.id.startBtn);
  52. }
  53. /**
  54. * 初始化数据
  55. */
  56. private void initData() {
  57. // 设置监听
  58. viewPager.setOnPageChangeListener(this);
  59. // 设置适配器数据
  60. viewPager.setAdapter(vpAdapter);
  61. //将要分页显示的View装入数组中
  62. views.add(view1);
  63. views.add(view2);
  64. views.add(view3);
  65. views.add(view4);
  66. // 给开始按钮设置监听
  67. startBt.setOnClickListener(new OnClickListener() {
  68. @Override
  69. public void onClick(View v) {
  70. startbutton();
  71. }
  72. });
  73. }
  74. @Override
  75. public void onPageScrollStateChanged(int arg0) {
  76. }
  77. @Override
  78. public void onPageScrolled(int arg0, float arg1, int arg2) {
  79. }
  80. @Override
  81. public void onPageSelected(int arg0) {
  82. }
  83. /**
  84. * 相应按钮点击事件
  85. */
  86. private void startbutton() {
  87. Intent intent = new Intent();
  88. intent.setClass(GuideActivity.this,MainActivity.class);
  89. startActivity(intent);
  90. this.finish();
  91. }
  92. ｝

复制代码

8、欢迎界面Activity，Welcome.java：

  1. package com.yangyu.myguideview04;
  2. import android.app.Activity;
  3. import android.content.Intent;
  4. import android.content.SharedPreferences;
  5. import android.content.SharedPreferences.Editor;
  6. import android.os.Bundle;
  7. /**
  8. * @author yangyu
  9. *  功能描述：欢迎界面
  10. */
  11. public class Welcome extends Activity implements Runnable {
  12. //是否是第一次使用
  13. private boolean isFirstUse;
  14. protected void onCreate(Bundle savedInstanceState) {
  15. super.onCreate(savedInstanceState);
  16. setContentView(R.layout.activity_welcome);
  17. /**
  18. * 启动一个延迟线程
  19. */
  20. new Thread(this).start();
  21. }
  22. public void run() {
  23. try {
  24. /**
  25. * 延迟两秒时间
  26. */
  27. Thread.sleep(2000);
  28. //读取SharedPreferences中需要的数据
  29. SharedPreferences preferences = getSharedPreferences("isFirstUse",MODE_WORLD_READABLE);
  30. isFirstUse = preferences.getBoolean("isFirstUse", true);
  31. /**
  32. *如果用户不是第一次使用则直接调转到显示界面,否则调转到引导界面
  33. */
  34. if (isFirstUse) {
  35. startActivity(new Intent(Welcome.this, GuideActivity.class));
  36. } else {
  37. startActivity(new Intent(Welcome.this, MainActivity.class));
  38. }
  39. finish();
  40. //实例化Editor对象
  41. Editor editor = preferences.edit();
  42. //存入数据
  43. editor.putBoolean("isFirstUse", false);
  44. //提交修改
  45. editor.commit();
  46. } catch (InterruptedException e) {
  47. }
  48. }
  49. }

复制代码

在欢迎界面中使用了SharedPreferences来读取用户的信息，判断是否是第一次使用程序，这里的isFirstUse可以根据读者的需要换成任意类型，只要给它加一个判断就行了
9、主界面Activity，这里就加载了一个简单的布局文件，读者可以根据需要对该类进行扩展，MainActivity.java：

  1. package com.yangyu.myguideview04;
  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. /**
  5. * @author yangyu
  6. *   功能描述：主程序入口类页面
  7. */
  8. public class MainActivity extends Activity {
  9. @Override
  10. protected void onCreate(Bundle savedInstanceState) {
  11. super.onCreate(savedInstanceState);
  12. setContentView(R.layout.activity_main);
  13. }
  14. }

复制代码

引导界面的专题就告一段落了，接下来会以主页面的UI设计为专题进行详细的实战讲解，希望大家能继续关注该系列文章。
 MyGuideView04.zip (1.9 MB, 下载次数: 1323)

评分

参与人数 1 下载豆 +10 收起理由
 jnhoodlum + 10 安卓巴士感谢您的分享!

查看全部评分

最新文章

  1. 找出A字符串中出现B字符串的起始位置
  2. 使用swfobject.js时样式及传参的问题
  3. [Json.net]Linq to Json
  4. 解决xcode打开时loading假死的问题
  5. C# 多线程 简单使用方法以及常用参数
  6. IOS编程之相机和相册
  7. 如何通过VIM把代码格式化后生成HTML网页代码
  8. win7（64位）+IE8+QC9.0
  9. yml文件数据的简洁表达方法（Hashes to OpenStruct）
  10. 解决ios上微信无法捕获返回键按钮事件的问题
  11. win7系统64位plsql的设置
  12. VsCode中使用Emmet神器快速编写HTML代码
  13. 【转】Kaggle注册问题-验证码和手机短信
  14. centos7 下载安装tomcat9
  15. PHP开发APP接口实现--基本篇
  16. 7.5 Models -- Persisting Records
  17. 16 python xml模块
  18. Markdown 简明语法手册 - 作业
  19. LoadRunner压力测试心得总结
  20. 进度条Demo

热门文章

  1. EDIUS设置3D转场的教程
  2. mysql事务,SET AUTOCOMMIT,START TRANSACTION
  3. Dictionary 序列化与反序列化
  4. VS2010环境下C++工程相关问题汇总
  5. CSS 分组
  6. Js操作DOM小练习_01
  7. 【uTenux实验】事件标志
  8. 外联css及js的使用
  9. 在Linux中永久设置Anaconda环境变量的方法
  10. mac与php环境