【Android】首次进入应用时加载引导界面

参考文章：

【1】http://blog.csdn.net/wsscy2004/article/details/7611529

【2】http://www.androidlearner.net/android-use-viewflow-lift-right-slide.html

这个不同于上一篇文章【Android】每个Activity中加入引导界面（每个Activity动态加载ImageView的方式）。这个引导界面是在初次进入应用时，加载引导页面（采用Activity的方式），进入应用后，不再需要提供引导。

功能需求：首次进入应用时加载引导界面

思路：

1、首次进入，怎么判断？查看SharedPreferences中某个字段

2、基本上每个应用都有个进入实际功能是的动画加载页面，我们可以在该Activity中加入判断，看是否需要跳转到引导Activity

3、引导界面，采用现在比较主流的方式：左右滑动加载；小圆点提示；在最后一个页面，点击button，进入功能界面

实现功能：左右手势滑屏

底部小圆点随当前显示页跳动

浮动按钮显示。当触屏事件发生显示，否则就渐渐消失

先转个文章：http://blog.csdn.net/feng88724/article/details/6973662

第一种： ViewFlipper + GestureDetector

第二种： ActivityGroup + GestureDetector

第三种： ViewPager (Android3.0+)

第四种： ViewFlow (开源项目)

当你需要在一系列不确定数目的view中滑动时，可以考虑使用ViewFlow。如果你的view数目确定，你应该使用Fragments 或兼容库里的ViewPager 。

综合考虑代码复杂度以及以及加载的引导view个数可确定性，我们就采用第三种方案ViewPager吧。

好了，上代码。

（1）修改应用的动画加载页面SplashActivity.java

package com.example.guidepagetest2;

import android.app.Activity;

import android.content.Context;

import android.content.Intent;

import android.os.Bundle;

import android.os.Handler;

import android.os.Message;

/**

* 功能：使用ViewPager实现初次进入应用时的引导页

*

* (1)判断是否是首次加载应用--采取读取SharedPreferences的方法

* (2)是，则进入引导activity；否，则进入MainActivity

* (3)5s后执行(2)操作

*

* @author sz082093

*

*/

public class SplashActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_splash);

boolean mFirst = isFirstEnter(SplashActivity.this,SplashActivity.this.getClass().getName());

if(mFirst)

mHandler.sendEmptyMessageDelayed(SWITCH_GUIDACTIVITY,5000);

else

mHandler.sendEmptyMessageDelayed(SWITCH_MAINACTIVITY,5000);

}

//****************************************************************

// 判断应用是否初次加载，读取SharedPreferences中的guide_activity字段

//****************************************************************

private static final String SHAREDPREFERENCES_NAME = "my_pref";

private static final String KEY_GUIDE_ACTIVITY = "guide_activity";

private boolean isFirstEnter(Context context,String className){

if(context==null || className==null||"".equalsIgnoreCase(className))return false;

String mResultStr = context.getSharedPreferences(SHAREDPREFERENCES_NAME, Context.MODE_WORLD_READABLE)

.getString(KEY_GUIDE_ACTIVITY, "");//取得所有类名如 com.my.MainActivity

if(mResultStr.equalsIgnoreCase("false"))

return false;

else

return true;

}

//*************************************************

// Handler:跳转至不同页面

//*************************************************

private final static int SWITCH_MAINACTIVITY = 1000;

private final static int SWITCH_GUIDACTIVITY = 1001;

public Handler mHandler = new Handler(){

public void handleMessage(Message msg) {

switch(msg.what){

case SWITCH_MAINACTIVITY:

Intent mIntent = new Intent();

mIntent.setClass(SplashActivity.this, MainActivity.class);

SplashActivity.this.startActivity(mIntent);

SplashActivity.this.finish();

break;

case SWITCH_GUIDACTIVITY:

mIntent = new Intent();

mIntent.setClass(SplashActivity.this, GuideActivity.class);

SplashActivity.this.startActivity(mIntent);

SplashActivity.this.finish();

break;

}

super.handleMessage(msg);

}

};

}

(2)添加引导Activity的布局文件activity_guide.xml

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<LinearLayout

android:id="@+id/linearLayout1"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

<android.support.v4.view.ViewPager

android:id="@+id/guidePages"

android:layout_width="fill_parent"

android:layout_height="wrap_content"/>

</LinearLayout>

<LinearLayout

android:id="@+id/linearLayout2"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

<RelativeLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

<LinearLayout

android:id="@+id/viewGroup"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_marginBottom="40dp"

android:gravity="center_horizontal"

android:orientation="horizontal">

</LinearLayout>

</RelativeLayout>

</LinearLayout>

</FrameLayout>

1	`(3)添加引导时，左右滑动时的view，这里示例两个：`

