代码改变世界

图片浏览器

2012-07-02 11:48  ...平..淡...  阅读(288)  评论(0)  编辑  收藏  举报

创建三种图片浏览器：

1.使用ImageView

step1：创建工程ImagesShow1，其中main.xml文件内容如下：

main.xml 
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="fill_parent"
 4     android:layout_height="fill_parent"
 5     android:orientation="vertical" >
 6     
 7     <LinearLayout 
 8         android:layout_width="fill_parent"
 9         android:layout_height="wrap_content"
10         android:orientation="horizontal"
11         android:gravity="center_horizontal"
12         >
13         <Button 
14             android:id="@+id/plus"
15             android:layout_width="wrap_content"
16             android:layout_height="wrap_content"
17             android:text="@string/plus"
18             />
19         <Button 
20             android:id="@+id/minus"
21             android:layout_width="wrap_content"
22             android:layout_height="wrap_content"
23             android:text="@string/minus"
24             />
25         <Button 
26             android:id="@+id/prior"
27             android:layout_width="wrap_content"
28             android:layout_height="wrap_content"
29             android:text="@string/prior"
30             />
31         <Button 
32             android:id="@+id/next"
33             android:layout_width="wrap_content"
34             android:layout_height="wrap_content"
35             android:text="@string/next"
36             />
37         </LinearLayout>
38     
39     <ImageView 
40         android:id="@+id/image1"
41         android:layout_width="fill_parent"
42         android:layout_height="300dp"
43         android:src="@drawable/baiyang"
44         android:background="#ffffff"
45         />
46     
47     <ImageView 
48         android:id="@+id/image2"
49         android:layout_width="120dp"
50         android:layout_height="120dp"
51         android:background="#ffffff"
52         />
53 
54 </LinearLayout>

step2：ImageShow1.java

