AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

我的Android进阶之旅------>Android之Gallery和GridView两种方式与ImageSwitcher实现带预览的和幻灯片方式的两种图片浏览器

2013-04-21 1287
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 一、简介 a.GridView（网络视图）的功能和用法 b.ImageSwitcher（图形切换器）的功能和用法 c.Gallery（画廊视图）的功能和用法 二、通过一个实例来学习Gallery、GridView和I...

一、简介

a.GridView（网络视图）的功能和用法





b.ImageSwitcher（图形切换器）的功能和用法




c.Gallery（画廊视图）的功能和用法



二、通过一个实例来学习Gallery、GridView和ImageSwitcher

step1:新建一个项目MyGridViewAndGallery

                                          


三:我们先写用GridView和ImageSwitcher实现

step1:设计所需的UI界面

a.   /layout/gridview.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    >
   <GridView  
	    android:id="@+id/grid01"
	    android:layout_width="fill_parent" 
	    android:layout_height="wrap_content" 
	    android:horizontalSpacing="2pt"
	    android:verticalSpacing="2pt"
	    android:numColumns="4"
	    android:gravity="center"
    />
    <ImageSwitcher 
	    android:id="@+id/switcher"
	    android:layout_width="match_parent"
	    android:layout_height="match_parent"
	    android:layout_gravity="center_horizontal"
    />
</LinearLayout>

b.  每个单元格的UI界面     /layout/cell.xml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
 
  <ImageView
  		android:id="@+id/image1"
 		android:layout_width="50dp"
	    android:layout_height="50dp"
	    android:layout_gravity="center_horizontal"/>
</LinearLayout>

step2:MyGridViewActivity.java 

package cn.roco.gridview;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.GridView;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.SimpleAdapter;
import android.widget.ViewSwitcher.ViewFactory;

public class MyGridViewActivity extends Activity {
	
	int[] imageIDs = new int[] { R.drawable.beautiful_001,
			R.drawable.beautiful_002, R.drawable.beautiful_003,
			R.drawable.beautiful_004, R.drawable.beautiful_005,
			R.drawable.beautiful_006, R.drawable.beautiful_007,
			R.drawable.beautiful_008, R.drawable.beautiful_009,
			R.drawable.beautiful_010, R.drawable.beautiful_011,
			R.drawable.beautiful_012, R.drawable.beautiful_013 };

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.gridview);

		List<Map<String, Object>> listItems = new ArrayList<Map<String, Object>>();
		for (int i = 0; i < imageIDs.length; i++) {
			Map<String, Object> listItem = new HashMap<String, Object>();
			listItem.put("image", imageIDs[i]);
			listItems.add(listItem);
		}
		//获取显示拖的ImageSwitcher
		final ImageSwitcher switcher = (ImageSwitcher) findViewById(R.id.switcher);
		// 设置图片切换的动画效果
		switcher.setInAnimation(AnimationUtils.loadAnimation(this,
				android.R.anim.fade_in));
		switcher.setOutAnimation(AnimationUtils.loadAnimation(this,
				android.R.anim.fade_out));

		// 为ImageSwitch设置图片切换的图片
		switcher.setFactory(new ViewFactory() {
			@Override
			public View makeView() {
				ImageView imageView = new ImageView(MyGridViewActivity.this);
				imageView.setBackgroundColor(0xff0000);
				imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
				imageView.setLayoutParams(new ImageSwitcher.LayoutParams(
						LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
				return imageView;
			}
		});
		//创建一个SimpleAdapter
		//使用    /layout/cell.xml作为界面布局
		SimpleAdapter simpleAdapter = new SimpleAdapter(this, listItems,
				R.layout.cell, new String[] { "image" },
				new int[] { R.id.image1 });
		GridView gridView = (GridView) findViewById(R.id.grid01);
		//为 GridView设置 simpleAdapter
		gridView.setAdapter(simpleAdapter);

		// 处理被选中事件
		gridView.setOnItemSelectedListener(new OnItemSelectedListener() {
			@Override
			public void onItemSelected(AdapterView<?> parent, View view,
					int position, long id) {
				// 显示当前被选中的图片
				switcher.setImageResource(imageIDs[position % imageIDs.length]);
			}

			@Override
			public void onNothingSelected(AdapterView<?> parent) {
			}
		});
		// 处理被点击事件
		gridView.setOnItemClickListener(new OnItemClickListener() {
			@Override
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {
				// 显示被单击的图片
				switcher.setImageResource(imageIDs[position % imageIDs.length]);
			}
		});
	}
}

