【Android开发】范例2-实现幻灯片式图片浏览器

简介:
我们来实现一个幻灯片式图片浏览器:

最下面一个画廊视图,选中画廊中的图片,会在上面的ImageSwitcher控件中显示大图。

效果图如图



实现方法:
在布局文件中添加图片切换控件ImageSwitcher和画廊视图控件Gallery
res/layout/main.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:id="@+id/layout1"
    android:gravity="center_horizontal"
    >  
    <ImageSwitcher
        android:id="@+id/imageSwitcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="30px"
        android:layout_weight="2"/>
    <Gallery
        android:id="@+id/gallery1"
        android:spacing="5px"
        android:layout_weight="1"
        android:unselectedAlpha="0.6"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>  

在res/values目录中,创建一个名为attr.xml的文件,在该文件中定义一个styleable对象,用于组合多个属性。这里只指定了一个系统自带的android:galleryItemBackground属性,用于设置各选项的背景。具体代码如下:
res/values/attr.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="Gallery">
    	<attr name="android:galleryItemBackground"/>
    </declare-styleable>
</resources>

MainActivity:
package com.example.test;  
  
import android.app.Activity;
import android.content.res.TypedArray;
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 MainActivity extends Activity {  
	//定义并初始化保存图片id的数组
      private int[] imageId=new int[]{R.drawable.img1,R.drawable.img2,R.drawable.img3,R.drawable.img4,
    		  R.drawable.img5,R.drawable.img6,R.drawable.img7,R.drawable.img8,R.drawable.img9};
      //声明一个图像切换器对象
      private ImageSwitcher imageSwitcher;
    @Override  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.main);  
         
        Gallery gallery=(Gallery)findViewById(R.id.gallery1);//获取gallery组件
        
        imageSwitcher=(ImageSwitcher)findViewById(R.id.imageSwitcher);//获取图像切换器
        //设置动画效果
        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
        		android.R.anim.fade_in));//设置淡入动画
        imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, 
        		android.R.anim.fade_out));//设置淡出动画
        imageSwitcher.setFactory(new ViewFactory(){


			@Override
			public View makeView() {
				ImageView imageView=new ImageView(MainActivity.this);//实例化一个imageView类的对象
				imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);//设置保持纵横比居中缩放图像
				imageView.setLayoutParams(new ImageSwitcher.LayoutParams(
						LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
				return imageView;//返回imageView对象
			}
        });
        
        BaseAdapter adapter=new BaseAdapter(){


        	@Override
			public View getView(int position, View convertView, ViewGroup parent) {
				ImageView imageView;//声明ImageView的对象
				if(convertView==null){
					imageView=new ImageView(MainActivity.this);//实例化ImageView的对象
					imageView.setScaleType(ImageView.ScaleType.FIT_XY);//设置缩放方式
					imageView.setLayoutParams(new Gallery.LayoutParams(180,135));
					//设置gallery每一项图片的背景资源(使用的是attr.xml的自定义样式)
					TypedArray typedArray=obtainStyledAttributes(R.styleable.Gallery);
					imageView.setBackgroundResource(typedArray.getResourceId(
							R.styleable.Gallery_android_galleryItemBackground, 0));
					
					imageView.setPadding(5, 0, 5, 0);//设置imageView的内边距
				}else{
					imageView=(ImageView)convertView;
				}
				imageView.setImageResource(imageId[position]);//为imageView设置要显示的图片
				return imageView;//返回ImageView
			}
        	
        	//功能:获得当前选项的id
			@Override
			public long getItemId(int position) {
				return position;
			}
			
			//功能:获得当前选项
			@Override
			public Object getItem(int position) {
				return position;
			}
			
			//获得数量
			@Override
			public int getCount() {
				return imageId.length;
			}
        };
        
        gallery.setAdapter(adapter);//将适配器与Gallery关联
        gallery.setSelection(imageId.length/2);//选中中间的图片
        gallery.setOnItemSelectedListener(new OnItemSelectedListener() {


			@Override
			public void onItemSelected(AdapterView<?> parent, View v,
					int position, long id) {
				imageSwitcher.setImageResource(imageId[position]);//显示选中的图片
			}


			@Override
			public void onNothingSelected(AdapterView<?> arg0) {
				// TODO Auto-generated method stub
			}
		});
    }  
}  

这样单击某张图片,可以选中该图片,并且让其居中显示,也可以用手指拖动图片来移动图片,并且让选中的图片在上方显示,

如图是切换瞬间的效果


转载请注明出处:http://blog.csdn.net/acmman/article/details/44994443

相关文章
|
9天前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台策略
在移动应用开发的战场上,安卓和iOS两大阵营各据一方。随着技术的演进,跨平台开发框架成为开发者的新宠,旨在实现一次编码、多平台部署的梦想。本文将探讨跨平台开发的优势与挑战,并分享实用的开发技巧,帮助开发者在安卓和iOS的世界中游刃有余。
|
14天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
16天前
|
Android开发 Swift iOS开发
探索安卓与iOS开发的差异和挑战
【10月更文挑战第37天】在移动应用开发的广阔舞台上,安卓和iOS这两大操作系统扮演着主角。它们各自拥有独特的特性、优势以及面临的开发挑战。本文将深入探讨这两个平台在开发过程中的主要差异,从编程语言到用户界面设计,再到市场分布的不同影响,旨在为开发者提供一个全面的视角,帮助他们更好地理解并应对在不同平台上进行应用开发时可能遇到的难题和机遇。
|
18天前
|
XML 存储 Java
探索安卓开发之旅:从新手到专家
【10月更文挑战第35天】在数字化时代,安卓应用的开发成为了一个热门话题。本文旨在通过浅显易懂的语言,带领初学者了解安卓开发的基础知识,同时为有一定经验的开发者提供进阶技巧。我们将一起探讨如何从零开始构建第一个安卓应用,并逐步深入到性能优化和高级功能的实现。无论你是编程新手还是希望提升技能的开发者,这篇文章都将为你提供有价值的指导和灵感。
|
16天前
|
存储 API 开发工具
探索安卓开发:从基础到进阶
【10月更文挑战第37天】在这篇文章中,我们将一起探索安卓开发的奥秘。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的信息和建议。我们将从安卓开发的基础开始,逐步深入到更复杂的主题,如自定义组件、性能优化等。最后,我们将通过一个代码示例来展示如何实现一个简单的安卓应用。让我们一起开始吧!
|
17天前
|
存储 XML JSON
探索安卓开发:从新手到专家的旅程
【10月更文挑战第36天】在这篇文章中,我们将一起踏上一段激动人心的旅程,从零基础开始,逐步深入安卓开发的奥秘。无论你是编程新手,还是希望扩展技能的老手,这里都有适合你的知识宝藏等待发掘。通过实际的代码示例和深入浅出的解释,我们将解锁安卓开发的关键技能,让你能够构建自己的应用程序,甚至贡献于开源社区。准备好了吗?让我们开始吧!
26 2
|
18天前
|
Android开发
布谷语音软件开发:android端语音软件搭建开发教程
语音软件搭建android端语音软件开发教程!
|
23天前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式
|
21天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
2月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
494 1