Android 引導介面製作
阿新 • • 發佈：2018-12-23
專案做完了，做了第一次啟動，滑動的引導頁了。
然後需求又要改成流行的圖層圖片引導了。如圖：
大家一定也經常見吧，實現當然很簡單了。FrameLayout上加一個圖層就完了唄。讓它點選後消失。
嗯，可是那麼多介面，難道所有介面佈局都要改嗎？改成根元素上再套一層FrameLayout？
這裡看過我 DecorView淺析 的童鞋，一定很來感覺。setContentView載入的佈局的父元素不就是FrameLayout嗎？
那麼我們直接往它上面加引導圖層不就可以了嗎？ Very good!
方法：
1.
只需要解決怎麼找到那個Framelayout，我這裡想到的辦法是給每個xml佈局的根元素設定一個id，通過findViewById找到咋們通過setContentView設定上佈局，
再通過View的view.getParent();得到它的父元素。它的父元素不就是咋們的要的FrameLayout嗎？
然後建立一個ImageView設定上引導圖片加到FrameLayout就可以了。
由於有很多Activity，咋們當然要將這公共的事放在你們所有Activity的父類那裡。我這裡是BasicActivity。在onStart中呼叫了新增引導圖片的方法。
2.
由於引導過的介面就沒必要再次引導了。所以得儲存記錄。這裡採用偏好設定儲存，如果該Activity被引導過了，就將它的類全名儲存下。
由於偏好設定只能儲存鍵值（key-value）對，所以儲存多個類名，我採用|a|b|c這種形式儲存為value。
程式碼：
main.xml中的根元素上添加了id
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@id/my_content_view" ><TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/btn" android:text="open sub" /> </LinearLayout>
id定義在res/values下的 ids.xml中
<?xml version="1.0" encoding="utf-8"?> <resources> <item type="id" name="my_content_view"></item> </resources>
BasicActivity程式碼：
package com.my.decorview.test; import android.app.Activity; import android.view.View; import android.view.ViewGroup; import android.view.ViewParent; import android.widget.FrameLayout; import android.widget.ImageView; /** * @author 曙光城邦 * http://www.cnblogs.com/beenupper/ * */ public class BasicActivity extends Activity { private int guideResourceId=0;//引導頁圖片資源id @Override protected void onStart() { super.onStart(); addGuideImage();//新增引導頁 } /** * 新增引導圖片 */ public void addGuideImage() { View view = getWindow().getDecorView().findViewById(R.id.my_content_view);//查詢通過setContentView上的根佈局 if(view==null)return; if(MyPreferences.activityIsGuided(this, this.getClass().getName())){ //引導過了 return; } ViewParent viewParent = view.getParent(); if(viewParent instanceof FrameLayout){ final FrameLayout frameLayout = (FrameLayout)viewParent; if(guideResourceId!=0){//設定了引導圖片 final ImageView guideImage = new ImageView(this); FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT); guideImage.setLayoutParams(params); guideImage.setScaleType(ScaleType.FIT_XY); guideImage.setImageResource(guideResourceId); guideImage.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { frameLayout.removeView(guideImage); MyPreferences.setIsGuided(getApplicationContext(), BasicActivity.this.getClass().getName());//設為已引導 } }); frameLayout.addView(guideImage);//新增引導圖片 } } } /**子類在onCreate中呼叫，設定引導圖片的資源id *並在佈局xml的根元素上設定android:id="@id/my_content_view" * @param resId */ protected void setGuideResId(int resId){ this.guideResourceId=resId; } }
偏好設定程式碼：
package com.my.decorview.test; import android.content.Context; /** * @author 曙光城邦 * http://www.cnblogs.com/beenupper/ * */ public class MyPreferences { //偏好檔名 public static final String SHAREDPREFERENCES_NAME = "my_pref"; //引導介面KEY private static final String KEY_GUIDE_ACTIVITY = "guide_activity"; /** * 判斷activity是否引導過 * * @param context * @return 是否已經引導過 true引導過了 false未引導 */ public static boolean activityIsGuided(Context context,String className){ if(context==null || className==null||"".equalsIgnoreCase(className))return false; String[] classNames = context.getSharedPreferences(SHAREDPREFERENCES_NAME, Context.MODE_WORLD_READABLE) .getString(KEY_GUIDE_ACTIVITY, "").split("\\|");//取得所有類名 如 com.my.MainActivity for (String string : classNames) { if(className.equalsIgnoreCase(string)){ return true; } } return false; } /**設定該activity被引導過了。 將類名已 |a|b|c這種形式儲存為value，因為偏好中只能儲存鍵值對 * @param context * @param className */ public static void setIsGuided(Context context,String className){ if(context==null || className==null||"".equalsIgnoreCase(className))return; String classNames = context.getSharedPreferences(SHAREDPREFERENCES_NAME, Context.MODE_WORLD_READABLE) .getString(KEY_GUIDE_ACTIVITY, ""); StringBuilder sb = new StringBuilder(classNames).append("|").append(className);//新增值 context.getSharedPreferences(SHAREDPREFERENCES_NAME, Context.MODE_WORLD_READABLE)//儲存修改後的值 .edit() .putString(KEY_GUIDE_ACTIVITY, sb.toString()) .commit(); } }
MainActivity中新增引導頁
package com.my.decorview.test; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.widget.Button; public class MainActivity extends BasicActivity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button btn = (Button)findViewById(R.id.btn); btn.setOnClickListener(new View.OnClickListener(){ @Override public void onClick(View v) { startActivity(new Intent(MainActivity.this, SubActivity.class)); } }); setGuideResId(R.drawable.yindao01);//新增引導頁 } }
OK大功告成。只需要做兩件事
1. 在BasicActivity的子類中的onCreate中呼叫 setGuideResId(int resId),設定引導圖片資源id
2. 佈局xml的根元素上新增android:id="@id/my_content_view"