前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android实现幻灯片式图片浏览器

Android实现幻灯片式图片浏览器

作者头像
砸漏
发布2020-10-29 23:04:08
1.1K0
发布2020-10-29 23:04:08
举报
文章被收录于专栏:恩蓝脚本恩蓝脚本

我们来实现一个幻灯片式图片浏览器:

最下面一个画廊视图,选中画廊中的图片,会在上面的ImageSwitcher控件中显示大图。

效果图如图

实现方法:

在布局文件中添加图片切换控件ImageSwitcher和画廊视图控件Gallery res/layout/main.xml:

代码语言:javascript
复制
<?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"  
  android:id="@+id/layout1" 
  android:gravity="center_horizontal" 
     
  <ImageSwitcher 
    android:id="@+id/imageSwitcher" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:paddingTop="30px" 
    android:layout_weight="2"/  
  <Gallery 
    android:id="@+id/gallery1" 
    android:spacing="5px" 
    android:layout_weight="1" 
    android:unselectedAlpha="0.6" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"/  
</LinearLayout   

在res/values目录中,创建一个名为attr.xml的文件,在该文件中定义一个styleable对象,用于组合多个属性。这里只指定了一个系统自带的android:galleryItemBackground属性,用于设置各选项的背景。具体代码如下: res/values/attr.xml:

代码语言:javascript
复制
<?xml version="1.0" encoding="utf-8"?  
<resources  
  <declare-styleable name="Gallery"  
    <attr name="android:galleryItemBackground"/  
  </declare-styleable  
</resources  

MainActivity:

代码语言:javascript
复制
package com.example.test;  
import android.app.Activity; 
import android.content.res.TypedArray; 
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.OnItemSelectedListener; 
import android.widget.BaseAdapter; 
import android.widget.Gallery; 
import android.widget.ImageSwitcher; 
import android.widget.ImageView; 
import android.widget.ViewSwitcher.ViewFactory; 
public class MainActivity extends Activity {  
//定义并初始化保存图片id的数组 
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);  
Gallery gallery=(Gallery)findViewById(R.id.gallery1);//获取gallery组件 
imageSwitcher=(ImageSwitcher)findViewById(R.id.imageSwitcher);//获取图像切换器 
//设置动画效果 
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=new ImageView(MainActivity.this);//实例化一个imageView类的对象 
imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);//设置保持纵横比居中缩放图像 
imageView.setLayoutParams(new ImageSwitcher.LayoutParams( 
LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT)); 
return imageView;//返回imageView对象 
} 
}); 
BaseAdapter adapter=new BaseAdapter(){ 
@Override 
public View getView(int position, View convertView, ViewGroup parent) { 
ImageView imageView;//声明ImageView的对象 
if(convertView==null){ 
imageView=new ImageView(MainActivity.this);//实例化ImageView的对象 
imageView.setScaleType(ImageView.ScaleType.FIT_XY);//设置缩放方式 
imageView.setLayoutParams(new Gallery.LayoutParams(180,135)); 
//设置gallery每一项图片的背景资源(使用的是attr.xml的自定义样式) 
TypedArray typedArray=obtainStyledAttributes(R.styleable.Gallery); 
imageView.setBackgroundResource(typedArray.getResourceId( 
R.styleable.Gallery_android_galleryItemBackground, 0)); 
imageView.setPadding(5, 0, 5, 0);//设置imageView的内边距 
}else{ 
imageView=(ImageView)convertView; 
} 
imageView.setImageResource(imageId[position]);//为imageView设置要显示的图片 
return imageView;//返回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; 
} 
}; 
gallery.setAdapter(adapter);//将适配器与Gallery关联 
gallery.setSelection(imageId.length/2);//选中中间的图片 
gallery.setOnItemSelectedListener(new OnItemSelectedListener() { 
@Override 
public void onItemSelected(AdapterView<?  parent, View v, 
int position, long id) { 
imageSwitcher.setImageResource(imageId[position]);//显示选中的图片 
} 
@Override 
public void onNothingSelected(AdapterView<?  arg0) { 
// TODO Auto-generated method stub 
} 
}); 
}  
}  

这样单击某张图片,可以选中该图片,并且让其居中显示,也可以用手指拖动图片来移动图片,并且让选中的图片在上方显示,如图是切换瞬间的效果

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-09-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档