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），效果如下：

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