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

孤风一剑 12月 22, 2014 308 0

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

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

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

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

看下效果图：

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

下面开始讲解：

首先是activity_main.xml文件

[java]
<RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”  
    xmlns:tools=“http://schemas.android.com/tools”  
    android:layout_width=“match_parent”  
    android:layout_height=“match_parent”  
    tools:context=“.MainActivity” >  
  
    <android.support.v4.view.ViewPager  
        android:id=“@+id/guide_viewPager”  
        android:layout_width=“fill_parent”  
        android:layout_height=“fill_parent”  
        android:background=“@android:color/transparent” />  
  
    <LinearLayout  
        android:id=“@+id/linearlayout”  
        android:layout_width=“match_parent”  
        android:layout_height=“30dp”  
        android:layout_alignParentBottom=“true”  
        android:gravity=“center_horizontal”  
        android:orientation=“horizontal” >  
    </LinearLayout>  
  
    
</RelativeLayout>  

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

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

[java]
<?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:gravity=“center”  
    android:background=“@drawable/guide1”  
    android:orientation=“vertical” >  
  
     
  
</LinearLayout>  

[java]
<?xml version=“1.0” encoding=“utf-8”?>  
<RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”  
    android:layout_width=“match_parent”  
    android:layout_height=“match_parent”  
    android:background=“@drawable/guide2”  
    android:orientation=“vertical” >  
  
     
  
  
</RelativeLayout>  

[java]
<?xml version=“1.0” encoding=“utf-8”?>  
<FrameLayout xmlns:android=“http://schemas.android.com/apk/res/android”  
    android:layout_width=“match_parent”  
    android:layout_height=“match_parent”  
    android:background=“@drawable/guide3”   
    android:gravity=“center”  
    android:orientation=“vertical” >  
  
      
  
    <Button  
        android:id=“@+id/guide_enter”  
        android:layout_width=“match_parent”  
        android:layout_height=“100dp”  
        android:layout_gravity=“center_horizontal|bottom”  
        android:layout_marginBottom=“0dp”  
        android:background=“@android:color/transparent”  
         />  
  
</FrameLayout>  

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

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

[java]
package com.example.guiddemo;  
  
import android.content.Context;  
import android.content.SharedPreferences;  
  
public class PreferenceUtil {  
      
    /** 
     * 是否显示欢迎界面,true表示显示，false表示不显示 
     */  
    public static final String SHOW_GUIDE = “showguide”;  
  
    /** 
     * 保存到Preference 
     */  
    public static void setBoolean(Context context, String key, boolean value) {  
        // 得到SharedPreferences  
        SharedPreferences preferences = context.getSharedPreferences(  
                “preference”, Context.MODE_PRIVATE);  
        SharedPreferences.Editor editor = preferences.edit();  
        editor.putBoolean(key, value);  
        editor.commit();  
    }  
  
    /** 
     * 从Preference取出数据 
     */  
    public static boolean getBoolean(Context context, String key) {  
        SharedPreferences preferences = context.getSharedPreferences(  
                “preference”, Context.MODE_PRIVATE);  
        // 返回key值，key值默认值是false  
        return preferences.getBoolean(key, false);  
  
    }  
}  

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

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

[java]
package com.example.guiddemo;  
  
import java.util.ArrayList;  
import java.util.List;  
  
import android.app.Activity;  
import android.content.Intent;  
import android.os.Bundle;  
import android.support.v4.view.PagerAdapter;  
import android.support.v4.view.ViewPager;  
import android.support.v4.view.ViewPager.OnPageChangeListener;  
import android.view.Gravity;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.view.View.OnClickListener;  
import android.view.ViewGroup.LayoutParams;  
import android.widget.ImageView;  
import android.widget.LinearLayout;  
import android.widget.TextView;  
  
public class MainActivity extends Activity {  
  
