ImageSwitcher图片切换器的简单功能用法

最新推荐文章于 2023-11-08 15:09:06 发布

一直很安静的坚持

最新推荐文章于 2023-11-08 15:09:06 发布

阅读量1.7k

点赞数 2

分类专栏： android学习笔记

本文链接：https://blog.csdn.net/qq_34487977/article/details/51211114

版权

android学习笔记专栏收录该内容

28 篇文章 0 订阅

订阅专栏

我们想达到一个普通的图片浏览的功能，具体效果如下

这里写图片描述
首先是一个整个图片预览，当我们点击图片时，切换到另外一个Activity来看大图。

并且当我们左右拖动图片时可以有动画效果的切换图片。
下面给出代码。首先是MainActivity，比较简单，就是一个GridView组件显示图片。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <GridView android:id="@+id/grid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#000000"
        android:numColumns="auto_fit"
        android:horizontalSpacing="5dp"
        android:verticalSpacing="5dp"
        android:columnWidth="90.0dip"
        ></GridView>
<!--android:numColumns="auto_fit"该属性设置的是列数，属性设置为auto_fit则为系统自动调整列数 -->
<!-- android:columnWidth="90.0dip" 该属性设置的是item的宽度 -->
</RelativeLayout>

主界面的实现代码，

package com.test.imageswitcher;


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

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;



public class MainActivity extends Activity  {
    //声明控件
    private GridView gridview;
    //为GridView提供的图片数组
    public int [] imageIds = new int[]{
            R.drawable.a01,R.drawable.a02,R.drawable.a03,
            R.drawable.a04,R.drawable.a05,R.drawable.a06,
            R.drawable.a07,R.drawable.a08,R.drawable.a09,
            R.drawable.a10,R.drawable.a11,R.drawable.a12,
    };
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //去除标题头
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        //创建集合，将图片放入
        List<Map<String,Object>> listitem = new ArrayList<Map<String,Object>>();
        for(int i = 0; i<imageIds.length;i++){
            Map<String, Object> map = new HashMap<String, Object>();
            map.put("imageIds", imageIds[i]);
            listitem.add(map);
        };
        //找到控件对象
        gridview = (GridView)findViewById(R.id.grid);
        //为GridView设置适配器adapter
        BaseAdapter adapter = new BaseAdapter() {
        class ViewHolder {
            public ImageView imageView;
        }
            @Override
            public View getView(int position, View convertView, ViewGroup parent) {
                ViewHolder viewHolder;
                //缓存为空则创建convertView
                if(convertView == null){
                //下面为为适配器在外部提供了一个ImageView，可以跟自由的定义ImageView样式。代码后面给出；
                    convertView = LayoutInflater.from(getApplication()).inflate(R.layout.imageitem, null);
                    viewHolder = new ViewHolder();
                    viewHolder.imageView = (ImageView) convertView.findViewById(R.id.image);
                    convertView.setTag(viewHolder);
                }else{
                    //获取缓存内的view
                    viewHolder = (ViewHolder) convertView.getTag();
                }
                //viewHolder.imageView.setPadding(0, 0, 0, 0);
                viewHolder.imageView.setImageResource(imageIds[position]);
                return convertView;
            }

            @Override
            public long getItemId(int position) {
                return position;
            }

            @Override
            public Object getItem(int position) {
                return position;
            }

            @Override
            public int getCount() {
                return imageIds.length;
            }
        };
        //将适配器绑定到GridView
        gridview.setAdapter(adapter);
        //下面是放我们点击图片时，intent启动另外一个Activity来显示我们点击的图片，（需要将我们点击的图片的编号传入带到新的Activity）
        gridview.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                    int position, long id) {
                Intent intent = new Intent();
                intent.putExtra("position", position);
                intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                intent.setClass(MainActivity.this, showphoto.class);
                startActivity(intent);              
            }
        }); 
    }
}

上面为适配器提供了一个ImageView需要我们另外去定义R.layout.imageitem如下

<?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" >

    <ImageView 
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="150dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_launcher" />

</RelativeLayout>

第二个Activity，显示带动画切换的ImageSwitcher

package com.test.imageswitcher;


import android.app.Activity;
import android.app.ActionBar.LayoutParams;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.View.OnTouchListener;
import android.view.animation.AnimationUtils;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;
import android.widget.ViewSwitcher.ViewFactory;


