码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2016-02-21 10:17:35      阅读:347      评论:0      收藏:0      [点我收藏+]

标签:

分类: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的呈现

标签:

原文地址:http://www.cnblogs.com/rainmj/p/5204445.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!