Android開發——ImageSwitcher和Gallery組合實現圖片切換案例

功能:點擊滾動的圖片,上面的imageswitcher顯示選擇的大圖。

ImageSwitcher:顯示圖片區域的控件

Gallery:控制圖標列表索引。

      (1) Gallery控件也可譯爲畫廊組件,主要用於橫向顯示圖像列表。Gallery類的繼承結構Spinner有共同的父類:AbsSpinner。從某種意義上來說,Gallery和Spinner都是一個列表框,只不過Spinner是一個垂直顯示的列表模型,而Gallery則是一個水平顯示的列表框。

      (2) Gallery主要是通過用戶拖動來展示一組圖片或其它組件,Spinner則是提供選擇讓用戶選擇。爲它提供一個內容SimpleAdapter,該Adapter的getView()方法返回的View將作爲Gallery組件的列表項。

     屬性:

       animationDuration:佈局變化時動畫轉換所需時間(毫秒)。動畫開始時計時。該值必須是整數,比如:100。

       spacing:設置設置圖片之間的間距.

       unselectedAlpha:設置未選中的條目的透明度(Alpha)。該值必須是float類型,“1.2”

       Gravity:

                top緊靠容器頂端                bottom緊靠容器底部                left緊靠容器左側,不改變其大小

                right緊靠容器右側                center_vertical垂直居中                fill_vertical垂直方向上拉伸至充滿容器

                center_horizontal水平居中     Fill_horizontal水平方向上拉伸使其充滿容器

                center居中對齊                       fill在水平和垂直方向上拉伸,使其充滿容器

                clip_vertical垂直剪切(當對象邊緣超出容器的時候,將上下邊緣超出的部分剪切掉)

                clip_horizontal水平剪切(當對象邊緣超出容器的時候,將左右邊緣超出的部分剪切掉)

xml佈局代碼:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    <ImageSwitcher
        android:id="@+id/imageSwitcher1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#000000"
         
    </ImageSwitcher
                            
    <Gallery
        android:id="@+id/gallery1"
        android:animationDuration="10"
        android:background="#55000000"
        android:gravity="fill_vertical"
        android:spacing="20dp"
        android:unselectedAlpha="1"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        /> 
</RelativeLayout>

activity.java代碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
publicclassSwitcherActivityextendsActivityimplementsViewFactory{ 
    privateImageSwitcher switcher; 
    privateGallery gallery; 
    privateint[] images =newint[] { R.drawable.a, R.drawable.b, 
            R.drawable.c, R.drawable.d, R.drawable.e ,R.drawable.f}; 
                       
    //圖片被顯示屏幕時自動回調來提供要顯示的ImageView 
    publicViewmakeView() { 
            ImageView i =newImageView(SwitcherActivity.this); 
            i.setBackgroundColor(55000000); 
            i.setScaleType(ImageView.ScaleType.FIT_CENTER); 
            returni; 
    
    @Override
    publicvoidonCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        // 設置窗口的特徵:必須在所有操作之前,沒有主題條TitleBar使圖片顯示區域更大 
        requestWindowFeature(Window.FEATURE_NO_TITLE); 
        setContentView(R.layout.activity_switcher); 
                     
        // 查找組件ImageSwitcher 
        switcher = (ImageSwitcher)this.findViewById(R.id.imageSwitcher1); 
        switcher.setFactory(this); 
        //設置默認顯示的圖片 
        switcher.setImageResource(images[0]); 
        //設置圖片的滑動效果 
        switcher.setInAnimation(AnimationUtils.loadAnimation(this
                android.R.anim.fade_in)); 
        switcher.setOutAnimation(AnimationUtils.loadAnimation(this
                android.R.anim.fade_out)); 
                             
        //查找畫廊gallery組件 
        gallery = (Gallery)this.findViewById(R.id.gallery1); 
        gallery.setSelection(images.length/2); 
        gallery.setAdapter(newImageAdapter()); 
        //處理gallery圖片點擊事件 
        gallery.setOnItemClickListener(newAdapterView.OnItemClickListener() { 
                     
            publicvoidonItemClick(AdapterView<?> arg0, View arg1,intarg2, 
                    longarg3) { 
                switcher.setImageResource(images[arg2]); 
            
        }); 
        /*處理gallery圖片條目選擇事件 
         * gallery.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() { 
                     
            public void onItemSelected(AdapterView<?> arg0, View arg1, 
                    int arg2, long arg3) { 
                switcher.setImageResource(images[arg2]); 
            
                     
            public void onNothingSelected(AdapterView<?> arg0) { 
            
        });*/
    
                             
                         
    publicclassImageAdapterextendsBaseAdapter { 
                     
        publicintgetCount() { 
            returnimages.length; 
                     
        
        publicObject getItem(intposition) { 
            returnposition; 
        
        publiclonggetItemId(intposition) { 
            returnposition; 
        
        //返回要顯示的ImageView 
        publicViewgetView(intposition, View convertView, ViewGroup parent) { 
            ImageView views =newImageView(SwitcherActivity.this); 
            // 設置圖片資源 
            views.setImageResource(images[position]); 
            //保持寬高比,不設置則gallery顯示一張圖片 
            views.setAdjustViewBounds(true); 
            //設置固定大小 
            views.setMaxHeight(80); 
            views.setMaxWidth(120); 
            views.setScaleType(ImageView.ScaleType.FIT_CENTER); 
            // 設置圖片大小 
            views.setLayoutParams(newGallery.LayoutParams( 
                    LayoutParams.WRAP_CONTENT,       LayoutParams.WRAP_CONTENT)); 
            returnviews; 
        
    
                     
    @Override
    publicbooleanonCreateOptionsMenu(Menu menu) { 
        getMenuInflater().inflate(R.menu.activity_switcher, menu); 
        returntrue
    
                     
}

效果圖:


注意的問題:圖片選擇時要注意不能太大,最好是選擇一樣大小的一組圖片,否則可能

會發生內存溢出異常,所以定要選好圖片素材。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章