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源碼分享

手機彈幕實作

引導界面源碼下載下傳