Android学习之加圆点引导页的实现 / 憋错料

今天周六，在家好好码代码。。。。。

今天实现的是界面优化的一个简单功能：加圆点的引导页的实现

虽然简单，不过步骤我们还是一步一步来吧

第一步：实现几个View之间的左右滑动，我这次用了四个View（ViewPager）

以下是我的Guide 的布局页面：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent" >
 5
 6     <android.support.v4.view.ViewPager
 7         android:layout_width="fill_parent"
 8         android:layout_height="fill_parent"
 9         android:id="@+id/viewpager">
10
11     </android.support.v4.view.ViewPager>
12
13 </RelativeLayout>

然后就是实现Guide里面的代码：

 1 package com.oysd.myviewpager;
 2
 3 import java.util.ArrayList;
 4 import java.util.List;
 5
 6 import android.app.Activity;
 7 import android.content.Intent;
 8 import android.os.Bundle;
 9 import android.support.v4.view.ViewPager;
10 import android.support.v4.view.ViewPager.OnPageChangeListener;
11 import android.view.LayoutInflater;
12 import android.view.View;
13 import android.view.View.OnClickListener;
14 import android.widget.Button;
15 import android.widget.ImageView;
16
17 public class Guide extends Activity implements OnPageChangeListener {
18
19     private ViewPager vp;
20     private ViewPagerAdapter vpAdapter;
21     private List<View> views;
22
23     @Override
24     protected void onCreate(Bundle savedInstanceState) {
25         // TODO Auto-generated method stub
26         super.onCreate(savedInstanceState);
27         setContentView(R.layout.activity_guide);
28         initView();
29     }
30
31     /**
32      * 初始化View
33      */
34     private void initView(){
35         LayoutInflater inflater = LayoutInflater.from(this);
36         views = new ArrayList<View>();
37                 // 添加四个View
38         views.add(inflater.inflate(R.layout.one, null));
39         views.add(inflater.inflate(R.layout.two, null));
40         views.add(inflater.inflate(R.layout.three, null));
41         views.add(inflater.inflate(R.layout.four, null));
42
43         vpAdapter = new ViewPagerAdapter(views, this);
44         vp = (ViewPager) findViewById(R.id.viewpager);
45         vp.setAdapter(vpAdapter);//将vpAdapter 与vp控件绑定
46     }
47 }

以上需要自己手动再次创四个布局文件one.xml two.xml three.xml four.xml

我这里就给出前面三个的其中一个吧，其他三个只是src的图片不一样而已:

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

以下是第四个four.xml的布局文件，多了一个进入的按钮：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent">
 5
 6     <ImageView
 7         android:layout_width="fill_parent"
 8         android:layout_height="fill_parent"
 9         android:background="@drawable/four"/>
10
11     <LinearLayout
12         android:layout_width="fill_parent"
13         android:layout_height="wrap_content"
14         android:gravity="center_horizontal"
15         android:layout_alignParentBottom="true"
16         android:orientation="horizontal">
17
18         <Button
19             android:layout_width="wrap_content"
20             android:layout_height="wrap_content"
21             android:id="@+id/btnStart"
22             android:text="进入"/>
23
24     </LinearLayout>
25
26 </RelativeLayout>

这里面需要自己实现ViewPagerAdapter,以下是实现代码：

 1 package com.oysd.myviewpager;
 2
 3 import java.util.List;
 4
 5 import android.content.Context;
 6 import android.support.v4.view.PagerAdapter;
 7 import android.support.v4.view.ViewPager;
 8 import android.view.View;
 9
10 public class ViewPagerAdapter extends PagerAdapter {
11
12     private List<View> views;
13     private Context context;
14
15     public ViewPagerAdapter(List<View> views , Context context) {
16         this.views = views;
17         this.context = context;
18     }
19
20     @Override
21     public void destroyItem(View container, int position, Object object) {
22         ((ViewPager)container).removeView(views.get(position));
23     }
24
25     @Override
26     public Object instantiateItem(View container, int position) {
27         // TODO Auto-generated method stub
28         ((ViewPager) container).addView(views.get(position));
29
30         return views.get(position);
31     }
32
33     @Override
34     public int getCount() {
35         // TODO Auto-generated method stub
36         return views.size();
37     }
38
39     @Override
40     public boolean isViewFromObject(View arg0, Object arg1) {
41         // TODO Auto-generated method stub
42         return arg0 == arg1;
43     }
44
45 }

这个Adapter的实现不外乎就是实现这个方法：getCount、isViewFromObject、destroyItem、instantiateItem
和View中的Adapter其实差不多:

getCount()：返回的是数据源对象的个数，即列表项数

Object　getItem(int position)：返回指定位置position上的列表

long　getItemId(int position)：返回指定位置处的行ＩＤ

View getView()：返回列表项对应的视图

好了，废话先不多说了，第一步的视图之间的滑动基本上完成了

