Android实现仿Windows7图片预览窗格效果

本实例将显示类似于windows7提供的图片预览窗格效果,单击任意一张图片,可以在右侧显示该图片的预览效果。

效果如图所示:

具体实现方法:
res/layout/main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="horizontal"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:id="@+id/layout1"
 >
 <GridView android:id="@+id/gridView1"
  android:layout_height="match_parent"
  android:layout_width="440px"
  android:layout_marginTop="10px"
  android:horizontalSpacing="3px"
  android:verticalSpacing="3px"
  android:numColumns="3"/>
 <!-- 添加一个图像切换器 -->
 <ImageSwitcher
  android:id="@+id/imageSwitcher1"
  android:padding="10px"
  android:layout_width="match_parent"
  android:layout_height="match_parent"/>
</LinearLayout> 

MainActivity:

package com.example.test; 

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher.ViewFactory; 

public class MainActivity extends Activity {
 private int[] imageId=new int []{R.drawable.img1,R.drawable.img2,R.drawable.img3,R.drawable.img4,
   R.drawable.img5,R.drawable.img6,R.drawable.img7,R.drawable.img8,R.drawable.img9};
 private ImageSwitcher imageSwitcher;
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main); 

  imageSwitcher=(ImageSwitcher)findViewById(R.id.imageSwitcher1);//获取图像切换器
  //设置动画效果
  imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));//设置淡入动画
  imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));//设置淡出动画
  imageSwitcher.setFactory(new ViewFactory() { 

   @Override
   public View makeView() {
    //实例化一个ImageView对象
    ImageView imageView=new ImageView(MainActivity.this);
    //设置保持纵横比居中缩放图像
    imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
    imageView.setLayoutParams(new ImageSwitcher.LayoutParams(
      LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
    return imageView;//返回imageView对象
   }
  });
  imageSwitcher.setImageResource(R.drawable.img3);//设置默认显示的图像 

  GridView gridview=(GridView)findViewById(R.id.gridView1);
  BaseAdapter adapter=new BaseAdapter(){ 

   @Override
   public View getView(int position, View convertView, ViewGroup parent) {
    ImageView imageView = null;//声明一个ImageView对象
    if(convertView==null){
     imageView=new ImageView(MainActivity.this);//实例化ImageView对象
     /****************设置图像的宽度和高度*******************/
     imageView.setAdjustViewBounds(true);
     imageView.setMaxWidth(150);
     imageView.setMaxHeight(113);
     /*********************************************************/
     imageView.setPadding(5, 5, 5, 5);
    }else{
     imageView=(ImageView)convertView;
    }
    imageView.setImageResource(imageId[position]);
    return imageView;
   } 

   //功能:获得当前选项的id
   @Override
   public long getItemId(int position) {
    return position;
   } 

   //功能:获得当前选项
   @Override
   public Object getItem(int position) {
    return position;
   } 

   //获得数量
   @Override
   public int getCount() {
    return imageId.length;
   }
  };
  gridview.setAdapter(adapter);
  gridview.setOnItemClickListener(new OnItemClickListener() { 

   @Override
   public void onItemClick(AdapterView<?> parent, View view, int position,
     long id) {
     //显示选中的照片
     imageSwitcher.setImageResource(imageId[position]);
   }
  });
 }
} 

