APP實用開發——引導界面

2024-04-27 15:11:21

字體：大中小

來源：轉載

供稿：網友

這里寫圖片描述

在App開中首先跟用戶進行交互的事Splash頁面，也就是引導頁面，一般是更新了什么內容，或者有什么樣的活動，怎樣操作等，現在越來越多的應用引導頁面越來越炫彩，所以引導頁面在你app用戶好感度上也有重大的關系。例如：

這里寫圖片描述

案例1

進入頁面之后，根據頁面版本判斷時候更新，彈出更新對話框，True就進入下載安裝頁面功能，false就跳轉到主頁布局

<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" android:background="@drawable/splash" >  <TextView android:id="@+id/splash_tv_version" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="版本:1.0" android:textSize="18sp" android:textColor="#FFFFFF" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="10dp" android:shadowColor="#FF0000" android:shadowDx="1" android:shadowDy="1" android:shadowRadius="2" /></RelativeLayout>public class SplashActivity extends Activity { /**請求路徑**/ PRivate static final String CONNECTURL = "http://10.0.2.2:8080/updateinfo.html"; /**保存的路徑**/ private static final String SAVEURL = "mnt/sdcard/mobliesafe97_2.apk"; private TextView mVersion; private int mNewsVersion; private String mNewsUrl; private String mNewsMsg; private ProgressDialog progressDialog; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //requestWindowFeature(Window.FEATURE_NO_TITLE);//去除標題欄，必須放在setContentView之前執行，而且只在當前的activity生效 setContentView(R.layout.activity_splash); initView(); } /** * 初始化控件 */ private void initView() { mVersion = (TextView) findViewById(R.id.splash_tv_version); //獲取當前應用程序的版本號碼，設置給textview展示 mVersion.setText("版本:"+PackageTool.getVersionName(this)); //延遲兩秒鐘中請求服務器進行更新版本操作 //update(); //延遲多長時間給handler發送消息 //參數1：handler接受到消息執行的操作 //參數2：延遲的事件 /*new Handler().postDelayed(new Runnable() { @Override public void run() { update(); } }, 2000);*/ //延遲多長時間給handler發送消息 new Handler(){ public void handleMessage(android.os.Message msg) { update(); }; }.sendEmptyMessageDelayed(0, 2000);//what:消息的標示;delayMillis:延遲時間 } /** * 更新版本操作 */ private void update() { //1.鏈接服務器，獲取服務器數據，判斷是否有最新版本 //1.1.鏈接服務器，聯網操作，子線程，權限，HttpUrlConnection xutils httpclient volly okhttp //參數：鏈接超時時間 HttpUtils httpUtils = new HttpUtils(2000); //參數1：請求方式 //參數2：請求路徑 //參數3：請求的參數 //參數4：RequestCallBack請求回調 httpUtils.send(HttpMethod.GET, CONNECTURL, null, new RequestCallBack<String>() { //請求成功調用的方法 @Override public void onSuccess(ResponseInfo<String> responseInfo) { //1.2.獲取服務器返回的數據，問題：服務器返回那些數據：code:新版本的版本號 apkurl:新版本的下載地址 msg:新版本的描述信息，描述更新的內容的 //問題：需要知道服務器如何封裝數據 xml json String json = responseInfo.result;//獲取服務器返回的數據 System.out.println(json); //1.2.1.解析獲取到json數據 processJSON(json); } //請求失敗調用的方法 @Override public void onFailure(HttpException arg0, String arg1) { //請求失敗的時候跳轉到首頁 enterHome(); } }); } /** * 1.2.1.解析獲取到json數據 * @param json */ protected void processJSON(String json) { try { JSONObject jsonObject = new JSONObject(json); mNewsVersion = jsonObject.getInt("code"); mNewsUrl = jsonObject.getString("apkurl"); mNewsMsg = jsonObject.getString("msg"); System.out.println("code:"+mNewsVersion+" apkurl:"+mNewsUrl+" msg:"+mNewsMsg); //1.3.判斷是否有最新版本 //判斷服務器中新版本的版本號和當前應用程序的版本號是否一致，一致：沒有最新版本，不一致：有最新版本 if (mNewsVersion == PackageTool.getVersionCode(this)) { //一致：沒有最新版本 //跳轉到首頁 enterHome(); }else{ //不一致：有最新版本 //2.彈出更新版本的對話框 showUpdateDialog(); } } catch (JSONException e) { e.printStackTrace(); } } /** * 跳轉首頁的操作 */ protected void enterHome() { Intent intent = new Intent(this,HomeActivity.class); startActivity(intent); finish();//移除/結束當前的activity，在跳轉成功之后，移除SplashActivity，這樣當從HomActivity點擊返回鍵返回的時候，因為不會找到SplashActivity所以會直接退出應用程序 } /** * 2.創建提醒用戶更新版本的對話框 */ private void showUpdateDialog() { AlertDialog.Builder builder = new Builder(this); //builder.setCancelable(false);//設置對話框是否可以消失，true:可以；false:不可以,屏蔽返回鍵 //設置對話框的標題 builder.setTitle("最新版本："+mNewsVersion+".0"); //設置圖標 builder.setIcon(R.drawable.ic_launcher); //設置對話框內容 builder.setMessage(mNewsMsg); //監聽對話框消失的時候 builder.setOnCancelListener(new OnCancelListener() { @Override public void onCancel(DialogInterface dialog) { //跳轉到首頁的操作 dialog.dismiss(); enterHome(); } }); //創建按鈕 builder.setPositiveButton("立即更新", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { //隱藏對話框，下載最新版本apk dialog.dismiss(); //3.下載最新版本apk downloadAPK(); } }); builder.setNegativeButton("以后再說", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { //隱藏對話框，跳轉到首頁 dialog.dismiss(); enterHome(); } }); //展示對話框 builder.show(); //builder.create().show();//相同的效果 } /** * 3.下載最新版的apk */ protected void downloadAPK() { //判斷SD卡是否掛載 if (Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED)) { //3.2.在下載的時候，彈出進度條的對話框 showProgressDialog(); //3.1.從服務器下載，聯網操作 HttpUtils httpUtils = new HttpUtils(); //下載操作 //問題：1.設置下載路徑；2.SD卡權限；3.判斷SD卡是否掛載成功；4.生成一個2.0版本的apk存放到服務器 //參數1：下載的路徑 //參數2：保存的路徑 //參數3：下載回調 httpUtils.download(mNewsUrl, SAVEURL, new RequestCallBack() { @Override public void onSuccess(ResponseInfo arg0) { //下載成功，隱藏進度條對話框 progressDialog.dismiss(); //4.安裝最新版本apk installAPK(); } @Override public void onFailure(HttpException arg0, String arg1) { //下載失敗，隱藏進度條，通知跳轉到首頁 progressDialog.dismiss(); enterHome(); } //更新下載進度 //total : 總進度 //current : 當前的下載進度 //isUploading : 是否支持回調上傳 @Override public void onLoading(long total, long current, boolean isUploading) { super.onLoading(total, current, isUploading); //設置進度條顯示總進度和下載進度 progressDialog.setMax((int) total);//設置總進度 progressDialog.setProgress((int) current);//設置當前下載的進度 } }); }else{ Toast.makeText(getapplicationContext(), "沒有可用的SD卡", 0).show(); } } /** * 3.2.顯示下載進度的對話框 */ private void showProgressDialog() { progressDialog = new ProgressDialog(this); progressDialog.setCancelable(false);//設置對話框是否可以消失，true:可以；false:不可以,屏蔽返回鍵 progressDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);//設置進度條對話框中進度的樣式 progressDialog.show();//顯示dialog } /** * 4.安裝最新版本apk */ protected void installAPK() { //通過隱式意圖打開系統的安裝界面 /** * <intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <data android:scheme="content" />// content:// <data android:scheme="file" /> <data android:mimeType="application/vnd.android.package-archive" /> </intent-filter> */ Intent intent = new Intent(); intent.setAction("android.intent.action.VIEW"); intent.addCategory("android.intent.category.DEFAULT"); //相互覆蓋 /*intent.setData(Uri.fromFile(new File(SAVEURL))); intent.setType("application/vnd.android.package-archive");*/ intent.setDataAndType(Uri.fromFile(new File(SAVEURL)), "application/vnd.android.package-archive"); //startActivity(intent); //當當前的activity退出的時候，回調之前activity的onactivityReulst方法 //requestCode : 請求碼 startActivityForResult(intent, 0); } @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); //跳轉首頁的操作 enterHome(); }}

