5分鐘搞定開機引導界面

作者: 夏至,歡迎轉(zhuǎn)載身坐,也請保留這段申明邑茄,謝謝琉用。
http://www.reibang.com/p/dfc188f130fd

今天講一個比較簡單的東西,那就是每一個app在第一次啟動的時候策幼,都會出現(xiàn)的引導界面邑时;剛開始的時候我還想自定義下面的一些小圓點;然后網(wǎng)上查了一下特姐,發(fā)現(xiàn)有更簡單的方式晶丘,簡直簡單得令人發(fā)指。好吧唐含,廢話不多說浅浮,先上效果圖:

guide.gif

圖片拿慕課網(wǎng)的,viewpager也添加了官網(wǎng)的動畫效果捷枯,最后一頁用一個 顯示一個Button滚秩,最后點擊跳轉(zhuǎn)到主界面。整體上還是沒啥難點淮捆,下面是分析:

Paste_Image.png

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>

效果如下:

然后蹬碧,我們只要新建多一個舱禽,把顏色改成白色,然后用 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>

至于多少個圓點恩沽,我們用動態(tài)的方式誊稚,即圖片有多少張,這里就有多少個點罗心;我們就可以使用setlayoutparmas的方式里伯,設(shè)置我們的視圖了。
首先看開機引導的主視圖:

<?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 則是我們的圓點繪制的,可以看到這里我把它設(shè)置成底部飒箭,這樣狼电,我們就可以在代碼中去填充這些圓點了:

 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);
        //設(shè)置每一個view即圓點的對左的偏移量
        params.setMargins(15,0,0,0);
        //根據(jù)圖片多少來確定個數(shù)
        for (int i = 0; i < imgRes.length; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setImageResource(R.drawable.dot_select);
            imageView.setLayoutParams(params); //把上面的控件屬性設(shè)置到LinearLayout中
            if (i == 0){ //默認第一張為紅色圓點
                imageView.setSelected(true);
            }else{
                imageView.setSelected(false);
            }
            //把圓點這個子視圖導入我們的LinearLayout里面
            mLayout.addView(imageView);
            mImageViews.add(imageView);//跟著viewpager變換顏色
        }
    }

效果如下:

Paste_Image.png

哪蜒灰,是不是很簡單啊,然后我們只要把viewpager填充進去就可以了肩碟,viewpager就老生常談了强窖,我這里就不講了,我們只要在頁面滑動完成之后削祈,改變圓點的顏色就可以了翅溺,如下所示:

 @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        //滑動時改變圓點的狀態(tài)
        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);
        }
    }

這樣就可以了未巫,好像也沒啥好講的,權(quán)當記錄吧启昧,另外叙凡,學會使用 shade 和 selector 等一些相關(guān)屬性,也可以讓你的UI變得非常好看密末。

最后附上 demo地址: https://git.oschina.net/zhengshaorui/guideactivity.git

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末握爷,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子严里,更是在濱河造成了極大的恐慌新啼,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,042評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件刹碾,死亡現(xiàn)場離奇詭異燥撞,居然都是意外死亡,警方通過查閱死者的電腦和手機迷帜,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2 384
  • 文/潘曉璐 我一進店門物舒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人戏锹,你說我怎么就攤上這事冠胯。” “怎么了锦针?”我有些...
    開封第一講書人閱讀 156,674評論 0 345
  • 文/不壞的土叔 我叫張陵荠察,是天一觀的道長。 經(jīng)常有香客問我奈搜,道長悉盆,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,340評論 1 283
  • 正文 為了忘掉前任馋吗,我火速辦了婚禮焕盟,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘耗美。我一直安慰自己京髓,他們只是感情好,可當我...
    茶點故事閱讀 65,404評論 5 384
  • 文/花漫 我一把揭開白布商架。 她就那樣靜靜地躺著堰怨,像睡著了一般。 火紅的嫁衣襯著肌膚如雪蛇摸。 梳的紋絲不亂的頭發(fā)上备图,一...
    開封第一講書人閱讀 49,749評論 1 289
  • 那天,我揣著相機與錄音赶袄,去河邊找鬼揽涮。 笑死,一個胖子當著我的面吹牛饿肺,可吹牛的內(nèi)容都是我干的蒋困。 我是一名探鬼主播,決...
    沈念sama閱讀 38,902評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼敬辣,長吁一口氣:“原來是場噩夢啊……” “哼雪标!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起溉跃,我...
    開封第一講書人閱讀 37,662評論 0 266
  • 序言:老撾萬榮一對情侶失蹤村刨,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后撰茎,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體嵌牺,經(jīng)...
    沈念sama閱讀 44,110評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年龄糊,在試婚紗的時候發(fā)現(xiàn)自己被綠了逆粹。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,577評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡绎签,死狀恐怖枯饿,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情诡必,我是刑警寧澤奢方,帶...
    沈念sama閱讀 34,258評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站爸舒,受9級特大地震影響蟋字,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜扭勉,卻給世界環(huán)境...
    茶點故事閱讀 39,848評論 3 312
  • 文/蒙蒙 一鹊奖、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧涂炎,春花似錦忠聚、人聲如沸设哗。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽网梢。三九已至,卻和暖如春赂毯,著一層夾襖步出監(jiān)牢的瞬間战虏,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1 264
  • 我被黑心中介騙來泰國打工党涕, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留烦感,地道東北人。 一個月前我還...
    沈念sama閱讀 46,271評論 2 360
  • 正文 我出身青樓膛堤,卻偏偏與公主長得像手趣,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子骑祟,可洞房花燭夜當晚...
    茶點故事閱讀 43,452評論 2 348

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,737評論 25 707
  • 前言 最近在做項目的時候回懦,有個需求就是實現(xiàn)自動輪播式的ViewPager,最直觀的例子就是知乎日報頂部的ViewP...
    丶藍天白云夢閱讀 8,171評論 13 77
  • 最好的友情是各自忙亂 2016-10-23 浩云 ——我們想要的友誼次企,不是陪伴怯晕,依靠和慰藉。 01 第一次認識刺頭...
    是_不二閱讀 538評論 0 0
  • 第一回 死於夜幕降臨後的吻 第兩回 到了時間便渺無音訊 第三回了 死於在大海中心呼喊 引來浪與鯊魚 然後連死兩回 ...
    Alfli閱讀 276評論 0 2
  • 爸爸每天的工作都很累缸棵,因為我要上大學舟茶,爸爸每天就都上兩個班,大部分的時間都是11點多的時候才回來堵第。 有一次吧凉,我回家...
    愛讀書的小開心閱讀 691評論 9 2