`

Android之模拟美图看看拖动看图(16)

阅读更多

这节课我们进入深入人心期待已久的美图看看阅览器制作,不过是手机android版的,上节课的图片切换大师我们已经见识,现在我们来认识拖拉图片高手

Gallery

对它的理解可以理解为Listview拖动,不过换成水平

这节课两重一要

两重,实现Gallery设置图片集要使用到setAdapter()方法,呵呵,跟listview又一样,两种方法

1.继承BaseAdapter方法

2.SimpleAdapter    前面我们使用过,得心应手啊

我们先用1方法

布局文件代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    
    tools:context=".MainActivity" >

    <Gallery
        android:id="@+id/gallery"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>
很简单,拖动大师单身出马
接下来新建一个class:
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.LinearLayout.LayoutParams;

public class GalleryAdapter extends BaseAdapter{

	private int[] image=new int[]{
			R.drawable.a1,R.drawable.a2,R.drawable.a3,R.drawable.a4
	,R.drawable.a5,R.drawable.a6,R.drawable.a7,R.drawable.a8,R.drawable.a9};
	private Context mycontext;
	
	public GalleryAdapter(Context c){
		this.mycontext=c;
	}
	public int getCount() {
		return this.image.length;
		
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return this.image[position];
	}

	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		return this.image[position];
	}

	@Override
	//其实就是定义实现了一个转换工厂的作用,ViewFactory类似
	public View getView(int position, View arg1, ViewGroup arg2) {
		ImageView imageview=new ImageView(this.mycontext);
		imageview.setBackgroundColor(0xFFFFFFFF);//设置背景
		imageview.setScaleType(ImageView.ScaleType.CENTER);//居中
		imageview.setImageResource(this.image[position]);
		//自适应图片
		imageview.setLayoutParams(new Gallery.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
		
		
		return imageview;
	}

}

封装成一个适配器类。现在我们可以用在MainActivity里了
public class MainActivity extends Activity {

	private Gallery gallery=null;
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		this.gallery=(Gallery)super.findViewById(R.id.gallery);
		this.gallery.setAdapter(new GalleryAdapter(this));
		this.gallery.setOnItemClickListener(new ItemListener());
	}

	
	
	private class ItemListener implements OnItemClickListener{

		@Override
		public void onItemClick(AdapterView<?> arg0, View v, int position,
				long id) {
			// TODO Auto-generated method stub
			Toast.makeText(MainActivity.this, String.valueOf(position), Toast.LENGTH_SHORT).show();
			
		}
		
	}

 

其实我不太明白Gallery出来被划线,难道是已经过时了?虽然不太影响使用。

这里我们定义一个方法监听到我们选择了哪些图片,用信息提示出来

显示效果如下:

 



 实现拖动效果

现在重头戏来了,我们用第二种方法实现美图看看,在以后工作中我建议用第二种方法,符合MVC设计模式,而且一要就是java反射机制,前面的添加图片都是我们一个个打入位置名字,现实生活中不可能那么麻烦,为了方便动态取出所有图片资源java.lang.reflect.Field;必不可少,建议大家多去看看java的反射机制,这个在面试中经常考到。

还记得我们学习listview的模板,对,我们先建立一个模板用于显示图片

Grid_Layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:background="#FFFFFF"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="center"
         />

</LinearLayout>

然后是布局文件:
这里切换大师在上,拖动大师在下
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    
    android:gravity="bottom"   //设置置于底部
    android:orientation="vertical"
    
    tools:context=".MainActivity" >

    <ImageSwitcher
        android:id="@+id/imageSwitcher1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >
    </ImageSwitcher>

    <Gallery
        android:id="@+id/gallery1"
        android:padding="3px"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

 

MainActivity文件:

 

private Gallery gallery=null;
	private List<Map<String,Integer>> list=new ArrayList<Map<String,Integer>>();
	private SimpleAdapter simpleadapter=null;
	private ImageSwitcher imageswitch=null;
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		this.initAdapter();//初始化适配器
	
		this.gallery=(Gallery)super.findViewById(R.id.gallery1);//取得对象
		
		this.imageswitch=(ImageSwitcher)super.findViewById(R.id.imageSwitcher1);
		this.imageswitch.setBackgroundColor(Color.BLACK);
		this.imageswitch.setFactory(new ViewFactoryImpl());//设置工厂
		//设置图片进入进出特效动画
		this.imageswitch.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));
		this.imageswitch.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));
		this.gallery.setAdapter(this.simpleadapter);//设置适配器
		this.gallery.setOnItemClickListener(new ItemListener());
		this.gallery.setBackgroundColor(Color.BLACK);
//		this.imageswitch.setImageResource(image[foot++]);
//		this.previous.setOnClickListener(new Previouslistener());
//		this.next.setOnClickListener(new Nextlistener());
		
	}
	private class ItemListener implements OnItemClickListener{

		@Override
		public void onItemClick(AdapterView<?> arg0, View arg1, int position,
				long id) {
			// TODO Auto-generated method stub
			Map<String,Integer> map=(Map<String,Integer>)MainActivity.this.simpleadapter.getItem(position);
			MainActivity.this.imageswitch.setImageResource(map.get("img"));
			
		}
		
	}
	private class ViewFactoryImpl implements ViewFactory{

		@Override
		public View makeView() {
			ImageView imageview=new ImageView(MainActivity.this);
			imageview.setBackgroundColor(0xFFFFFFFF);//设置背景
			imageview.setScaleType(ImageView.ScaleType.CENTER);//居中
			//自适应图片
			imageview.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
			
			
			return imageview;
			// TODO Auto-generated method stub
			
		}
		
	}

	private void initAdapter() {
		// TODO Auto-generated method stub
		Field[] field=R.drawable.class.getDeclaredFields();//取得全部属性,反射机制动态取图
		for(int i=0;i<field.length;i++){
			if(field[i].getName().startsWith("a")){
				Map<String,Integer> map=new HashMap<String,Integer>();
				try {
					map.put("img", field[i].getInt(R.drawable.class));//图片资源放入map
				} catch (IllegalAccessException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				} catch (IllegalArgumentException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
				this.list.add(map);    //保存map
			}
		}
		//使用参见listview博客
		this.simpleadapter=new SimpleAdapter(this,this.list,R.layout.grid_layout,new String[]{"img"},
				new int[]{R.id.img});
		
	}

 

效果如下:当然大家可以看到我注释掉的代码,可以实现添加按键切换图片,这个可以使用ImageButton实现,会更好看些,美图看看是鼠标进入范围显示按钮,这个有兴趣的可以自己拓展。

 

<!--EndFragment-->

 

<!--EndFragment-->

<!--EndFragment-->



 

下面是一排预览,点击图片显示在中央

 

<!--EndFragment-->

 

<!--EndFragment-->

  • 大小: 115.9 KB
  • 大小: 526.1 KB
0
0
分享到:
评论

相关推荐

    Android仿美图秀秀

    【Android仿美图秀秀】项目是一个典型的移动应用开发实例,主要目标是模仿知名的美图秀秀应用,为用户提供图片编辑、美化以及分享等服务。在这个项目中,开发者需要掌握和应用一系列Android开发的关键技术,包括但不...

    美图看看(万能看图软件) 2.1.8 官方版

    美图网旗下产品——美图看看是目前最小最快的万能看图软件,完美兼容所有主流图片格式,用户好评度极高。美图看看采用自主研发的图像引擎,专门针对数码照片优化,使大图片的浏览性能全面提升!独创的缓存图片技术...

    美图看看 v2.2.7

    强劲引擎 看图软件万能之王美图看看采用全新的PEV-3图像引擎,支持Intel和AMD核心的MMX、3DNOW技术,通过独家多线程运算技术使图片预览速度更快,即点即看。兼容多达43种图像格式,并可直接预览PDF文档格式。2.超低...

    美图看看官方下载 v2.7.8.2126.zip

    美图网旗下产品——美图看看是目前最小最快的万能看图软件,完美兼容所有主流图片格式,用户好评度极高。美图看看采用自主研发的图像引擎,专门针对数码照片优化,使大图片的浏览性能全面提升!独创的缓存图片技术...

    美图看看 For Android v0.9.1.zip

    美图看看Android版是一款好用的看图软件,看图更流畅,随时美化和分享!  亮点功能:  图片显示更清晰。  丰富的幻灯效果。  清晰简明的缩略图及列表浏览模式。  极速高效的图片扫描。  简单智能的流畅...

    美图看看 绿色单文件版

    《美图看看:一款高效便捷的图片浏览工具》 美图看看是一款专为用户打造的高效、便捷的图片浏览软件,其绿色单文件版更是深受广大用户的喜爱。在这个数字化时代,图片已经成为我们生活中不可或缺的一部分,无论是...

    Android之仿美图秀秀拼图功能_图片处理.zip

    这个压缩包文件“Android之仿美图秀秀拼图功能_图片处理.zip”提供了一种实现这一功能的方法,特别强调了对2014-03big文件的处理。下面将详细解释这个过程中的关键知识点。 1. **Android 图像处理**:Android提供了...

    美图看看(很不错的看图软件)

    《美图看看:一款便捷高效的图片浏览软件》 在当今数字化时代,图片处理与浏览软件已经成为我们日常生活中不可或缺的一部分。其中,“美图看看”凭借其简单易用的界面和丰富的功能,深受用户喜爱,被誉为“很不错的...

    android仿美图秀秀 图片叠加拖动旋转

    在Android开发中,实现“美图秀秀”式的图片处理功能是一项挑战,涉及到图像处理、手势识别以及动画等多个技术领域。下面将详细讲解如何在Android应用中实现图片叠加、拖动和旋转的功能。 1. **图片叠加**: 在...

    美图看看电脑版 v2.7.8.2126.rar

    美图看看是一款体积小巧、功能强大的图片浏览软件。可以智能优化高分辨率照片浏览性能,速度提升20%。完美兼容所有主流图片格式,穿透压缩包看图功能。无痕融入系统,界面简洁方便易用! 美图看看有哪些亮点? ...

    美图看看软件

    美图看看软件

    Android——仿美图秀秀和IOS系统的相机胶卷.zip

    在Android平台上,开发一款类似美图秀秀的相机胶卷应用是一项挑战,因为这需要对Android的多媒体处理、UI设计以及图片展示有深入的理解。这个压缩包中的源码提供了实现这一功能的参考,旨在帮助开发者了解如何在...

    美图看看V2.78(最快的万能看图软件).rar

    美图看看是一款超小巧的看图软件,兼容最多图像格式,极低的资源占用,极快的看图速度。采用全新的PEV-3图像引擎,通过支持Intel和AMD核心的MMX、3DNOW技术,和独家多线程运算技术能在超低资源占用的情况下清晰快速...

    android仿美图秀秀图片上添加文字

    仿美图秀秀在图片上添加文字,用户可对文字进行自主编辑,文字大小缩放,字体样式更换,文字颜色更换 (这里我就完善了添加文字部分,公司需求),还有其他功能滤镜,水印等 绝对给力。。记得先看里面的text文本

    tp美图看看2.exe

    tp美图看看2.exe

    毕业设计,实现一个类似美颜相机(美图秀秀应用)的 Android app

    标题中的“毕业设计,实现一个类似美颜相机(美图秀秀应用)的 Android app”表明这个项目旨在创建一个功能类似于美颜相机的移动应用程序,具体是针对Android平台的。美颜相机通常包括实时美颜、照片编辑和特效添加...

    Android项目源码高仿美图秀秀半成品

    【Android项目源码高仿美图秀秀半成品】是一个基于Android平台的开发项目,旨在模仿流行的图片编辑应用——美图秀秀的部分功能。通过分析这个项目的源代码,我们可以深入理解Android应用程序的设计与实现,特别是在...

    美图看看 2.2.4.1918

    美图看看 2.2.4.1918 小巧 方便 使用的看图软件.

    美图看看——SEESEE

    美图看看是目前最小最快的万能看图软件,完美兼容所有主流图片格式,拥有简洁干净的界面,用户好评度极高。美图看看采用自主研发的图像引擎,专门针对数码照片优化,使大图片的浏览性能全面提升!独创的缓存图片技术...

    美图看看PDF阅读器1.0.0.1绿色独立版 美图pdf阅读器

    【美图看看PDF阅读器1.0.0.1绿色独立版】是一款专注于PDF文档查看的轻量级软件,尤其适合那些对PDF阅读有基本需求的用户。它以简洁的操作界面和快速的打开速度,提供了良好的PDF阅读体验。作为一款绿色独立版软件,...

Global site tag (gtag.js) - Google Analytics