四:用Gallery和ImageSwitch实现幻灯片方式的图片浏览器

step1:设计UI界面   /layout/gallery.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    >
    <ImageSwitcher 
	    android:id="@+id/gallerySwitcher"
	    android:layout_width="320dp"
	    android:layout_height="320dp"
    />
    
    <Gallery android:id="@+id/gallery"
    	android:layout_width="fill_parent"
    	android:layout_height="wrap_content"
    	android:layout_marginTop="25dp"
    	android:unselectedAlpha="0.6"
    	android:spacing="3dp" 
    />
</LinearLayout>

step2:MyGralleryActivity.java 

package cn.roco.gridview;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher.ViewFactory;

public class MyGralleryActivity extends Activity {

	int[] imageIDs = new int[] { R.drawable.beautiful_001,
			R.drawable.beautiful_002, R.drawable.beautiful_003,
			R.drawable.beautiful_004, R.drawable.beautiful_005,
			R.drawable.beautiful_006, R.drawable.beautiful_007,
			R.drawable.beautiful_008, R.drawable.beautiful_009,
			R.drawable.beautiful_010, R.drawable.beautiful_011,
			R.drawable.beautiful_012, R.drawable.beautiful_013 };

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.gallery);
		final Gallery gallery = (Gallery) findViewById(R.id.gallery);
		final ImageSwitcher switcher = (ImageSwitcher) findViewById(R.id.gallerySwitcher);
		// 为ImageSwitch设置图片切换的图片
		switcher.setFactory(new ViewFactory() {
			@Override
			public View makeView() {
				ImageView imageView = new ImageView(MyGralleryActivity.this);
				imageView.setBackgroundColor(0xff0000);
				imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
				imageView.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.WRAP_CONTENT,
						LayoutParams.WRAP_CONTENT));
				return imageView;
			}
		});
		// 设置图片切换的动画效果
		switcher.setInAnimation(AnimationUtils.loadAnimation(this,
				android.R.anim.fade_in));
		switcher.setOutAnimation(AnimationUtils.loadAnimation(this,
				android.R.anim.fade_out));
		//创建一个 BaseAdapter对象，该对象负责提供 Gallery所显示的每张图片
		BaseAdapter adapter = new BaseAdapter() {
			@Override
			public View getView(int position, View convertView, ViewGroup parent) {
				ImageView imageView = new ImageView(MyGralleryActivity.this);
				imageView
						.setImageResource(imageIDs[position % imageIDs.length]);
				imageView.setScaleType(ImageView.ScaleType.FIT_XY);
				imageView.setLayoutParams(new Gallery.LayoutParams(75,100));
				return imageView;
			}

			@Override
			public long getItemId(int position) {
				return position;
			}

			@Override
			public Object getItem(int position) {
				return position;
			}

			@Override
			public int getCount() {
				return imageIDs.length;
			}
		};

		gallery.setAdapter(adapter);

		// 处理被选中事件
		gallery.setOnItemSelectedListener(new OnItemSelectedListener() {
			@Override
			public void onItemSelected(AdapterView<?> parent, View view,
					int position, long id) {
				// 显示当前被选中的图片
				switcher.setImageResource(imageIDs[position % imageIDs.length]);
			}

			@Override
			public void onNothingSelected(AdapterView<?> parent) {
			}
		});
	}
}

五、用TabHost将两种方式的图片浏览器展现出来

MyIntentTab.java

package cn.roco.gridview;

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Window;
import android.view.WindowManager;
import android.widget.TabHost;

public class MyIntentTab extends TabActivity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		
		getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
				WindowManager.LayoutParams.FLAG_FULLSCREEN); //请求全屏
		getWindow().requestFeature(Window.FEATURE_NO_TITLE); //请求没有标题栏

		
		TabHost tabhost = getTabHost();
		//使用Intent添加到第一个Tab页面
		tabhost.addTab(tabhost.newTabSpec("Grallery").setIndicator("Grallery")
				.setContent(new Intent(this, MyGralleryActivity.class)));
		//使用Intent添加到第二个Tab页面
		tabhost.addTab(tabhost.newTabSpec("GridView").setIndicator("GridView")
				.setContent(new Intent(this, MyGridViewActivity.class)));
	}
}

