Android应用第一次打开,引导界面的实现

先说下思路:1.利用Preference存储数据,来记录是否是第一次打开软件

2.利用ViewPager实现几个图片之间的切换,在每个图片下方用代码画圆圈,圆圈会跟着图片的改变而改变。

3.在最后一张图片,添加button点击事件,进入正式界面。

程序虽然很简单,但是很实用。

看下效果图:

我们会看到圆圈的点会根据图片改变而改变。

下面开始讲解:

首先是activity_main.xml文件

[java]

  1. <RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”  
  2.     xmlns:tools=“http://schemas.android.com/tools”  
  3.     android:layout_width=“match_parent”  
  4.     android:layout_height=“match_parent”  
  5.     tools:context=“.MainActivity” >  
  6.   
  7.     <android.support.v4.view.ViewPager  
  8.         android:id=“@+id/guide_viewPager”  
  9.         android:layout_width=“fill_parent”  
  10.         android:layout_height=“fill_parent”  
  11.         android:background=“@android:color/transparent” />  
  12.   
  13.     <LinearLayout  
  14.         android:id=“@+id/linearlayout”  
  15.         android:layout_width=“match_parent”  
  16.         android:layout_height=“30dp”  
  17.         android:layout_alignParentBottom=“true”  
  18.         android:gravity=“center_horizontal”  
  19.         android:orientation=“horizontal” >  
  20.     </LinearLayout>  
  21.   
  22.     
  23. </RelativeLayout>  


里面有一个viewPager控件和LinearLayout控件,其中LinearLayout是装小圆圈的

接下来是三个pager_layout1.xml,pager_layout2.xml,pager_layout3.xml

[java]

  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:gravity=“center”  
  6.     android:background=“@drawable/guide1”  
  7.     android:orientation=“vertical” >  
  8.   
  9.      
  10.   
  11. </LinearLayout>  

 

[java]

  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.     android:background=“@drawable/guide2”  
  6.     android:orientation=“vertical” >  
  7.   
  8.      
  9.   
  10.   
  11. </RelativeLayout>  

 

[java]

  1. <?xml version=“1.0” encoding=“utf-8”?>  
  2. <FrameLayout xmlns:android=“http://schemas.android.com/apk/res/android”  
  3.     android:layout_width=“match_parent”  
  4.     android:layout_height=“match_parent”  
  5.     android:background=“@drawable/guide3”   
  6.     android:gravity=“center”  
  7.     android:orientation=“vertical” >  
  8.   
  9.       
  10.   
  11.     <Button  
  12.         android:id=“@+id/guide_enter”  
  13.         android:layout_width=“match_parent”  
  14.         android:layout_height=“100dp”  
  15.         android:layout_gravity=“center_horizontal|bottom”  
  16.         android:layout_marginBottom=“0dp”  
  17.         android:background=“@android:color/transparent”  
  18.          />  
  19.   
  20. </FrameLayout>  


我们可以看到前面两个layout就直接是个图片做背景,第三个我只是加了一个透明的按钮,模仿下面的“立即进入”按钮。(在这里,如果你有更好的方法,可以分享一下哈)

接下来是PreferenceUtil类,存储isShow的值

[java]

  1. package com.example.guiddemo;  
  2.   
  3. import android.content.Context;  
  4. import android.content.SharedPreferences;  
  5.   
  6. public class PreferenceUtil {  
  7.       
  8.     /** 
  9.      * 是否显示欢迎界面,true表示显示,false表示不显示 
  10.      */  
  11.     public static final String SHOW_GUIDE = “showguide”;  
  12.   
  13.     /** 
  14.      * 保存到Preference 
  15.      */  
  16.     public static void setBoolean(Context context, String key, boolean value) {  
  17.         // 得到SharedPreferences  
  18.         SharedPreferences preferences = context.getSharedPreferences(  
  19.                 “preference”, Context.MODE_PRIVATE);  
  20.         SharedPreferences.Editor editor = preferences.edit();  
  21.         editor.putBoolean(key, value);  
  22.         editor.commit();  
  23.     }  
  24.   
  25.     /** 
  26.      * 从Preference取出数据 
  27.      */  
  28.     public static boolean getBoolean(Context context, String key) {  
  29.         SharedPreferences preferences = context.getSharedPreferences(  
  30.                 “preference”, Context.MODE_PRIVATE);  
  31.         // 返回key值,key值默认值是false  
  32.         return preferences.getBoolean(key, false);  
  33.   
  34.     }  
  35. }  