ImageShow1 
  1 package com.cb.imagesshow;
  2 
  3 import android.app.Activity;
  4 import android.graphics.Bitmap;
  5 import android.graphics.BitmapFactory;
  6 import android.graphics.drawable.BitmapDrawable;
  7 import android.os.Bundle;
  8 import android.view.MotionEvent;
  9 import android.view.View;
 10 import android.view.View.OnClickListener;
 11 import android.view.View.OnTouchListener;
 12 import android.widget.Button;
 13 import android.widget.ImageView;
 14 
 15 /*
 16  * 这个图片浏览器使用 ImageView 完成，功能：局部放大.
 17  * 存在的问题是：getWidth()获取了整个显示界面的宽，导致鼠标点击处获取的图片与局部放大中显示的图片位置有差异。怎么解决呢???求助。
 18  */
 19 
 20 public class ImagesShow1 extends Activity {
 21     private int[] imageIds = new int[]{
 22             R.drawable.baiyang,R.drawable.chunv,R.drawable.jinniu,
 23             R.drawable.juxie,R.drawable.mojie,R.drawable.sheshou,
 24             R.drawable.shizi,R.drawable.shuangyu,R.drawable.shuangzi,
 25             R.drawable.shuiping,R.drawable.tiancheng,R.drawable.tianxie
 26     };
 27     private int currentImg = 0;
 28     private int alpha = 255;
 29     
 30     private Button plus;
 31     private Button minus;
 32     private Button prior;
 33     private Button next;
 34     
 35     private ImageView image1;
 36     private ImageView image2;
 37     
 38     @Override
 39     public void onCreate(Bundle savedInstanceState) {
 40         super.onCreate(savedInstanceState);
 41         setContentView(R.layout.main);
 42         
 43         plus = (Button)findViewById(R.id.plus);
 44         minus = (Button)findViewById(R.id.minus);
 45         prior = (Button)findViewById(R.id.prior);
 46         next = (Button)findViewById(R.id.next);
 47         
 48         image1 = (ImageView)findViewById(R.id.image1);
 49         image2 = (ImageView)findViewById(R.id.image2);
 50 
 51         //定义查看上/下一张图片的监听器
 52         OnClickListener listener1 = new OnClickListener() {
 53             @Override
 54             public void onClick(View v) {
 55                 if (v == prior) {
 56                     if (currentImg <= 0) {
 57                         currentImg = 12;
 58                     }
 59                 }
 60                 if (v == next) {
 61                     if (currentImg >= 11) {
 62                         currentImg = -1;
 63                     }
 64                 }
 65                 BitmapDrawable bitmapDrawable = (BitmapDrawable)image1.getDrawable();
 66                 //如果图片还未回收，先强制回收该图片
 67                 if (!bitmapDrawable.getBitmap().isRecycled()) {
 68                     bitmapDrawable.getBitmap().recycle();
 69                 }
 70                 //改变image1显示的图片
 71                 if (v == prior) {
 72                     image1.setImageBitmap(BitmapFactory.decodeResource(getResources(), imageIds[--currentImg]));
 73                 }
 74                 else if(v == next){
 75                     image1.setImageBitmap(BitmapFactory.decodeResource(getResources(), imageIds[++currentImg]));
 76                 }
 77             }
 78         };
 79         prior.setOnClickListener(listener1);
 80         next.setOnClickListener(listener1);
 81         
 82         //定义增大/减小透明度的监听器
 83         OnClickListener listener2 = new OnClickListener() {
 84             @Override
 85             public void onClick(View v) {
 86                 if (v == plus) {
 87                     alpha += 20;
 88                 }
 89                 if (v == minus) {
 90                     alpha -= 20;
 91                 }
 92                 if (alpha > 255) {
 93                     alpha =255;
 94                 }
 95                 if (alpha < 0) {
 96                     alpha = 0;
 97                 }
 98                 image1.setAlpha(alpha);
 99             }
100         };
101         plus.setOnClickListener(listener2);
102         minus.setOnClickListener(listener2);
103         
104         //设置在图片上点击的监听器
105         image1.setOnTouchListener(new OnTouchListener() {
106             @Override
107             public boolean onTouch(View v, MotionEvent event) {
108                 BitmapDrawable bitmapDrawable = (BitmapDrawable)image1.getDrawable();
109                 //获取第一个图片显示框中的位图
110                 Bitmap bitmap = bitmapDrawable.getBitmap();
111                 //bitmap图片实际大小与第一个ImageView的缩放比例
112                 double scale = bitmap.getWidth()/320.0;
113                 int x = (int)(event.getX() * scale);
114                 int y = (int)(event.getY() * scale);
115                 if (x > bitmap.getWidth() - 120) {
116                     x = bitmap.getWidth() - 120;
117                 }
118                 if (y > bitmap.getHeight() - 120) {
119                     y = bitmap.getHeight() - 120;
120                 }
121                 image2.setImageBitmap(Bitmap.createBitmap(bitmap, x, y, 120, 120));
122                 image2.setAlpha(alpha);
123                 return false;
124             }
125         });
126     }
127 }

 step3：效果如图

2.使用GridView和ImageSwitcher

step1：创建工程ShowImages，其中main.xml文件内容如下：

main.xml 
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="fill_parent"
 4     android:layout_height="fill_parent"
 5     android:orientation="vertical" 
 6     android:gravity="center_horizontal">
 7 
 8     <GridView 
 9         android:id="@+id/grid01"
10         android:layout_width="fill_parent"
11         android:layout_height="wrap_content"
12 
13         android:numColumns="4"
14         android:gravity="center"
15         />
16     <ImageSwitcher 
17         android:id="@+id/switcher"
18         android:layout_width="320dp"
19         android:layout_height="320dp"
20         android:gravity="center_horizontal"
21         />
22     
23         
24 </LinearLayout>

另外，SimpleAdapter中的布局文件cell.xml为：

cell.xml 
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="fill_parent"
 4     android:layout_height="fill_parent"
 5     android:orientation="horizontal" 
 6     android:gravity="center">
 7 
 8     <ImageView
 9         android:id="@+id/image1" 
10         android:layout_width="40dp"
11         android:layout_height="40dp"
12         />
13         
14 </LinearLayout>

step2：ShowImages.java

