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

1. HorizontalScrollView

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

2. HorizontalScrollView案例：

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

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:layout_gravity="center_horizontal"
     android:orientation="vertical" >

     <ImageView
         android:id="@+id/imageView1"
         android:layout_width="match_parent"
         android:layout_height="200dp"
         android:paddingTop="10dp" />

     <HorizontalScrollView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_gravity="center_vertical"
         android:scrollbars="horizontal" >

         <LinearLayout
             android:id="@+id/linearLayout1"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="center_vertical"
             android:orientation="horizontal" >
         </LinearLayout>
     </HorizontalScrollView>

     <TextView
         android:gravity="center_horizontal"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:id="@+id/tv"
         android:text="简介描述"
         />

 </LinearLayout>

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

 package com.himi.horizontalscrollviewdemo;

 import android.app.Activity;
 import android.os.Bundle;
 import android.view.Gravity;
 import android.view.View;
 import android.view.View.OnClickListener;
 import android.view.ViewGroup;
 import android.widget.ImageView;
 import android.widget.LinearLayout;
 import android.widget.LinearLayout.LayoutParams;
 import android.widget.TextView;

 public class MainActivity extends Activity {

     private LinearLayout linearLayout1;
     private ImageView imageView1;
     private TextView tv;

     // 把要显示的图片放到一个图片id数组里面便于操作
     private int[] imageId = new int[] { R.drawable.img1, R.drawable.img2,
             R.drawable.img3, R.drawable.img4,
             R.drawable.img5, R.drawable.img6
         };

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
         // 获取组件
         linearLayout1 = (LinearLayout) findViewById(R.id.linearLayout1);
         imageView1 = (ImageView) findViewById(R.id.imageView1);
         tv = (TextView)findViewById(R.id.tv);

         for (int i = 0; i < imageId.length; i++) {
             // 新建一个线性布局
             LinearLayout linearLayout = new LinearLayout(this);
             // 设置新生成线性布局的参数，宽度为100，高度为匹配父组件，也就是水平滚动视图的高度
             LayoutParams layoutParams = new LayoutParams(100,
                     ViewGroup.LayoutParams.MATCH_PARENT);
                 // 设置线性布局内的组件水平居中
             layoutParams.gravity = Gravity.CENTER_HORIZONTAL;
                 // 设置新生成的线性布局android:orientation="vertical"
             linearLayout.setOrientation(LinearLayout.VERTICAL);
                 // 应用到新生成的线性布局
             linearLayout.setLayoutParams(layoutParams);

             // 新建一个图片视图
             ImageView imageView = new ImageView(this);
                 // 这里由于id不能为字符的缘故，所有对图片的id分别设为20000,20001,20002,...便于下面的图片点击监听器所控制
             imageView.setId(i + 20000);
                 // 将数组中的第i张图片放到图片视图
             imageView.setImageResource(imageId[i]);
                 // 自动缩放为宽高比
             imageView.setAdjustViewBounds(true);
                 // 图片的高度为80dp
             imageView.setMaxHeight(100);
             imageView.setPadding(10, 10, 10, 10);
             imageView.setOnClickListener(new OnClickListener() {
                 @Override
                 public void onClick(View view) {
                     // 把点击的图片id取出之后，减20000就是要显示的图片在图片数组的位置了。
                     imageView1.setImageResource(imageId[view.getId() - 20000]);
                     switch (view.getId() - 20000) {
                     case 0:
                             tv.setText("安徽建筑大学南校区大门");
                             break;
                     case 1:
                             tv.setText("安徽建筑大学南校区教学楼，楼下草坪");
                             break;
                     case 2:
                             tv.setText("安徽建筑大学南校区，傍晚的图书馆");
                             break;
                     case 3:
                             tv.setText("安徽建筑大学南校区，易海傍晚的晚霞");
                             break;
                     case 4:
                             tv.setText("健身房的美女，大长腿");
                             break;
                     case 5:
                             tv.setText("健身房的美女，大长腿");
                             break;
                     default:
                             break;
                     }
                 }
             });

             // 将图片视图加载到新生成的线性布局之中
             linearLayout.addView(imageView);

             // 新生成一个标签文本
             TextView textView = new TextView(this);
             //textView.setText("图片" + i);
             switch (i) {
             case 0:
                     textView.setText("校门");
                     break;
             case 1:
                     textView.setText("教学楼");
                     break;
             case 2:
                     textView.setText("图书馆");
                     break;
             case 3:
                     textView.setText("晚霞");
                     break;
             case 4:
                     textView.setText("健身房美女");
                     break;
             case 5:
                     textView.setText("健身房美女");
                     break;
             default:
                     break;
             }

             textView.setTextSize(10);
                 // 标签文本在水平位置居中
             textView.setGravity(Gravity.CENTER);
                 // 添加到新生成的线性布局之后
             linearLayout.addView(textView);

             //添加到LinearLayout1
             linearLayout1.addView(linearLayout);
         }

     }

 }

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

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