Android应用开发基础课程--15天做一个合格的Android程序员（第二天）界面开发（一）

清疚 2022-02-24 05:24 358阅读 0赞

# 课程目录 #

### [Android应用开发基础课程--15天做一个合格的Android程序员--课程目录 ][Android_--15_Android_--]        ###

第一天中已经将Android的环境搭建好了，helloworld程序也运行成功了，那么Android应用开发的第一步已经完成，再熟悉下Java的初级语法，可以开始正式的Android编程学习了。

**那第二天我们学习些什么呢？**

Android编程有个优点，所写即所见，什么意思，就是代码写好能马上运行起来看到真实的app界面，这是否也是一个app或者前端开发人员的g点？

我们已经学会了怎么创建工程，怎么运行工程，那么下一步就是怎么开发了。我觉得今天的内容可以分为下面几个部分：

1.  **熟悉Android项目的目录结构和作用**
2.  **熟悉Android界面开发**
3.  **完成一个demo**

## Android项目的目录结构和作用 ##

首先在这里要说明下，eclipse和as的目录结构是不一样的，但主要的目录和文件一样，配置的文件有很大不同，eclipse我在这里就不说了，现在主流都是用as开发。

as中Android项目的目录结构截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L292ZWp1cg_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L292ZWp1cg_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L292ZWp1cg_size_16_color_FFFFFF_t_70 2][]

在as中有三种过滤的方式可以选择查看项目的目录，project、Android、packages。packages用的比较少，里面基本都是包里的文件，没有配置文件。主要说下project和Android，下面用一个表格来做下对比以及说明：