ShowImages 
  1 package com.cb.showimages;
  2 
  3 import java.util.ArrayList;
  4 import java.util.HashMap;
  5 import java.util.List;
  6 import java.util.Map;
  7 
  8 import android.R.anim;
  9 import android.app.Activity;
 10 import android.os.Bundle;
 11 import android.view.View;
 12 import android.view.ViewGroup.LayoutParams;
 13 import android.view.animation.Animation;
 14 import android.view.animation.AnimationUtils;
 15 import android.widget.AdapterView;
 16 import android.widget.AdapterView.OnItemClickListener;
 17 import android.widget.AdapterView.OnItemSelectedListener;
 18 import android.widget.GridView;
 19 import android.widget.ImageSwitcher;
 20 import android.widget.ImageView;
 21 import android.widget.SimpleAdapter;
 22 import android.widget.ViewSwitcher.ViewFactory;
 23 /*
 24  * This project uses GridView and ImageSwitcher.
 25  * 功能：大图预览
 26  */
 27 public class ShowImages extends Activity {
 28     private int[] imageIds = new int[]{
 29             R.drawable.sunset,R.drawable.water,R.drawable.winter,R.drawable.sunset,
 30             R.drawable.water,R.drawable.winter,R.drawable.sunset,R.drawable.water,
 31             R.drawable.winter,R.drawable.sunset,R.drawable.water,R.drawable.winter,
 32             R.drawable.sunset,R.drawable.water,R.drawable.winter,R.drawable.sunset
 33     };
 34     
 35     private GridView mGridView;
 36     private ImageSwitcher switcher;
 37     
 38     @Override
 39     public void onCreate(Bundle savedInstanceState) {
 40         super.onCreate(savedInstanceState);
 41         setContentView(R.layout.main);
 42         
 43         /*
 44          * 1.创建List对象集合，其元素为Map对象
 45          * 2.使用Map对象来存储单个元素--图像
 46          * 3.将Map对象存入List对象中
 47          */
 48         List<Map<String, Object>> listItems = new ArrayList<Map<String,Object>>();
 49         for (int i = 0; i < imageIds.length; i++) {
 50             Map<String, Object> listItem = new HashMap<String, Object>();
 51             listItem.put("images", imageIds[i]);
 52             listItems.add(listItem);
 53         }
 54 
 55         switcher = (ImageSwitcher)findViewById(R.id.switcher);
 56         //设置图片更换的动画效果
 57         switcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));
 58         switcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));
 59         
 60         //为ImageSwitcher设置图片切换的动画效果。ImageSwitcher对象负责显示makeView()方法返回的imageView对象.
 61         switcher.setFactory(new ViewFactory() {
 62             
 63             @Override
 64             public View makeView() {
 65                 ImageView imageView = new ImageView(ShowImages.this);
 66                 imageView.setBackgroundColor(0xff0000);
 67                 imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
 68                 imageView.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
 69                 return imageView;
 70             }
 71         });
 72         //创建SimpleAdapter
 73         SimpleAdapter simpleAdapter = new SimpleAdapter(
 74                 this, 
 75                 listItems, 
 76                 R.layout.cell, //该布局定义List对象中各个item的布局 
 77                 new String[]{"images"}, 
 78                 new int[]{R.id.image1}
 79                 );
 80         mGridView = (GridView)findViewById(R.id.grid01);
 81         mGridView.setAdapter(simpleAdapter);
 82         
 83         //定义列表项被单击的监听器
 84         mGridView.setOnItemClickListener(new OnItemClickListener() {
 85 
 86             @Override
 87             public void onItemClick(AdapterView<?> parent, View view,
 88                     int position, long id) {
 89                 //显示当前被选中的图片
 90                 switcher.setImageResource(imageIds[position % imageIds.length]);
 91             }
 92         });
 93         //定义列表项被选中的监听器
 94         mGridView.setOnItemSelectedListener(new OnItemSelectedListener() {
 95 
 96             @Override
 97             public void onItemSelected(AdapterView<?> parent, View view,
 98                     int position, long id) {
 99                 switcher.setImageResource(imageIds[position % imageIds.length]);
100             }
101 
102             @Override
103             public void onNothingSelected(AdapterView<?> parent) {}
104             
105         });
106         
107     }
108 }

 step3：效果如图：

3.使用Gallery和ImageSwitcher

step1：创建工程GalleryTest，其中main.xml文件内容如下：

main.xml 
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:orientation="vertical"
 4     android:layout_width="fill_parent"
 5     android:layout_height="fill_parent">
 6 <!-- 定义一个ImageSwitcher组件 -->
 7 <ImageSwitcher android:id="@+id/switcher"
 8     android:layout_width="320dp"
 9     android:layout_height="320dp"
10     />
11 <!-- 定义一个Gallery组件 -->
12 <Gallery android:id="@+id/gallery"
13     android:layout_width="fill_parent"
14     android:layout_height="wrap_content"
15     android:layout_marginTop="25dp" 
16     android:unselectedAlpha="0.6"
17     android:spacing="3pt"
18     />    
19 </LinearLayout>

