5分鐘搞定開機引導介面

夏至的稻穗發表於2017-05-04

作者： 夏至，歡迎轉載，也請保留這段申明，謝謝。
www.jianshu.com/p/dfc188f13…

今天講一個比較簡單的東西，那就是每一個app在第一次啟動的時候，都會出現的引導介面；剛開始的時候我還想自定義下面的一些小圓點；然後網上查了一下，發現有更簡單的方式，簡直簡單得令人髮指。好吧，廢話不多說，先上效果圖：

5分鐘搞定開機引導介面

圖片拿慕課網的，viewpager也新增了官網的動畫效果，最後一頁用一個 顯示一個Button，最後點選跳轉到主介面。整體上還是沒啥難點，下面是分析：

5分鐘搞定開機引導介面

##1、延時啟動檢測
這點沒啥好說的，直接一個定時器即可，至於是否為第一次啟動，則用sharedpreference來檢測：

 Timer timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                SharedPreferences preferences = getSharedPreferences("guide",MODE_PRIVATE);
                boolean isfirst = preferences.getBoolean("isfirst",false);
                if (!isfirst) {
                    startActivity(new Intent(SplseActivity.this, GuideActivity.class));
                    SharedPreferences.Editor editor =
                            getSharedPreferences("guide",MODE_PRIVATE).edit();
                    editor.putBoolean("isfirst",true);
                    editor.commit();
                    finish();
                }else{
                    startActivity(new Intent(SplseActivity.this,MainActivity.class));
                    finish();
                }
            }
        },2000);複製程式碼

2、圓點的繪製

上面圓點的繪製，其實很簡單，我們的思路就是viewpager滑動到哪一個介面，就讓它繪製成紅色就可以了，所以，我們完全可以用shade屬性和selector屬性幫我們繪製完成。圓點如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorAccent"/>
    <size android:height="10dp"
          android:width="10dp"/>
</shape>複製程式碼

效果如下：

5分鐘搞定開機引導介面

然後，我們只要新建多一個，把顏色改成白色，然後用 selector 就可以改變不同的顏色了：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/point_select" android:state_selected="true"/>
    <item android:drawable="@drawable/point_normal" android:state_selected="false"/>
</selector>複製程式碼

至於多少個圓點，我們用動態的方式，即圖片有多少張，這裡就有多少個點；我們就可以使用setlayoutparmas的方式，設定我們的檢視了。
首先看開機引導的主檢視：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#2233"
    tools:context="com.rachel.guildproject.MainActivity">
    <android.support.v4.view.ViewPager
        android:id="@+id/guide_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <Button
        android:id="@+id/guide_start"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/btn_background"
        android:text="開始體驗"
        android:textColor="#ffffff"
        android:textSize="20sp"
        android:textStyle="bold"
        android:layout_marginBottom="20dp"
        android:visibility="gone"/>
    <LinearLayout
        android:id="@+id/point_ly"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="40dp"
        android:orientation="horizontal"/>
</RelativeLayout>複製程式碼

viewpager 就不用講了，button 則是我們最後一頁的按鈕，而 LinearLayout 則是我們的圓點繪製的，可以看到這裡我把它設定成底部，這樣，我們就可以在程式碼中去填充這些圓點了：

 private void initpoint() {
        //獲取layout
        mLayout = (LinearLayout) findViewById(R.id.point_ly);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        //設定每一個view即圓點的對左的偏移量
        params.setMargins(15,0,0,0);
        //根據圖片多少來確定個數
        for (int i = 0; i < imgRes.length; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setImageResource(R.drawable.dot_select);
            imageView.setLayoutParams(params); //把上面的控制元件屬性設定到LinearLayout中
            if (i == 0){ //預設第一張為紅色圓點
                imageView.setSelected(true);
            }else{
                imageView.setSelected(false);
            }
            //把圓點這個子檢視匯入我們的LinearLayout裡面
            mLayout.addView(imageView);
            mImageViews.add(imageView);//跟著viewpager變換顏色
        }
    }複製程式碼

效果如下：

5分鐘搞定開機引導介面
哪，是不是很簡單啊，然後我們只要把viewpager填充進去就可以了，viewpager就老生常談了，我這裡就不講了，我們只要在頁面滑動完成之後，改變圓點的顏色就可以了，如下所示：

 @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        //滑動時改變圓點的狀態
        for (int i = 0; i < mImageViews.size(); i++) {
            if (i == position){
                mImageViews.get(i).setSelected(true);
            }else{
                mImageViews.get(i).setSelected(false);
            }
        }
        //當為最後一個時，顯示button，並隱藏圓點
        if (position == mImageViews.size() -1){
            mLayout.setVisibility(View.GONE);
            mButton.setVisibility(View.VISIBLE);
            ObjectAnimator animator = ObjectAnimator.ofFloat(mButton,"alpha",0f,1f);
            animator.setDuration(1000);
            animator.start();
        }else{
            mLayout.setVisibility(View.VISIBLE);
            mButton.setVisibility(View.GONE);
        }
    }複製程式碼

這樣就可以了，好像也沒啥好講的，權當記錄吧，另外，學會使用　shade 和 selector 等一些相關屬性，也可以讓你的UI變得非常好看。

最後附上 demo地址： git.oschina.net/zhengshaoru…

相關文章