1	`viewpager_page1.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">

<TextView

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_gravity="center"

android:text="@string/guide_begin"

/>

</LinearLayout>

viewpager_page2.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"

android:gravity="center">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/guide_end"/>

<Button

android:id="@+id/btn_close_guide"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/btn_close_guide"/>

</LinearLayout>

(4)修改引导Activity：GuideActivity.java

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

package com.example.guidepagetest2;

import java.util.ArrayList;

import android.app.Activity;

import android.content.Intent;

import android.content.SharedPreferences;

import android.os.Bundle;

import android.os.Parcelable;

import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v4.view.ViewPager.OnPageChangeListener;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.view.ViewGroup.LayoutParams;

import android.widget.Button;

import android.widget.ImageView;

public class GuideActivity extends Activity {

private ViewPager viewPager;

/**装分页显示的view的数组*/

private ArrayList<View> pageViews;

private ImageView imageView;

/**将小圆点的图片用数组表示*/

private ImageView[] imageViews;

//包裹滑动图片的LinearLayout

private ViewGroup viewPics;

//包裹小圆点的LinearLayout

private ViewGroup viewPoints;

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

//将要分页显示的View装入数组中

LayoutInflater inflater = getLayoutInflater();

pageViews = new ArrayList<View>();

pageViews.add(inflater.inflate(R.layout.viewpager_page1, null));

pageViews.add(inflater.inflate(R.layout.viewpager_page2, null));

//创建imageviews数组，大小是要显示的图片的数量

imageViews = new ImageView[pageViews.size()];

//从指定的XML文件加载视图

viewPics = (ViewGroup) inflater.inflate(R.layout.activity_guide, null);

//实例化小圆点的linearLayout和viewpager

viewPoints = (ViewGroup) viewPics.findViewById(R.id.viewGroup);

viewPager = (ViewPager) viewPics.findViewById(R.id.guidePages);

//添加小圆点的图片

for(int i=0;i<pageViews.size();i++){

imageView = new ImageView(GuideActivity.this);

//设置小圆点imageview的参数

imageView.setLayoutParams(new LayoutParams(20,20));//创建一个宽高均为20 的布局

imageView.setPadding(20, 0, 20, 0);

//将小圆点layout添加到数组中

imageViews[i] = imageView;

//默认选中的是第一张图片，此时第一个小圆点是选中状态，其他不是

if(i==0){

imageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);

}else{

imageViews[i].setBackgroundResource(R.drawable.page_indicator);

}

//将imageviews添加到小圆点视图组

viewPoints.addView(imageViews[i]);

}

//显示滑动图片的视图

setContentView(viewPics);

//设置viewpager的适配器和监听事件

viewPager.setAdapter(new GuidePageAdapter());

viewPager.setOnPageChangeListener(new GuidePageChangeListener());

}

private Button.OnClickListener Button_OnClickListener = new Button.OnClickListener() {

public void onClick(View v) {

//设置已经引导

setGuided();

//跳转

Intent mIntent = new Intent();

mIntent.setClass(GuideActivity.this, MainActivity.class);

GuideActivity.this.startActivity(mIntent);

GuideActivity.this.finish();

}

};

private static final String SHAREDPREFERENCES_NAME = "my_pref";

private static final String KEY_GUIDE_ACTIVITY = "guide_activity";

private void setGuided(){

SharedPreferences settings = getSharedPreferences(SHAREDPREFERENCES_NAME, 0);

SharedPreferences.Editor editor = settings.edit();

editor.putString(KEY_GUIDE_ACTIVITY, "false");

editor.commit();

}

class GuidePageAdapter extends PagerAdapter{

//销毁position位置的界面

@Override

public void destroyItem(View v, int position, Object arg2) {

// TODO Auto-generated method stub

((ViewPager)v).removeView(pageViews.get(position));

}

@Override

public void finishUpdate(View arg0) {

// TODO Auto-generated method stub

}

//获取当前窗体界面数

@Override

public int getCount() {

// TODO Auto-generated method stub

return pageViews.size();

}

//初始化position位置的界面

@Override

public Object instantiateItem(View v, int position) {

// TODO Auto-generated method stub

((ViewPager) v).addView(pageViews.get(position));

// 测试页卡1内的按钮事件

if (position == 1) {

Button btn = (Button) v.findViewById(R.id.btn_close_guide);

btn.setOnClickListener(Button_OnClickListener);

}

return pageViews.get(position);

}

// 判断是否由对象生成界面

@Override

public boolean isViewFromObject(View v, Object arg1) {

// TODO Auto-generated method stub

return v == arg1;

}

@Override

public void startUpdate(View arg0) {

// TODO Auto-generated method stub

}

@Override

public int getItemPosition(Object object) {

// TODO Auto-generated method stub

return super.getItemPosition(object);

}

@Override

public void restoreState(Parcelable arg0, ClassLoader arg1) {

// TODO Auto-generated method stub

}

@Override

public Parcelable saveState() {

// TODO Auto-generated method stub

return null;

}

class GuidePageChangeListener implements OnPageChangeListener{

@Override

public void onPageScrollStateChanged(int arg0) {

// TODO Auto-generated method stub

}

@Override

public void onPageScrolled(int arg0, float arg1, int arg2) {

// TODO Auto-generated method stub

}

@Override

public void onPageSelected(int position) {

// TODO Auto-generated method stub

for(int i=0;i<imageViews.length;i++){

imageViews[position].setBackgroundResource(R.drawable.page_indicator_focused);

//不是当前选中的page，其小圆点设置为未选中的状态

if(position !=i){

imageViews[i].setBackgroundResource(R.drawable.page_indicator);

}

(5)大体上OK了，再贴上几张图片吧

动画加载页面：

引导页面：

点击“关闭引导界面”或者非首次进入应用后的功能页面：

Done！

作者：风倾清凌

出处：http://www.cnblogs.com/Amandaliu/

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利.

巴特西

【Android】首次进入应用时加载引导界面

最新文章

热门文章