只适合和我一样的初学者学习。
- 在iOS 端这个界面实现是超简单,也许是刚接触Android吧!第一次弄懂流程,感觉步骤有点多,现在终结一下觉得也很简单了。
- Android的图形用户界面是由多个View 和 ViewLayout 组成的。
- View 的话例如:Button 、text field 等是可视的。
- ViewGroup 是不可见的。它是一个布局。
- 所以我们以后布局的时候:
Android提供了一个对应于 View 和 ViewGroup 子类的一系列XMl标签,我们可以在XML里使用层级视图元素创建自己的UI。
接下来的练习将使用 LinearLayout 布局
- 在Android Studio中,当打开布局文件时,可以看到一个Preview面板,点击这个面板中的标签:
res/layout/activity_main.xml - 输入 线性布局:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
</LinearLayout>
-
添加一个文本输入框
<EditText android:id="@+id/edit_message" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="你好!我是编辑框!!!" android:background="#268be9" />
下面是运行的效果图:
- 与其它View一样,我们需要设置XML里的某些属性来指定EditText的属性值,以下是应该在线性布局里指定的一些属性元素:
android:id
- 这是定义View的唯一标识符。可以在程序代码中通过该标识符对对象进行引用。
- 当想从XML里引用资源对象的时候必须使用@符号。紧随@之后的是资源的类型(这里是id
),然后是资源的名字(这里使用的是edit_message
)。 - +号只是当你第一次定义一个资源ID的时候需要。这里是告诉SDK此资源ID需要被创建出来。在应用程序被编译之后,SDK就可以直接使用ID值,edit_message是在项目gen/R.java
文件中创建一个新的标识符,这个标识符就和EditText关联起来了。一旦资源ID被创建了,其他资源如果引用这个ID就不再需要+号了。这里是唯一一个需要+号的属性。
android:layout_width 和 android:layout_height
- 对于宽和高不建议指定具体的大小,使用wrap_content
指定之后,这个视图将只占据内容大小的空间。如果你使用了match_parent
,这时EditText将会布满整个屏幕,因为它将适应父布局的大小。
android:hint
- 当文本框为空的时候,会默认显示这个字符串。对于字符串 "你好!我是编辑框!!!"
的值所引用的资源应该是定义在单独的文件里,而不是直接使用字符串。因为使用的值是存在的资源,所以不需要使用+号。然而,由于你还没有定义字符串的值,所以在添加@string/edit_message
时候会出现编译错误。下边你可以定义字符串资源值来去除这个错误。
Note: 该字符串资源,也就是我 "你好!我是编辑框!!!" 与 id 如果使用了相同的名称(edit_message)。然而,对于资源的引用是区分类型的(比如id和字符串),因此,使用相同的名称不会引起冲突的。
增加字符串资源
- 这个和 iOS 有点区别,它是分开来写的。Android 这样做有它的好处的。
- 当你在用户界面定义一个文本的时候,你应该把每一个文本字符串列入资源文件。
- 这样做的好处是:对于所有字符串值,字符串资源能够单独的修改,在资源文件里你可以很容易的找到并且做出相应的修改。通过选择定义每个字符串,还允许您对不同语言本地化应用程序。
添加一个按钮
- 1 在 Android Studio里, 编辑 res/layout下的 activity_main.xml 文件.
- 2、 在< EditText >标签之后定义一个< Button >标签。
- 3、设置Button的width 和 height 属性值为 "wrap_content" 以便让Button大小能完整显示其上的文本.
- 4 定义button的文本使用android:text 属性,设置其值为之前定义好的 button_send 字符串.
- 下面的是文本框和按钮代码:
<EditText android:id="@+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="string你好!我是编辑框!!!"
android:background="#268be9" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_send"/>
Note 宽和高被设置为"wrap_content"
,这时按钮占据的大小就是按钮里文本的大小。这个按钮不需要指定[android:id]属性,因为Activity代码中不会引用该Button。
当前EditText和Button部件只是适应了他们各自内容的大小,如下图所示:
这样设置对按钮来说很合适,但是对于文本框来说就不太好了,因为用户可能输入更长的文本内容。因此如果能够占满整个屏幕宽度会更好。LinearLayout使用权重属性来达到这个目的,你可以使用android:layout_weight属性来设置。
"权重" 的值指的是:每个部件所占剩余空间的大小,该值与同级部件所占空间大小有关。(是一个shu'an'fa)
就类似于饮料的成分配方:“两份伏特加酒,一份咖啡利口酒”,即该酒中伏特加酒占三分之二。例如,我们设置一个View的权重是2,另一个View的权重是1,那么总数就是3,这时第一个View占据2/3的空间,第二个占据1/3的空间。如果你再加入第三个View,权重设为1,那么第一个View(权重为2的)会占据1/2的空间,剩余的另外两个View各占1/4。(请注意,使用权重的前提一般是给View的宽或者高的大小设置为0dp,然后系统根据上面的权重规则来计算View应该占据的空间。但是很多情况下,如果给View设置了match_parent的属性,那么上面计算权重时则不是通常的正比,而是反比,也就是权重值大的反而占据空间小)。
对于所有的View默认的权重是0,如果只设置了一个View的权重大于0,则该View将占据除去别的View本身占据的空间的所有剩余空间。因此这里设置EditText的权重为1,使其能够占据除了按钮之外的所有空间。
让输入框充满整个屏幕的宽度
- 1 在activity_Main.xml文件里,设置EditText的layout_weight属性值为1 .
2 设置EditText的layout_width值为0dp.
-
就是把 wrap_content 改了。
<EditText android:layout_weight="1" android:layout_width="0dp" ... />
为了提升布局的效率,在设置权重的时候,应该把EditText宽度设为0dp。如果设置"wrap_content"作为宽度,系统需要自己去计算这个部件所占有的宽度,而此时的因为设置了权重,所以系统自动会占据剩余空间,EditText的宽度最终成了不起作用的属性。
- 设置权重后的效果图:
-
在Android Studio里,点击工具栏里的Run按钮
- 或者 使用命令行:
- 1、cd 到你的根目录
- 2、
ant debug
adb install bin/工程名字-debug.apk - 运行效果: