本文爲轉載，原文：http://blog.csdn.net/loften_93663469/article/details/51471831
前言
當你第一次打開一款應用的時候常常會看到精美的引導頁設計，它們在你未使用產品之前提前告知你產品的主要功能與特點，第一次印象的好壞會極大地影響到後續的產品使用體驗。因此各個公司都在努力將這幾個頁面設計好，從一開始就引人入勝。那接下來我就來一步步實現引導頁的功能。
效果圖
實現步驟
創建新項目:
在Android Studio中新建項目，添加引導頁所需圖片
設置values值
- 給你的引導頁設置背景顏色及滑動時圓點的顏色，在 colors.xml 中添加如下顏色值：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<!-- Screens background color-->
<color name="bg_screen1">#f64c73</color>
<color name="bg_screen2">#20d2bb</color>
<color name="bg_screen3">#3395ff</color>
<color name="bg_screen4">#c873f4</color>
<color name="bg_screen5">#f59825</color>
<!-- dots inactive colors -->
<color name="dot_dark_screen1">#d1395c</color>
<color name="dot_dark_screen2">#14a895</color>
<color name="dot_dark_screen3">#2278d4</color>
<color name="dot_dark_screen4">#a854d4</color>
<color name="dot_dark_screen5">#f57f17</color>
<!-- dots active colors -->
<color name="dot_light_screen1">#f98da5</color>
<color name="dot_light_screen2">#8cf9eb</color>
<color name="dot_light_screen3">#93c6fd</color>
<color name="dot_light_screen4">#e4b5fc</color>
<color name="dot_light_screen5">#fbc02d</color>
<array name="array_dot_active">
<item>@color/dot_light_screen1</item>
<item>@color/dot_light_screen2</item>
<item>@color/dot_light_screen3</item>
<item>@color/dot_light_screen4</item>
<item>@color/dot_light_screen5</item>
</array>
<array name="array_dot_inactive">
<item>@color/dot_dark_screen1</item>
<item>@color/dot_dark_screen2</item>
<item>@color/dot_dark_screen3</item>
<item>@color/dot_dark_screen4</item>
<item>@color/dot_dark_screen5</item>
</array>
</resources>
- 在 strings.xml 中設置如下
<resources>
<string name="app_name">IntroSliderSample</string>
<string name="title_activity_welcome">Home Screen</string>
<string name="next">NEXT</string>
<string name="skip">SKIP</string>
<string name="start">GOT IT</string>
<string name="slide_1_title">Lonely</string>
<string name="slide_2_title">Meet</string>
<string name="slide_3_title">Fall in love at first sight</string>
<string name="slide_4_title">Both fall in love</string>
<string name="slide_5_title">Together forever</string>
<string name="play_again">play again</string>
</resources>- 在 dimens.xml 設置如下：
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<dimen name="fab_margin">16dp</dimen>
<dimen name="dots_height">30dp</dimen>
<dimen name="dots_margin_bottom">20dp</dimen>
<dimen name="img_width_height">120dp</dimen>
<dimen name="slide_title">30dp</dimen>
<dimen name="slide_desc">16dp</dimen>
<dimen name="desc_padding">40dp</dimen>
</resources>
- 在 styles.xml 設置如下
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
添加SharedPreferences管理類
引導頁應該是隻有第一次啓動應用時纔出現，第二次打開應用則直接跳到主頁面，故這裏用SharedPreferences存儲一個布爾值來判斷是否第一次打開應用程序。故新建PrefManager類
public class PrefManager {
SharedPreferences pref;
SharedPreferences.Editor editor;
Context _context;
int PRIVATE_MODE = 0;
//SharedPreferences 文件名
private static final String PREF_NAME = "intro_slider";
private static final String IS_FIRST_TIME_LAUNCH = "IsFirstTimeLaunch";
public PrefManager(Context context){
this._context = context;
pref = _context.getSharedPreferences(PREF_NAME,PRIVATE_MODE);
editor = pref.edit();
}
public void setFirstTimeLaunch(boolean isFirstTime){
editor.putBoolean(IS_FIRST_TIME_LAUNCH, isFirstTime);
editor.commit();
}
public boolean isFirstTimeLaunch(){
return pref.getBoolean(IS_FIRST_TIME_LAUNCH, true);
}
}
設置引導頁面佈局
- 這裏5個引導頁面只有顏色及圖片不一樣，就只給一個示例代碼
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/bg_screen1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_centerInParent="true"
android:gravity="center_horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/slide_1_title"
android:textColor="@android:color/white"
android:textSize="@dimen/slide_title"
android:textStyle="bold"/>
<ImageView
android:layout_width="@dimen/img_width_height"
android:layout_height="@dimen/img_width_height"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:src="@drawable/img1" />
</LinearLayout>
</RelativeLayout>- 在引導頁activity中對應的頁面如下設置：
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".WelcomeActivity">
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:id="@+id/layoutDots"
android:layout_width="match_parent"
android:layout_height="@dimen/dots_height"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_marginBottom="@dimen/dots_margin_bottom"
android:orientation="horizontal"></LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_above="@id/layoutDots"
android:alpha=".5"
android:background="@android:color/white" />
<Button
android:id="@+id/btn_skip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="@null"
android:text="@string/skip"
android:textColor="@android:color/white" />
<Button
android:id="@+id/btn_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="@null"
android:text="@string/next"
android:textColor="@android:color/white" />
</RelativeLayout>
在WelcomeActivity實現具體邏輯
- 判斷是否第一次打開應用
- 設置狀態欄透明
- 添加ViewPager 及事件
- 添加點擊按鈕“跳過和下一步“事件
public class WelcomeActivity extends AppCompatActivity {
private ViewPager viewPager;
private MyViewPagerAdapter myViewPagerAdapter;
private LinearLayout dotsLayout;
private TextView[] dots;
private int[] layouts;
private Button btnSkip,btnNext;
private PrefManager prefManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//在setContentView()前檢查是否第一次運行
prefManager = new PrefManager(this);
if(!prefManager.isFirstTimeLaunch()){
launchHomeScreen();
finish();
}
//讓狀態欄透明
if(Build.VERSION.SDK_INT >= 21){
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE|View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
}
setContentView(R.layout.activity_welcom);
viewPager = (ViewPager)findViewById(R.id.view_pager);
dotsLayout = (LinearLayout)findViewById(R.id.layoutDots);
btnNext = (Button) findViewById(R.id.btn_next);
btnSkip = (Button) findViewById(R.id.btn_skip);
//添加歡迎頁面
layouts = new int[]{
R.layout.welcome_slide1,
R.layout.welcome_slide2,
R.layout.welcome_slide3,
R.layout.welcome_slide4,
R.layout.welcome_slide5
};
//添加點
addBottomDots(0);
//讓狀態欄透明
changeStatusBarColor();
myViewPagerAdapter = new MyViewPagerAdapter();
viewPager.setAdapter(myViewPagerAdapter);
viewPager.addOnPageChangeListener(viewPagerPageChangeListener);
btnSkip.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
launchHomeScreen();
}
});
btnNext.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int current = getItem(+1);
if(current < layouts.length){
viewPager.setCurrentItem(current);
}else{
launchHomeScreen();
}
}
});
}
private void addBottomDots(int currentPage){
dots = new TextView[layouts.length];
int[] colorsActive = getResources().getIntArray(R.array.array_dot_active);
int[] colorsInactive = getResources().getIntArray(R.array.array_dot_inactive);
dotsLayout.removeAllViews();
for(int i = 0; i < dots.length; i++){
dots[i] = new TextView(this);
dots[i].setText(Html.fromHtml("•"));//圓點
dots[i].setTextSize(35);
dots[i].setTextColor(colorsInactive[currentPage]);
dotsLayout.addView(dots[i]);
}
if(dots.length > 0){
dots[currentPage].setTextColor(colorsActive[currentPage]);
}
}
private int getItem(int i){
return viewPager.getCurrentItem() + i;
}
private void launchHomeScreen(){
prefManager.setFirstTimeLaunch(false);
startActivity(new Intent(this,MainActivity.class));
finish();
}
/**
* 讓狀態欄變透明
*/
private void changeStatusBarColor(){
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
Window window = getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.TRANSPARENT);
}
}
ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener(){
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
addBottomDots(position);
//改變下一步按鈕text “NEXT”或“GOT IT”
if(position == layouts.length - 1){
btnNext.setText(getString(R.string.start));
btnSkip.setVisibility(View.GONE);
}else{
btnNext.setText(getString(R.string.next));
btnSkip.setVisibility(View.VISIBLE);
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
};
public class MyViewPagerAdapter extends PagerAdapter{
private LayoutInflater layoutInflater;
public MyViewPagerAdapter(){}
@Override
public Object instantiateItem(ViewGroup container, int position) {
layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(layouts[position],container,false);
container.addView(view);
return view;
}
@Override
public int getCount() {
return layouts.length;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
View view = (View)object;
container.removeView(view);
}
}
}