【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");

            }

        }

    }

}

巴特西

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

一、简介

二、示例—ch1103GridViewSceneTransition

最新文章

热门文章