Android UI 컨트롤 시리즈: 갤러리(갤러리 보기)

갤러리는 콘텐츠를 가로로 표시할 수 있으며, 일반적으로 사진을 탐색하는 데 사용됩니다. 선택한 옵션이 중앙에 있으며, 이벤트에 해당하는 정보가 표시될 수 있습니다. ImageSwitcher 구성 요소를 결합하여 썸네일을 통해 사진을 탐색하는 프로그램을 구현해 보겠습니다.

1단계:

Andorid 프로젝트 "GalleryTest"를 만듭니다. 활동 클래스 GalleryTest는 Activity를 상속하고 OnItemSelectedListener 및 ViewFactory 인터페이스를 구현하여 그림과 보기를 생성합니다

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

        }
}

2단계:

프로젝트의 다시 그릴 수 있는 디렉터리에 7개의 그림과 해당 축소판 추가

3단계:

프로젝트 reslayout 디렉터리에 레이아웃 파일 main.xml을 만들고 여기에 Gallery 구성 요소와 ImageSwitcher 구성 요소를 추가한 다음 해당 속성을 설정합니다.

<?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>

4단계: GalleryTest 상단에 사용된 ImageSwitcher 인스턴스 이미지 리소스 정수 배열을 선언합니다.

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
        };

5단계:

GalleryTest의 onCreate() 메서드에서 창을 추가합니다. 스타일을 untitled로 설정합니다. , 현재 레이아웃 보기 설정, ImageSwitcher 인스턴스 가져오기 및 페이드아웃 애니메이션 설정, 갤러리 인스턴스 가져오기

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);
    }

6단계:

BaseAdapter를 상속하는 내부 클래스 ImageAdapter 만들기, 갤러리에 대한 어댑터 인스턴스 설정

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;
        }

7단계:

onItemSelected() 메서드 구현 및 그림 바꾸기

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

8단계:

makeView() 메소드 구현 및 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;  
        }

9단계:

갤러리에 어댑터 추가 및 OnItemSelectedListener 리스너 추가

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

끝입니다 , all, done, 실행 결과는 다음과 같습니다

전체 소스 코드:

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>

위는 안드로이드 UI 컨트롤 시리즈의 내용입니다: 갤러리 (갤러리보기), 더보기 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!