第一行代码:Android(2nd ed)(24):先从看得到的入手——探究活动 2.2.2

阅读数:30 2019 年 10 月 19 日 13:33

第一行代码:Android(2nd ed)(24):先从看得到的入手——探究活动 2.2.2

(活动的基本用法:创建和加载布局)

前面我们说过,Android 程序的设计讲究逻辑和视图分离,最好每一个活动都能对应一个布局,布局就是用来显示界面内容的,因此我们现在就来手动创建一个布局文件。

右击 app/src/main/res 目录→New→Directory,会弹出一个新建目录的窗口,这里先创建一个名为 layout 的目录。然后对着 layout 目录右键→New→Layout resource file,又会弹出一个新建布局资源文件的窗口,我们将这个布局文件命名为 first_layout,根元素就默认选择为 LinearLayout,如图 2.4 所示。

第一行代码:Android(2nd ed)(24):先从看得到的入手——探究活动 2.2.2

图 2.4 新建布局资源文件

点击 OK 完成布局的创建,这时候你会看到如图 2.5 所示的布局编辑器。

第一行代码:Android(2nd ed)(24):先从看得到的入手——探究活动 2.2.2

图 2.5 布局编辑器

这是 Android Studio 为我们提供的可视化布局编辑器,你可以在屏幕的中央区域预览当前的布局。在窗口的最下方有两个切换卡,左边是 Design,右边是 Text。Design 是当前的可视化布局编辑器,在这里你不仅可以预览当前的布局,还可以通过拖放的方式编辑布局。而 Text 则是通过 XML 文件的方式来编辑布局的,现在点击一下 Text 切换卡,可以看到如下代码:

复制代码
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>

由于我们刚才在创建布局文件时选择了 LinearLayout 作为根元素,因此现在布局文件中已经有一个 LinearLayout 元素了。那我们现在对这个布局稍做编辑,添加一个按钮,如下所示:

复制代码
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button 1"
/>
</LinearLayout>

这里添加了一个 Button 元素,并在 Button 元素的内部增加了几个属性。android:id是给当前的元素定义一个唯一标识符,之后可以在代码中对这个元素进行操作。你可能会对@+id/ button_1这种语法感到陌生,但如果把加号去掉,变成@id/button_1,这样你就会觉得有些熟悉了吧,这不就是在 XML 中引用资源的语法吗?只不过是把string替换成了id。是的,如果你需要在 XML 中引用一个id,就使用@id/id_name这种语法,而如果你需要在 XML 中定义一个id,则要使用@+id/id_name这种语法。随后android:layout_width指定了当前元素的宽度,这里使用match_parent表示让当前元素和父元素一样宽。android:layout_height指定了当前元素的高度,这里使用wrap_content表示当前元素的高度只要能刚好包含里面的内容就行。android:text指定了元素中显示的文字内容。如果你还不能完全看明白,没有关系,关于编写布局的详细内容我会在下一章中重点讲解,本章只是先简单涉及一些。现在按钮已经添加完了,你可以通过右侧工具栏的 Preview 来预览一下当前布局,如图 2.6 所示。

第一行代码:Android(2nd ed)(24):先从看得到的入手——探究活动 2.2.2

图 2.6 预览当前布局

可以看到,按钮已经成功显示出来了,这样一个简单的布局就编写完成了。那么接下来我们要做的,就是在活动中加载这个布局。

重新回到 FirstActivity,在onCreate()方法中加入如下代码:

复制代码
public class FirstActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.first_layout);
}
}

可以看到,这里调用了setContentView()方法来给当前的活动加载一个布局,而在setContentView()方法中,我们一般都会传入一个布局文件的id。在第 1 章介绍项目资源的时候我曾提到过,项目中添加的任何资源都会在 R 文件中生成一个相应的资源id,因此我们刚才创建的first_layout.xml布局的id现在应该是已经添加到 R 文件中了。在代码中去引用布局文件的方法你也已经学过了,只需要调用R.layout.first_layout就可以得到first_layout.xml布局的id,然后将这个值传入setContentView()方法即可。

评论

发布