Android UI control series: Gallery (gallery view)

Gallery can display its content horizontally, and is generally used to browse pictures. The selected option is in the middle, and information can be displayed corresponding to events. The following is combined with the ImageSwitcher component to implement a program for browsing pictures through thumbnails. The specific steps are as follows

Step 1:

Create an Andorid project "GalleryTest", the entry of which is the Activity class GalleryTest inherits Activity and implements the OnItemSelectedListener and ViewFactory interfaces to create pictures and views

package org.hualang.Gallery;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ViewSwitcher.ViewFactory;
//继承Activity，实现onItemSelectedListener和ViewFactory接口
public class GalleryTest extends Activity implements OnItemSelectedListener,ViewFactory{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }

        @Override
        public View makeView() {
                // TODO Auto-generated method stub
                return null;
        }

        @Override
        public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2,
                        long arg3) {
                // TODO Auto-generated method stub

        }

        @Override
        public void onNothingSelected(AdapterView<?> arg0) {
                // TODO Auto-generated method stub

        }
}

Step 2:

Add 7 pictures and corresponding images in the res\drawable\ directory of the project Thumbnail

Step 3:

Create a layout file main.xml in the project res\layout\ directory, add a Gallery component and an ImageSwitcher component to it, and set the corresponding Properties

<?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"  
    >  
<ImageSwitcher android:id="@+id/switcher"  
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent"  
        android:layout_alignParentTop="true"  
        android:layout_alignParentLeft="true"  
    />  
  
    <Gallery android:id="@+id/gallery"  
        android:background="#55000000"  
        android:layout_width="fill_parent"  
        android:layout_height="60dp"  
        android:layout_alignParentBottom="true"  
        android:layout_alignParentLeft="true"  
        android:gravity="center_vertical"  
        android:spacing="16dp"  
    />  
</LinearLayout>

Step 4: Declare the used ImageSwitcher instance image resource Integer array at the top of GalleryTest

public class GalleryTest extends Activity implements OnItemSelectedListener,ViewFactory{
    /** Called when the activity is first created. */
        //声明ImageSwitcher
        private ImageSwitcher switcher;
        //缩略图片id数组
        private Integer[] thumbids={
                        R.drawable.thumb0,
                        R.drawable.thumb1,
                        R.drawable.thumb2,
                        R.drawable.thumb3,
                        R.drawable.thumb4,
                        R.drawable.thumb5,
                        R.drawable.thumb6,
                        R.drawable.thumb7
        };
        //图片id数组
        private Integer[] imgids={
                        R.drawable.img0,
                        R.drawable.img1,
                        R.drawable.img2,
                        R.drawable.img3,
                        R.drawable.img4,
                        R.drawable.img5,
                        R.drawable.img6,
                        R.drawable.img7
        };

Step 5:

In GalleryTest’s onCreate( ) method, set the window style to untitled, set the current layout view, obtain the ImageSwitcher instance, set the gradual fade-out animation, and obtain the Gallery instance

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //设置窗口特征无标题
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.main);
        //通过findViewById方法获得ImageSwitcher对象
        switcher=(ImageSwitcher)findViewById(R.id.switcher);
        //为ImageSwitcher设置工厂
        switcher.setFactory(this);
        //设置动画渐入效果
        switcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));
        //设置动画渐出效果
        switcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));
        //通过findViewById方法获得Gallery对象
        Gallery g=(Gallery)findViewById(R.id.gallery);
    }

Step 6:

Create the internal Class ImageAdapter, which inherits BaseAdapter and sets an Adapter instance for Gallery