public class showphoto extends Activity implements ViewFactory, OnTouchListener {
    public int [] imageIds = new int[]{
            R.drawable.a01,R.drawable.a02,R.drawable.a03,
            R.drawable.a04,R.drawable.a05,R.drawable.a06,
            R.drawable.a07,R.drawable.a08,R.drawable.a09,
            R.drawable.a10,R.drawable.a11,R.drawable.a12,
    };
    /**
     * 按下点的X坐标
     */
    private float downX;
    //ImagaSwitcher 的引用
    private ImageSwitcher mImageSwitcher;
    //选中的item的图片序号 由放入intent中传过来，在这边获取
    private int currentPosition;
    //装载点点的容器
    private LinearLayout linearLayout;
    //点点数组
    private ImageView[] tips;  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //去除标题头
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.photo);
        //实例化控件ImageSwitcher
        mImageSwitcher = (ImageSwitcher)findViewById(R.id.imageSwitcher1);
        //设置Factory      记得将该类作为接口ViewFactory的实现类
        mImageSwitcher.setFactory(this);
        //设置OnTouchlistener监听器来监听点击选择事件来切换图片         将该类作为接口OnTouchListener的实现类
        mImageSwitcher.setOnTouchListener(this);

        linearLayout = (LinearLayout) findViewById(R.id.viewGroup);  
        tips = new ImageView[imageIds.length];
        for(int i = 0; i < imageIds.length;i++){
            ImageView image = new ImageView(this);
            tips [i] = image;
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
                    new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT,
                                LayoutParams.WRAP_CONTENT));    
            layoutParams.rightMargin = 3;  
               layoutParams.leftMargin = 3; 

               image.setBackgroundResource(R.drawable.a13);  
               linearLayout.addView(image, layoutParams);
        }
        //从传过来的intent中获取选中的item的图片序号 
        currentPosition = getIntent().getIntExtra("position", 0);

        mImageSwitcher.setImageResource(imageIds[currentPosition]);
        //将选中的图片展示出来
        setImageBackground(currentPosition);
    }
        private void setImageBackground(int selectItems){  
            for(int i=0; i<tips.length; i++){  
                if(i == selectItems){  
                    tips[i].setBackgroundResource(R.drawable.a13);  
                }else{  
                    tips[i].setBackgroundResource(R.drawable.a14);  
                }  
            }  
        } 
//为图片切换动画提供imageview
    @Override
    public View makeView() {
        final ImageView i = new ImageView(this);
        i.setBackgroundColor(0xff000000);
        i.setScaleType(ImageView.ScaleType.CENTER_CROP);
        i.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
        return i ;
    }
    //该部分为当我们用户进行操作产生事件时，的相应处理，
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:{
            //手指按下的X坐标
            downX = event.getX();
            break;
        }
        case MotionEvent.ACTION_UP:{
            float lastX = event.getX();
            //抬起的时候的X坐标大于按下的时候就显示上一张图片
            if(lastX > downX){
                if(currentPosition > 0){
                    //设置动画，这里的动画比较简单，不明白的去网上看看相关内容
                    mImageSwitcher.setInAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.left_in));
                    mImageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.right_out));
                    currentPosition --;
                    mImageSwitcher.setImageResource(imageIds[currentPosition % imageIds.length]);
                    setImageBackground(currentPosition);
                }else{
                    Toast.makeText(getApplication(), "已经是第一张", Toast.LENGTH_SHORT).show();
                }
            } 

            if(lastX < downX){
                if(currentPosition < imageIds.length - 1){
                    mImageSwitcher.setInAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.right_in));
                    mImageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(getApplication(), R.anim.lift_out));
                    currentPosition ++ ;
                    mImageSwitcher.setImageResource(imageIds[currentPosition]);
                    setImageBackground(currentPosition);
                }else{
                    Toast.makeText(getApplication(), "到了最后一张", Toast.LENGTH_SHORT).show();
                }
            }
            }

            break;
        }

        return true;
    }

}

然后是第二个Activity的布局代码
包括一个ImageSwitcher和一个用于显示第几张图片的点点

<?xml version="1.0" encoding="UTF-8"?>  
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent" >  
    <ImageSwitcher  
        android:id="@+id/imageSwitcher1"  
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent">  
    </ImageSwitcher>  

    <RelativeLayout      
        android:layout_width="fill_parent"      
        android:layout_height="wrap_content"     
        android:orientation="vertical" >      
        <LinearLayout      
            android:id="@+id/viewGroup"      
            android:layout_width="fill_parent"      
            android:layout_height="wrap_content"      
            android:layout_alignParentBottom="true"     
            android:layout_marginBottom="30dp"      
            android:gravity="center_horizontal"      
            android:orientation="horizontal" >      
        </LinearLayout>      
    </RelativeLayout>  
</FrameLayout>

另外给出这里用到的几个简单的动画切换的代码，res/anim/…..
left_in.xml

<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
        android:fromXDelta="-100%p"
        android:toXDelta="0"
        android:duration="500"/>
</set>

left_out.xml

<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
        android:fromXDelta="0"
        android:toXDelta="-100%p"
        android:duration="500"/>
</set>

right_in.xml

<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
        android:fromXDelta="100%p"
        android:toXDelta="0"
        android:duration="500"/>
</set>

right_out.xml

<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
        android:fromXDelta="0"
        android:toXDelta="100%p"
        android:duration="500"/>
</set>