step2：GalleryTest.java

GalleryTest 
  1 package org.crazyit.gallery;
  2 
  3 import android.app.Activity;
  4 import android.content.res.TypedArray;
  5 import android.os.Bundle;
  6 import android.view.View;
  7 import android.view.ViewGroup;
  8 import android.view.animation.AnimationUtils;
  9 import android.widget.AdapterView.OnItemSelectedListener;
 10 import android.widget.AdapterView;
 11 import android.widget.BaseAdapter;
 12 import android.widget.Gallery;
 13 import android.widget.ImageSwitcher;
 14 import android.widget.ImageView;
 15 import android.widget.Gallery.LayoutParams;
 16 import android.widget.ViewSwitcher.ViewFactory;
 17 
 18 public class GalleryTest extends Activity
 19 {
 20     int[] imageIds = new int[]
 21     {
 22         R.drawable.shuangzi, R.drawable.shuangyu, R.drawable.chunv, R.drawable.tiancheng, 
 23         R.drawable.tianxie, R.drawable.sheshou, R.drawable.juxie, R.drawable.shuiping,
 24         R.drawable.shizi, R.drawable.baiyang, R.drawable.jinniu, R.drawable.mojie 
 25     };
 26     
 27     private Gallery gallery;
 28     private ImageSwitcher switcher;
 29     
 30     @Override
 31     public void onCreate(Bundle savedInstanceState)
 32     {
 33         super.onCreate(savedInstanceState);
 34         setContentView(R.layout.main);
 35 
 36         gallery = (Gallery) findViewById(R.id.gallery);
 37         switcher = (ImageSwitcher)findViewById(R.id.switcher);
 38 
 39         switcher.setFactory(new ViewFactory()
 40         {
 41             @Override
 42             public View makeView()
 43             {
 44                 ImageView imageView = new ImageView(GalleryTest.this);
 45                 imageView.setBackgroundColor(0xff0000);
 46                 imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
 47                 imageView.setLayoutParams(new ImageSwitcher.LayoutParams(
 48                     LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
 49                 return imageView;
 50             }
 51         });
 52         // 设置图片更换的动画效果
 53         switcher.setInAnimation(AnimationUtils.loadAnimation(this,
 54             android.R.anim.fade_in));
 55         switcher.setOutAnimation(AnimationUtils.loadAnimation(this,
 56             android.R.anim.fade_out));
 57         // 创建一个BaseAdapter对象，该对象负责提供Gallery所显示的图片
 58         BaseAdapter adapter = new BaseAdapter()
 59         {
 60             @Override
 61             public int getCount()
 62             {
 63                 return imageIds.length;
 64             }
 65             @Override
 66             public Object getItem(int position)
 67             {
 68                 return position;
 69             }
 70             @Override
 71             public long getItemId(int position)
 72             {
 73                 return position;
 74             }
 75 
 76             // 该方法的返回的View就是代表了每个列表项
 77             @Override
 78             public View getView(int position, View convertView, ViewGroup parent)
 79             {
 80                 // 创建一个ImageView
 81                 ImageView imageView = new ImageView(GalleryTest.this);
 82                 imageView.setImageResource(imageIds[position % imageIds.length]);
 83                 // 设置ImageView的缩放类型
 84                 imageView.setScaleType(ImageView.ScaleType.FIT_XY);
 85                 imageView.setLayoutParams(new Gallery.LayoutParams(75, 100));
 86                 TypedArray typedArray = obtainStyledAttributes(R.styleable.Gallery);
 87                 imageView.setBackgroundResource(typedArray.getResourceId(R.styleable.Gallery_android_galleryItemBackground, 0));
 88                 return imageView;
 89             }
 90         };
 91         gallery.setAdapter(adapter);
 92         gallery.setOnItemSelectedListener(new OnItemSelectedListener()
 93         {
 94             // 当Gallery选中项发生改变时触发该方法
 95             @Override
 96             public void onItemSelected(AdapterView<?> parent, View view,
 97                 int position, long id)
 98             {
 99                 switcher.setImageResource(imageIds[position % imageIds.length]);
100             }
101 
102             @Override
103             public void onNothingSelected(AdapterView<?> parent){}
104         });
105     }
106 }

 step3：效果如图：