Xamarin.Android 引導頁

時間  2019-11-18
標籤 xamarin.android xamarin android 引導 欄目 Android 简体版
原文   原文鏈接

http://blog.csdn.net/qq1326702940/article/details/78665588html

https://www.cnblogs.com/catcher1994/p/5554456.htmlandroid

 第一次安裝的APP，通常都會瀏覽幾張引導圖片，才進入APPgit

1.界面佈局github

[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent">  
  5.   
  6.   <android.support.v4.view.ViewPager  
  7.       android:id="@+id/viewpage"  
  8.       android:layout_width="match_parent"  
  9.       android:layout_height="match_parent"></android.support.v4.view.ViewPager>  
  10.   
  11.   <LinearLayout  
  12.       android:id="@+id/point"  
  13.       android:layout_width="wrap_content"  
  14.       android:layout_height="wrap_content"  
  15.       android:orientation="horizontal"  
  16.       android:layout_alignParentBottom="true"  
  17.       android:layout_centerHorizontal="true"  
  18.       android:layout_marginBottom="24.0dp"  
  19.       android:gravity="center_horizontal"></LinearLayout>  
  20.   <TextView  
  21.       android:id="@+id/guideText"  
  22.       android:layout_width="90dp"  
  23.       android:layout_height="28dp"  
  24.       android:text="當即體驗"  
  25.       android:textColor="@color/White"  
  26.       android:background="@drawable/guide_button"  
  27.       android:layout_centerHorizontal="true"  
  28.       android:gravity="center"  
  29.       android:layout_marginBottom="20dp"  
  30.       android:layout_above="@id/point"  
  31.       android:visibility="gone"  
  32.         />  
  33. </RelativeLayout>  

>>> 其中的 LinearLayout 是爲了顯示圖片切換到第幾張顯示的白點
2.後臺app

 2.1  填充 ViewPager 控件的數據源ide

[csharp] view plain copy
  1. list = new List<View>();  
  2.             // 設置圖片佈局參數  
  3.             LinearLayout.LayoutParams ps = new LinearLayout.LayoutParams(ActionBar.LayoutParams.MatchParent, ActionBar.LayoutParams.MatchParent);  
  4.             // 建立引導圖  
  5.             for (int i = 0; i < imageView.Length; i++)  
  6.             {  
  7.                 ImageView iv = new ImageView(this);  
  8.                 iv.LayoutParameters = ps;  
  9.                 iv.SetScaleType(ImageView.ScaleType.FitXy);  
  10.                 iv.SetImageResource(imageView[i]);  
  11.                 list.Add(iv);  
  12.             }  
  13.   
  14.             // 加入適配器  
  15.             viewpage.Adapter = new GuideAdapter(list);  

>>> 其中GuideAdapter 是繼承了Android.Support.V4.View.PagerAdapter的自定義累
2.2 根據引導圖數量，建立對應數量的小圓點佈局

[csharp] view plain copy
  1. // 添加小圓點  
  2.             for (int i = 0; i < imageView.Length; i++)  
  3.             {  
  4.                 // 圓點大小適配  
  5.                 var size = Resources.GetDimensionPixelSize(Resource.Dimension.Size_18);  
  6.                 LinearLayout.LayoutParams pointParams = new LinearLayout.LayoutParams(size, size);  
  7.   
  8.                 if (i < 1)  
  9.                 {  
  10.                     pointParams.SetMargins(0, 0, 0, 0);  
  11.                 }  
  12.                 else  
  13.                 {  
  14.                     pointParams.SetMargins(10, 0, 0, 0);  
  15.                 }  
  16.   
  17.                 ImageView imageView = new ImageView(this);  
  18.                 imageView.LayoutParameters = pointParams;  
  19.   
  20.                 imageView.SetBackgroundResource(Resource.Drawable.NoPress);  
  21.                 linearLayout_Point.AddView(imageView);  
  22.             }  
  23.   
  24.             // 設置默認選中第一張圓點  
  25.             linearLayout_Point.GetChildAt(0).SetBackgroundResource(Resource.Drawable.Press);  

3. ViewPager 的 ViewPager.IOnPageChangeListener 事件處理post

[csharp] view plain copy
  1. public void OnPageScrolled(int position, float positionOffset, int positionOffsetPixels)  
  2.         {  
  3.         }  
  4.   
  5.         public void OnPageScrollStateChanged(int state)  
  6.         {  
  7.         }  
  8.         /// <summary>  
  9.         /// 滑動到第幾張圖片  
  10.         /// </summary>  
  11.         /// <param name="position"></param>  
  12.         public void OnPageSelected(int position)  
  13.         {  
  14.             for (int i = 0; i < imageView.Length; i++)  
  15.             {  
  16.                 if (i == position)  
  17.                 {  
  18.                     linearLayout_Point.GetChildAt(position).SetBackgroundResource(Resource.Drawable.Press);  
  19.                 }  
  20.                 else  
  21.                 {  
  22.                     linearLayout_Point.GetChildAt(i).SetBackgroundResource(Resource.Drawable.NoPress);  
  23.                 }  
  24.             }  
  25.   
  26.             // 滑動到最後一張圖，顯示按鈕  
  27.             if (position == imageView.Length - 1)  
  28.             {  
  29.                 tv.Visibility = ViewStates.Visible;  
  30.             }  
  31.             else  
  32.             {  
  33.                 tv.Visibility = ViewStates.Gone;  
  34.             }  
  35.         }  


4.項目地址：https://github.com/harrylsp/Guideui

Xamarin.Android之引導頁的簡單製做

0x01 前言

 　　對於如今大部分的APP，第一次打開剛安裝或更新安裝的APP都會有幾個引導界面，一般這幾個引導頁是告訴用戶this

APP有些什麼功能或者修改了什麼bug、新增了什麼功能等等等。

　　下面就用Xamarin.Android來簡單實現一下。主要用到的是ViewPager，固然也就離不開Xamarin.Android.Support.v4
若是遇到不能編譯的問題，能夠參考Xamarin.Android之簡單的抽屜佈局的出錯處理方案。

 0x02 頁面佈局編寫

新建一個Android項目

添加幾個簡單的佈局頁面。

首先是添加個啓動頁面，splash.axml

複製代碼 
 1 <?xml version="1.0" encoding="utf-8"?>  2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  3  xmlns:tools="http://schemas.android.com/tools"  4  android:layout_width="match_parent"  5  android:layout_height="match_parent">  6 <android.support.v4.view.ViewPager  7 android:id="@+id/viewpager"  8  android:layout_width="match_parent"  9  android:layout_height="match_parent" /> 10 <LinearLayout 11 android:id="@+id/ll" 12  android:orientation="horizontal" 13  android:layout_width="wrap_content" 14  android:layout_height="wrap_content" 15  android:layout_marginBottom="24.0dip" 16  android:layout_alignParentBottom="true" 17  android:layout_centerHorizontal="true"> 18 <ImageView 19 android:layout_width="wrap_content" 20  android:layout_height="wrap_content" 21  android:layout_gravity="center_vertical" 22  android:clickable="true" 23  android:padding="15.0dip" 24  android:src="@drawable/dot" /> 25 <ImageView 26 android:layout_width="wrap_content" 27  android:layout_height="wrap_content" 28  android:layout_gravity="center_vertical" 29  android:clickable="true" 30  android:padding="15.0dip" 31  android:src="@drawable/dot" /> 32 <ImageView 33 android:layout_width="wrap_content" 34  android:layout_height="wrap_content" 35  android:layout_gravity="center_vertical" 36  android:clickable="true" 37  android:padding="15.0dip" 38  android:src="@drawable/dot" /> 39 </LinearLayout> 40 </RelativeLayout>
複製代碼

引導頁，用了一個ViewPager，下面的線性佈局是用來存放的三個點就是當前所在的引導頁面。

用到的ImageView有個src指向drawable下面的dot.xml。內容以下：

複製代碼 
1 <?xml version="1.0" encoding="utf-8" ?> 2 <selector 3 xmlns:android="http://schemas.android.com/apk/res/android"> 4 <item android:state_enabled="true" android:drawable="@drawable/dark_dot" /> 5 <item android:state_enabled="false" android:drawable="@drawable/white_dot" /> 6 </selector>
複製代碼


而後是3個引導頁的具體內容。

guide_first.axml

複製代碼 
 1 <?xml version="1.0" encoding="utf-8"?>  2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  3  android:layout_width="match_parent"  4  android:layout_height="match_parent"  5  android:orientation="vertical">  6 <TextView  7 android:layout_width="match_parent"  8  android:layout_height="match_parent"  9  android:gravity="center" 10  android:text="guide---first" 11  android:textSize="30sp" /> 12 </LinearLayout>
複製代碼

guide_second.axml

複製代碼 
 1 <?xml version="1.0" encoding="utf-8"?>  2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  3  android:layout_width="match_parent"  4  android:layout_height="match_parent"  5  android:orientation="vertical">  6 <TextView  7 android:layout_width="match_parent"  8  android:layout_height="match_parent"  9  android:gravity="center" 10  android:text="guide--second" 11  android:textSize="30sp" /> 12 </LinearLayout>
複製代碼

guide_third.axml

複製代碼 
 1 <?xml version="1.0" encoding="utf-8"?>  2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  3  android:layout_width="match_parent"  4  android:layout_height="match_parent"  5  android:orientation="vertical">  6 <TextView  7 android:layout_width="match_parent"  8  android:layout_height="wrap_content"  9  android:layout_marginTop="250dp" 10  android:gravity="center" 11  android:text="guide--third" 12  android:textSize="30sp" /> 13 <Button 14 android:id="@+id/startBtn" 15  android:layout_width="wrap_content" 16  android:layout_height="wrap_content" 17  android:layout_alignParentBottom="true" 18  android:layout_centerHorizontal="true" 19  android:text="begin now" 20  android:layout_gravity="center" 21  android:layout_marginBottom="55dp" /> 22 </LinearLayout>
複製代碼

這裏沒有用圖片來展現，就簡單的用了文字，沒有設計師設計，so....隨意一點。

最後是Main.axml

複製代碼 
 1 <?xml version="1.0" encoding="utf-8"?>  2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  3  android:layout_width="fill_parent"  4  android:layout_height="fill_parent">  5 <TextView  6 android:layout_width="fill_parent"  7  android:layout_height="wrap_content"  8  android:gravity="center"  9  android:layout_gravity="center_vertical" 10  android:text="the main page" 11  android:textSize="30sp" /> 12 </LinearLayout>
複製代碼

0x03 Activity的編寫

首先SplashActivity

複製代碼 
 1 using Android.App;  2 using Android.Content;  3 using Android.Content.PM;  4 using Android.OS;  5 using Android.Widget;  6 namespace GuideDemo  7 {  8 [Activity(Label = "GuideDemo", MainLauncher = true, Icon = "@drawable/icon")]  9 public class SplashActivity : Activity 10  { 11 protected override void OnCreate(Bundle savedInstanceState) 12  { 13 base.OnCreate(savedInstanceState); 14  SetContentView(Resource.Layout.splash); 15 //version's infomation 16 var version = PackageManager.GetPackageInfo(this.PackageName, PackageInfoFlags.MatchAll).VersionName; 17 var tvVersion = FindViewById<TextView>(Resource.Id.tv_version); 18 tvVersion.Text = "Version " + version; 19 //get infomation from shared preferences 20 var sp = GetSharedPreferences("app_setting", FileCreationMode.Private); 21 new Handler().PostDelayed(() => 22  { 23  Intent intent; 24 //first or not 25 if (sp.GetString("version", "") != version) 26  { 27 intent = new Intent(this, typeof(GuideActivity)); 28  } 29 else 30  { 31 intent = new Intent(this, typeof(MainActivity)); 32  } 33  StartActivity(intent); 34 this.Finish(); 35 }, 1000); 36  } 37  } 38 }
複製代碼

把是不是第一次開啓信息存放到sharepreferences，我這裏主要是經過版本號來控制。

而後是GuideActivity

複製代碼 
 1 using Android.App;  2 using Android.Content;  3 using Android.Content.PM;  4 using Android.OS;  5 using Android.Support.V4.View;  6 using Android.Views;  7 using Android.Widget;  8 using System;  9 using System.Collections.Generic; 10 using static Android.Support.V4.View.ViewPager; 11 namespace GuideDemo 12 { 13 [Activity(Label = "GuideActivity")] 14 public class GuideActivity : Activity 15  { 16 private ViewPager viewPager; 17 18 private List<View> views; 19 20 private View view1, view2, view3; 21 22 private Button btnStart; 23 24 private ImageView[] dots; 25 26 private int currentIndex; 27 private LinearLayout ll; 28 protected override void OnCreate(Bundle savedInstanceState) 29  { 30 base.OnCreate(savedInstanceState); 31  SetContentView(Resource.Layout.activity_guide); 32 viewPager = FindViewById<ViewPager>(Resource.Id.viewpager); 33 //the layout 34 LayoutInflater mLi = LayoutInflater.From(this); 35 view1 = mLi.Inflate(Resource.Layout.guide_first, null); 36 view2 = mLi.Inflate(Resource.Layout.guide_second, null); 37 view3 = mLi.Inflate(Resource.Layout.guide_third, null); 38 views = new List<View>(); 39  views.Add(view1); 40  views.Add(view2); 41  views.Add(view3); 42 43 //the adapter 44 viewPager.Adapter = new ViewPagerAdapter(views); 45 //page selected 46 viewPager.PageSelected += PageSelected; 47 ll = FindViewById<LinearLayout>(Resource.Id.ll); 48 //the dot infomation 49 dots = new ImageView[3]; 50 for (int i = 0; i < views.Count; i++) 51  { 52 dots[i] = (ImageView)ll.GetChildAt(i); 53 dots[i].Enabled = false; 54  } 55 dots[0].Enabled = true; 56 //the button 57 btnStart = view3.FindViewById<Button>(Resource.Id.startBtn); 58 btnStart.Click += Start; 59  } 60 /// <summary> 61 /// page selected 62 /// </summary> 63 /// <param name="sender"></param> 64 /// <param name="e"></param> 65 private void PageSelected(object sender, PageSelectedEventArgs e) 66  { 67 ll = FindViewById<LinearLayout>(Resource.Id.ll); 68 for (int i = 0; i < views.Count; i++) 69  { 70 dots[i] = (ImageView)ll.GetChildAt(i); 71 dots[i].Enabled = false; 72 } 73 dots[e.Position].Enabled = true; 74 } 75 /// <summary> 76 /// start the main page 77 /// </summary> 78 /// <param name="sender"></param> 79 /// <param name="e"></param> 80 private void Start(object sender, EventArgs e) 81 { 82 //get infomation from shared preferences 83 var sp = GetSharedPreferences("app_setting", FileCreationMode.Private); 84 //the editor 85 var editor = sp.Edit(); 86 //update 87 editor.PutString("version", PackageManager.GetPackageInfo(this.PackageName, PackageInfoFlags.MatchAll).VersionName).Commit() ; 88 StartActivity(typeof(MainActivity)); 89 this.Finish(); 90 } 91 } 92 }
複製代碼

主要是ViewPager處理、頁面切換點的處理以及begin now 按鈕的點擊事件。

其中有個ViewPagerAdapter要本身實現

複製代碼 
 1 using Android.Support.V4.View;  2 using Android.Views;  3 using System.Collections.Generic;  4 namespace GuideDemo  5 {  6 internal class ViewPagerAdapter : PagerAdapter  7  {  8 private List<View> views;  9 public ViewPagerAdapter(List<View> views) 10  { 11 this.views = views; 12  } 13 public override int Count 14  { 15 get 16  { 17 if (views != null) 18  { 19 return views.Count; 20  } 21 else 22  { 23 return 0; 24  } 25  } 26  } 27 public override bool IsViewFromObject(View view, Java.Lang.Object objectValue) 28  { 29 return view== objectValue; 30  } 31 public override void DestroyItem(ViewGroup container, int position, Java.Lang.Object objectValue) 32  { 33  container.RemoveView(views[position]); 34  } 35 public override Java.Lang.Object InstantiateItem(ViewGroup container, int position) 36  { 37 container.AddView(views[position], 0); 38 return views[position]; 39  } 40  } 41 }
複製代碼

最後是MainActivity

複製代碼 
 1 using Android.App;  2 using Android.OS;  3 namespace GuideDemo  4 {  5 [Activity(Label = "GuideDemo")]  6 public class MainActivity : Activity  7  {  8 protected override void OnCreate(Bundle bundle)  9  { 10 base.OnCreate(bundle); 11 12  SetContentView(Resource.Layout.Main); 13  } 14  } 15 }
複製代碼

到這裏就OK了，下面就來看看效果。

0x04 效果圖

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程