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个多小时才能完成，一起讨论问题哈。公众号二维码：