Android實現漸變啓動頁和帶有指示器的引導頁

這篇文章主要爲大家詳細介紹了Android實現漸變啓動頁和帶有指示器的引導頁，具有一定的參考價值，感興趣的小夥伴們可以參考一下

引導頁是項目中很常見的東西了，在用戶下載app首次打開後，會進入引導界面，通常都是三四張圖片說明，簡單介紹下app的功能和使用方法之類，最後一張有着“進入應用”的按鈕，點擊即可進入主頁，之後打開app則不會再次進入啓動頁，話不多說，以下做個歸納。

效果圖：

實現步驟：

1.首先我們做個有漸變動畫的啓動頁面SplashActivity

在onCreate裏設置核心方法setAlphaAnimation()

public void setAlphaAnimation(){

   //生成AlphaAnimation的對象

   AlphaAnimation animation= new AlphaAnimation(this);

   //設置動畫的持續時間

   animation.setDuration(3000);

   //給要漸變的控件設置動畫，比如說imageview，textview，linearLayout之類的

   ll.setAnimation(animation);

   //設置動畫監聽，結束時跳轉到下一個頁面（首次打開就是引導頁面，反之就是主頁）

   animation.setAnimationListener(new Animation.AnimationListener(){

      public void onAnimationStart(Animation animation){ }

      public void onAnimationEnd(Animation animation){ 

         jump2Activity();      

      }

      public void onAnimationRepeat(Animation animation){ }

   });

}

分析一下這個跳轉方法jump2Activity()，我們這裏使用SharedPeference來判斷應用是否首次打開，設變量isFirst默認值爲0，進入引導頁跳轉到主頁時再把這個值設爲1，這樣，每次跳轉時判斷isFirst的值，如果仍是默認值0則爲首次打開進入引導頁，反之進入主頁。

public void jump2Activity(){

  SharedPreferences sharedPreference= getSharedPreferences("data", MODE_PRIVATE);

  String isFirst= sharedPreferences.getString("isFirst", "0");

  Intent intent= new Intent();  

  if("0".equals(isFirst)){

    intent.setClass(this, GuideActivity.class);

  }else{

    intent.setClass(this. MainActivity.class);

  }

  startActivity(intent);

  finish();

}

2.接下來我們做引導頁面

引導頁面是由三個控件組成，Viewpager，圓點指示器的線性佈局linearlayout， 最後一頁的 “進入應用” 按鈕。

<?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.support.v4.view.ViewPager
  android:id="@+id/guide_vp"
  android:layout_width="match_parent"
  android:layout_height="match_parent" />
 
 <LinearLayout
  android:id="@+id/guide_ll"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_alignParentBottom="true"
  android:layout_centerHorizontal="true"
  android:layout_marginBottom="100dp"
  android:orientation="horizontal" />
 
 <Button
  android:id="@+id/guide_btn"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_above="@id/guide_ll"
  android:layout_centerHorizontal="true"
  android:text="進入應用"
  android:layout_marginBottom="10dp"
  android:visibility="gone"/>
 
</RelativeLayout>

在GuideActivity中，首先初始化引導圖片

/**
 * 初始化圖片
 */
private void initImgs() {
 ViewPager.LayoutParams params= new ViewPager.LayoutParams();
 imageViews= new ArrayList<ImageView>();
 for (int i= 0; i< imgs.length; i++){
  ImageView imageView= new ImageView(this);
  imageView.setLayoutParams(params);
  imageView.setImageResource(imgs[i]);
  imageView.setScaleType(ImageView.ScaleType.FIT_XY);
  imageViews.add(imageView);
 }
}

初始化底部圓點指示器，這裏值得一提的是我們給各圓點設置相應的點擊事件，當點擊某個位置的圓點時，viewpager自動切換到相應位置的圖片，不過實際應用中這裏實用性不是很大，因爲圓點太小，可觸摸範圍有限，點擊事件不太好觸發。

/**
 * 初始化底部圓點指示器
 */
private void initDots() {
 LinearLayout layout= findViewById(R.id.guide_ll);
 LinearLayout.LayoutParams params= new LinearLayout.LayoutParams(20, 20);
 params.setMargins(10, 0, 10, 0);
 dotViews= new ImageView[imgs.length];
 for (int i= 0; i< imageViews.size(); i++){
  ImageView imageView= new ImageView(this);
  imageView.setLayoutParams(params);
  imageView.setImageResource(R.drawable.dotselector);
  if (i== 0){
   imageView.setSelected(true);
  }else{
   imageView.setSelected(false);
  }
  dotViews[i]= imageView;
  final int finalI = i;
  dotViews[i].setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
    vp.setCurrentItem(finalI);
   }
  });
  layout.addView(imageView);
 }
}

設置viewpager的滑動事件

vp.addOnPageChangeListener(this);

生成三個方法，我們主要在onPageSelected()方法中做操作，當某個位置的圓點被選中時，顯示選中後的圖片，其餘圓點顯示未選中的圖片，這裏主要應用selector控制器，至於相應的選中未選中圓點圖片需要大家去找。當滑動到最後一個頁面時，將 "進入應用" 的按鈕顯示，反之隱藏。

@Override
public void onPageScrolled(int i, float v, int i1) {}
 
@Override 
public void onPageScrollStateChanged(int i) {}
 
@Override
public void onPageSelected(int arg0) {
 for (int i= 0; i< dotViews.length; i++){
  if (arg0== i){
   dotViews[i].setSelected(true);
  }else {
   dotViews[i].setSelected(false);
  }
 
  if (arg0== dotViews.length- 1){
   btn.setVisibility(View.VISIBLE);
  }else {
   btn.setVisibility(View.GONE);
  }
 }
}

dotSelector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@drawable/focus_on" android:state_selected="true"/>
 <item android:drawable="@drawable/focus_nomal" android:state_selected="false"/>
</selector>

在最後一個頁面點擊 "進入應用" 按鈕跳轉到主頁時，將緩存中的isFirst數據改爲1，以後打開應用則不會再進入引導頁面了。

@Override
public void onClick(View view) {
 switch (view.getId()){
  case R.id.guide_btn:
   setisFirst();
   Intent intent= new Intent(GuideActivity.this, MainActivity.class);
   startActivity(intent);
   finish();
   break;
 }
}
/**
 * 改變首次打開的狀態
 */
private void setisFirst() {
 SharedPreferences.Editor editor= getSharedPreferences("data", MODE_PRIVATE).edit();
 editor.putString("isFirst", "1");
 editor.commit();
}

至此全部完成！demo附上

源碼下載

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。