初探Activity2:添加简单的UI控件

原创 2016年05月31日 13:40:34

Activity是用来展示界面的,所以在继续了解Activity的知识之前,还是应该先了解一下如何在Activity中添加简单的UI控件。上一节那个Button按钮,我是通过界面编辑器的“Design”面板直接拖拉进去的,代码是直接生成的。这一节,就通过代码的方式,来给Activity添加一些简单的UI控件。

参考资料

如果要更加深入,可以看CodePath Android Cliffnotes的“Views and Layouts”那一部分的内容。

这节了解的UI控件

View 控件
TextView 文本
Button 按钮
EditText 文本编辑框
ImageView 图片

View和ViewGroup?

在了解UI控件之前,我们首先要知道Android中的“View和ViewGroup”。
这里写图片描述
看上面这个图,Android的图形用户界面是通过上图View和ViewGroup对象这样的层级关系来构建的。View对象通常就是像Button、TextView这样的UI控件。而ViewGroup对象则是一些你看不见的“视图容器”,它定义了它所包含的那些View子元素是怎样布局的,例如是网格列表又或者是垂直列表。

Android中用XML文件对应View和ViewGrop的子类,因此可以用XML来定义一系列UI元素的层级。

另外要注意,看下面官方文档的截图,ViewGroup是View的子类。

具体的View和ViewGroup?

View或ViewGroup 常见的具体元素
View Button、TextView、EditText……
ViewGroup RelativeLayout、LinearLayout、FrameLayout……

截取官方文档:
View
这里写图片描述

从上面的内容,我们知道应该是ViewGroup这个看不见的“容器”包含View子元素。
就是例如LinearLayout中包含着Button、TextView、EditText等等,
所以我们接下来就学习一下,怎么创建LinearLayout,怎么添加Button、EditText等等控件到LinearLayout中。

创建一个LinearLayout

1.在AndroidStudio的”res/layout”目录中,新建或打开一个layout布局xml文件。这里可以用自动生成的”activity_main.xml”文件来测试。
2.上一节是直接通过“所见即所得”的预览编辑窗口来添加界面元素的,现在选择编辑窗口底部“Design|Text”中的“Text”来通过代码直接编辑界面。
3.直接把原来的代码删掉,把下面的代码贴到进去。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button2"
        android:layout_gravity="center_vertical" />

</LinearLayout>

4.来说明一下:
LinearLayout是指定通过”android:orientation”属性,把它里面的子View元素(Button、TextView这些)按照水平或者垂直方向排列的view group(ViewGroup的子类)。

另外”android:layout_width”和”android:layout_height”这两个属性则是所有View元素(也就包括ViewGroup了)都必须指定的,用于指定它们的大小。

因为现在这个LinearLayout是这个layout布局的根View,所以它应该填充满整个屏幕,这里是通过“match_parent”给宽高来设置。“match_parent”意思就是这个View应该扩充它的宽或高去匹配它父View的宽或高。

For more information about layout properties, see the Layout guide.
更多关于layout布局参数的信息,可以看官方文档的介绍:Layout API Guide

添加一个EditText

1.还是在刚才操作的那个layout文件,我这里就是”activity_main.xml”。在<LinearLayout>标签里面,定义一个<EditText>,并且把它的id设置为@+id/edit_message
2.定义”layout_width” 和”layout_height”属性为”wrap_content”。
3.定义一个hint属性,并为它赋值一个名为“edit_message”的字符串对象。
最后就是下面这个样子:

<EditText android:id="@+id/edit_message"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="@string/edit_message" />

下面来解释一下刚才所设置的属性:

  • android:id
    这个属性为View控件提供了一个唯一的id,这样你就可以在app的代码中使用这个控件对象的引用,例如去读取并操作这个对象。(之后会有这部分内容)

The at sign (@) is required when you’re referring to any resource object from XML. It is followed by the resource type (id in this case), a slash, then the resource name (edit_message).

当你从XML中”@”符号 refer to