运行效果与开头描述相同,成功实现。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android编程滑动效果之Gallery+GridView实现图片预览功能(附demo源码下载)

    本文实例讲述了Android编程滑动效果之Gallery+GridView实现图片预览功能.分享给大家供大家参考,具体如下: Android系统自带一个GridView和Gallery两个控件,GridView网格显示,Gallery单个浏览,两者结合起来可以真正实现Gallery浏览图片效果. 本示例通过GridView和Gallery两个控件,模仿实现一个完整的仿Gallery图像集的图片浏览效果.效果图如下: 1.GridView 首先,自定义一个GridImageAdapter图片适配器

  • Android图片上传实现预览效果

    首先具体分析一下,实现的功能,其中需求分析是必不可少的,需求.逻辑清除之后,再上手写代码,思路会很清晰. 1.多图上传首先得选择图片(这里项目需求是既可以拍照上传也可以从相册中选择) 2.拍照上传很简单了网上也有很多例子,调用照相机,返回uri,获取图片 3.从相册中选择图片  3.1 获取手机中的所有图片  3.2 将图片存到自定义图片数组中显示  3.3 自定义ViewPager浏览图片 主要的逻辑大体是这样,下面具体看一下实现: 一.首先看一下界面: <com.view.NoScrollG

  • Android实现本地图片选择及预览缩放效果

    在做项目时经常会遇到选择本地图片的需求,以前都是懒得写直接调用系统方法来选择图片,但是这样并不能实现多选效果,最近又遇到了,所以还是写一个demo好了,以后也方便使用.还是首先来看看效果: 显示的图片使用RecyclerView实现的,利用Glide来加载:下面弹出的图片文件夹效果是采用PopupWindow实现,这里比采用PopupWindow更方便,弹出显示的左边图片是这个文件夹里的第一张图片:选中的图片可以进行预览,使用网上一个大神写的来实现的:至于图片的获取是用ContentProvid

  • Android仿微信照片选择器实现预览查看图片

    好了下面进入正题,我们先看一下实现效果吧: 下面来介绍一下代码: 本思路就是: 1.先到手机中扫描jpeg和png的图片 2.获取导图片的路径和图片的父路径名也就是文件夹名 3.将图片路径和文件夹名分别添加导数据源中 4.数据源有了就是显示了,文件夹显示是利用的popwindow,而图片显示则是GridView 看一下具体代码: 首先开启一个线程去扫描图片 /** * 利用ContentProvider扫描手机中的图片,此方法在运行在子线程中 完成图片的扫描,最终获得jpg最多的那个文件夹 */

  • Android使用ViewPager实现图片滑动预览效果

    本文为大家分享了Android ViewPager实现图片滑动预览效果展示的具体代码,供大家参考,具体内容如下 效果图: 滑动前: 滑动后: 代码非常简单,实现起来很容易 xml代码: <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/ap

  • Android实现图片点击预览效果(zoom动画)

    参考:https://developer.android.google.cn/training/animation/zoom.html 1.创建Views 下面的布局包括了你想要zoom的大版本和小版本的view. 1.ImageButton是小版本的,能点击的,点击后显示大版本的ImageView. 2.ImageView是大版本的,可以显示ImageButton点击后的样式. 3.ImageView一开始是不可见的(invisible),当ImageButton点击后,它会实现zoom动画,

  • Android实现仿Windows7图片预览窗格效果

    本实例将显示类似于windows7提供的图片预览窗格效果,单击任意一张图片,可以在右侧显示该图片的预览效果. 效果如图所示: 具体实现方法: res/layout/main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orie

  • jQuery实现鼠标经过图片预览大图效果

    jQuery:是一种客户端的技术,它的诞生的理由是:write less,do more(写更少的代码,做更多的事情). 因此,我们可以借助jQuery来实现一些很酷炫的效果,相比于javaScript来说,同样的效果,但是很简单的代码.jQuery中的核心知识点就是选择器的使用,选择器的内容我会在之后的博客中总结,希望大家去看下,学好了选择我器,相当于完全掌握了jQuery. 这篇博文是实现怎么通过jQuery实现我们在购物网站中常见的:当鼠标经过了图片数,图片会放大进行预览大图.接下来我就粘

  • Android实现图片预览与保存功能

    目录 前言 引入插件 总结 前言 在App开发中,通常为了省流提高加载速度提升用户体验我们通常在列表中或新闻中的插图都是以缩略图压缩过的图片来进行展示,当用户点击图片时我们再去加载真正像素的大图让用户预览,如果用户想保存并且可以保存到自己的相册中,那么在Flutter中如何实现这样的功能,看完这篇文章让你1分钟瞬间实现. 引入插件 首先,我们需要引入强大的Flutter社区中的两个插件,分别是: photo_view: ^0.13.0 用来加载查看大图. image_gallery_saver:

  • Android 高仿QQ图片选择器

    当做一款APP,需要选择本地图片时,首先考虑的无疑是系统相册,但是Android手机五花八门,再者手机像素的提升,大图无法返回等异常因数,导致适配机型比较困难,微信.QQ都相继的在自己的APP里集成了图片选择功能,放弃了系统提供的图片选择器,这里仿造QQ做了一个本地图片选择器,PS:之前有人说"仿"写成"防"了,今儿特意注意了下,求不错. 先上一张效果图,无图无真相啊~~~ 实现的效果大概是这样的: 1.单选:跳转到本地图片选择文件夹,选择文件夹后,进入到该文件夹下

  • 手机图片预览插件photoswipe.js使用总结

    手机图片预览photoswipe,支持pc图片预览,多用于android,ios的手机图片预览. 资源包:photoswipe-3.0.5 在photoswipe官网有1.0.11的包下载,但是1.0.11这个版本,存在缺陷,在部分android手机上,滑动一次的时候,会跳转2张图片  (正常情况下,滑动一次,跳转1张图片) 通常使用方法如下: 在html的head标签中依次加载资源包中如下文件: <script type="text/javascript" src="

  • 基于jquery实现的上传图片及图片大小验证、图片预览效果代码

    jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 复制代码 代码如下: */ function submit_upload_picture(){ var file = $('file_c').value; if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){ alert("图片类型必须是.gif,jpeg,jpg,png中的一种") }else{ $('both_form').action="file!u

  • Angular中封装fancyBox(图片预览)遇到问题小结

    首先在官网下载最新版的fancyBox(一定要去最新网站,以前依赖的jquery版本偏低),附上链接: http://fancyapps.com/fancybox/3/ 然后在项目中引用jquery,然后在引用jquery.fancybox.min.css和jquery.fancybox.min.js. 如果需要动画和鼠标滚轮滚动效果还可以引入他提供的相关工具文件. 1.你可以通过链接.css和.js在你的html文件来安装fancyBox .确保您也加载了jQuery库.以下是用作示例的基本H

  • nodejs 图片预览和上传的示例代码

    本文介绍了nodejs 图片预览和上传的示例代码,分享给大家,具体如下: 效果如下: 前言 一般在上传图片之前需要暂存在本地预览一下. 前端图片预览用的是 FileReader的readAsDataURL方法 nodejs 图片上传用的是中间件 Multer 本地图片预览 FileReader对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用文件或Blob对象来指定要读取的文件或数据. readAsDataURL方法用于读取指定的Blob或文件的内容.当读取操

  • input file上传 图片预览功能实例代码

    input file上传图片预览其实很简单,只是没做过的感觉很神奇,今天我就扒下她神秘的面纱,其实原理真的很简单,下面通过一段代码大家都明白了. 具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="jquery.js"></script>

随机推荐