Xamarin.Android Binding 源自github第三方庫的綁定(中級教學)----aar文件
今天來個稍微復雜一點的源自github的android第三方庫:CarouselView
(今天我們依然不用在metadata.xml裏面寫代碼，雖然在build時不會有error出現，但是會有煩人的warning出現，導致我們在dll裏面找不到我們需要使用的class)
今天我們就是要解決這個問題，這個問題源自這個項目依賴的庫
效果圖:
今天我們的任務就是把它從Java整成C#,嘿嘿嘿嘿!!!!
CarouselView的Github地址在這裏:https://github.com/sayyam/carouselview
1.首先創建項目: 模板--->Android---->單一視圖應用(Android)--->名稱:CarouselViewProject
自己腦補圖片0.0
2.CarouselViewProject--->引用（右鍵）--->Generate Xamarin.Android Bindings via gradle
從GitHub項目得到Gradle:compile ‘com.synnapps:carouselview:0.1.4‘
ok-->ok
默認的只勾選第一個aar文件:carouselview-0.1.4.aar剩下的就是這個aar所依賴的jar和aar文件.
3.重新生成項目
你會驚喜的發現，出現不少warning
warning : Couldn‘t load class com/synnapps/carouselview
什麽鬼，這個核心的類，居然無法加載.
4.復制dll文件,然後刪除掉自動添加的 綁定庫項目 :Binding_CarouselView, 然後在CarouselViewProject項目裏引用這個dll文件.
在引用裏，雙擊Binding_CarouselView，在對象瀏覽器裏，查看Binding_CarouselView，你會發現一件事情，xamarin你欺騙我，我的類呢0.0？？？？？
===============================================================================================
好吧，以上是假教學，下面正式開始今天的教學
===============================================================================================
自己腦補假教學的1.2步驟，我們直接從第3步開始. 如何解決這類waring呢？--warning : Couldn‘t load class com/synnapps/carouselview/CarouselView$1 : java.lang.NoClassDefFoundError: android/support/v4/view/ViewPager$OnPageChangeListener 其實這是一個依賴的問題，你註意到第三張圖片裏有好多未打勾的aar，jar文件了嗎？這就是這個庫所依賴的文件. 但是我們並不會打勾這些aar，jar文件，那我們如何引用這些庫呢？ 3. 其實這些都是android文件，而且Xamarin官方已經幫我們做好了dll文件，我們只需要在解決方案裏，為 app，android binding library兩個項目添加上這些nuget包即可，同時需要註意nuget包的版本和圖三匹配（盡量做到匹配） Nuget包: Xamarin.Android.Support.v7.RecyclerView (25.1.0版本)Xamarin.Android.Support.v7.AppCompat(25.1.0版本)
Xamarin.Android.Support.v4(25.1.0版本)
Xamarin.Android.Support.Annotations（好像並沒有25.1.0版本，直接選擇最新穩定版即可25.4.0.2）
雖然我們只選擇了這四個包安裝，但是因為nuget包之間有依賴關系，最終我們會安裝上11個nuget包.
4.Build整個解決方案,取走Binding_CarouselView的Binding_CarouselView.dll文件----（文件地址CarouselViewProject\CarouselViewProject\AndroidBindings\Binding_CarouselView\bin\Debug）
(保存好這個dll)
5.先刪除Binding_CarouselView項目，然後在CarouselViewProject項目的引用裏添加剛才我們保存的Binding_CarouselView.dll
6.一切準備就緒，讓我們開始使用這個 Com.Synnapps.Carouselview吧
讓我們先看一下github的介紹，或者去sample項目瀏覽一下Java是怎麽做的，然後我們要把它的代碼變成C#!
如同周伯通，左手畫方，右手畫圓.
Github上面的代碼，作者是這麽寫的:
Java版本
Usage Include following code in your layout:
<com.synnapps.carouselview.CarouselView android:id="@+id/carouselView" android:layout_width="match_parent" android:layout_height="200dp" app:fillColor="#FFFFFFFF" app:pageColor="#00000000" app:radius="6dp" app:slideInterval="3000" app:strokeColor="#FF777777" app:strokeWidth="1dp"/>
Include following code in your activity: public class SampleCarouselViewActivity extends AppCompatActivity { CarouselView carouselView; int[] sampleImages = {R.drawable.image_1, R.drawable.image_2, R.drawable.image_3, R.drawable.image_4, R.drawable.image_5}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_sample_carousel_view); carouselView = (CarouselView) findViewById(R.id.carouselView); carouselView.setPageCount(sampleImages.length); carouselView.setImageListener(imageListener); } ImageListener imageListener = new ImageListener() { @Override public void setImageForPosition(int position, ImageView imageView) { imageView.setImageResource(sampleImages[position]); } }; }
C#版本
一.我們先找到5張圖片放到Resources\drawable文件夾裏面.(我直接使用github上面的5張圖片)
二.在layout/Main.axml 裏面填寫以下xml代碼
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <com.synnapps.carouselview.CarouselView android:id="@+id/myCarouselView" android:layout_width="match_parent" android:layout_height="200dp" app:fillColor="#FFFFFFFF" app:pageColor="#00000000" app:radius="6dp" app:slideInterval="3000" app:strokeColor="#FF777777" app:strokeWidth="1dp" /> </LinearLayout>
三.在MainActivity.cs填寫以下代碼
using System; using Android.App; using Android.Content; using Android.Runtime; using Android.Views; using Android.Widget; using Android.OS; using Com.Synnapps.Carouselview; namespace CarouselViewProject { [Activity(Label = "CarouselViewProject", MainLauncher = true, Icon = "@drawable/icon")] public class MainActivity : Activity, IImageListener { CarouselView myCarouselView; int[] sampleImages = { Resource.Drawable.image_1, Resource.Drawable.image_2, Resource.Drawable.image_3, Resource.Drawable.image_4, Resource.Drawable.image_5 }; public void SetImageForPosition(int p0, ImageView p1) { p1.SetImageResource(sampleImages[p0]); } protected override void OnCreate(Bundle bundle) { base.OnCreate(bundle); // Set our view from the "main" layout resource SetContentView(Resource.Layout.Main); myCarouselView = (CarouselView)FindViewById<CarouselView>(Resource.Id.myCarouselView); myCarouselView.PageCount = sampleImages.Length; myCarouselView.SetImageListener(this); } } }
四.運行，效果圖如下
====================================================================================================
====================================================================================================
讓我們接著跟著github作者的步驟走，提升以下難度,這次我們要自定義輪播嘍,在圖片左上角 增加文字和點擊事件
====================================================================================================
====================================================================================================
Java版本:
If you want to add custom view, implement ViewListener.
public class SampleCarouselViewActivity extends AppCompatActivity { CarouselView customCarouselView; int NUMBER_OF_PAGES = 5; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_sample_carousel_view); customCarouselView = (CarouselView) findViewById(R.id.customCarouselView); customCarouselView.setPageCount(NUMBER_OF_PAGES); // set ViewListener for custom view customCarouselView.setViewListener(viewListener); } ViewListener viewListener = new ViewListener() { @Override public View setViewForPosition(int position) { View customView = getLayoutInflater().inflate(R.layout.view_custom, null); //set view attributes here return customView; } };
If you‘d like to receive touch events for each image
customCarouselView.setImageClickListener(new ImageClickListener() { @Override public void onClick(int position) { Toast.makeText(SampleCarouselViewActivity.this, "Clicked item: "+ position, Toast.LENGTH_SHORT).show(); } });
C#版本:
一.layout,右鍵，添加，新建項，Android布局,view_custom.axml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center"> <ImageView android:id="@+id/fruitImageView" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scaleType="centerCrop" /> <TextView android:id="@+id/labelTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginTop="30dp" android:textSize="24sp" android:paddingLeft="10dp" android:paddingRight="10dp" android:paddingTop="5dp" android:paddingBottom="5dp" android:background="#44FFFFFF" android:fontFamily="sans-serif-thin" android:textColor="@android:color/white"/> </RelativeLayout>
二.修改Main.axml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <com.synnapps.carouselview.CarouselView android:id="@+id/customCarouselView" android:layout_width="match_parent" android:layout_height="200dp" app:fillColor="#FFFFFFFF" app:pageColor="#00000000" app:radius="6dp" app:slideInterval="3000" app:strokeColor="#FF777777" app:strokeWidth="1dp" /> </LinearLayout>
三.修改MainActivity.cs
using System; using Android.App; using Android.Content; using Android.Runtime; using Android.Views; using Android.Widget; using Android.OS; using Com.Synnapps.Carouselview; namespace CarouselViewProject { [Activity(Label = "CarouselViewProject", MainLauncher = true, Icon = "@drawable/icon")] public class MainActivity : Activity, IViewListener, IImageClickListener { CarouselView customCarouselView; int[] sampleImages = { Resource.Drawable.image_1, Resource.Drawable.image_2, Resource.Drawable.image_3, Resource.Drawable.image_4, Resource.Drawable.image_5 }; String[] sampleTitles = { "Orange", "Grapes", "Strawberry", "Cherry", "Apricot" }; public void OnClick(int p0) { Toast.MakeText(ApplicationContext, sampleTitles[p0], ToastLength.Long).Show(); } public View SetViewForPosition(int p0) { View customView = this.LayoutInflater.Inflate(Resource.Layout.view_custom, null); TextView labelTextView = (TextView)customView.FindViewById(Resource.Id.labelTextView); ImageView fruitImageView = (ImageView)customView.FindViewById(Resource.Id.fruitImageView); labelTextView.Text=sampleTitles[p0]; fruitImageView.SetImageResource(sampleImages[p0]); return customView; } protected override void OnCreate(Bundle bundle) { base.OnCreate(bundle); // Set our view from the "main" layout resource SetContentView(Resource.Layout.Main); customCarouselView = (CarouselView)FindViewById<CarouselView>(Resource.Id.customCarouselView); customCarouselView.PageCount = sampleImages.Length; customCarouselView.SetViewListener(this); customCarouselView.SetImageClickListener(this); } } }
效果圖:
再見0.0
Xamarin.Android Binding 源自github第三方庫的綁定(中級教學)----aar文件