第二步：添加圆点，来标识一下当前view以及view的总过数量，以及在最后一个View上面添加一个进入主页面的按钮

在Guide的原先布局下进行改动，改动之后的布局文件是（完整的）：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent" >
 5
 6     <android.support.v4.view.ViewPager
 7         android:layout_width="fill_parent"
 8         android:layout_height="fill_parent"
 9         android:id="@+id/viewpager">
10
11     </android.support.v4.view.ViewPager>
12
13     <LinearLayout
14         android:layout_width="fill_parent"
15         android:layout_height="wrap_content"
16         android:id="@+id/ll"
17         android:orientation="horizontal"
18         android:gravity="center_horizontal"
19         android:layout_alignParentBottom="true">
20
21         <ImageView
22             android:layout_width="wrap_content"
23             android:layout_height="wrap_content"
24             android:id="@+id/iv1"
25             android:src="@drawable/white_dot"/>
26         <ImageView
27             android:layout_width="wrap_content"
28             android:layout_height="wrap_content"
29             android:id="@+id/iv2"
30             android:src="@drawable/dark_dot"/>
31         <ImageView
32             android:layout_width="wrap_content"
33             android:layout_height="wrap_content"
34             android:id="@+id/iv3"
35             android:src="@drawable/dark_dot"/>
36         <ImageView
37             android:layout_width="wrap_content"
38             android:layout_height="wrap_content"
39             android:id="@+id/iv4"
40             android:src="@drawable/dark_dot"/>
41     </LinearLayout>
42
43 </RelativeLayout>

然后Guide的改动，改动之后的代码如下：

  1 package com.oysd.myviewpager;
  2
  3 import java.util.ArrayList;
  4 import java.util.List;
  5
  6 import android.app.Activity;
  7 import android.content.Intent;
  8 import android.os.Bundle;
  9 import android.support.v4.view.ViewPager;
 10 import android.support.v4.view.ViewPager.OnPageChangeListener;
 11 import android.view.LayoutInflater;
 12 import android.view.View;
 13 import android.view.View.OnClickListener;
 14 import android.widget.Button;
 15 import android.widget.ImageView;
 16
 17 public class Guide extends Activity implements OnPageChangeListener {
 18
 19     private ViewPager vp;
 20     private ViewPagerAdapter vpAdapter;
 21     private List<View> views;
 22     private Button btnStart;
 23     private ImageView dots[];
 24     private int ids[] = {R.id.iv1,
 25                          R.id.iv2,
 26                          R.id.iv3,
 27                          R.id.iv4};
 28
 29
 30     @Override
 31     protected void onCreate(Bundle savedInstanceState) {
 32         // TODO Auto-generated method stub
 33         super.onCreate(savedInstanceState);
 34         setContentView(R.layout.activity_guide);
 35         initView();
 36         initDots();
 37     }
 38
 39     /**
 40      * 初始化View
 41      */
 42     private void initView(){
 43         LayoutInflater inflater = LayoutInflater.from(this);
 44         views = new ArrayList<View>();
 45         views.add(inflater.inflate(R.layout.one, null));
 46         views.add(inflater.inflate(R.layout.two, null));
 47         views.add(inflater.inflate(R.layout.three, null));
 48         views.add(inflater.inflate(R.layout.four, null));
 49
 50         vpAdapter = new ViewPagerAdapter(views, this);
 51         btnStart = (Button) views.get(3).findViewById(R.id.btnStart);
 52         btnStart.setOnClickListener(new OnClickListener() {
 53
 54             @Override
 55             public void onClick(View v) {
 56                 // TODO Auto-generated method stub
 57                 Intent intent = new Intent(Guide.this , MainActivity.class);
 58                 startActivity(intent);
 59                 finish();
 60             }
 61         });
 62
 63         vp = (ViewPager) findViewById(R.id.viewpager);
 64         vp.setAdapter(vpAdapter);//将vpAdapter 与vp控件绑定
 65         vp.setOnPageChangeListener(this);//添加回调
 66     }
 67
 68     /**
 69      * 初始化小圆点控件
 70      */
 71     private void initDots(){
 72
 73         dots = new ImageView[views.size()];
 74         for(int i = 0 ; i < ids.length ; i++){
 75             dots[i] = (ImageView) findViewById(ids[i]);
 76         }
 77
 78     }
 79
 80     /**
 81      * 当滑动状态被改变的时候调用
 82      */
 83     @Override
 84     public void onPageScrollStateChanged(int arg0) {
 85         // TODO Auto-generated method stub
 86
 87     }
 88
 89     /**
 90      * 当页面滑动的时候调用
 91      */
 92     @Override
 93     public void onPageScrolled(int arg0, float arg1, int arg2) {
 94         // TODO Auto-generated method stub
 95
 96     }
 97
 98     /**
 99      * 当页面被选择的时候调用
100      */
101     @Override
102     public void onPageSelected(int arg0) {
103         // TODO Auto-generated method stub
104         for(int i = 0 ; i < ids.length ; i++){
105             //当此页面被选择的时候，将小圆点设置成亮点（white_dot）
106             //其他小圆点设置成黑点
107             if(arg0 == i){
108                 dots[i].setImageResource(R.drawable.white_dot);
109             }else{
110                 dots[i].setImageResource(R.drawable.dark_dot);
111             }
112         }
113     }
114 }