六、AndroidManifest.xml 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="cn.roco.gridview"
      android:versionCode="1"
      android:versionName="1.0">
    <uses-sdk android:minSdkVersion="8" />

    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".MyIntentTab"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
	<activity android:name=".MyGralleryActivity"/>
	<activity android:name=".MyGridViewActivity"/>
    </application>
</manifest>


七、部署应用到模拟器上，查看运行效果


a.幻灯片方式的图片浏览器

                  



b.带图片预览的图片浏览器

                 


    ==================================下面看一个gif动画===========================================


                                                       


本文源代码可以在以下地址进行免费下载

  1. http://download.csdn.net/detail/qq446282412/6467783
  2. http://pan.baidu.com/share/link?shareid=407417&uk=805959799

==================================================================================================

  作者：欧阳鹏  欢迎转载，与人分享是进步的源泉！

  转载请保留原文地址：http://blog.csdn.net/ouyang_peng

==================================================================================================


文章标签：
Android开发
数据格式
XML
关键词：
预览浏览器
Android浏览器
Android图片
图片浏览器
Android gridview
字节卷动
目录
相关文章
念通达
|
2月前
|
前端开发
WebView2 控件（基于 Microsoft Edge (Chromium) 的嵌入式浏览器控件），保存资源(图片、脚本、CSS)
WebView2 控件（基于 Microsoft Edge (Chromium) 的嵌入式浏览器控件），保存资源(图片、脚本、CSS)
念通达
202 28
计蒙不吃鱼
|
4月前
|
XML Android开发 数据格式
Android利用selector（选择器）实现图片动态点击效果
本文介绍了Android中ImageView的`src`与`background`属性的区别及应用，重点讲解如何通过设置背景选择器实现图片点击动态效果。`src`用于显示原图大小，不拉伸；`background`可随组件尺寸拉伸。通过创建`selector_setting.xml`，结合`setting_press.xml`和`setting_normal.xml`定义按下和正常状态的背景样式，提升用户体验。示例代码展示了具体实现步骤，包括XML配置和形状定义。
计蒙不吃鱼
210 3
Android利用selector（选择器）实现图片动态点击效果
计蒙不吃鱼
|
4月前
|
Java Android开发
Android图片的手动放大缩小
本文介绍了通过缩放因子实现图片放大缩小的功能，效果如动图所示。关键步骤包括：1) 在布局文件中设置 `android:scaleType=&quot;matrix&quot;`；2) 实例化控件并用 `ScaleGestureDetector` 处理缩放手势；3) 使用 `Matrix` 对图片进行缩放处理。为避免内存崩溃，可在全局配置添加 `android:largeHeap=&quot;true&quot;`。代码中定义了 `beforeScale` 和 `nowScale` 变量控制缩放范围，确保流畅体验。
计蒙不吃鱼
156 8
计蒙不吃鱼
|
4月前
|
缓存 编解码 Android开发
Android内存优化之图片优化
本文主要探讨Android开发中的图片优化问题，包括图片优化的重要性、OOM错误的成因及解决方法、Android支持的图片格式及其特点。同时介绍了图片储存优化的三种方式：尺寸优化、质量压缩和内存重用，并详细讲解了相关的实现方法与属性。此外，还分析了图片加载优化策略，如异步加载、缓存机制、懒加载等，并结合多级缓存流程提升性能。最后对比了几大主流图片加载框架（Universal ImageLoader、Picasso、Glide、Fresco）的特点与适用场景，重点推荐Fresco在处理大图、动图时的优异表现。这些内容为开发者提供了全面的图片优化解决方案。
计蒙不吃鱼
168 1
Ant.Dream
|
存储 缓存 编解码
Android经典面试题之图片Bitmap怎么做优化
本文介绍了图片相关的内存优化方法，包括分辨率适配、图片压缩与缓存。文中详细讲解了如何根据不同分辨率放置图片资源，避免图片拉伸变形；并通过示例代码展示了使用`BitmapFactory.Options`进行图片压缩的具体步骤。此外，还介绍了Glide等第三方库如何利用LRU算法实现高效图片缓存。
Ant.Dream
165 20
Android经典面试题之图片Bitmap怎么做优化
大树营养快线
|
10月前
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致？
综上所述，模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处，也有不同之处。在实际应用中，需要根据具体的场景和性能需求来选择使用哪种字符串处理方式，以达到最佳的性能和开发效率。
大树营养快线
226 63
mao29955
|
10月前
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的？
总的来说，Moment.js 通过一系列的技术手段和策略，有效地处理了不同浏览器的时间戳格式差异，为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
mao29955
280 57
技能实验室
|
10月前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式：`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求，返回Promise对象，可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果，适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
技能实验室
165 5
在浏览器执行js脚本的两种方式
想飞的雪糕
|
10月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门：Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络，包括前馈神经网络（FFNN）、深度神经网络（DNN）和循环神经网络（RNN）。通过简单的示例和代码，帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景，并简要介绍了卷积神经网络（CNN）的替代方案。
想飞的雪糕
1364 1
想飞的雪糕
|
11月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门：Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术，你是否想过在浏览器中运行大模型？Xenova团队推出的Transformer.js，基于JavaScript，让开发者能在浏览器中本地加载和执行预训练模型，无需依赖服务器。该库利用WebAssembly和WebGPU技术，大幅提升性能，尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成，Transformer.js都提供了强大支持，成为构建浏览器AI应用的核心工具。
想飞的雪糕
1951 1

热门文章

最新文章

  • 1
    复杂项目即时通讯从android 5升级android x后遗症之解决报错#1057 SIGABRT #00 pc 0000000000073898-优雅草卓伊凡|bigniu
  • 2
    复杂项目即时通讯从android 5升级android x后遗症之解决报错#79 java.io.EOFException Unexpected end of ZLIB input stream-优雅草卓伊凡|bigniu
  • 3
    Cellebrite UFED 4PC 7.72 (Windows) - Android 和 iOS 移动设备取证软件
  • 4
    Android安卓项目调试之Gradle 与 Gradle Wrapper的概念以及常用gradle命令深度详解-优雅草卓伊凡
  • 5
    【01】完整的安卓二次商业实战-详细的初级步骤同步项目和gradle配置以及开发思路-优雅草伊凡
  • 6
    【08】AI辅助编程完整的安卓二次商业实战-修改消息聊天框背景色-触发聊天让程序异常终止bug牵涉更多聊天消息发送优化处理-优雅草卓伊凡
  • 7
    【02】完整的安卓二次商业实战-配置gradle-构建打包原生安卓项目-调试本地运行模拟器-优雅草伊凡
  • 8
    【03】AI辅助编程完整的安卓二次商业实战-本地构建运行并且调试-二次开发改注册登陆按钮颜色以及整体资源结构熟悉-优雅草伊凡
  • 9
    【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
  • 10
    【04】AI辅助编程完整的安卓二次商业实战-寻找修改替换新UI首页图标-菜单图标-消息列表图标-优雅草伊凡
  • 1
    XML DOM 浏览器差异
    53
  • 2
    手摸手教你，从0到1开发一个Chrome浏览器插件
    812
  • 3
    javascript import maps 特性现已被全部主流浏览器支持
    211
  • 4
    【开源推荐】 7.4k star，推荐一款自动化浏览器插件 好用
    193
  • 5
    XML DOM 浏览器差异
    64
  • 6
    微信浏览器内 h5 直接唤醒 app 之 微信开放标签 wx-open-launch-app
    781
  • 7
    谷歌浏览器中的谷歌翻译失效了？如何解决谷歌翻译不响应问题？
    1016
  • 8
    【Mac os】如何在服务器上启动Jupyter notebook并在本地浏览器Web端环境编辑程序
    683
  • 9
    使用Selenium调试Edge浏览器的常见问题与解决方案
    2483
  • 10
    XML DOM 浏览器差异
    95

    • 相关课程

    更多
  • 开源Android容器化框架Atlas开发者指南

    • 相关电子书

    更多
  • 58同城Android客户端Walle框架演进与实践之路
  • Android组件化实现
  • 蚂蚁聚宝Android秒级编译——Freeline
    • 下一篇
    2025云栖大会，阿里云百炼邀请您的参与和见证