图片浏览器

创建三种图片浏览器：

1.使用ImageView

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    
    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
        >
        <Button 
            android:id="@+id/plus"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/plus"
            />
        <Button 
            android:id="@+id/minus"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/minus"
            />
        <Button 
            android:id="@+id/prior"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/prior"
            />
        <Button 
            android:id="@+id/next"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/next"
            />
        </LinearLayout>
    
    <ImageView 
        android:id="@+id/image1"
        android:layout_width="fill_parent"
        android:layout_height="300dp"
        android:src="@drawable/baiyang"
        android:background="#ffffff"
        />
    
    <ImageView 
        android:id="@+id/image2"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:background="#ffffff"
        />

</LinearLayout>

step2：ImageShow1.java

package com.cb.imagesshow;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.widget.Button;
import android.widget.ImageView;

/*
 * 这个图片浏览器使用 ImageView 完成，功能：局部放大.
 * 存在的问题是：getWidth()获取了整个显示界面的宽，导致鼠标点击处获取的图片与局部放大中显示的图片位置有差异。怎么解决呢???求助。
 */

public class ImagesShow1 extends Activity {
    private int[] imageIds = new int[]{
            R.drawable.baiyang,R.drawable.chunv,R.drawable.jinniu,
            R.drawable.juxie,R.drawable.mojie,R.drawable.sheshou,
            R.drawable.shizi,R.drawable.shuangyu,R.drawable.shuangzi,
            R.drawable.shuiping,R.drawable.tiancheng,R.drawable.tianxie
    };
    private int currentImg = 0;
    private int alpha = 255;
    
    private Button plus;
    private Button minus;
    private Button prior;
    private Button next;
    
    private ImageView image1;
    private ImageView image2;
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        plus = (Button)findViewById(R.id.plus);
        minus = (Button)findViewById(R.id.minus);
        prior = (Button)findViewById(R.id.prior);
        next = (Button)findViewById(R.id.next);
        
        image1 = (ImageView)findViewById(R.id.image1);
        image2 = (ImageView)findViewById(R.id.image2);

        //定义查看上/下一张图片的监听器
        OnClickListener listener1 = new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (v == prior) {
                    if (currentImg <= 0) {
                        currentImg = 12;
                    }
                }
                if (v == next) {
                    if (currentImg >= 11) {
                        currentImg = -1;
                    }
                }
                BitmapDrawable bitmapDrawable = (BitmapDrawable)image1.getDrawable();
                //如果图片还未回收，先强制回收该图片
                if (!bitmapDrawable.getBitmap().isRecycled()) {
                    bitmapDrawable.getBitmap().recycle();
                }
                //改变image1显示的图片
                if (v == prior) {
                    image1.setImageBitmap(BitmapFactory.decodeResource(getResources(), imageIds[--currentImg]));
                }
                else if(v == next){
                    image1.setImageBitmap(BitmapFactory.decodeResource(getResources(), imageIds[++currentImg]));
                }
            }
        };
        prior.setOnClickListener(listener1);
        next.setOnClickListener(listener1);
        
        //定义增大/减小透明度的监听器
        OnClickListener listener2 = new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (v == plus) {
                    alpha += 20;
                }
                if (v == minus) {
                    alpha -= 20;
                }
                if (alpha > 255) {
                    alpha =255;
                }
                if (alpha < 0) {
                    alpha = 0;
                }
                image1.setAlpha(alpha);
            }
        };
        plus.setOnClickListener(listener2);
        minus.setOnClickListener(listener2);
        
        //设置在图片上点击的监听器
        image1.setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                BitmapDrawable bitmapDrawable = (BitmapDrawable)image1.getDrawable();
                //获取第一个图片显示框中的位图
                Bitmap bitmap = bitmapDrawable.getBitmap();
                //bitmap图片实际大小与第一个ImageView的缩放比例
                double scale = bitmap.getWidth()/320.0;
                int x = (int)(event.getX() * scale);
                int y = (int)(event.getY() * scale);
                if (x > bitmap.getWidth() - 120) {
                    x = bitmap.getWidth() - 120;
                }
                if (y > bitmap.getHeight() - 120) {
                    y = bitmap.getHeight() - 120;
                }
                image2.setImageBitmap(Bitmap.createBitmap(bitmap, x, y, 120, 120));
                image2.setAlpha(alpha);
                return false;
            }
        });
    }
}

 step3：效果如图

2.使用GridView和ImageSwitcher

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" 
    android:gravity="center_horizontal">

    <GridView 
        android:id="@+id/grid01"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"

        android:numColumns="4"
        android:gravity="center"
        />
    <ImageSwitcher 
        android:id="@+id/switcher"
        android:layout_width="320dp"
        android:layout_height="320dp"
        android:gravity="center_horizontal"
        />
    
        
</LinearLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" 
    android:gravity="center">

    <ImageView
        android:id="@+id/image1" 
        android:layout_width="40dp"
        android:layout_height="40dp"
        />
        
</LinearLayout>

step2：ShowImages.java

package com.cb.showimages;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.R.anim;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.GridView;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.SimpleAdapter;
import android.widget.ViewSwitcher.ViewFactory;
/*
 * This project uses GridView and ImageSwitcher.
 * 功能：大图预览
 */
public class ShowImages extends Activity {
    private int[] imageIds = new int[]{
            R.drawable.sunset,R.drawable.water,R.drawable.winter,R.drawable.sunset,
            R.drawable.water,R.drawable.winter,R.drawable.sunset,R.drawable.water,
            R.drawable.winter,R.drawable.sunset,R.drawable.water,R.drawable.winter,
            R.drawable.sunset,R.drawable.water,R.drawable.winter,R.drawable.sunset
    };
    
