【Android】11.3 屏幕旋转和场景变换过程中GridView的呈现

分类：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">
    <GridView
        android: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">
    <ImageView
        android: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" />
    <TextView
        android: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">
    <ImageView
        android:id="@+id/ch1102ImageView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:layout_marginTop="20dp" />
    <TextView
        android: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" />
    <TextView
        android: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");
            }
        }
    }
}