Android简易实战教程--第四十四话《ScrollView和HorizontalScrollView简单使用》

一、ScrollView

由于手机屏幕的高度有限，当普通布局放不下现实和的内容时，ScrollView视图（滚动视图）就会派上用场，因为数据可以往下滚动显示。

二、HorizontalScrollView

看名称就清楚，当想在水平方向想放置更多的空间，屏幕宽度放不下的时候，它就派上用场了。因为用法非常简单，跟ScrollView一样只不过是个父容器，所以我结合上面的案例，把HorizontalScrollView放到了ScrollView里面。这样通过一个案例，同时学习了两个组件的使用，机智如我~

为了程序的可读性，直接上完整代码了：

总布局：

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/myscroll"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:id="@+id/mylinear"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:scaleType="centerCrop"
            android:src="@drawable/recommend_61" />

        <HorizontalScrollView
            android:background="#99cccccc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:scrollbars="none" >

            <LinearLayout
                android:id="@+id/id_gallery"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:orientation="horizontal" >
            </LinearLayout>
        </HorizontalScrollView>
    </LinearLayout>
    <!-- android:scrollbars="none" -->

</ScrollView>

因为我要在HorizontalScrollView的基础上，继续嵌套控件，因此定义了一个item的布局：activity_index_gallery_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="200dp"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/id_index_gallery_item_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:scaleType="centerCrop"
        android:src="@drawable/home01" />

    <TextView
        android:id="@+id/id_index_gallery_item_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="哈哈"
        android:layout_gravity="center_horizontal"
        android:textColor="#ff0000"
        android:textSize="12dp" />

</LinearLayout>

最后活动中的代码。稍作修改：

package com.example.test;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity {  

    String str[] = { "1", "2", "3", "4", "5", "6", "7", "8", };
    private int[] images = {R.drawable.home01,R.drawable.home02,R.drawable.home03,R.drawable.home04};

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setContentView(R.layout.activity_main);
        //初始设置按钮
        initBtn();
        //初始设置HorizontalScrollView
        initHorizontalScrollView();

    }

	private void initBtn() {
		//拿到线性布局容器
        LinearLayout linear = (LinearLayout) super.findViewById(R.id.mylinear);// 取得组件
        //设置按钮的大小参数
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.WRAP_CONTENT);// 定义按钮的布局参数  ，宽度充满父容器，高度包裹内容
        for (int i = 0; i < str.length; i++) {
        	//动态添加按钮
            Button btn = new Button(this);// 创建按钮组件
            btn.setText(this.str[i]);// 设置文本
            //给每个按钮都设置id编号(可通过btn.getId()获取对应的id编号)
            btn.setId(i);
            //参数设置给按钮
            btn.setLayoutParams(params);
            linear.addView(btn);// 线性布局增加孩子组件
            btn.setOnClickListener(new OnClickListenerImpl());
        }
	}  

	private void initHorizontalScrollView() {
		//HorizontalScrollView的孩子容器
		LinearLayout mGallery = (LinearLayout) findViewById(R.id.id_gallery);  

		//给孩子容器添加控件
        for (int i = 0; i < images.length; i++) {  

        	//控件以布局的形式引入
            View view = View.inflate(this, R.layout.activity_index_gallery_item, null);
            //设置图片资源数据
            ImageView img = (ImageView) view
                    .findViewById(R.id.id_index_gallery_item_image);// 找到显示图片的控件
            img.setImageResource(images[i]);
            img.setId(i);
            TextView txt = (TextView) view
                    .findViewById(R.id.id_index_gallery_item_text);
            txt.setText("我是图片"+i);  

            mGallery.addView(view);  

        }
	}

    private class OnClickListenerImpl implements OnClickListener {  

        public void onClick(View v) {
            switch (v.getId()) {
            case 0:
                Toast.makeText(MainActivity.this, "您选择了按钮1！", Toast.LENGTH_SHORT)
                        .show();
                break;
            case 1:
                Toast.makeText(MainActivity.this, "您选择了按钮2！", Toast.LENGTH_SHORT)
                        .show();
                break;
            case 2:
                Toast.makeText(MainActivity.this, "您选择了按钮3！", Toast.LENGTH_SHORT)
                        .show();
                break;
            case 3:
                Toast.makeText(MainActivity.this, "您选择了按钮4！", Toast.LENGTH_SHORT)
                        .show();
                break;
            case 4:
                Toast.makeText(MainActivity.this, "您选择了按钮5！", Toast.LENGTH_SHORT)
                        .show();
                break;
            case 5:
                Toast.makeText(MainActivity.this, "您选择了按钮6！", Toast.LENGTH_SHORT)
                        .show();
                break;
            case 6:
                Toast.makeText(MainActivity.this, "您选择了按钮7！", Toast.LENGTH_SHORT)
                        .show();
                break;
            case 7:
                Toast.makeText(MainActivity.this, "您选择了按钮8！", Toast.LENGTH_SHORT)
                        .show();
                break;  

            default:
                break;
            }  

        }  

    }
}  

运行效果如下：

您如果是正处于学习阶段，真诚的邀请您加入刚建立的群交流Android技术，一起学习：

Android开发交流群：497646615

也可以关注Android程序员开发指南  公众号

您看一看文章也就5-10分钟，笔者要花1个多小时才能完成，一起讨论问题哈。公众号二维码：