案例2

進入應用引導頁面，首先全屏展示一段視頻之后，出現引導圖ViewPager滑動 activity_splash.xml

activity_guide.xml

SplashActivity 短視頻播放

public class SplashActivity extends Activity { private CustomVideoView mVideoView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_splash); mVideoView = (CustomVideoView) findViewById(R.id.splash_vv_videoview); // 播放視頻 initData(); } /** * 播放視頻 */ private void initData() { // 1.獲取播放資源 // android.resource:// : 獲取工程中的res->raw中的資源 // android.resource://工程的包名/R.raw.kr36 mVideoView.setVideoURI(Uri.parse("android.resource://" + this.getPackageName() + "/" + R.raw.kr36)); //3.監聽視頻是否播放完畢，如果播放完畢，重新開始播放 //監聽視頻是否播放完畢的操作 mVideoView.setOnCompletionListener(new OnCompletionListener() { //當視頻播放完畢調用的方法 @Override public void onCompletion(MediaPlayer mp) { //重新播放 mVideoView.start(); } }); // 2.播放視頻資源 mVideoView.start(); } /** * 進入主頁面按鈕的點擊事件 */ public void enter(View view){ //判斷用戶是否是第一個進入應用，如果是：跳轉引導界面，如果不是：跳轉首頁 //問題：如何判斷用戶是否是第一次進入應用 //獲取用戶是否是第一次進入的標示 //還沒有保存數據，保存數據需要到引導界面的開始體驗按鈕中去做,true:標示第一次進入，false:不是 boolean isfirstenter = SharedPreferencesTool.getBoolean(this, Constants.ISFIRSTENTER, true); if (isfirstenter) { //第一次進入跳轉到引導界面 startActivity(new Intent(this,GuideActivity.class)); }else{ //不是第一次進入跳轉到首頁 startActivity(new Intent(this,HomeActivity.class)); } finish(); }