到这里，圆点以及进入按钮的添加也基本上完成了。

第三步：实现判断用户是否是第一次进入手机应用，如果是第一次跳转到引导页面，如果不是，直接跳转到主页面

额外添加一个Welcome 的Activity,以下是布局文件（仅仅是用一个ImageView来显示以下图片）：

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

然后就是实现Welcom里面的代码了：

 1 package com.oysd.myviewpager;
 2
 3 import android.app.Activity;
 4 import android.content.Intent;
 5 import android.content.SharedPreferences;
 6 import android.content.SharedPreferences.Editor;
 7 import android.os.Bundle;
 8 import android.os.Handler;
 9
10 public class Welcome extends Activity {
11
12     private static final int TIME = 2000;//设置跳转的延迟时间
13     private static final int GO_HOME = 1000;//设置跳转到主页面的识别代码
14     private static final int GO_GUIDE = 1001;//设置跳转到引导页面的识别代码
15     private boolean isFirstIn = false;//判断用户是否是第一次进入
16
17     private Handler mHandler = new Handler(){
18
19         public void handleMessage(android.os.Message msg) {
20
21             switch(msg.what){
22             case GO_HOME:
23                 goHome();
24                 break;
25             case GO_GUIDE:
26                 goGuide();
27                 break;
28             }
29         };
30     };
31
32     @Override
33     protected void onCreate(Bundle savedInstanceState) {
34         // TODO Auto-generated method stub
35         super.onCreate(savedInstanceState);
36         setContentView(R.layout.activity_welcome);
37         init();
38     }
39
40     private void init(){
41
42         SharedPreferences preferences = getSharedPreferences("oy", MODE_PRIVATE);
43         isFirstIn = preferences.getBoolean("flag", true);
44         if(!isFirstIn){
45             mHandler.sendEmptyMessageDelayed(GO_HOME, TIME);
46         }else{
47             mHandler.sendEmptyMessageDelayed(GO_GUIDE, TIME);
48             Editor editor = preferences.edit();//给予修改的权限
49             editor.putBoolean("flag", false);//修改isFirstIn的值
50             editor.commit();//修改完之后进行提交
51
52         }
53     }
54     /**
55      * 执行跳转到主页面
56      */
57     private void goHome(){
58         Intent intent = new Intent(Welcome.this , MainActivity.class);
59         startActivity(intent);
60         finish();
61     }
62
63     /**
64      * 执行跳转到引导页面
65      */
66     private void goGuide(){
67         Intent intent = new Intent(Welcome.this , Guide.class);
68         startActivity(intent);
69         finish();
70     }
71
72 }

到这里，这个小功能也成功完成了。

以下附上AndroidMainifest.xml文件：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
 3     package="com.oysd.myviewpager"
 4     android:versionCode="1"
 5     android:versionName="1.0" >
 6
 7     <uses-sdk
 8         android:minSdkVersion="14"
 9         android:targetSdkVersion="14" />
10
11     <application
12         android:allowBackup="true"
13         android:icon="@drawable/ic_launcher"
14         android:label="@string/app_name"
15         android:theme="@style/AppTheme" >
16         <activity
17             android:name=".MainActivity"
18             android:label="@string/app_name" >
19
20         </activity>
21         <activity
22             android:name="com.oysd.myviewpager.Guide"
23             android:theme="@android:style/Theme.NoTitleBar.Fullscreen">
24
25         </activity>
26         <activity
27             android:name="com.oysd.myviewpager.Welcome"
28             android:theme="@android:style/Theme.NoTitleBar.Fullscreen">
29             <intent-filter>
30                 <action android:name="android.intent.action.MAIN" />
31
32                 <category android:name="android.intent.category.LAUNCHER" />
33             </intent-filter>
34         </activity>
35     </application>
36
37 </manifest>

简单也要坚持。。。。。

时间： 2024-10-02 21:49:32

Android学习之加圆点引导页的实现

Android学习之加圆点引导页的实现的相关文章

android使用ViewPager实现欢迎引导页

Android之上下滑动的引导页

android仿网易云音乐引导页、仿书旗小说Flutter版、ViewPager切换、爆炸菜单、风扇叶片效果等源码

IOS版本更新判定(用以加载引导页)

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

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

Android ViewPager欢迎页+引导页+进入首页

使用ViewPager动画来做出不一样的引导页

Android用户引导页实现，圆点实现动画效果