关于Preference存储和取出数据这些操作,我想我不用多说了吧。

主要功能都是在MainActivity里,我的代码里写了详细的注释的

[java]

  1. package com.example.guiddemo;  
  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.PagerAdapter;  
  10. import android.support.v4.view.ViewPager;  
  11. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  12. import android.view.Gravity;  
  13. import android.view.LayoutInflater;  
  14. import android.view.View;  
  15. import android.view.View.OnClickListener;  
  16. import android.view.ViewGroup.LayoutParams;  
  17. import android.widget.ImageView;  
  18. import android.widget.LinearLayout;  
  19. import android.widget.TextView;  
  20.   
  21. public class MainActivity extends Activity {  
  22.   
  23.     /** 
  24.      * 是否显示引导界面 
  25.      */  
  26.     boolean isShow = false;  
  27.     /** 
  28.      * ViewPager对象 
  29.      */  
  30.     private ViewPager mViewPager;  
  31.     /** 
  32.      * 装载小圆圈的LinearLayout 
  33.      */  
  34.     private LinearLayout indicatorLayout;  
  35.     /** 
  36.      * ViewPager的每个页面集合 
  37.      */  
  38.     private List<View> views;  
  39.     /** 
  40.      * ViewPager下面的小圆圈 
  41.      */  
  42.     private ImageView[] mImageViews;  
  43.     /** 
  44.      * PagerAdapter对象 
  45.      */  
  46.     private MyPagerAdapter myPagerAdapter;  
  47.   
  48.     @Override  
  49.     protected void onCreate(Bundle savedInstanceState) {  
  50.         super.onCreate(savedInstanceState);  
  51.         setContentView(R.layout.activity_main);  
  52.         // 得到Preference存储的isShow数据  
  53.         isShow = PreferenceUtil.getBoolean(this, PreferenceUtil.SHOW_GUIDE);  
  54.         //isShow=false;调试的时候用的  
  55.         if (isShow) {  
  56.             initLog();  
  57.         } else {  
  58.             initView();  
  59.         }  
  60.     }  
  61.   
  62.     /** 
  63.      * 进入登录界面 
  64.      */  
  65.     private void initLog() {  
  66.         startActivity(new Intent(this, LogActivity.class));  
  67.         finish();  
  68.     }  
  69.   
  70.     /** 
  71.      * 进入引导界面 
  72.      */  
  73.     private void initView() {  
  74.         mViewPager = (ViewPager) findViewById(R.id.guide_viewPager);  
  75.         indicatorLayout = (LinearLayout) findViewById(R.id.linearlayout);  
  76.         LayoutInflater inflater = LayoutInflater.from(this);  
  77.         views = new ArrayList<View>();  
  78.         views.add(inflater.inflate(R.layout.pager_layout1, null));  
  79.         views.add(inflater.inflate(R.layout.pager_layout2, null));  
  80.         views.add(inflater.inflate(R.layout.pager_layout3, null));  
  81.         myPagerAdapter = new MyPagerAdapter(this, views);  
  82.         mImageViews = new ImageView[views.size()];  
  83.         drawCircl();  
  84.         mViewPager.setAdapter(myPagerAdapter);  
  85.         mViewPager.setOnPageChangeListener(new GuidePageChangeListener());  
  86.     }  
  87.   
  88.     /** 
  89.      * 画圆圈 
  90.      */  
  91.     private void drawCircl() {  
  92.         int num = views.size();  
  93.         for (int i = 0; i < num; i++) {  
  94.             //实例化每一个mImageViews[i]  
  95.             mImageViews[i] = new ImageView(this);  
  96.             if (i == 0) {  
  97.                 // 默认选中第一张照片,所以将第一个小圆圈变为icon_carousel_02  
  98.                 mImageViews[i].setImageResource(R.drawable.icon_carousel_02);  
  99.             } else {  
  100.                 mImageViews[i].setImageResource(R.drawable.icon_carousel_01);  
  101.             }  
  102.             // 给每个小圆圈都设置间隔  
  103.             mImageViews[i].setPadding(7777);  
  104.             LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(  
  105.                     LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);  
  106.             params.gravity = Gravity.CENTER_VERTICAL;  
  107.             // 让每一个小圆圈都在LinearLayout的CENTER_VERTICAL(中间垂直)  
  108.             indicatorLayout.addView(mImageViews[i], params);  
  109.         }  
  110.   
  111.     }  
  112.   
  113.     /** 
  114.      *  
  115.      * @author Harry 页面改变监听事件 
  116.      */  
  117.     private class GuidePageChangeListener implements OnPageChangeListener {  
  118.         public void onPageScrollStateChanged(int arg0) {  
  119.         }  
  120.   
  121.         public void onPageScrolled(int arg0, float arg1, int arg2) {  
  122.         }  
  123.   
  124.         /** 
  125.          * 页面有所改变,如果是当前页面,将小圆圈改为icon_carousel_02,其他页面则改为icon_carousel_01 
  126.          */  
  127.         public void onPageSelected(int arg0) {  
  128.             for (int i = 0; i < mImageViews.length; i++) {  
  129.                 if (arg0 != i) {  
  130.                     mImageViews[i]  
  131.                             .setImageResource(R.drawable.icon_carousel_01);  
  132.                 } else {  
  133.                     mImageViews[arg0]  
  134.                             .setImageResource(R.drawable.icon_carousel_02);  
  135.                 }  
  136.             }  
  137.         }  
  138.     }  
  139.   
  140.     class MyPagerAdapter extends PagerAdapter {  
  141.         private List<View> mViews;  
  142.         private Activity mContext;  
  143.   
  144.         public MyPagerAdapter(Activity context, List<View> views) {  
  145.             this.mViews = views;  
  146.             this.mContext = context;  
  147.         }  
  148.   
  149.         @Override  
  150.         public int getCount() {  
  151.             return mViews.size();  
  152.         }  
  153.   
  154.         @Override  
  155.         public boolean isViewFromObject(View arg0, Object arg1) {  
  156.             return arg0 == arg1;  
  157.         }  
  158.   
  159.         @Override  
  160.         public int getItemPosition(Object object) {  
  161.             return super.getItemPosition(object);  
  162.         }  
  163.   
  164.         @Override  
  165.         public void destroyItem(View arg0, int arg1, Object arg2) {  
  166.             ((ViewPager) arg0).removeView(mViews.get(arg1));  
  167.         }  
  168.   
  169.         /** 
  170.          * 实例化页卡,如果变为最后一页,则获取它的button并且添加点击事件 
  171.          */  
  172.         @Override  
  173.         public Object instantiateItem(View arg0, int arg1) {  
  174.             ((ViewPager) arg0).addView(mViews.get(arg1), 0);  
  175.             if (arg1 == mViews.size() – 1) {  
  176.                 TextView enterBtn = (TextView) arg0  
  177.                         .findViewById(R.id.guide_enter);  
  178.                 enterBtn.setOnClickListener(new OnClickListener() {  
  179.                     @Override  
  180.                     public void onClick(View v) {  
  181.                         // 将isShow保存为true,并进入登录界面  
  182.                         PreferenceUtil.setBoolean(mContext,  
  183.                                 PreferenceUtil.SHOW_GUIDE, true);  
  184.                         initLog();  
  185.                     }  
  186.                 });  
  187.             }  
  188.             return mViews.get(arg1);  
  189.         }  
  190.     }  
  191.   
  192. }  


主要代码我就写完了,虽然比较简单,但是却很实用,希望帮助到大家。

标签