作者: 夏至,歡迎轉(zhuǎn)載身坐,也請保留這段申明邑茄,謝謝琉用。
http://www.reibang.com/p/dfc188f130fd
今天講一個比較簡單的東西,那就是每一個app在第一次啟動的時候策幼,都會出現(xiàn)的引導界面邑时;剛開始的時候我還想自定義下面的一些小圓點;然后網(wǎng)上查了一下特姐,發(fā)現(xiàn)有更簡單的方式晶丘,簡直簡單得令人發(fā)指。好吧唐含,廢話不多說浅浮,先上效果圖:
圖片拿慕課網(wǎng)的,viewpager也添加了官網(wǎng)的動畫效果捷枯,最后一頁用一個 顯示一個Button滚秩,最后點擊跳轉(zhuǎn)到主界面。整體上還是沒啥難點淮捆,下面是分析:
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變換顏色
}
}
效果如下:
哪蜒灰,是不是很簡單啊,然后我們只要把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