    /** 
     * 是否显示引导界面 
     */  
    boolean isShow = false;  
    /** 
     * ViewPager对象 
     */  
    private ViewPager mViewPager;  
    /** 
     * 装载小圆圈的LinearLayout 
     */  
    private LinearLayout indicatorLayout;  
    /** 
     * ViewPager的每个页面集合 
     */  
    private List<View> views;  
    /** 
     * ViewPager下面的小圆圈 
     */  
    private ImageView[] mImageViews;  
    /** 
     * PagerAdapter对象 
     */  
    private MyPagerAdapter myPagerAdapter;  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        // 得到Preference存储的isShow数据  
        isShow = PreferenceUtil.getBoolean(this, PreferenceUtil.SHOW_GUIDE);  
        //isShow=false;调试的时候用的  
        if (isShow) {  
            initLog();  
        } else {  
            initView();  
        }  
    }  
  
    /** 
     * 进入登录界面 
     */  
    private void initLog() {  
        startActivity(new Intent(this, LogActivity.class));  
        finish();  
    }  
  
    /** 
     * 进入引导界面 
     */  
    private void initView() {  
        mViewPager = (ViewPager) findViewById(R.id.guide_viewPager);  
        indicatorLayout = (LinearLayout) findViewById(R.id.linearlayout);  
        LayoutInflater inflater = LayoutInflater.from(this);  
        views = new ArrayList<View>();  
        views.add(inflater.inflate(R.layout.pager_layout1, null));  
        views.add(inflater.inflate(R.layout.pager_layout2, null));  
        views.add(inflater.inflate(R.layout.pager_layout3, null));  
        myPagerAdapter = new MyPagerAdapter(this, views);  
        mImageViews = new ImageView[views.size()];  
        drawCircl();  
        mViewPager.setAdapter(myPagerAdapter);  
        mViewPager.setOnPageChangeListener(new GuidePageChangeListener());  
    }  
  
    /** 
     * 画圆圈 
     */  
    private void drawCircl() {  
        int num = views.size();  
        for (int i = 0; i < num; i++) {  
            //实例化每一个mImageViews[i]  
            mImageViews[i] = new ImageView(this);  
            if (i == 0) {  
                // 默认选中第一张照片，所以将第一个小圆圈变为icon_carousel_02  
                mImageViews[i].setImageResource(R.drawable.icon_carousel_02);  
            } else {  
                mImageViews[i].setImageResource(R.drawable.icon_carousel_01);  
            }  
            // 给每个小圆圈都设置间隔  
            mImageViews[i].setPadding(7, 7, 7, 7);  
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(  
                    LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);  
            params.gravity = Gravity.CENTER_VERTICAL;  
            // 让每一个小圆圈都在LinearLayout的CENTER_VERTICAL（中间垂直）  
            indicatorLayout.addView(mImageViews[i], params);  
        }  
  
    }  
  
    /** 
     *  
     * @author Harry 页面改变监听事件 
     */  
    private class GuidePageChangeListener implements OnPageChangeListener {  
        public void onPageScrollStateChanged(int arg0) {  
        }  
  
        public void onPageScrolled(int arg0, float arg1, int arg2) {  
        }  
  
        /** 
         * 页面有所改变，如果是当前页面，将小圆圈改为icon_carousel_02，其他页面则改为icon_carousel_01 
         */  
        public void onPageSelected(int arg0) {  
            for (int i = 0; i < mImageViews.length; i++) {  
                if (arg0 != i) {  
                    mImageViews[i]  
                            .setImageResource(R.drawable.icon_carousel_01);  
                } else {  
                    mImageViews[arg0]  
                            .setImageResource(R.drawable.icon_carousel_02);  
                }  
            }  
        }  
    }  
  
    class MyPagerAdapter extends PagerAdapter {  
        private List<View> mViews;  
        private Activity mContext;  
  
        public MyPagerAdapter(Activity context, List<View> views) {  
            this.mViews = views;  
            this.mContext = context;  
        }  
  
        @Override  
        public int getCount() {  
            return mViews.size();  
        }  
  
        @Override  
        public boolean isViewFromObject(View arg0, Object arg1) {  
            return arg0 == arg1;  
        }  
  
        @Override  
        public int getItemPosition(Object object) {  
            return super.getItemPosition(object);  
        }  
  
        @Override  
        public void destroyItem(View arg0, int arg1, Object arg2) {  
            ((ViewPager) arg0).removeView(mViews.get(arg1));  
        }  
  
        /** 
         * 实例化页卡，如果变为最后一页，则获取它的button并且添加点击事件 
         */  
        @Override  
        public Object instantiateItem(View arg0, int arg1) {  
            ((ViewPager) arg0).addView(mViews.get(arg1), 0);  
            if (arg1 == mViews.size() – 1) {  
                TextView enterBtn = (TextView) arg0  
                        .findViewById(R.id.guide_enter);  
                enterBtn.setOnClickListener(new OnClickListener() {  
                    @Override  
                    public void onClick(View v) {  
                        // 将isShow保存为true，并进入登录界面  
                        PreferenceUtil.setBoolean(mContext,  
                                PreferenceUtil.SHOW_GUIDE, true);  
                        initLog();  
                    }  
                });  
            }  
            return mViews.get(arg1);  
        }  
    }  
  
}  

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

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

标签

文章归档

标签

相关推荐

标签

文章归档