The plus sign (+) before the resource type is needed only when you’re defining a resource ID for the first time. When you compile the app, the SDK tools use the ID name to create a new resource ID in your project’s gen/R.java file that refers to the EditText element. With the resource ID declared once this way, other references to the ID do not need the plus sign. Using the plus sign is necessary only when specifying a new resource ID and not needed for concrete resources such as strings or layouts. See the sidebox for more information about resource objects.

  • android:layout_width和android:layout_height

  • android:hint

[未完待续]

版权声明:本文为博主原创文章,未经博主允许不得转载。

cocos2dx开发者指南:UI控件使用

综述 Cocos2d-x提供了一套易于使用的UI API来满足你的GUI需求,其中包括:Label、Menu、MenuItems、Buttons和Views。 Label(标签) C...
  • samrtian
  • samrtian
  • 2015年02月01日 07:55
  • 2017

Qt自定义控件的创建与初步使用(一)之自定义控件的创建步骤

本篇博客的目的是简单介绍:创建一个用QLabel类来显示图片的自定义控件的编写。在写自定义控件的过程中遇到了很多的难题,但都慢慢解决了,本人对Qt自定义控件的认识还不深刻,做的不对的地方,还请大家指出...
  • panshun888
  • panshun888
  • 2016年07月16日 13:08
  • 6204

封装一个UI控件的范例

用户需求一览 申请者满天星 项目大致代码行数1000 项目 GitHub 地址 项目备注 封装自己的UI空间需要注意哪些地方? 封装第三方A...
  • sunnyboy9
  • sunnyboy9
  • 2016年02月25日 22:16
  • 1646

学习记录-Qt窗口控件的动态添加和删除

一般用Qt写软件,使用designer创建一个窗口,拖几个控件进行一下布局就够用了,但有些需求,需要自定义各种类型的控件,并且很多控件需要根据数据的交互,动态的添加和删除,为此学习了一下Qt的实现方法...
  • u013399898
  • u013399898
  • 2016年07月02日 18:28
  • 7422

iOS_Swift — UI控件代码大全

// // ViewDetailController.swift // MySwiftViews // // Created by 李木木 on 15-6-11. // Copyright (...
  • likaikai103
  • likaikai103
  • 2015年12月29日 15:49
  • 169

Qt学习(1):ui设计给窗口做背景及控件背景添加方法

最近在做毕业设计。做一个ktv点歌系统的项目。 基本思路及需求分析都已准备完。昨天开始做ui+database了. 可是我搭档在用Qt做ui的时候遇到问题了。因为点歌界面都是那种透明背景图片。用Qt做...
  • imxiangzi
  • imxiangzi
  • 2015年08月27日 21:40
  • 2666

QT学习(一) 入门:基本控件和信号与槽和练习

这两天需要用到QT写一个界面,决定去学。Qt Create这个IDE真是非常好用,轻量级,Ui设计界面拖拖控件就行了,再用信号与槽(signal and slot)的机制就能很轻松的将界面上的一些事件...
  • ewfwewef
  • ewfwewef
  • 2017年04月22日 18:04
  • 387

Qt 界面使用自定义控件 "提升为"

1.效果图我做了一个非常简单的例子,一个可以显示颜色的QLabel,边上有个按钮,点击,跳出颜色选取的Dialog,然后选择一个颜色,这个QLabel会变成什么颜色。2.ColorLabel 我们先把...
  • fox64194167
  • fox64194167
  • 2014年06月17日 09:09
  • 5138

常用UI控件和常用类

1.UILabel、UISwitch、UISlider、UIPageControl、UIActivityIndicatorView 、UIProgressView、
  • jia611
  • jia611
  • 2014年05月23日 15:13
  • 1592

Android 常用布局及基本UI控件

一、Android学习API指南:【了解】 1. 应用的组成部分   App Components 1.1. 应用的基本原理    App Fundamentals 1.2. Activity    ...
  • ElevenDGQ
  • ElevenDGQ
  • 2016年04月20日 16:01
  • 2861
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:初探Activity2:添加简单的UI控件
举报原因:
原因补充:

(最多只允许输入30个字)