新闻资讯

新闻资讯 产品更新

关于Gallery的页面切换

编辑:admin     时间:2015-11-21

昨天,小编讲解了关于多用户商城系统中的页面切换方式,今天小编再来给你们带来一个新的解决思路,通过事物的不同方面有利我们更好的配置属于自己的多用户商城系统

Gallery 是Android官方提供的一个View容器类,继承于AbsSpinner类,用于实现页面滑动效果。

从上面的继承关系可以看出,AbsSpinner类继承自AdapterView,因此我们可以自定义实现Adapter,来填充Gallery容器的数据。

本示例通过自己实现一个Adapter,来填充Gallery容器的图片数据,首先看效果:



Activity
[java] view plaincopy
1.import android.app.Activity; 
2.import android.os.Bundle; 
3.import android.view.View; 
4.import android.widget.AdapterView; 
5.import android.widget.Gallery; 
6.import android.widget.Toast; 
7. 
8.public class GalleryActivity extends Activity { 
9.    @Override 
10.    public void onCreate(Bundle savedInstanceState) { 
11.        super.onCreate(savedInstanceState); 
12.        setContentView(R.layout.main); 
13. 
14.        Gallery gallery = (Gallery) findViewById(R.id.gallery); 
15.        gallery.setAdapter(new ImageAdapter(this));         // gallery添加ImageAdapter图片资源 
16.        gallery.setOnItemClickListener(listener);           // gallery设置点击图片资源的事件 
17.    } 
18.     
19.    AdapterView.OnItemClickListener listener = new AdapterView.OnItemClickListener() { 
20.        @Override 
21.        public void onItemClick(AdapterView<?> parent, View view, int position, long id) { 
22.            Toast.makeText(GalleryActivity.this, "图片 " + (position + 1), Toast.LENGTH_SHORT).show(); 
23.        } 
24.    }; 
25.} 

ImageAdapter.java
[java] view plaincopy
1.import android.content.Context; 
2.import android.view.View; 
3.import android.view.ViewGroup; 
4.import android.widget.BaseAdapter; 
5.import android.widget.Gallery; 
6.import android.widget.ImageView; 
7. 
8.public class ImageAdapter extends BaseAdapter { 
9.    private Context mContext; 
10.     
11.    //  图片数组源 
12.    private Integer[] imgs = { R.drawable.img1, R.drawable.img2, 
13.            R.drawable.img3, R.drawable.img4, R.drawable.img5, 
14.            R.drawable.img6, R.drawable.img7}; 
15. 
16.    public ImageAdapter(Context c) { 
17.        mContext = c; 
18.    } 
19. 
20.    @Override 
21.    public int getCount() { 
22.        return imgs.length; 
23.    } 
24. 
25.    // 获取图片位置 
26.    @Override 
27.    public Object getItem(int position) { 
28.        return imgs[position]; 
29.    } 
30. 
31.    // 获取图片ID 
32.    @Override 
33.    public long getItemId(int position) { 
34.        return position; 
35.    } 
36. 
37.    @Override 
38.    public View getView(int position, View convertView, ViewGroup parent) { 
39.        ImageView imageview = new ImageView(mContext); 
40. 
41.        imageview.setImageResource(imgs[position]); 
42.        imageview.setLayoutParams(new Gallery.LayoutParams(240, 120));      // 设置布局 图片120×120显示 
43.        imageview.setScaleType(ImageView.ScaleType.CENTER);             // 设置显示比例类型(不缩放) 
44.        return imageview; 
45.    } 
46.} 

