分类:C#、Android、VS2015;
创建日期:2016-02-21
一、简介
实际上,对于布局文件中的View来说,大多数情况下,Android都会自动保存这些状态,并不需要我们都去处理它。这一节仍以GridView为例(第10章已经介绍过其基本用法了),说明屏幕旋转以及场景切换过程中用GridView呈现的图像是如何自动变换的。
本节主要关注下面的问题:
(1)如何通过GridView显示多幅图像。
(2)如何使用Activity从一个活动切换到另一个活动,即利用Activity实现场景转换的功能,将GridView网格图像的Acivity过渡到大图像的Activity。
(3)当用户触摸或单击GridView中的每幅图片时,如何立即切换到该图片对应的详细信息描述页;当用户单击屏幕下方左侧的那个【Back】按钮时,又返回到用GridView显示多幅图像的页面。
二、示例—ch1103GridViewSceneTransition
1、运行截图
下面左图为在GridView显示两列图像的效果,右图为单击【3、穿衣的小狗】后显示的效果。按右图下方左侧的【Back】按钮又返回到左图的界面,可再次单击另一幅图。
本人不想再去找其他的图片了,所以仍然用前面章节示例中的图来演示。当然,你也可以将例子中这个两列的图改为3列、4列、……,同时将界面改为任何你希望实现的功能。
2、实现步骤
(1)添加ch1103_GridViewSceneTransitionMain.axml文件
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical"><GridViewandroid:id="@+id/gridview1"android:layout_width="wrap_content"android:layout_height="match_parent"android:gravity="center_horizontal"android:horizontalSpacing="2dp"android:numColumns="2"android:stretchMode="columnWidth"android:verticalSpacing="2dp"android:layout_gravity="center"android:minWidth="25dp"android:minHeight="25dp"android:drawSelectorOnTop="true"android:layout_marginLeft="50dp"android:layout_marginRight="50dp"android:layout_marginTop="20dp"android:layout_marginBottom="20dp" /> </LinearLayout>
(2)添加ch1103_Item.axml文件
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="wrap_content"android:layout_height="wrap_content"android:outlineProvider="bounds"><ImageViewandroid:id="@+id/ch1102ImageViewItem"android:layout_width="90dp"android:layout_height="90dp"android:scaleType="centerCrop"android:minHeight="25dp"android:minWidth="25dp"android:layout_gravity="center_horizontal" /><TextViewandroid:id="@+id/ch1102TextViewItemTitle"android:layout_width="wrap_content"android:layout_height="wrap_content"android:maxLines="1"android:layout_gravity="center_horizontal"android:minWidth="25dp"android:textSize="10dp" /> </LinearLayout>
(3)添加ch1103_Detail.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"><ImageViewandroid:id="@+id/ch1102ImageView1"android:layout_width="match_parent"android:layout_height="wrap_content"android:scaleType="centerCrop"android:layout_marginTop="20dp" /><TextViewandroid:id="@+id/ch1102TextViewTitle"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="10dp"android:maxLines="1"android:layout_gravity="center_horizontal"android:textColor="#FF0000" /><TextViewandroid:id="@+id/ch1102TextViewDesc"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="20dp"android:padding="16dp" /> </LinearLayout>
(4)添加ch1103GridViewSceneTransitionMain.cs文件
using System.Collections.Generic; using Android.App; using Android.Content; using Android.OS; using Android.Views; using Android.Widget;namespace MyDemos.SrcDemos {[Activity(Label = "【例11-3】场景转换")]public class ch1103GridViewSceneTransitionMain : Activity{protected override void OnCreate(Bundle savedInstanceState){base.OnCreate(savedInstanceState);SetContentView(Resource.Layout.ch1103_GridViewSceneTransitionMain);var gridview = FindViewById<GridView>(Resource.Id.gridview1);var adapter = new ch1102MyImageAdapte(this);gridview.Adapter = adapter;gridview.ItemClick += (s, e) =>{var item = adapter[e.Position];Intent intent = new Intent(this, typeof(ch1103DetailActivity));intent.PutExtra("id", item.ImageId);intent.PutExtra("title", item.Title);intent.PutExtra("desc", item.Desc);StartActivity(intent);};}}/// <summary>/// 这里仅以小狗图为例说明基本用法,这样做主要是为了不让例子过于复杂,/// 实际上,你可以将小狗图改为景点图、大楼图、交通图、功能模块图、……等。/// </summary>class ch1103Item{/// <summary>/// 图片ID/// </summary>public int ImageId { get; set; }/// <summary>/// 图片的标题/// </summary>public string Title { get; set; }/// <summary>/// 对该图片的描述/// </summary>public string Desc { get; set; }}class ch1102MyImageAdapte : BaseAdapter<ch1103Item>{Activity context;public ch1102MyImageAdapte(Activity context){this.context = context;}private static List<ch1103Item> items = new List<ch1103Item>(){new ch1103Item {ImageId=Resource.Drawable.ch05sample_0,Title="1、迷茫的小狗", Desc ="哇,迷路了,该往哪走呢?" },new ch1103Item {ImageId=Resource.Drawable.ch05sample_1,Title="2、耍赖的小狗", Desc ="你就是躺到那也不让你吃。" },new ch1103Item {ImageId=Resource.Drawable.ch05sample_2,Title="3、穿衣的小狗", Desc ="过年了,给小狗穿个花衣服。" },new ch1103Item {ImageId=Resource.Drawable.ch05sample_3,Title="4、小狗和女友", Desc ="狗狗,后面是你女朋友吗?" },new ch1103Item {ImageId=Resource.Drawable.ch05sample_4,Title="5、悲催的小狗", Desc ="这个图片很悲催。" },new ch1103Item {ImageId=Resource.Drawable.ch05sample_5,Title="6、看门的小狗", Desc ="好好看门,别让贼进来了。" },new ch1103Item {ImageId=Resource.Drawable.ch05sample_6,Title="7、卖萌的小狗", Desc ="狗狗的沙发很给力啊。" },new ch1103Item {ImageId=Resource.Drawable.ch05sample_7,Title="8、愤怒的小狗", Desc ="谁惹你了,眼瞪这么大。" },};public override ch1103Item this[int position]{get { return items[position]; }}public override int Count{get { return items.Count; }}public override long GetItemId(int position){return items[position].ImageId;}public override View GetView(int position, View convertView, ViewGroup parent){if (convertView == null){convertView = context.LayoutInflater.Inflate(Resource.Layout.ch1103_Item, parent, false);}ch1103Item item = this[position];ImageView imageView = convertView.FindViewById<ImageView>(Resource.Id.ch1102ImageViewItem);imageView.SetImageResource(item.ImageId);TextView title = convertView.FindViewById<TextView>(Resource.Id.ch1102TextViewItemTitle);title.Text = item.Title;return convertView;}} }
(5)添加ch1103DetailActivity.cs文件
using Android.App; using Android.Content; using Android.OS; using Android.Widget;namespace MyDemos.SrcDemos {[Activity(Label = "【例11-3】场景转换")]public class ch1103DetailActivity : Activity{protected override void OnCreate(Bundle savedInstanceState){base.OnCreate(savedInstanceState);SetContentView(Resource.Layout.ch1103_Detail);int imgId = Intent.GetIntExtra("id", -1);if (imgId != -1){var imageView = FindViewById<ImageView>(Resource.Id.ch1102ImageView1);imageView.SetImageResource(imgId);var title = FindViewById<TextView>(Resource.Id.ch1102TextViewTitle);title.Text = Intent.GetStringExtra("title");var desc = FindViewById<TextView>(Resource.Id.ch1102TextViewDesc);desc.Text = Intent.GetStringExtra("desc");}}} }