Android 高级UI设计笔记15：HorizontalScrollView之实现画廊式图片浏览器

1. HorizontalScrollView

　　本来，画廊式的图片浏览器，使用Android中的Gallery就能轻松完成，但是Google说Gallery每次切换图片时都要新建视图，造成太多的资源浪费，已经在安卓api 19之后被彻底废弃，Google推荐使用ViewPager 或者 HorizontalScrollView来实现Gallery的效果。网上对此的资料太杂，有部分资料写得太高深，完全看不懂。我搞了一个下午，才使用HorizontalScrollView完成画廊式的图片浏览器，如下图：

2. HorizontalScrollView案例：

（1）首先我们来到主布局文件activity_main.xml，如下：

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     android:layout_width="match_parent"
 3     android:layout_height="match_parent"
 4     android:layout_gravity="center_horizontal"
 5     android:orientation="vertical" >
 6 
 7     <ImageView
 8         android:id="@+id/imageView1"
 9         android:layout_width="match_parent"
10         android:layout_height="200dp"
11         android:paddingTop="10dp" />
12 
13     <HorizontalScrollView
14         android:layout_width="match_parent"
15         android:layout_height="wrap_content"
16         android:layout_gravity="center_vertical"
17         android:scrollbars="horizontal" >
18 
19         <LinearLayout
20             android:id="@+id/linearLayout1"
21             android:layout_width="wrap_content"
22             android:layout_height="wrap_content"
23             android:layout_gravity="center_vertical"
24             android:orientation="horizontal" >
25         </LinearLayout>
26     </HorizontalScrollView>
27     
28     <TextView
29         android:gravity="center_horizontal"
30         android:layout_width="match_parent"
31         android:layout_height="wrap_content"
32         android:id="@+id/tv"
33         android:text="简介描述" 
34         />
35 
36 </LinearLayout>

（2）接下来直接来到主Activity，也就是MainActivity，如下：

  1 package com.himi.horizontalscrollviewdemo;
  2 
  3 import android.app.Activity;
  4 import android.os.Bundle;
  5 import android.view.Gravity;
  6 import android.view.View;
  7 import android.view.View.OnClickListener;
  8 import android.view.ViewGroup;
  9 import android.widget.ImageView;
 10 import android.widget.LinearLayout;
 11 import android.widget.LinearLayout.LayoutParams;
 12 import android.widget.TextView;
 13 
 14 public class MainActivity extends Activity {
 15 
 16     private LinearLayout linearLayout1;
 17     private ImageView imageView1;
 18     private TextView tv;
 19     
 20     // 把要显示的图片放到一个图片id数组里面便于操作
 21     private int[] imageId = new int[] { R.drawable.img1, R.drawable.img2,
 22             R.drawable.img3, R.drawable.img4, 
 23             R.drawable.img5, R.drawable.img6 
 24         };
 25 
 26     @Override
 27     protected void onCreate(Bundle savedInstanceState) {
 28         super.onCreate(savedInstanceState);
 29         setContentView(R.layout.activity_main);
 30         // 获取组件
 31         linearLayout1 = (LinearLayout) findViewById(R.id.linearLayout1);
 32         imageView1 = (ImageView) findViewById(R.id.imageView1);
 33         tv = (TextView)findViewById(R.id.tv);
 34 
 35         for (int i = 0; i < imageId.length; i++) {
 36             // 新建一个线性布局
 37             LinearLayout linearLayout = new LinearLayout(this);
 38             // 设置新生成线性布局的参数，宽度为100，高度为匹配父组件，也就是水平滚动视图的高度
 39             LayoutParams layoutParams = new LayoutParams(100,
 40                     ViewGroup.LayoutParams.MATCH_PARENT);
 41                 // 设置线性布局内的组件水平居中
 42             layoutParams.gravity = Gravity.CENTER_HORIZONTAL;
 43                 // 设置新生成的线性布局android:orientation="vertical"
 44             linearLayout.setOrientation(LinearLayout.VERTICAL);
 45                 // 应用到新生成的线性布局
 46             linearLayout.setLayoutParams(layoutParams);
 47             
 48             // 新建一个图片视图
 49             ImageView imageView = new ImageView(this);
 50                 // 这里由于id不能为字符的缘故，所有对图片的id分别设为20000,20001,20002,...便于下面的图片点击监听器所控制
 51             imageView.setId(i + 20000);
 52                 // 将数组中的第i张图片放到图片视图
 53             imageView.setImageResource(imageId[i]);
 54                 // 自动缩放为宽高比
 55             imageView.setAdjustViewBounds(true);
 56                 // 图片的高度为80dp
 57             imageView.setMaxHeight(100);
 58             imageView.setPadding(10, 10, 10, 10);
 59             imageView.setOnClickListener(new OnClickListener() {
 60                 @Override
 61                 public void onClick(View view) {
 62                     // 把点击的图片id取出之后，减20000就是要显示的图片在图片数组的位置了。
 63                     imageView1.setImageResource(imageId[view.getId() - 20000]);
 64                     switch (view.getId() - 20000) {
 65                     case 0:
 66                             tv.setText("安徽建筑大学南校区大门");
 67                             break;
 68                     case 1:
 69                             tv.setText("安徽建筑大学南校区教学楼，楼下草坪");
 70                             break;
 71                     case 2:
 72                             tv.setText("安徽建筑大学南校区，傍晚的图书馆");
 73                             break;
 74                     case 3:
 75                             tv.setText("安徽建筑大学南校区，易海傍晚的晚霞");
 76                             break;
 77                     case 4:
 78                             tv.setText("健身房的美女，大长腿");                
 79                             break;
 80                     case 5:
 81                             tv.setText("健身房的美女，大长腿");
 82                             break;
 83                     default:
 84                             break;
 85                     }
 86                 }
 87             });
 88             
 89             // 将图片视图加载到新生成的线性布局之中
 90             linearLayout.addView(imageView);
 91             
 92             // 新生成一个标签文本
 93             TextView textView = new TextView(this);
 94             //textView.setText("图片" + i);
 95             switch (i) {
 96             case 0:
 97                     textView.setText("校门");
 98                     break;
 99             case 1:
100                     textView.setText("教学楼");
101                     break;
102             case 2:
103                     textView.setText("图书馆");
104                     break;
105             case 3:
106                     textView.setText("晚霞");
107                     break;
108             case 4:
109                     textView.setText("健身房美女");            
110                     break;
111             case 5:
112                     textView.setText("健身房美女");
113                     break;
114             default:
115                     break;
116             }
117             
118             
119             textView.setTextSize(10);
120                 // 标签文本在水平位置居中
121             textView.setGravity(Gravity.CENTER);
122                 // 添加到新生成的线性布局之后
123             linearLayout.addView(textView);
124             
125             //添加到LinearLayout1
126             linearLayout1.addView(linearLayout);
127         }
128 
129     }
130     
131     
132 }

（3）运行到手机上（HTC），效果如下：

程序刚刚启动的效果如下：

Android 高级UI设计笔记15：HorizontalScrollView之 实现画廊式图片浏览器

Android 高级UI设计笔记15：HorizontalScrollView之实现画廊式图片浏览器