android app引导界面实现

每次下载qq空间或者其他的软件，第一次运行软件时大都会有个可以左右滑动的引导界面，在引导界面下方或者上方会有几个小圆圈提示用户，然后第二次进入软件则不在显示引导界面。给用户一种全新的体验，下面我就来实现一下这种界面。

1、界面切换用ViewPager实现。

2、几个提示用户的小圆圈通过自写控件来实现（当然也可以在ViewPager布局中添加PagerTitleStrip实现，但是，我看它不爽，然后就自己写了一个可一改变更新方式的Tab）。

Demo具体思路：需要一个Activity（软件主界面），一个FragmetActivity（引导界面），通过SharedPreferences来保存是否显示引导界面，每次打开软件，则在主界面检测是否显示引导界面。

好了，下面我给上主要代码图：

1、MainActivity类

package com.tielizi.welcomedemo;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;


public class MainActivity extends Activity implements View.OnClickListener{

    private Button resetBtn;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        resetBtn = (Button) findViewById(R.id.resetBtn);
        resetBtn.setOnClickListener(this);
        if(getSettingNote("WelcomeShow").equals("true")){
            Intent intent = new Intent(this,FirstWelcomeActivity.class);
            startActivity(intent);
            finish();
        }

    }

    @Override
    public void onClick(View v) {
        setSettingNote("WelcomeShow", "true");//设置为显示引导界面
        Intent intent = new Intent(this,FirstWelcomeActivity.class);
        startActivity(intent);
        finish();
    }

    public String getSettingNote(String key){//获取保存设置
        SharedPreferences read = getSharedPreferences("WelcomeSetting", MODE_PRIVATE);
        return read.getString(key, "true");
    }
    private void setSettingNote(String key,String content){//保存设置
        SharedPreferences.Editor note = getSharedPreferences("WelcomeSetting", Context.MODE_APPEND).edit();
        note.putString(key, content);
        note.commit();
    }
}
           

2、FirstWelcomeActivity

package com.tielizi.welcomedemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;

import java.util.ArrayList;
import java.util.List;


public class FirstWelcomeActivity extends FragmentActivity implements ViewPager.OnPageChangeListener{
//要想调用getSupportFragmentManager()方法，必须继承FragmentActivity
    private ViewPager viewpager;
    private List<Fragment> list;
    private MyFragmentPagerAdapter myFragmentPagerAdapter;
    private MyFragment1 myFragment1;
    private MyFragment2 myFragment2;
    private MyFragment3 myFragment3;
    private MyFragment4 myFragment4;
    private MyTabView myTabView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_first_welcome);

        viewpager = (ViewPager) findViewById(R.id.viewpager);
        viewpager.setOnPageChangeListener(this);
        myTabView = (MyTabView) findViewById(R.id.mytabview);
        list = new ArrayList<Fragment>();
        myFragment1 = new MyFragment1();
        myFragment2 = new MyFragment2();
        myFragment3 = new MyFragment3();
        myFragment4 = new MyFragment4();

        list.add(myFragment1);
        list.add(myFragment2);
        list.add(myFragment3);
        list.add(myFragment4);
        myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), list);
        viewpager.setAdapter(myFragmentPagerAdapter);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        myTabView.resetColor(position);//更新底部tabview圆圈颜色
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    class MyFragmentPagerAdapter extends FragmentStatePagerAdapter {
        private List<Fragment> listMyFragment;
        public MyFragmentPagerAdapter(FragmentManager fm,List<Fragment> listMyFragments) {
            super(fm);
            this.listMyFragment = listMyFragments;

        }

        @Override
        public android.support.v4.app.Fragment getItem(int arg0) {
            // TODO Auto-generated method stub
            return listMyFragment.get(arg0);
        }

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return listMyFragment.size();
        }

    }
    }
           

3、MyFragment4类负责引导界面到主界面的跳转和记录已经第一次跳转成功

package com.tielizi.welcomedemo;

import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;

/**
 * Created by Administrator on 2015/9/11.
 */
public class MyFragment4 extends Fragment {
    private Button enter_home;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.pager4,container,false);
        enter_home = (Button) view.findViewById(R.id.enter_home);
        enter_home.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                setSettingNote("WelcomeShow","false");
                Intent intent = new Intent(getActivity(), MainActivity.class);
                startActivity(intent);
                getActivity().finish();//销毁Fragment所在Activity
            }
        });
        return view;
    }

    private void setSettingNote(String key,String content){//保存设置
        SharedPreferences.Editor note = getActivity().getSharedPreferences("WelcomeSetting", Context.MODE_APPEND).edit();
        note.putString(key, content);
        note.commit();
    }
    }
           

4、Point类，圆圈属性类

package com.tielizi.welcomedemo;

/**
 * Created by Administrator on 2015/9/12.
 */
public class Point {

    public int x;//圆心坐标X
    public int y;//圆心坐标Y
    private int color;//画笔颜色

    public void setColor(int color) {
        this.color = color;
    }

    public int getColor() {
        return color;
    }

    public Point(int x,int y,int color){
        this.x = x;
        this.y = y;
        this.color = color;
    }

    public int getX() {
        return x;
    }

    public int getY() {
        return y;
    }

    public void setX(int x) {
        this.x = x;
    }

    public void setY(int y) {
        this.y = y;
    }
}
           

代码到这里，就差不多实现了，不多说，上图：

第一个界面：

第二个界面：

第四个界面：

PS：由于录制Gif超过了博客上传最大图片资源2M，所以我就截屏的。

更多博主文章分享：

继承与View在画布上画出贪吃蛇贪吃蛇android源码分享

手机弹幕实现

引导界面源码下载