`

2010.11.29——— Gallery和ImageSwitcher实现图片和视频的画廊展示

AndroidjsonBeanOSXML 
阅读更多
2010.11.29——— Gallery和ImageSwitcher实现图片和视频的画廊展示


1、展示图片

需求：
使用画廊来展示图片 并且图片是网络上的图片


A：首先 layout.xml 


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

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

</RelativeLayout>




B：Activity 


 package com.huitu.project;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.Window;
import android.view.View.OnTouchListener;
import android.view.animation.AnimationUtils;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.Gallery.LayoutParams;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.Toast;
import android.widget.ViewSwitcher;

import com.huitu.pojo.AD_TPXX;
import com.huitu.service.PicService;
import com.huitu.util.ImageUtil;
import com.huitu.util.JSONUtil;

public class PicListActivity extends Activity implements
	AdapterView.OnItemSelectedListener, ViewSwitcher.ViewFactory {
	
	private List<ImageView> images = new ArrayList<ImageView>();
	private List<String> descs = new ArrayList<String>();
	private ImageSwitcher mSwitcher;



	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		
		setContentView(R.layout.piclist);
		
		Intent intent = this.getIntent();
		int id = intent.getIntExtra("id", 0);
		System.out.println(id);
		
		try {
			String json = PicService.query(id);
			if(!json.trim().equals("noValue")){
				List<AD_TPXX> list = JSONUtil.parseJSON_Pic_list(json);
				for(AD_TPXX bean : list){
					ImageView iv = new ImageView(PicListActivity.this);
					String path = "http://10.169.53.126:8080/CPJW_2"+bean.getPath();
					path = path.replace("\\", "/");
					System.out.println(path);
					byte[] data = ImageUtil.getImage(path);
					System.out.println(data.length);
					Bitmap bitmap = BitmapFactory.decodeByteArray(data, 0, data.length);
					iv.setImageBitmap(bitmap);
					images.add(iv);
					descs.add(bean.getDescr());
				}
			}else{
				Toast.makeText(this, R.string.error_nopic, 0).show();
			}
			
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		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 void onItemSelected(AdapterView parent, View v, int position, long id) {
        mSwitcher.setImageDrawable(images.get(position).getDrawable());
        Toast.makeText(this, "图片描述："+descs.get(position), 0).show();
	}

    public void onNothingSelected(AdapterView parent) {
    }

    public View makeView() {
        ImageView i = new ImageView(this);
        i.setBackgroundColor(0xFF000000);
        i.setScaleType(ImageView.ScaleType.FIT_CENTER);
        i.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.MATCH_PARENT,
                LayoutParams.MATCH_PARENT));
        return i;
    }
	
	private class ImageAdapter extends BaseAdapter{
		private Context mContext; 
		//定义Context   
		public ImageAdapter(Context c) { 
		//声明 ImageAdapter  
			mContext = c;  
		}  
		public int getCount() { //获取图片的个数  
			return images.size(); 
		}  
		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 = images.get(position);
			i.setAdjustViewBounds(true);
            i.setLayoutParams(new Gallery.LayoutParams(
                    LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
            i.setBackgroundResource(R.drawable.picture_frame);
			//设置比例类型  
			return i;  
		} 

	}

}


大致流程： 

1、
extends Activity implements
	AdapterView.OnItemSelectedListener, ViewSwitcher.ViewFactory

2、根据网络图片路径地址 转换为字节流，然后 转换为位图文件

Bitmap bitmap = BitmapFactory.decodeByteArray(data, 0, data.length);
iv.setImageBitmap(bitmap);

生成ImageView对象 并放到list里面去 

3、设置(ImageSwitcher) 的一些动画效果
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));

4、为Gallery自定义一个Adapter 并且
g.setAdapter(new ImageAdapter(this));

5、onItemSelected方法

mSwitcher.setImageDrawable(images.get(position).getDrawable());
        Toast.makeText(this, "图片描述："+descs.get(position), 0).show();

当选中一个图片是 在ImageSwitcher显示出来 并且吐司对应的图片信息










2、展示视频

视频的画廊展示 其实和图片是一样的 不同就是 不需要ImageSwitcher 换成一个VideoView，
然后 当onItemSelected时  就在VideoView播放对应的视频  就可以了

但是 有个难点 就是 如何获得视频的预览画面 这个倒是耽误我了很长时间


其实 很简单： 


Bitmap  b = ThumbnailUtils.createVideoThumbnail(path,Video.Thumbnails.MICRO_KIND);
ImageView iv = new ImageView(this);


这样 就可以获得视频的缩略图了 呵呵


A:layout.xml 


 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 
    
    <VideoView android:id="@+id/vv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
    />
    
    <Gallery android:id="@+id/ggg"
        android:background="#55000000"
        android:layout_width="fill_parent"
        android:layout_height="120dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        
        android:gravity="center_vertical"
        android:spacing="16dp"
    />

</RelativeLayout>



B: Activity




  
package com.huitu.project;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.media.ThumbnailUtils;
import android.os.Bundle;
import android.provider.MediaStore.Video;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.MediaController;
import android.widget.Toast;
import android.widget.VideoView;

import com.huitu.pojo.AD_SPXX;
import com.huitu.service.VideoService;
import com.huitu.util.ImageUtil;
import com.huitu.util.JSONUtil;

public class VideoListActivity extends Activity {
	private List<String> videos = new ArrayList<String>();
	private List<ImageView> images = new ArrayList<ImageView>();
	private List<String> descs = new ArrayList<String>();
	private MediaController control;
	private VideoView video;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		
		setContentView(R.layout.videolist);
		
		control = new MediaController(this);
		video = (VideoView)findViewById(R.id.vv);
		
		Intent intent = this.getIntent();
		int id = intent.getIntExtra("id", 0);
		System.out.println(id);
		
		try {
			String json = VideoService.query(id);
			if(!json.trim().equals("noValue")){
				List<AD_SPXX> list = JSONUtil.parseJSON_Video_list(json);
				for(AD_SPXX bean : list){
					String path = "http://10.169.53.126:8080/CPJW_2"+bean.getPath();
					path = path.replace("\\", "/");
					System.out.println(path);
					videos.add(path);
					descs.add(bean.getDescr());
					Bitmap  b = ThumbnailUtils.createVideoThumbnail(path,Video.Thumbnails.MICRO_KIND);
					ImageView iv = new ImageView(this);
					iv.setImageBitmap(b);
					images.add(iv);
				}
			}else{
				Toast.makeText(this, R.string.error_novideo, 0).show();
			}
			
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		video.setVideoPath(videos.get(0));
		control.setMediaPlayer(video);
		video.setMediaController(control);
		video.setBackgroundResource(0);
		video.requestFocus();
		video.start();
		
		VideoAdapter adapter = new VideoAdapter(this);
		System.out.println(adapter.getCount());
		
		Gallery g = (Gallery) findViewById(R.id.ggg);
		
		//定义 Gallery 控件  
		g.setAdapter(adapter);
		//设置 Gallery 控件的图片源  
		g.setOnItemClickListener(new OnItemClickListener() { 
		//点击监听事件  
			public void onItemClick(AdapterView parent, View v, int position, long id) {//点击事件  
				if(video.isPlaying()){
					video.stopPlayback();
				}
				video.setVideoPath(videos.get(position));
				video.requestFocus();
				video.start();
				Toast.makeText(VideoListActivity.this, "视频描述："+descs.get(position),0).show(); //Toast显示图片位置  
			}  
		}); 
		g.setOnTouchListener(new OnTouchListener(){

			public boolean onTouch(View v, MotionEvent event) {
				// TODO Auto-generated method stub
				return false;
			}
			
		});
	}
	
	
	private class VideoAdapter extends BaseAdapter{
		private Context mContext; 
		int mGalleryItemBackground;
		//定义Context   
		public VideoAdapter(Context c) { 
		//声明 ImageAdapter  
			mContext = c;  
			TypedArray a = obtainStyledAttributes(R.styleable.Gallery1);
            mGalleryItemBackground = a.getResourceId(
                    R.styleable.Gallery1_android_galleryItemBackground, 0);
            a.recycle();
		}  
		public int getCount() { //获取图片的个数  
			return videos.size(); 
		}  
		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 = images.get(position);
			//给ImageView设置资源  
			i.setLayoutParams(new Gallery.LayoutParams(250, 250));
			//设置布局 图片200×200显示  
			i.setBackgroundResource(mGalleryItemBackground);
			//i.requestFocus();
			return i;  
		} 

	}
}























分享到：
| 2010.11.28(3)———android AlertDialog ...
评论
5 楼 wenjiefeng 2012-03-19  
你好楼主，我想问一下，如何对ImageSwitcher上的图片进行操作呢，就是gallery上方那个大图片进行操作，
4 楼 lipeng88213 2012-03-16  
csy2011 写道
你好，楼主，我这边按照您的思路实现了加载远程图片，非常感谢分享，但是有一个问题：就是我一点击gallery中小图片在Imageswitcher显示后，gallery中的显示的图片就会和ImageSwitcher控件中ImageView的图片变得同样大小。这个问题您做的时候有么？如果有的话该怎么解决呢？谢谢指点。。。

这个可能是你Imageview控件是属性的设置吧
3 楼 csy2011 2012-03-15  
你好，楼主，我这边按照您的思路实现了加载远程图片，非常感谢分享，但是有一个问题：就是我一点击gallery中小图片在Imageswitcher显示后，gallery中的显示的图片就会和ImageSwitcher控件中ImageView的图片变得同样大小。这个问题您做的时候有么？如果有的话该怎么解决呢？谢谢指点。。。
2 楼 csy2011 2012-03-15  
你好，楼主我想问一下你的第一个例子中的ImageUtil这个类实现的是什么功能，能否传上来，给我们学习学习？
1 楼 wenjiefeng 2012-03-12  
你好楼主，我想问一下，如何对ImageSwitcher上的图片进行操作呢，就是gallery上方那个大图片进行操作，
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics