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

第二章 吸引你的眼球—UI编程（4）

2024-10-19 11:31:41   212人阅读

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）


联系
我们