<table> 
 <tbody> 
  <tr> 
   <td><strong>Android</strong></td> 
   <td><strong>Project</strong></td> 
   <td><strong>详细说明</strong></td> 
  </tr> 
  <tr> 
   <td>app/manifests</td> 
   <td>app/src/main/AndroidManifest.xml</td> 
   <td>存放AndroidManifest.xml文件，整个项目的配置文件，包括程序版本、四大组件注册、权限声明等。</td> 
  </tr> 
  <tr> 
   <td>app/java</td> 
   <td>app/src/main/java</td> 
   <td>Java源文件夹，存放项目中所有的Java代码源文件。</td> 
  </tr> 
  <tr> 
   <td>app/cpp</td> 
   <td>app/src/main/jni</td> 
   <td>C/C++源文件夹，存放项目中所有的C和C++代码源文件。</td> 
  </tr> 
  <tr> 
   <td>app/aidl</td> 
   <td>app/src/main/aidl</td> 
   <td>AIDL源文件夹，存放项目中的Android接口定义语言代码源文件。</td> 
  </tr> 
  <tr> 
   <td>app/renderscript</td> 
   <td>app/src/main/rs</td> 
   <td>RenderScript源文件夹，存放项目中的RenderScript代码源文件。</td> 
  </tr> 
  <tr> 
   <td>app/assets</td> 
   <td>app/src/main/assets</td> 
   <td>存放程序员想使用的任何资源文件，其中的文件不能通过R调用。</td> 
  </tr> 
  <tr> 
   <td>app/res</td> 
   <td>app/src/main/res</td> 
   <td>存放项目中所有的资源文件，包括图片、布局、字符串等。</td> 
  </tr> 
  <tr> 
   <td>app/resources</td> 
   <td>app/src/main/resources</td> 
   <td>存放Java资源文件</td> 
  </tr> 
  <tr> 
   <td>Gradle Scripts</td> 
   <td>app/* + Hello/*</td> 
   <td>gradle相关配置文件、gradle构建文件。</td> 
  </tr> 
  <tr> 
   <td>无</td> 
   <td>app/build</td> 
   <td>包含编译时自动生成的文件，与外层build文件夹类似但更复杂。</td> 
  </tr> 
  <tr> 
   <td>无</td> 
   <td>app/libs</td> 
   <td>存放项目中使用的第三方jar包，其中的jar包会自动加入构建路径。</td> 
  </tr> 
  <tr> 
   <td>无</td> 
   <td>app/src/androidTest</td> 
   <td>用来编写Android Test测试用例，可以对项目进行自动化测试。</td> 
  </tr> 
  <tr> 
   <td>无</td> 
   <td>app/src/test</td> 
   <td>用来编写Unit Test测试用例，可以对项目进行自动化测试。</td> 
  </tr> 
  <tr> 
   <td>无</td> 
   <td>Hello目录下除app文件夹外其他文件夹</td> 
   <td>gradle相关配置文件、编译器自动生成文件、项目相关配置文件、版本控制忽略文件等等。</td> 
  </tr> 
 </tbody> 
</table>

还有些主要的配置文件说明：

1 . gradle.properties

这个文件是全局的gradle配置文件，在这里配置的属性将会影响到项目中所有的gradle编译脚本。

2 . gradlew和gradlew.bat

这两个文件是用来在命令行界面中执行gradle命令的，其中gradlew是在Linux或Mac系统中使用的，gradlew.bat是在Windows系统中使用的。

3. Hello.iml

iml文件是所有IntelliJ IDEA项目都会自动生成的一个文件（Android Studio是基于IntelliJ IDEA开发的），用于标识这是一个IntelliJ IDEA项目，我们不需要修改这个文件中的任何内容。

4 . local.properties

这个文件用于指定本机中的Android SDK路径，通常内容都是自动生成的，我们并不需要修改。除非你本机中的Android SDK位置发生了变化，那么就将这个文件中的路径改成新的位置即可。

5 . settings.gradle

这个文件用于指定项目中所有引入的模块。由于Hello项目中就只有一个app模块，因此该文件中也就只引入了app这一个模块。通常情况下模块的引入都是自动完成的，需要我们手动去修改这个文件的场景可能比较少。

## Android界面开发-布局和控件 ##

既然我们已经熟悉了项目的目录结构，那么开始来编写自己的代码。

在Android界面开发中，我们要熟悉两个部分：

1.  界面的编写
2.  Java代码对界面的引用和控制

### 界面的编写 ###

Android界面的编写我认为涉及两大部分：布局、控件。

布局就是界面中整体或者局部的分布处理，控件就是界面中的元素。布局考虑的是你的界面上整体的分布，例如屏幕的兼容性，控件的分布位置等。控件就是界面中具体的元素，例如要显示一段文字、一张图片等，控件都有自己的属性，能通过控制控件的属性来改变控件在界面上的显示方式。

下面说下布局和控件的一些基础信息。不管布局或者控件，都有一个相同的基类view类，我们从这里开始讲起。

**View类**

是Android所有UI组件的父类，它代表了屏幕上一块空白的矩形区域。至于这块空白的区域内应该显示什么内容，这个工作就交给具体的界面元素来处理。如文本框应该显示什么样的内容，按钮、输入框、图标等这些具体的界面元素就会实现安卓的方法。

**ViewGroup类**

作为其它UI组件的容器使用，ViewGroup是View的子类。最主要的是帮助我们对这些界面元素进行位置分区，需要注意的是，此类同样有宽和高以及在屏幕上所显示的位置，只是此类的方法只是循环调用容器里面所有的UI控件的安卓方法，将容器里面的所有安卓控件逐一绘制出来。下面通过一个界面草图来理解View类和ViewGroup类的关系，这个长方形的方框是一个手机屏幕，在这个手机屏幕里面，首先显示的是一个ViewGroup，也就是蓝色的ViewGroup，在这个蓝色的ViewGroup里面又有两个棕色的ViewGroup，在两个ViewGroup里面都包含了一个文本View和按钮View。也就是当我们从手机上看到一款应用时，它的分层是类似于这种结构，这是一种视觉上的层次关系。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L292ZWp1cg_size_16_color_FFFFFF_t_70 3][]

在逻辑上，我们可以这样来理解它，首先有一个安卓的设备，在设备屏幕上面，显示了一个 ViewGroup，这个ViewGroup比较大，可能会充满屏幕，在这么大的ViewGroup里面，显示了两个稍微小一点的ViewGroup，在上半部分的ViewGroup里面，又显示了一个文本框和一个按钮，在下半部分的ViewGroup里面，也可以显示一些基本的界面元素，如文本框、按钮、输入框、图标等等。实际上安卓的系统也是经历过这样的逻辑层次关系，计算显示屏幕锁需要的内容。

应用界面的组成：Android 的所有UI组件都是建立在View、ViewGroup的基础之上。对于一个Android应用的图形用户界面来说，ViewGroup作为容器来盛装其他组件，ViewGroup里除了可以包含普通View组件之外，还可以再次包含ViewGroup组件。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L292ZWp1cg_size_16_color_FFFFFF_t_70 4][]

下面我在这里列出下一些基础的布局和控件：

** 布局：**

Android的布局方式主要有六大种：

1.  绝对布局（AbsoluteLayout）
2.  线性布局（LinearLayout）
3.  相对布局（RelativeLayout）
4.  帧布局（FrameLayout）
5.  表格布局(TableLayout)
6.  网格布局管理器(GridLayout)

详细的说明可以自己搜索，或者看看这里：[https://blog.csdn.net/yihuiworld/article/details/46010545][https_blog.csdn.net_yihuiworld_article_details_46010545]，[https://www.cnblogs.com/ludashi/p/4883915.html][https_www.cnblogs.com_ludashi_p_4883915.html]有很多分享的说明博客。

也有要特别说明的，比如ConstraintLayout **约束布局，这是9.0后基于扁平化的一个布局，集合线性布局和相对布局的特性，是以后的发展趋势。**[https://www.jianshu.com/p/17ec9bd6ca8a][https_www.jianshu.com_p_17ec9bd6ca8a]

**  控件：**

1.  文本控件TextView 
2.  按钮Button 
3.  图片控件ImageView
4.  输入控件EditText 
5.  图片按钮ImageButton 
6.  多选按钮CheckBox 
7.  单选按钮RadioButton 
8.  开关按钮ToggleButton 
9.  进度条ProgressBar 
10. 可拖动进度条SeekBar 
11. 星级进度条RatingBar 
12. TimePicker与DatePicker
13. 对话框AlertDialog 
14. 进度条对话框ProgressDialog

还有一些特殊的控件，如Listview、Gridview、RecyclerView等，后面再详细说这些。

控件的控制是通过控件的属性，控件有view类的基础属性，也会有自己特有的属性，这里列一下基础的属性，各自控件的基础属性我们会再课程中一边讲一边属性。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L292ZWp1cg_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L292ZWp1cg_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L292ZWp1cg_size_16_color_FFFFFF_t_70 7][]

上面讲完了理论上的知识，大家对布局和控件已经有了基础的了解，那么下面动手写写代码，加深理解。

首先在res/layout下新建一个activity\_layout\_widget\_demo.xml的布局文件。

![20190403140752855.png][]

打开布局文件，新建一个TextView：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L292ZWp1cg_size_16_color_FFFFFF_t_70 8][]

新建以后，在右边就会显示出你创建的这个控件。

那么接下来就请大家将上面讲解的布局和控件放到这个xml文件中，使用下控件的属性，在布局中控制下位置等。

这里贴上我的代码，ConstraintLayout这个是as自动生成的，大家可能和我的不相同

<?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="textView"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="按钮"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"/>
            <EditText
                android:layout_width="200dp"
                android:layout_height="50dp"
                android:hint="请输入"/>
            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@mipmap/ic_launcher"/>
            <CheckBox
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="多选框一"/>
            <RadioGroup
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
                <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="单选一"/>
                <RadioButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="单选二"/>
            </RadioGroup>
            <ToggleButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textOff="关"
                android:textOn="开"/>
            <ProgressBar
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <SeekBar
                android:layout_width="200dp"
                android:layout_height="20dp" />
            <RatingBar
                android:layout_width="200dp"
                android:layout_height="20dp" />
        </LinearLayout>
    
    </android.support.constraint.ConstraintLayout>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L292ZWp1cg_size_16_color_FFFFFF_t_70 9][]

[Android_--15_Android_--]: https://blog.csdn.net/ovejur/article/details/88994464
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L292ZWp1cg_size_16_color_FFFFFF_t_70]: /images/20220224/33efaadfe10d4deb84f34eaf609d8a50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L292ZWp1cg_size_16_color_FFFFFF_t_70 1]: /images/20220224/fbede14c9ca64d63ba230b51aee10a16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L292ZWp1cg_size_16_color_FFFFFF_t_70 2]: /images/20220224/66fd815e483842828f676e7505b214e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L292ZWp1cg_size_16_color_FFFFFF_t_70 3]: /images/20220224/36f2a0d08d5f4c2393f93fbf9539238f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L292ZWp1cg_size_16_color_FFFFFF_t_70 4]: /images/20220224/0a6c0669310445dc84f3613b31d0b319.png
[https_blog.csdn.net_yihuiworld_article_details_46010545]: https://blog.csdn.net/yihuiworld/article/details/46010545
[https_www.cnblogs.com_ludashi_p_4883915.html]: https://www.cnblogs.com/ludashi/p/4883915.html
[https_www.jianshu.com_p_17ec9bd6ca8a]: https://www.jianshu.com/p/17ec9bd6ca8a
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L292ZWp1cg_size_16_color_FFFFFF_t_70 5]: /images/20220224/59f2f57218034406bbcf5ef6bc947721.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L292ZWp1cg_size_16_color_FFFFFF_t_70 6]: /images/20220224/cec7c6bf3d1a4423a7914ca5fc226868.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L292ZWp1cg_size_16_color_FFFFFF_t_70 7]: /images/20220224/37dd7c1851bd42ecb088ce02a65ddd11.png
[20190403140752855.png]: /images/20220224/deb33210d1ed45c5af46585fd1296601.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L292ZWp1cg_size_16_color_FFFFFF_t_70 8]: /images/20220224/7a73b10d9cf54d59b025b8d5bd302803.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L292ZWp1cg_size_16_color_FFFFFF_t_70 9]: /images/20220224/cb186f4d740b40fd83c86542290b318a.png