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:///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 .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(.linearLayout1);  32         imageView1 = (ImageView) findViewById(.imageView1);  33         tv = (TextView)findViewById(.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），效果如下：

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

​​