public class ImageAdapter extends BaseAdapter {
            //构造方法
                public ImageAdapter(Context c) {
                        mContext = c;
                }
                //获得数量
                public int getCount() {
                        return thumbids.length;
                }
                //获得当前选项
                public Object getItem(int position) {
                        return position;
                }
                //获得当前选项ID
                public long getItemId(int position) {
                        return position;
                }
                //获得View对象
                public View getView(int position, View convertView, ViewGroup parent) {
                        //实例化ImageView对象
                        ImageView i = new ImageView(mContext);
                        //设置缩略图片资源
                        i.setImageResource(thumbids[position]);
                        //设置边界对齐
                        i.setAdjustViewBounds(true);
                        //设置布局参数
                        i.setLayoutParams(new Gallery.LayoutParams(
                                        LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
                        //设置背景资源
                        i.setBackgroundResource(R.drawable.picturefrom);
                        return i;
                }
                private Context mContext;
        }

Step 7:

Implement the onItemSelected() method and replace the image

@Override  
        public void onItemSelected(AdapterView<?> adapter, View v, int position,  
                        long id) {  
                switcher.setImageResource(imgids[position]);  
        }

Eighth Step:

Implement the makeView() method and set the layout format for ImageView

@Override  
        public View makeView() {  
                // TODO Auto-generated method stub  
                //创建ImageView  
                ImageView i=new ImageView(this);  
                //设置背景颜色  
                i.setBackgroundColor(0xFF000000);  
                //设置精度类型  
                i.setScaleType(ImageView.ScaleType.FIT_CENTER);  
                //设置布局参数  
                i.setLayoutParams(new ImageSwitcher.LayoutParams(  
                                LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));  
                return i;  
        }

Step 9:

Add Adapter to Gallery and add OnItemSelectedListener listener

g.setAdapter(new ImageAdapter(this));  
                g.setOnItemSelectedListener(this);

At this point, everything is over. The running results are as follows

Complete source code:

package org.hualang.Gallery;<br><br>import android.app.Activity;<br>import android.content.Context;<br>import android.os.Bundle;<br>import android.view.View;
<br>import android.view.ViewGroup;<br>import android.view.Window;<br>import android.view.animation.AnimationUtils;<br>import android.widget.AdapterView;<br>
import android.widget.BaseAdapter;<br>import android.widget.Gallery;<br>import android.widget.ImageSwitcher;<br>import android.widget.ImageView;<br>
import android.widget.AdapterView.OnItemSelectedListener;<br>import android.widget.Gallery.LayoutParams;<br>import android.widget.ViewSwitcher.ViewFactory;<br><br>
public class GalleryTest extends Activity implements OnItemSelectedListener,<br>                ViewFactory {<br><br>        
private ImageSwitcher mSwitcher;<br><br>        private Integer[] mThumbIds = { R.drawable.thumb0,<br>                        R.drawable.thumb1, R.drawable.thumb2,
<br>                        R.drawable.thumb3, R.drawable.thumb4,<br>                        R.drawable.thumb5, R.drawable.thumb6,<br>                        
R.drawable.thumb7 };<br><br>        private Integer[] mImageIds = { R.drawable.img0, R.drawable.img1,<br>                        R.drawable.img2, R.drawable.img3,
 R.drawable.img4,<br>                        R.drawable.img5, R.drawable.img6, R.drawable.img7 };<br><br>        @Override<br>        
 public void onCreate(Bundle savedInstanceState) {<br>                super.onCreate(savedInstanceState);<br><br>                
 requestWindowFeature(Window.FEATURE_NO_TITLE);<br>                setContentView(R.layout.main);<br>                
 mSwitcher = (ImageSwitcher) findViewById(R.id.switcher);<br>                mSwitcher.setFactory(this);<br>                
 mSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,<br>                                android.R.anim.fade_in));<br>                
 mSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,<br>                                android.R.anim.fade_out));<br><br>                
 Gallery g = (Gallery) findViewById(R.id.gallery);<br><br>                g.setAdapter(new ImageAdapter(this));
                g.setOnItemSelectedListener(this);<br><br>        }<br><br>        public class ImageAdapter extends BaseAdapter {<br>                
                public ImageAdapter(Context c) {<br>                        mContext = c;<br>                }<br>                public int getCount() {
                <br>                        return mThumbIds.length;<br>                }<br>                public Object getItem(int position) {
                <br>                        return position;<br>                }<br>                public long getItemId(int position) {
                <br>                        return position;<br>                }<br>                public View getView(int position, View convertView, ViewGroup 
                parent) {<br>                        ImageView i = new ImageView(mContext);<br><br>                        i.setImageResource(mThumbIds[position]);
                <br>                        i.setAdjustViewBounds(true);<br>                        
                i.setLayoutParams(new Gallery.LayoutParams(<br>                                        LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
                <br>                        i.setBackgroundResource(R.drawable.picturefrom);<br>                        return i;<br>                
                }<br>                private Context mContext;<br>        }<br><br>        @Override<br>        public void onItemSelected(AdapterView<?> adapter, 
                View v, int position,<br>                        long id) {<br>                mSwitcher.setImageResource(mImageIds[position]);<br>        }<br>
                <br>        @Override<br>        public void onNothingSelected(AdapterView<?> arg0) {<br><br>        }<br><br>        @Override<br>        
                public View makeView() {<br>                ImageView i = new ImageView(this);<br>                i.setBackgroundColor(0xFF000000);
                <br>                i.setScaleType(ImageView.ScaleType.FIT_CENTER);<br>                i.setLayoutParams(new ImageSwitcher.LayoutParams(<br>      
                                          LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));<br>                return i;<br>        }<br>}

<?xml version="1.0" encoding="utf-8"?>  
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
 android:layout_width="fill_parent"  
 android:layout_height="fill_parent">  
<ImageSwitcher android:id="@+id/switcher"  
 android:layout_width="fill_parent"  
 android:layout_height="fill_parent"  
 android:layout_alignParentTop="true"  
 android:layout_alignParentLeft="true"  
 />  
<Gallery android:id="@+id/gallery"  
 android:background="#55000000"  
 android:layout_width="fill_parent"  
 android:layout_height="60dp"  
 android:layout_alignParentBottom="true"  
 android:layout_alignParentLeft="true"  
 android:gravity="center_vertical"  
 android:spacing="16dp"  
 />  
</RelativeLayout>

The above is the Android UI control series: Gallery (Gallery view), please pay attention to the PHP Chinese website (www.php.cn) for more related content!