GuideActivity 圖片引導頁面

public class GuideActivity extends Activity { private ViewPager mViewPager; //資源圖片 private int[] mImageIds = new int[]{R.drawable.guide_1,R.drawable.guide_2,R.drawable.guide_3}; private List<ImageView> imageViews; private Button mStart; private LinearLayout mLLDot; private ImageView mRedDot; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE);//代碼去除標題欄 setContentView(R.layout.activity_guide); //通過第三方框架實現了沉浸式狀態欄操作，必須在setContentView之后執行 StatusBarUtil.setColor(this, Color.YELLOW); initView(); } /** * 初始化控件 */ private void initView() { mViewPager = (ViewPager) findViewById(R.id.guide_vp_viewpager); mStart = (Button) findViewById(R.id.guide_btn_start); mLLDot = (LinearLayout) findViewById(R.id.guide_ll_dot); mRedDot = (ImageView) findViewById(R.id.guide_iv_reddot); imageViews = new ArrayList<ImageView>(); imageViews.clear(); //通過viewpager展示的三張圖片 //先將圖片，放到imageView中，然后再將ImageView放到viewpager中展示 //1.根據圖片的張數，創建相應個數的imageView,并存放，方便viewpager展示 for (int i = 0; i < mImageIds.length; i++) { //創建相應的imageView createImageView(i); //根據圖片的張數，創建點的個數 createDot(); } //2.通過viewpager展示imageView mViewPager.setAdapter(new Myadapter()); //4.實現viewpager的界面切換動畫 //mViewPager.setPageTransformer(true, new ZoomOutPageTransformer()); //設置viewpager切換動畫的， //參數1：如果是第一個到最后一個：true,如果是最后一個到第一個：false //參數2：自定義的動畫效果 //mViewPager.setPageTransformer(true, new DepthPageTransformer()); mViewPager.setPageTransformer(true, new RotatePageTransformer()); //3.實現viewpager的界面切換監聽，監聽當切換到第三個界面的時候，顯示按鈕，否則隱藏按鈕 //跟setOnPageChangeListener效果是一樣 mViewPager.addOnPageChangeListener(new OnPageChangeListener() { //當界面切換完成調用的方法 //position : 切換到的界面的索引 @Override public void onPageSelected(int position) { //判斷如果已經切換到第三個界面了，顯示按鈕，否則隱藏按鈕 if (position == imageViews.size()-1) { mStart.setVisibility(View.VISIBLE); }else{ mStart.setVisibility(View.GONE); } } //viewpager切換界面的時候調用的方法 //position : 條目的索引 //positionOffset : 界面移動的百分比 //positionOffsetPixels : 界面移動的像素 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { //當viewpager切換界面的時候，實現移動紅色的點 //translationX : 控件平移的距離,從右往左滑動從0開始慢慢變大，如果切換完成，百分比瞬間歸0,重新從0開始，進行下一次的百分比計算 System.out.println(positionOffset+""); //紅色點的移動距離 = 移動的百分比*20 // 0 * 20 = 0 1*20=20 //mRedDot.setTranslationX(positionOffset * 20 + position * 20); mRedDot.setTranslationX((positionOffset+ position) * 20); } //當切換狀態改變的時候調用的方法 @Override public void onPageScrollStateChanged(int state) { // TODO Auto-generated method stub } }); } /** * 創建圖片對應的imageView * i:表示創建第幾個圖片對應的imageView */ private void createImageView(int i) { ImageView imageView = new ImageView(this); imageView.setBackgroundResource(mImageIds[i]); imageViews.add(imageView); } /** * 根據圖片的張數創建點 */ private void createDot() { View view = new View(this); view.setBackgroundResource(R.drawable.shape_guide_dot); LinearLayout.LayoutParams params = new LayoutParams(10, 10); params.rightMargin=10; view.setLayoutParams(params);//將屬性設置給view對象，使用屬性生效 //添加linearlayout中展示 mLLDot.addView(view); } /**ViewPager的adapter**/ private class Myadapter extends PagerAdapter{ //設置條目個數 @Override public int getCount() { return imageViews.size(); } //view:viewpager的頁面對象 //object：instantiateItem返回對象 //判斷是否可以加載顯示界面 @Override public boolean isViewFromObject(View view, Object object) { return view == object; } //添加顯示viewpager的界面 @Override public Object instantiateItem(ViewGroup container, int position) { //根據條目的索引，獲取條目對應的imageview ImageView imageView = imageViews.get(position); //將imageView添加到viewpager中顯示 container.addView(imageView); //添加什么View對象，返回什么view對象 return imageView; } //刪除條目 //object : instantiateItem的返回值 @Override public void destroyItem(ViewGroup container, int position, Object object) { //super.destroyItem(container, position, object);拋異常的 container.removeView((View) object); } } /** * 開始體驗按鈕的點擊事件 */ public void start(View view){ //保存是否是第一次進入的標示 SharedPreferencesTool.saveBoolean(this, Constants.ISFIRSTENTER, false); //跳轉的首頁 startActivity(new Intent(this,HomeActivity.class)); //移除引導界面，避免在首頁點擊返回鍵，再回退到引導界面 finish(); }}

案例3

這里寫圖片描述

1. 要使用ViewPager，必須要創建 PagerAdapter。這里創建一個 ViewPagerAdapter來繼承PagerAdapter

public class ViewPagerAdapter extends PagerAdapter{ private List<View> views; // 我們引導頁的list private Context context; // 上下文 public ViewPagerAdapter(List<View> views, Context context) { this.views = views; this.context = context; } // 移除一個view @Override public void destroyItem(ViewGroup container, int position, Object object) { //super.destroyItem(container, position, object); container.removeView(views.get(position)); } // 加載一個view @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(views.get(position)); return views.get(position); } @Override public int getCount() { // 必寫的方法返回當前views的數量 return this.views.size(); } @Override public boolean isViewFromObject(View view, Object object) { //必寫的方法判斷當前的view是否是我們需要的對象 return (view == object); }}

2. 創建我們引導頁的視圖

<?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:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#00000000" android:persistentDrawingCache="animation" android:id="@+id/viewpage" > </android.support.v4.view.ViewPager></RelativeLayout>

3. 創建引導頁的圖片視圖 one.xml和two.xml

4. 在我們的activity中使用

public class Guide extends Activity{ private ViewPager vp; private ViewPagerAdapter vpAdapter; private List<View> views; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.guide);//加載guide.xml 視圖 this.initView(); System.out.println("onCreate"); } // 初始化view public void initView() { /* * Inflater英文意思是膨脹，在Android中應該是擴展的意思吧。 LayoutInflater的作用類似于 findViewById(), 不同點是LayoutInflater是用來找layout文件夾下的xml布局文件，并且實例化！而 findViewById()是找具體某一個xml下的具體 widget控件(如:Button,TextView等)。 * * */ LayoutInflater inflater = LayoutInflater.from(this); views = new ArrayList<View>(); views.add(inflater.inflate(R.layout.one, null)); // 加載視圖1 views.add(inflater.inflate(R.layout.two, null)); // 加載視圖2 vpAdapter = new ViewPagerAdapter(views, this); // 創建我們的 adapter vp = (ViewPager) findViewById(R.id.viewpage); vp.setAdapter(vpAdapter); // viewpage綁定 adapter }}

5. 運行就有引導頁的兩張圖片，可以來回切換。 6. 添加導航點 ① 在原來的guide.xml中添加

② 在原來的代碼的基礎上添加新的代碼

public class Guide extends Activity implements ViewPager.OnPageChangeListener{ // 實現監聽接口 private ViewPager vp; private ViewPagerAdapter vpAdapter; private List<View> views; // 導航點 private ImageView[] dots; private int[] ids = {R.id.iv1, R.id.iv2}; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.guide);//加載guide.xml 視圖 this.initView(); this.initDots(); System.out.println("onCreate"); } // 初始化view public void initView() { /* * Inflater英文意思是膨脹，在Android中應該是擴展的意思吧。 LayoutInflater的作用類似于 findViewById(), 不同點是LayoutInflater是用來找layout文件夾下的xml布局文件，并且實例化！而 findViewById()是找具體某一個xml下的具體 widget控件(如:Button,TextView等)。 * * */ LayoutInflater inflater = LayoutInflater.from(this); views = new ArrayList<View>(); views.add(inflater.inflate(R.layout.one, null)); // 加載視圖1 views.add(inflater.inflate(R.layout.two, null)); // 加載視圖2 vpAdapter = new ViewPagerAdapter(views, this); // 創建我們的 adapter vp = (ViewPager) findViewById(R.id.viewpage); vp.setAdapter(vpAdapter); // viewpage綁定 adapter vp.setOnPageChangeListener(this); // ViewPager 監聽自己 } private void initDots() { // 初始化我們的導航點 this.dots = new ImageView[this.views.size()]; for (int i=0; i<this.views.size(); i++) { dots[i] = (ImageView) this.findViewById(this.ids[i]); } } // 監聽頁面滑動的方法 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { for (int i=0; i<this.ids.length; i++) { if (position == i) { this.dots[i].setImageResource(R.drawable.login_selectd); // 變成選中的 } else { this.dots[i].setImageResource(R.drawable.login_point); //變成不選中的 } } } //選中 @Override public void onPageSelected(int position) { } // 滑動狀態改變 @Override public void onPageScrollStateChanged(int state) { }}

這里寫圖片描述 7. 添加進入按鈕

① 在two.xml中添加一個按鈕

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/imageView2" android:background="@drawable/guide2" android:layout_alignParentTop="true" android:layout_alignParentEnd="true" />  <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:orientation="horizontal" android:gravity="center" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="進入" android:id="@+id/btn_start" /> </LinearLayout></RelativeLayout>

② 監聽按鈕進去MainActivity

// 進入按鈕 this.bt = (Button) views.get(1).findViewById(R.id.btn_start); this.bt.setOnClickListener(new View.OnClickListener() { // 監聽 @Override public void onClick(View v) { Intent i = new Intent(Guide.this, MainActivity.class); // 進去MainActivity startActivity(i); finish(); //銷毀當前的Activity } });

上一篇：css中的reset樣式（含clearfix）

下一篇：vue中v-for的使用，離不開的數組