    private GridView mGridView;
    private ImageSwitcher switcher;
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        /*
         * 1.创建List对象集合，其元素为Map对象
         * 2.使用Map对象来存储单个元素--图像
         * 3.将Map对象存入List对象中
         */
        List<Map<String, Object>> listItems = new ArrayList<Map<String,Object>>();
        for (int i = 0; i < imageIds.length; i++) {
            Map<String, Object> listItem = new HashMap<String, Object>();
            listItem.put("images", imageIds[i]);
            listItems.add(listItem);
        }

        switcher = (ImageSwitcher)findViewById(R.id.switcher);
        //设置图片更换的动画效果
        switcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));
        switcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));
        
        //为ImageSwitcher设置图片切换的动画效果。ImageSwitcher对象负责显示makeView()方法返回的imageView对象.
        switcher.setFactory(new ViewFactory() {
            
            @Override
            public View makeView() {
                ImageView imageView = new ImageView(ShowImages.this);
                imageView.setBackgroundColor(0xff0000);
                imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
                imageView.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
                return imageView;
            }
        });
        //创建SimpleAdapter
        SimpleAdapter simpleAdapter = new SimpleAdapter(
                this, 
                listItems, 
                R.layout.cell, //该布局定义List对象中各个item的布局 
                new String[]{"images"}, 
                new int[]{R.id.image1}
                );
        mGridView = (GridView)findViewById(R.id.grid01);
        mGridView.setAdapter(simpleAdapter);
        
        //定义列表项被单击的监听器
        mGridView.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                    int position, long id) {
                //显示当前被选中的图片
                switcher.setImageResource(imageIds[position % imageIds.length]);
            }
        });
        //定义列表项被选中的监听器
        mGridView.setOnItemSelectedListener(new OnItemSelectedListener() {

            @Override
            public void onItemSelected(AdapterView<?> parent, View view,
                    int position, long id) {
                switcher.setImageResource(imageIds[position % imageIds.length]);
            }

            @Override
            public void onNothingSelected(AdapterView<?> parent) {}
            
        });
        
    }
}

 step3：效果如图：

3.使用Gallery和ImageSwitcher

step1：创建工程GalleryTest，其中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">
<!-- 定义一个ImageSwitcher组件 -->
<ImageSwitcher android:id="@+id/switcher"
    android:layout_width="320dp"
    android:layout_height="320dp"
    />
<!-- 定义一个Gallery组件 -->
<Gallery android:id="@+id/gallery"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="25dp" 
    android:unselectedAlpha="0.6"
    android:spacing="3pt"
    />    
</LinearLayout>

step2：GalleryTest.java

package org.crazyit.gallery;

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

public class GalleryTest extends Activity
{
    int[] imageIds = new int[]
    {
        R.drawable.shuangzi, R.drawable.shuangyu, R.drawable.chunv, R.drawable.tiancheng, 
        R.drawable.tianxie, R.drawable.sheshou, R.drawable.juxie, R.drawable.shuiping,
        R.drawable.shizi, R.drawable.baiyang, R.drawable.jinniu, R.drawable.mojie 
    };
    
    private Gallery gallery;
    private ImageSwitcher switcher;
    
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        gallery = (Gallery) findViewById(R.id.gallery);
        switcher = (ImageSwitcher)findViewById(R.id.switcher);

        switcher.setFactory(new ViewFactory()
        {
            @Override
            public View makeView()
            {
                ImageView imageView = new ImageView(GalleryTest.this);
                imageView.setBackgroundColor(0xff0000);
                imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
                imageView.setLayoutParams(new ImageSwitcher.LayoutParams(
                    LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
                return imageView;
            }
        });
        // 设置图片更换的动画效果
        switcher.setInAnimation(AnimationUtils.loadAnimation(this,
            android.R.anim.fade_in));
        switcher.setOutAnimation(AnimationUtils.loadAnimation(this,
            android.R.anim.fade_out));
        // 创建一个BaseAdapter对象，该对象负责提供Gallery所显示的图片
        BaseAdapter adapter = new BaseAdapter()
        {
            @Override
            public int getCount()
            {
                return imageIds.length;
            }
            @Override
            public Object getItem(int position)
            {
                return position;
            }
            @Override
            public long getItemId(int position)
            {
                return position;
            }

            // 该方法的返回的View就是代表了每个列表项
            @Override
            public View getView(int position, View convertView, ViewGroup parent)
            {
                // 创建一个ImageView
                ImageView imageView = new ImageView(GalleryTest.this);
                imageView.setImageResource(imageIds[position % imageIds.length]);
                // 设置ImageView的缩放类型
                imageView.setScaleType(ImageView.ScaleType.FIT_XY);
                imageView.setLayoutParams(new Gallery.LayoutParams(75, 100));
                TypedArray typedArray = obtainStyledAttributes(R.styleable.Gallery);
                imageView.setBackgroundResource(typedArray.getResourceId(R.styleable.Gallery_android_galleryItemBackground, 0));
                return imageView;
            }
        };
        gallery.setAdapter(adapter);
        gallery.setOnItemSelectedListener(new OnItemSelectedListener()
        {
            // 当Gallery选中项发生改变时触发该方法
            @Override
            public void onItemSelected(AdapterView<?> parent, View view,
                int position, long id)
            {
                switcher.setImageResource(imageIds[position % imageIds.length]);
            }

            @Override
            public void onNothingSelected(AdapterView<?> parent){}
        });
    }
}

 step3：效果如图：