2021SC@SDUSC移动互联网项目分析——入门Hello World（三）

最新推荐文章于 2024-09-15 16:55:38 发布

小飞侠彼得潘101

最新推荐文章于 2024-09-15 16:55:38 发布

阅读量1.1k

点赞数

文章标签： ui android

本文链接：https://blog.csdn.net/qq_48308138/article/details/120924475

版权

2021SC@SDUSC

fitCenter(fitStart,fitEnd)

之前分析了案例app入门Hello World总页面、布局和部分UI控件。这篇博客主要分析app中剩余的UI控件——CheckBox、ImageView、ScrollView

CheckBox

复选框是一个 ON/OFF 开关，可以由用户切换。用户可选择的选项不是相互排斥的一组时，应该使用复选框，可多选。

此页面为线性布局，因此在布局文件activity_check_box.xml中最外层为<LinearLayout></LinearLayout>标签，内层添加了7个CheckBox和一个提交的Button。

选项改变监听

第一组CheckBox选项为"西瓜"、"梨"、"苹果"。当勾选选项时，监听会注意到改变的选项并将选择的选项内容在手机下方显示。

为实现此监听首先需要在CheckBoxActivity.java中通过控件id属性获取到第一组CheckBox

因为类CheckBoxActivity实现了CompoundButton.OnCheckedChangeListener接口

CompoundButton.OnCheckedChangedListener 接口可用于对 CheckBox 的状态进行监听。当 CheckBox 的状态在未被选中和被选中之间变化时，该接口的 onCheckedChanged () 方法会被系统调用。 CheckBox 通过 setOnCheckedChangeListener () 方法将该接口对象设置为自己的监听器。

所以cbx1、cbx2、cbx3通过调用CheckBox.setOnCheckedChangeListener()方法即可设置事件监听。

不过要记得实现接口中的onCheckedChanged()抽象方法。（此部分只需看划红线部分即可通过）通过Toast.makeText(...).show()显示出发生改变的选项内容。

提交选项监听

第二组CheckBox选项为"物理"、"化学"、"生物"，"全选"。选择"全选"时，会将前面三个选项全选上。点击"确认"按钮提交后，在手机下方会显示选择的内容。

为实现此监听需要在CheckBoxActivity.java中通过控件id属性获取到第二组CheckBox和提交按钮。

首先要完成点击"全选"时，将前三个全选上的功能。需要给cbx7(全选选项）加上改变事件监听，与第一组CheckBox一样，通过调用CheckBox.setOnCheckedChangeListener()方法设置事件监听。

因为此监听不是像第一组CheckBox一样检测到改变只需弹出选项内容，而是需要将前三个都选上，所以对CompoundButton.OnCheckedChangedListener 接口中的onCheckedChanged()方法实现时要添加if...else语句来区分到底是第一组选项还是cbx7发生改变。

如果是cbx7发生改变，首先通过外层的if...else来判断是选择还是取消"全选"按钮

b是true的话，则选择"全选"，因此需要调用CheckBox.setChecked(true)将前面三个选项选上。

b是false的话，则是取消"全选"，因此需要调用CheckBox.setChecked(false)将前面三个选项全取消。

其次要完成点击"确认"按钮提交选项内容。

类CheckBoxActivity还实现了View.OnClickListener接口，按钮可直接调用setOnClickListener()方法增加点击事件监听。

为了完成点击事件发生时界面弹出选项内容的动作，实现接口中的抽象方法onClick()。

通过if语句，来判断各个选项是否被选上（除了"全选"按钮）。若选上，则String类型的choose就加上选项内容，最后通过Toast.makeText(...).show()展示给用户。

ImageView

图像视图，直接继承自View类，它的主要功能是用于显示图片。ImageView可以适用于任何布局中，并且Android为其提供了缩放和着色的一些操作。

此页面可拉动，因此最外层为<ScrollView></ScrollView> 。内层嵌套一个线性布局的页面，所以第二层是<LinearLayout></LinearLayout>。最里层添加一些TextView、ImageView展示ImageView属性android:scaleType设置不同值表示的不同效果。

其他属性不再赘述，在TextView讲得较为清楚。