`

玩转Android---UI篇---Gallery(画廊视图)

阅读更多

玩转Android---UI篇---Gallery(画廊视图)

Gallery能够水平显示其内容,一般用来浏览图片,被选中的选项位于中间,并且可以相应事件显示信息。下面结合ImageSwitcher组件来实现一个通过缩略图来浏览图片的程序,具体步骤如下

 

第一步:

创建一个Andorid工程"GalleryTest”,该工程的入口是Activity类GalleryTest继承Activity并实现OnItemSelectedListener和ViewFactory接口,来实现图片和视图的创建

 

package org.hualang.Gallery;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ViewSwitcher.ViewFactory;
//继承Activity,实现onItemSelectedListener和ViewFactory接口
public class GalleryTest extends Activity implements OnItemSelectedListener,ViewFactory{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }

	@Override
	public View makeView() {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2,
			long arg3) {
		// TODO Auto-generated method stub
		
	}

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

 第二步:

在工程的res\drawable\目录下添加7张图片和对应的缩略图

 

第三步:

在工程res\layout\目录下创建一个布局文件main.xml,在其中那个添加一个Gallery组件和一个ImageSwitcher组件,并设置相应的属性

 

<?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"
    >
 <ImageSwitcher android:id="@+id/switcher"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
    />
    
    <Gallery android:id="@+id/gallery"
        android:background="#55000000"
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:gravity="center_vertical"
        android:spacing="16dp"
    />
</LinearLayout>

 第四步:

在GalleryTest顶部声明使用到的ImageSwitcher实例图片资源Integer数组

 

public class GalleryTest extends Activity implements OnItemSelectedListener,ViewFactory{
    /** Called when the activity is first created. */
	//声明ImageSwitcher
	private ImageSwitcher switcher;
	//缩略图片id数组
	private Integer[] thumbids={
			R.drawable.thumb0,
			R.drawable.thumb1,
			R.drawable.thumb2,
			R.drawable.thumb3,
			R.drawable.thumb4,
			R.drawable.thumb5,
			R.drawable.thumb6,
			R.drawable.thumb7
	};
	//图片id数组
	private Integer[] imgids={
			R.drawable.img0,
			R.drawable.img1,
			R.drawable.img2,
			R.drawable.img3,
			R.drawable.img4,
			R.drawable.img5,
			R.drawable.img6,
			R.drawable.img7
	};

 第五步:

在GalleryTest的onCreate()方法中,将窗口样式设置为无标题,设置当前布局视图,获得ImageSwitcher实例,并设置渐进渐出动画,获得Gallery实例

 

 public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //设置窗口特征无标题
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.main);
        //通过findViewById方法获得ImageSwitcher对象
        switcher=(ImageSwitcher)findViewById(R.id.switcher);
        //为ImageSwitcher设置工厂
        switcher.setFactory(this);
        //设置动画渐入效果
        switcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));
        //设置动画渐出效果
        switcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));
        //通过findViewById方法获得Gallery对象
        Gallery g=(Gallery)findViewById(R.id.gallery);
    }

 第六步:

创建内部类ImageAdapter,该类继承BaseAdapter,为Gallery设置Adapter实例

 

    public class ImageAdapter extends BaseAdapter {
    	//构造方法
		public ImageAdapter(Context c) {
			mContext = c;
		}
		//获得数量
		public int getCount() {
			return thumbids.length;
		}
		//获得当前选项
		public Object getItem(int position) {
			return position;
		}
		//获得当前选项ID
		public long getItemId(int position) {
			return position;
		}
		//获得View对象
		public View getView(int position, View convertView, ViewGroup parent) {
			//实例化ImageView对象
			ImageView i = new ImageView(mContext);
			//设置缩略图片资源
			i.setImageResource(thumbids[position]);
			//设置边界对齐
			i.setAdjustViewBounds(true);
			//设置布局参数
			i.setLayoutParams(new Gallery.LayoutParams(
					LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
			//设置背景资源
			i.setBackgroundResource(R.drawable.picturefrom);
			return i;
		}
		private Context mContext;
	}

 第七步:

实现onItemSelected()方法,更换图片

 

	@Override
	public void onItemSelected(AdapterView<?> adapter, View v, int position,
			long id) {
		switcher.setImageResource(imgids[position]);
	}

 第八步:

实现makeView()方法,为ImageView设置布局格式

 

	@Override
	public View makeView() {
		// TODO Auto-generated method stub
		//创建ImageView
		ImageView i=new ImageView(this);
		//设置背景颜色
		i.setBackgroundColor(0xFF000000);
		//设置精度类型
		i.setScaleType(ImageView.ScaleType.FIT_CENTER);
		//设置布局参数
		i.setLayoutParams(new ImageSwitcher.LayoutParams(
				LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
		return i;
	}

 第九步:

为Gallery添加Adapter并添加OnItemSelectedListener监听器

g.setAdapter(new ImageAdapter(this));
		g.setOnItemSelectedListener(this);
 

至此,全部,结束,运行结果如下


 

完整源代码:

 

package org.hualang.Gallery;

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

public class GalleryTest extends Activity implements OnItemSelectedListener,
		ViewFactory {
	
	private ImageSwitcher mSwitcher;
	
	private Integer[] mThumbIds = { R.drawable.thumb0,
			R.drawable.thumb1, R.drawable.thumb2,
			R.drawable.thumb3, R.drawable.thumb4,
			R.drawable.thumb5, R.drawable.thumb6,
			R.drawable.thumb7 };

	private Integer[] mImageIds = { R.drawable.img0, R.drawable.img1,
			R.drawable.img2, R.drawable.img3, R.drawable.img4,
			R.drawable.img5, R.drawable.img6, R.drawable.img7 };

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.main);
		mSwitcher = (ImageSwitcher) findViewById(R.id.switcher);
		mSwitcher.setFactory(this);
		mSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
				android.R.anim.fade_in));
		mSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,
				android.R.anim.fade_out));

		Gallery g = (Gallery) findViewById(R.id.gallery);
		
		g.setAdapter(new ImageAdapter(this));
		g.setOnItemSelectedListener(this);

	}

	public class ImageAdapter extends BaseAdapter {
		public ImageAdapter(Context c) {
			mContext = c;
		}
		public int getCount() {
			return mThumbIds.length;
		}
		public Object getItem(int position) {
			return position;
		}
		public long getItemId(int position) {
			return position;
		}
		public View getView(int position, View convertView, ViewGroup parent) {
			ImageView i = new ImageView(mContext);

			i.setImageResource(mThumbIds[position]);
			i.setAdjustViewBounds(true);
			i.setLayoutParams(new Gallery.LayoutParams(
					LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
			i.setBackgroundResource(R.drawable.picturefrom);
			return i;
		}
		private Context mContext;
	}

	@Override
	public void onItemSelected(AdapterView<?> adapter, View v, int position,
			long id) {
		mSwitcher.setImageResource(mImageIds[position]);
	}

	@Override
	public void onNothingSelected(AdapterView<?> arg0) {

	}

	@Override
	public View makeView() {
		ImageView i = new ImageView(this);
		i.setBackgroundColor(0xFF000000);
		i.setScaleType(ImageView.ScaleType.FIT_CENTER);
		i.setLayoutParams(new ImageSwitcher.LayoutParams(
				LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
		return i;
	}
}
 

 <?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"> 
    
    <ImageSwitcher android:id="@+id/switcher"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
    />
    
    <Gallery android:id="@+id/gallery"
        android:background="#55000000"
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:gravity="center_vertical"
        android:spacing="16dp"
    />

</RelativeLayout>
 
  • 大小: 30.1 KB
分享到:
评论

相关推荐

    Android---UI篇

    •Android---UI篇---Gallery(画廊视图) • •Android---UI篇---Spinner(下拉列表) • •Android---UI篇---TabWidget(切换卡) • •Android---UI篇---LinearLayout(线性布局) • •Android---UI篇---WebView...

    031_android UI组件之 Gallery画廊控件

    "Gallery画廊控件"是Android SDK中一个独特的视图组件,它允许用户在一个水平滚动的列表中展示项目,通常用于图片或选择项的浏览。在本教程中,我们将深入探讨Gallery控件的用法、属性以及如何自定义它。 首先,...

    安卓Gallery照片墙画廊图库相关-android-image-slide-panel图片照片墙的加载和滑动特效.rar

    在Android开发中,`Gallery`组件曾经是用于创建照片墙或画廊视图的常见选择。它允许用户水平滚动浏览一系列图像,但自Android 3.0(API级别11)起,`Gallery`已被弃用,开发者被推荐使用`HorizontalScrollView`或`...

    Android高级应用源码-画廊试图Gallery.zip

    在Android开发中,"画廊试图(Gallery)"是一种常见的用户界面组件,用于展示一系列的图片或其它可视觉化的元素,用户可以通过左右滑动来选择不同的项目。本资源"Android高级应用源码-画廊试图Gallery.zip"提供了一个...

    安卓Gallery照片墙画廊图库相关-Android利用Gallery和ImageSwitcher实现在线相册图片预览功能异步加载图片.rar

    本项目“安卓Gallery照片墙画廊图库相关-Android利用Gallery和ImageSwitcher实现在线相册图片预览功能异步加载图片”就是针对这种场景的一个实例。在这个项目中,开发者使用了`Gallery`组件和`ImageSwitcher`来实现...

    Android 之 Gallery画廊用法

    在Android开发中,`Gallery`组件是用于展示一系列图片或者视图的一种滚动控件,它允许用户通过左右滑动来浏览各个项目。`Gallery`在早期版本的Android API中被广泛使用,但在API 16之后已被弃用,取而代之的是更现代...

    Image-gallery-view-.zip_android

    在Android开发中,图片列表的展示是常见的需求之一,尤其在...虽然画廊视图已不再推荐使用,但它仍然是理解Android UI组件和数据绑定机制的一个良好起点。开发者可以根据实际需求,选择更现代的组件进行优化和替换。

    Android新手入门2016(15)--Gallery画廊

    在Android开发领域,新手入门的过程中,经常会接触到各种UI组件的学习,其中之一就是`Gallery`。`Gallery`是Android SDK提供的一种可以水平滚动展示多个项目的控件,常用于图片浏览或者选项选择。在2016年的Android...

    android Gallery画廊实例

    首先,`Gallery`是Android提供的一个视图类,继承自`AbsSpinner`,它设计用于展示一列水平排列的项目,用户可以左右滑动来切换项目。`Gallery`的特点在于它支持平滑滚动和触摸反馈,使得用户交互体验流畅自然。 `...

    9. android Gallery(画廊)以及BaseAdapter

    在Android开发中,`Gallery`组件是用于展示一系列图片或者元素的一个横向滚动视图,它让用户可以方便地在多个项目间进行浏览选择。这个组件在早期版本的Android SDK中非常常见,但由于Android设计的更新,它在API 16...

    Android-Gallery-App:这是一个 android 画廊应用程序,使用 android studio 开发

    在Android平台上,开发一个画廊...以上就是"Android-Gallery-App"项目涉及的关键知识点,通过这个项目,开发者可以学习到Android应用开发的基本流程,以及如何利用Android Studio和Java来构建一个功能完善的画廊应用。

    Android3D画廊Gallery实现无限循环和自动跳转

    本教程将深入讲解如何在Android应用中实现一个3D画廊(Gallery)组件,支持无限循环、自动跳转以及倒影效果。 首先,我们需要理解`Gallery`组件。`Gallery`是Android提供的一个HorizontalScrollView的扩展,用于...

    Android高级组件Gallery画廊视图使用方法详解

    Android高级组件Gallery画廊视图是一种常用的UI组件,能够按水平方向显示内容,并且可用手指直接拖动图片移动。一般用来浏览图片,被选中的选项位于中间,并且可以响应事件显示信息。下面将详细介绍Gallery画廊视图...

    安卓Gallery照片墙画廊图库相关-DraggableFlipView滑动切换图片立体翻转效果.rar

    在Android开发中,创建一个美观且交互性强的图库应用是常见的需求,"安卓Gallery照片墙画廊图库相关-DraggableFlipView滑动切换图片立体翻转效果.rar" 文件包提供了一个独特的解决方案,它利用DraggableFlipView实现...

    安卓Gallery照片墙画廊图库相关-android仿微信图片浏览器.rar

    这个压缩包"安卓Gallery照片墙画廊图库相关-android仿微信图片浏览器.rar"显然包含了一个实现这一功能的示例项目。以下将详细讲解与这个项目相关的Android知识点: 1. **Gallery组件**:在早期的Android版本中, ...

    Android代码-ViewPagerGallery

    在这个名为"ViewPagerGallery"的项目中,开发者基于ViewPager创建了一个类似于Android原生Gallery组件的功能,提供了更加流畅且易于定制的图片或视图浏览体验。 在Android原生API中,Gallery组件已经被弃用,而...

    Gallery循环删除图片

    首先,Gallery 是 Android 提供的一种特殊的视图组件,用于展示一系列水平排列的项目,用户可以左右滑动浏览。它在早期版本的Android API中广泛使用,但在后来的版本中被RecyclerView所取代。不过,对于老版本的...

    安卓Gallery照片墙画廊图库相关-Android实现左右滑动查看图片效果.rar

    在给定的资源中,“安卓Gallery照片墙画廊图库相关-Android实现左右滑动查看图片效果.rar”提供了一个实现此类功能的示例。 Gallery组件在早期版本的Android API中被广泛用于实现图片浏览,但在API 16之后被替换为...

    android 3D画廊效果

    这个项目是开发者为了模仿iOS系统中的3D画廊视图,为Android平台定制的一个自定义gallery控件。在Android原生的gallery控件已经不再推荐使用的背景下,这样的自定义解决方案显得尤为重要。 Android的Gallery控件在...

Global site tag (gtag.js) - Google Analytics