【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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

<?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

 


1

(3)添加引导时,左右滑动时的view,这里示例两个:


1

viewpager_page1.xml


1

2

3

4

5

6

7

8

9

10

11

12

13

14

<?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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<?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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

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!

时间: 2024-08-29 12:38:36

【Android】首次进入应用时加载引导界面的相关文章

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

功能需求:首次进入应用时加载引导界面 思路: 1.首次进入,怎么判断?查看SharedPreferences中某个字段 2.基本上每个应用都有个进入实际功能是的动画加载页面,我们可以在该Activity中加入判断,看是否需要跳转到引导Activity 3.引导界面,采用现在比较主流的方式:左右滑动加载:小圆点提示:在最后一个页面,点击button,进入功能界面 实现功能:左右手势滑屏 底部小圆点随当前显示页跳动 浮动按钮显示.当触屏事件发生显示,否则就渐渐消失 第一种: ViewFlipper

Android APP 引导页实现-第一次应用进入时加载

APP引导页是每个优质APP必备的元素,下面我们研究一下如何只在第一次进入应用时进行加载引导页的方法. 1.判断是否第一次进入应用的方法: package com.yayun.guide;    import android.app.Activity; import android.content.Context; import android.content.Intent; import android.content.SharedPreferences; import android.os.

Android实战简易教程-第六十四枪(Android APP 引导页实现-第一次应用进入时加载)

APP引导页是每个优质APP必备的元素,下面我们研究一下如何只在第一次进入应用时进行加载引导页的方法. 1.判断是否第一次进入应用的方法: package com.yayun.guide; import android.app.Activity; import android.content.Context; import android.content.Intent; import android.content.SharedPreferences; import android.os.Bun

Android对第三方类库运行时加载

首先,把需要运行时加载的类库,放到项目的其他目录,如新建一个thirdlibs的目录.然后用dx命令,对下面的类库进行压缩,做成dex文件. dx --dex --output=../assets/ *.jar 这会在assets下面生成一个classes.dex文件,压缩成classes.zip文件. 新建一个类,用来加载类库 import java.io.File; import java.io.FileOutputStream; import java.io.FilenameFilter;

Android之根布局动态加载子布局时边距设置无效问题

Android大部分的控件都会有padding和layout_margin两个属性,一般来说它们的区别是: padding:控件中的内容离控件边缘的距离. margin:  控件离它的父控件边缘的距离. 今天做了一个由根布局动态加载子布局的实验,结果发现子布局中的这两个属性可以按预期的效果显示,但是给根布局设置的padding并没有对被加载的子布局产生效果. 代码如下: 根布局文件名为activity_main.xml,其xml文件定义的内容为: <LinearLayout xmlns:andr

Android ListView只加载当前屏幕内的图片(解决list滑动时加载卡顿)

最近在做ListView分页显示,其中包括图片 和文字(先下载解析文字内容,再异步加载图片)发现每次点击下一页后,文字内容加载完毕,马上向下滑动,由于这时后台在用线程池异步下载图片,我每页有20条,也就是20张图片,会导致listview滑动卡顿! 这是用户不想看到的,我参考了网易新闻和电子市场等应用,发现它们都是只加载屏幕内的图片,不现实的不加载,于是我也仿照做了一个.我是菜鸟,我承认 呵呵,虽然不见得完全和他们的一样,但是确实解决了翻页时那一刻的卡顿现象. 因为未发现网上有相关文章,希望对朋

android listview 滑动过程中不加载图片,停止时加载图片

今天闲来无事, 就测试了一下listview加载图片优化的功能, 在我们使用新浪微博的时候,细心的同学一定发现了,在滑动的过程中,图片是没有被加载的, 而是在滑动停止时,才加载图片了. 我们今天就做一个这样的效果吧. 我们先考虑两个问题: 1.在滑动停止的时候,如何获得需要加载的图片控件? 2.因为listiew在初始化完成的时候,OnScrollListener的onScrollStateChanged与onScroll并未被触发,如何初始化第一页的图片? package com.test.l

屏蔽电信流氓广告造成的诡异的问题--Android WebView 长时间不能加载页面

发现在家里的时候用Android App里的WebView打开网站很慢,会有十几秒甚至更长时间的卡住. 但是在电脑上打开同样的网页却很快. 查找这个问题的过程比较曲折,记录下来. 抓取Android网络数据 为了调试这个问题,首先要抓取Android的网络包数据.开始时,是想用Wireshark来抓包的,但是很麻烦,tcpdump在手机要root权限. 于是转换思路,能不能在Android上设置代理,来抓包? 但是fiddler没有linux版本,于是转用BurpSuite了. 设置Androi

Android Bitmap 全面解析(一)加载大尺寸图片

压缩原因:1.imageview大小如果是200*300那么加载个2000*3000的图片到内存中显然是浪费可耻滴行为;2.最重要的是图片过大时直接加载原图会造成OOM异常(out of memory内存溢出)所以一般对于大图我们需要进行下压缩处理权威处理方法参考 安卓开发者中心的大图片处理教程http://developer.android.com/training/displaying-bitmaps/load-bitmap.html看不懂英文的话木有关系,本篇会有介绍主要处理思路是:1.获