Xamarin.Android之简单的抽屉布局

0x01 前言

相信对于用过Android版QQ的，应该都不会陌生它那个向右滑动的菜单(虽说我用的是Lumia)

今天就用Xamarin.Android实现个比较简单的抽屉布局。下面直接进正题。

0x02 做个简单的抽屉布局

新建个android项目

通过NuGet安装个Xamarin.Android.Support.v4

其实呢，官网那里还用很多组件可用拿来尝试一下的。

https://components.xamarin.com/

然后修改Main.axml

 <?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.widget.DrawerLayout

         android:id="@+id/mDrawerLayout"

         android:layout_width="match_parent"

         android:layout_height="match_parent">

         <FrameLayout

             android:id="@+id/content_frame"

             android:layout_width="match_parent"

             android:layout_height="match_parent" />

         <ListView

             android:id="@+id/left_drawer"

             android:layout_width="200dp"

             android:layout_height="match_parent"

             android:layout_gravity="start"

             android:background="@android:color/holo_blue_light"

             android:choiceMode="singleChoice"

             android:divider="@android:color/transparent"

             android:dividerHeight="0dp" />

     </android.support.v4.widget.DrawerLayout>

 </RelativeLayout>

这里用了相对布局，更重要的是android.support.v4.widget.DrawerLayout

同时新建一个fragmentcontent.axml，用于呈现选中菜单的内容。

 <?xml version="1.0" encoding="utf-8"?>

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

     android:orientation="vertical"

     android:layout_width="match_parent"

     android:layout_height="match_parent">

     <TextView

         android:layout_width="match_parent"

         android:layout_height="match_parent"

         android:gravity="center"

         android:textAlignment="center"

         android:textSize="30dp"

         android:id="@+id/txtName" />

 </LinearLayout>

内容比较简单，就是显示相应菜单的文本。

然后，修改MainActivity

 using Android.App;

 using Android.OS;

 using Android.Support.V4.Widget;

 using Android.Widget;

 namespace DrawerLayoutDemo

 {

     [Activity(Label = "DrawerLayoutDemo", MainLauncher = true, Icon = "@drawable/icon")]

     public class MainActivity : Activity

     {

         private string[] _menu;

         protected override void OnCreate(Bundle bundle)

         {

             base.OnCreate(bundle);

             SetContentView(Resource.Layout.Main);

             //the menu

             _menu = new string[] { "C#", "Python", "Xamarin" };

             //listview

             var listView = FindViewById<ListView>(Resource.Id.left_drawer);

             //adapter

             listView.Adapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, _menu);

             //drawerlayout

             var drawerLayout = FindViewById<DrawerLayout>(Resource.Id.mDrawerLayout);

             //click event

             listView.ItemClick += ItemClick;

         }

         /// <summary>

         /// item click event of the listview

         /// </summary>

         /// <param name="sender"></param>

         /// <param name="e"></param>

         private void ItemClick(object sender, AdapterView.ItemClickEventArgs e)

         {

             //fragment

             Fragment fragment = new FragmentContent(_menu[e.Position]);

             //show

             var fm = FragmentManager.BeginTransaction().Replace(Resource.Id.content_frame, fragment).Commit();

         }

     }

 }

MainActivity的话主要是处理ListView的绑定以及点击事件。

新建一个FragmentContent

 using Android.App;

 using Android.OS;

 using Android.Views;

 using Android.Widget;

 namespace DrawerLayoutDemo

 {

     public class FragmentContent : Fragment

     {

         private string _text;

         public FragmentContent(string text)

         {

             _text = text;

         }

         public override void OnCreate(Bundle savedInstanceState)

         {

             base.OnCreate(savedInstanceState);

         }

         public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)

         {

             //get the view

             View view = inflater.Inflate(Resource.Layout.fragmentcontent, null);

             var txt = view.FindViewById<TextView>(Resource.Id.txtName);

             //set the text of the textview

             txt.Text = "I Love " + _text;

             return view;

         }

     }

 }

Fragment的话，就是显示把fragmentcontent.axml显示，把菜单的值显示出来。

到这里，功能是已经完成了，但是呢，是不是就能成功运行呢？

问题还是有的！！发布的时候，出现下面的问题。

1>C:\Program Files (x86)\MSBuild\Xamarin\Android\Xamarin.Android.Common.targets(348,2): error XA5208: Download failed. Please download https://dl-ssl.google.com/android/repository/android_m2repository_r29.zip and put it to the C:\Users\Catcher\AppData\Local\Xamarin\Android.Support.v4\23.3.0.0 directory.

1>C:\Program Files (x86)\MSBuild\Xamarin\Android\Xamarin.Android.Common.targets(348,2): error XA5208: Reason: One or more errors occurred.

1>C:\Program Files (x86)\MSBuild\Xamarin\Android\Xamarin.Android.Common.targets(348,2): error XA5207: Please install package: 'Xamarin.Android.Support.v4' available in SDK installer. Java library file C:\Users\Catcher\AppData\Local\Xamarin\Android.Support.v4\23.3.0.0\embedded\classes.jar doesn't exist.

1>C:\Program Files (x86)\MSBuild\Xamarin\Android\Xamarin.Android.Common.targets(348,2): error XA5208: Reason: One or more errors occurred.

下面给出解决方案。

0x03 出错处理方案

从错误我们能看出缺少东西了。

https://dl-ssl.google.com/android/repository/android_m2repository_r29.zip

其实这个文件是可以直接下载的，不用翻墙。但是在生成或是发布的时候下载会出错。

在C:\Users\Catcher\AppData\Local\Xamarin\zips下面(这个是下载之后所在的目录)

这个zip文件一直是处于无效的状态。所以只能单独下载上面的那个文件，然后把文件放在

zips那个目录下面，同时改为这个名字，即可。

然后再生成就不会出现问题了。

同时它会在C:\Users\Catcher\AppData\Local\Xamarin\Android.Support.v4\23.3.0.0目录下生成下面两个文件夹

0x04 效果图

当然，这个demo简单到不行，想弄好看点的话就自己自定义listview的样式

文字旁边个图标之类的。。然后写个好看的布局。。

最后推荐马跃大哥的博客，学Xamarin.Android可以去看看

http://www.xamarin.xyz/