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

时间：2023-03-08 19:40:31
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简易实战教程--第四十四话《ScrollView和HorizontalScrollView简单使用》

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

Android开发交流群：497646615

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

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

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