main.xml
[html] view plaincopy
1.<?xml version="1.0" encoding="utf-8"?> 
2.<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
3.    android:layout_width="fill_parent" 
4.    android:layout_height="wrap_content" 
5.    android:orientation="vertical"> 
6.     
7.    <!-- 文字居中显示  android:gravity --> 
8.    <!-- 控件居中显示  android:layout_gravity --> 
9.     
10.    <TextView  
11.        android:id="@+id/tv" 
12.        android:layout_width="fill_parent" 
13.        android:layout_height="wrap_content" 
14.        android:gravity="center"                 
15.        android:layout_gravity="center"          
16.        android:layout_marginTop="50dip" 
17.        android:textColor="#ffff0000" 
18.        android:textSize="30sp" 
19.        android:text="Gallery Test"/> 
20.     
21.    <Gallery  
22.    android:id="@+id/gallery" 
23.    android:layout_width="fill_parent" 
24.    android:layout_height="wrap_content" 
25.    android:layout_marginTop="10dip" 
26.    android:layout_below="@id/tv" /> 
27.     
28.</RelativeLayout> 

源码下载

示例分析:
1、ImageAdapter中,是继承BaseAdapter自定义实现的,重载了BaseAdapter的几个虚方法,其中重要的有两个
getCount()  : 返回资源的大小(总长度)
getView(int position, View convertView, ViewGroup parent) : 返回当前显示的资源(获取焦点)
2、GalleryActivity中,通过gallery.setAdapter(imgAdapter); 设置资源,然后设置gallery的点击监听事件。
3、main.xml中,是布局文件,显示一个TextView和Gallery,RelativeLayout是相对布局
总体来说,Gallery 上述的示例很简单,结构比较清晰,能够满足基本的应用。


Gallery 高级应用
上面的示例,仅仅是最简单的Gallery应用,如果我们想做的更酷、更炫的效果:
1、Gallery 图片显示能够循环播放,即向右滑到左侧第一张图片后,需要接着显示最后一张图片;向左滑到最后一张图片后,需要接着显示第一张图片,往复不间断显示的循环效果。
2、选中图片高亮,未选中图片阴影,更加突出当前获取焦点的选中图片
3、区分“点击”与“选中”图片事件的区别和适用场景


效果1 —— 高亮显示
没有选中,在GalleryActivity中,设置gallery.setUnselectedAlpha(0.3f); 透明度为0.3
选中,在ImageAdapter的getView(int position, View convertView, ViewGroup parent)中,设置imageview.setBackgroundColor(Color.alpha(1)); 背景色为1

效果2 —— 循环播放
原理:Gallery循环播放的原理,跟循环链表的思想一样,首尾item连接都是通过“取余”实现
修改1、ImageAdapter中的getCount() 方法中,修改返回值为无穷大 return Integer.MAX_VALUE;
修改2、ImageAdapter中的getView(int position, View convertView, ViewGroup parent)方法中,设置imageview.setImageResource(imgs[position % imgs.length]); 取余
修改3、GalleryActivity中,设置gallery.setSelection(imgAdapter.imgs.length * 100); 使gallery显示图片的位置从中间开始显示(即imgAdapter.imgs.length * 100)
修改解释:
修改1,主要是为了是循环接近无限往复循环,使position无限大,循环在实践应用上不容易结束(理论上会结束,即2^31-1约20亿次循环后)
修改2,通过取余,使图片能够重复利用并显示
修改3,由于起始位置如果是0,则向右滑动左侧将无法循环(此时左侧将为-1,超出了imgs[]数组的下边界),因此开始应设置起始位置为imgAdapter.imgs.length的整数倍

效果3 —— “点击”和“选中”事件
1、点击事件OnItemClickListener,是需要用手点击才触发,滑动时不触发
2、选中事件OnItemSelectedListener,是当图片滑到屏幕正中,则视为自动选中,在滑动的过程中会触发
适用场景:
1、点击事件OnItemClickListener,是在确定要选中该项时,才点击进行逻辑处理
2、选中事件OnItemSelectedListener,可以用来提醒用户,当前获取焦点的项,如果确认为该项则需要点击OnItemClickListener后,进行下一步的逻辑处理。

不知道你们有没有看懂,如果没看懂的话就亲手试验一下吧,相信你们很快就会弄明白的。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

回复列表

相关推荐