首页 > 代码库 > 第二章 吸引你的眼球—UI编程(4)

第二章 吸引你的眼球—UI编程(4)

2.1.6图片拖动—拖动效果(Gallery)

一个应用如果有非常炫的效果相信也可以吸引不少人的眼球。Gallery就是一个非常炫的效果,你可以用手指直接拖动图片进行移动,iPhone刚出现的时候,这个效果就吸引了无数的苹果粉丝为之疯狂,在Android平台上也可以实现这一效果。下面,我们以一个简单的像册例子来加以说明。

1)在布局文件中定义一个Gallery(用来展示图片)和一个TextView(用来监听Gallery点击事件)。

<Gallery

    android:id="@+id/my_gallery"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"/>

 

2)使用一个容器来存放Gallary显示的图片。

我们在这里使用一个继承自BaseAdapter类的派生类来充当容器。代码如下:

// import略

public class ImageAdapter extends BaseAdapter {

        private Context mContext;

        private Integer[] mImageIds = { R.drawable.p01,R.drawable.p02,R.drawable.p03};

        public ImageAdapter(Context context) {

             mContext = context;

        }

        @Override

        public int getCount() {

             return mImageIds.length;

        }

        @Override

        public Object getItem(int position) {

             return position;

        }

        @Override

        public long getItemId(int position) {

             return position;

        }

        @Override

        public View getView(int position, View convertView, ViewGroup parent) {

             ImageView i = new ImageView(mContext);

             // 给ImageView设置资源

             i.setImageResource(mImageIds[position]);

             // 设置显示比例类型

             i.setScaleType(ImageView.ScaleType.FIT_XY);

             // 设置布局图片以200*400的比例显示

             i.setLayoutParams(new Gallery.LayoutParams(200, 400));

             return i;

        }

    }

 

3)通过setAdapter方法把资源文件添加到Gallery中来显示,并给它添加事件监听。部分代码如下:

myTextView = (TextView) findViewById(R.id.my_textview);

        Gallery gallery = (Gallery) findViewById(R.id.my_gallery);

        gallery.setAdapter(new ImageAdapter(this));

        gallery.setOnItemClickListener(new AdapterView.OnItemClickListener() {

             @Override

             public void onItemClick(AdapterView<?> arg0, View arg1,

                     int position, long id) {

                 myTextView.setText("你点击的是第" + (position + 1) + "图片");

            }

        });

 

效果如图2-13所示:

技术分享

图2-13 Gallary的使用

 

4)改变样式。

这是你想要的效果么?中间的边框似乎看起来怪怪的,没关系,我们可以搞定它。

在valus目录下新建一个attrs.xml文件,代码如下:

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <declare-styleable name="myGallery">

        <attr name="android:galleryItemBackground" />

    </declare-styleable>

</resources>

 

然后我们在ImageAdapter中的两个地方做一些改动,一个是它的构造方法:

int mGalleryItemBackground;

public ImageAdapter(Context context) {

    mContext = context;

    TypedArray a = obtainStyledAttributes(R.styleable.myGallery);

    mGalleryItemBackground = a.getResourceId(R.styleable.myGallery_android_galleryItemBackground, 0);

    a.recycle();

}

 

最后一步,在getView方法中,将mGalleryItemBackground应用为ImageView的背景,代码如下:

i.setBackgroundResource(mGalleryItemBackground);

 

下面,我们再来看看效果,如图2-14所示:

技术分享

图2-14 Gallary中使用样式

 

怎么样?是不是变的顺眼多了,自己动手来试试吧。

第二章 吸引你的眼球—UI编程(4)