android Gallery与ImageView的结合使用

fmms 9年前

Gallery是一个内部元素可以水平滚动,并且可以把当前选择的子元素定位在它中心的布局组件。

本程序的运行效果如下所示:

android Gallery与ImageView的结合使用                   android Gallery与ImageView的结合使用
   
具体实现如下:
1、建立一个新项目
2、拷贝10个图片文件到res/drawable目录
3、res/layout/main.xml文件的内容如下:
    <?xml version="1.0" encoding="utf-8"?>                <!-- FrameLayout用来显示层叠效果 -->        <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:orientation="vertical" >                    <!-- ImageView用来显示背景 -->            <ImageView                android:id="@+id/iv"                android:layout_width="fill_parent"                android:layout_height="fill_parent"                android:src="@drawable/a01"                 />                        <!-- Gallery来展示画廊 -->            <Gallery xmlns:android="http://schemas.android.com/apk/res/android"                android:id="@+id/gallery"                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:spacing="5dp"                />        </FrameLayout>  
其中我们使用FrameLayout来实现叠加效果,使用ImageView来显示大图,Gallery来展示画廊,android:spacing="5dp" 属性则是用来设置元素之间的间隔。4、在res/values/目录中新建一个attrs.xml内容如下:其中我们使用FrameLayout来实现叠加效果,使用ImageView来显示大图,Gallery来展示画廊,android:spacing="5dp" 属性则是用来设置元素之间的间隔。4、在res/values/目录中新建一个attrs.xml内容如下:其中我们使用FrameLayout来实现叠加效果,使用ImageView来显示大图,Gallery来展示画廊,android:spacing="5dp" 属性则是用来设置元素之间的间隔。
 
4、在res/values/目录中新建一个attrs.xml内容如下:
 
    <?xml version="1.0" encoding="utf-8"?>        <resources>                <declare-styleable name="HelloGallery">                        <attr name="android:galleryItemBackground"/>                </declare-styleable>        </resources>  
5、在MainHelloGallery.java中的内容如下:5、在MainHelloGallery.java中的内容如下:5、在Test_galleryActivity.java中的内容如下:
package m.m.m;    import android.app.Activity;    import android.content.Context;    import android.content.res.TypedArray;    import android.os.Bundle;    import android.view.View;    import android.view.ViewGroup;    import android.widget.AdapterView;    import android.widget.AdapterView.OnItemClickListener;    import android.widget.BaseAdapter;    import android.widget.Gallery;    import android.widget.ImageView;    import android.widget.Toast;    public class Test_galleryActivity extends Activity {     /** Called when the activity is first created. */     @Override   public void onCreate(Bundle savedInstanceState) {      super.onCreate(savedInstanceState);      setContentView(R.layout.main);      // 定义UI组件      final ImageView iv = (ImageView) findViewById(R.id.iv);      Gallery g = (Gallery) findViewById(R.id.gallery);      // 设置图片匹配器      g.setAdapter(new ImageAdapter(this));      // 设置AdapterView点击监听器,Gallery是AdapterView的子类      g.setOnItemClickListener(new OnItemClickListener() {       @Override     public void onItemClick(AdapterView<?> parent, View view,       int position, long id) {        // 显示点击的是第几张图片        Toast.makeText(Test_galleryActivity.this, "" + position,        Toast.LENGTH_LONG).show();        // 设置背景部分的ImageView显示当前Item的图片        iv.setImageResource(((ImageView) view).getId());       }      });     }     // 定义继承BaseAdapter的匹配器     public class ImageAdapter extends BaseAdapter {      // Item的修饰背景      int mGalleryItemBackground;      // 上下文对象      private Context mContext;      // 图片数组      private Integer[] mImageIds = { R.drawable.a01,      R.drawable.a02, R.drawable.a03,      R.drawable.a04, R.drawable.a05,      R.drawable.a06, R.drawable.a07,      R.drawable.a08 };      // 构造方法      public ImageAdapter(Context c) {       mContext = c;       // 读取styleable资源       TypedArray a = obtainStyledAttributes(R.styleable.HelloGallery);       mGalleryItemBackground = a.getResourceId(       R.styleable.HelloGallery_android_galleryItemBackground, 0);       a.recycle();      }      // 返回项目数量      @Override    public int getCount() {       return mImageIds.length;      }      // 返回项目      @Override    public Object getItem(int position) {       return position;      }      // 返回项目Id      @Override    public long getItemId(int position) {       return position;      }      // 返回视图      @Override    public View getView(int position, View convertView, ViewGroup parent) {       ImageView iv = new ImageView(mContext);       iv.setImageResource(mImageIds[position]);       // 给生成的ImageView设置Id,不设置的话Id都是-1       iv.setId(mImageIds[position]);       iv.setLayoutParams(new Gallery.LayoutParams(120, 160));       iv.setScaleType(ImageView.ScaleType.FIT_XY);       iv.setBackgroundResource(mGalleryItemBackground);       return iv;      }     }    }
至此,完成以上功能。
 
总结:
1、定义Gallery
2、在res/values下 自定义attrs.xml文件
 
 

我们点击某一张图片,会把该子元素的图片显示在放在后面一层的ImageView组件中。我们点击某一张图片,会把该子元素的图片显示在放在后面一层的 ImageView组件中。我们点击某一张图片,会把该子元素的图片显示在放在后面一层的ImageView组件中。我们点击某一张图片,会把该子元素的图片显示在放在后面一层的ImageView组件中。我们点击某一张图片,会把该子元素的图片显示在放在后面一层的ImageView组件中。我们点击某一张图片,会把该子元素的图片显示在放在后面一层的ImageView组件中。
</div> </div> </div>