本节目录

控件的使用方法

AS中为我们开发者提供了可视化的图形编辑器，通过它我们可以手动的拖拽和选择所需要的控件以及要摆放的位置。但是我们更经常使用的则是XML来自己编写界面。

在使用控件之前，我们先来了解一下layout，找到src—res—layout，打开它的子目录就会出现布局编辑器：

布局编辑器

我们选择左下角的text，就会跳转到代码编辑区，我们就在这里使用XML来自己手写界面。而在它的右边会有一个手机的界面，每当我们完成界面的编写，它都会第一时间的显示出来供我们参考修改。

代码编辑区

基本控件的介绍

AS提供了大量的UI控件，下面就来介绍一些常用的控件以及它们的使用方法：

1.TextView 文本框

TextView主要是用于在界面上显示一段文本信息。在代码编辑区中写下如下代码：

<TextView
        android:id="@+id/text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 

        android:text="TextView"
        android:gravity="center"
        android:textSize="20sp"
        android:textColor="#00ff00"/>

下面来解释代码的具体含义，首先是android:id，它是给当前控件一个唯一的标识符，在活动中调用控件时就会使用该标识符；android:layout_width和android:layout_height是控制控件的宽度和高度，一般就只有match_parent和wrap_content，match_parent是指让控件的大小与父布局的大小一致（即手机的大小），而wrap_content是指控件的大小刚好能够包住里面的内容。前面三个是所有控件都拥有的属性，后面的控件中我们就不多介绍这三个了。

接着是介绍TextView中所独有（有些控件可能也会使用，但不是所有的控件都能使用）的属性了：
android:text：是为TextView来指定所显示的内容的，我们可以自己编辑。
android:gravity：来指定文字的对齐方式，可选的主要有：top、bottom、lefe、right、center等。
android:textSize：用来指定文字的大小，单位是sp。
android:textColor：用来指定文字的颜色，一般填入的都是颜色的代码。

2.Button 按钮

按钮就不多说了，直接开始介绍。在编辑区中输入以下代码：

 <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:text="Button"/>

android:text也可以使用在Button中。

3.EditText 可输入文本框

EditText是允许用户在输入框里面输入内容的组件，同样输入代码：

<EditText
        android:id="@+id/edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        
        android:hint="请输入密码"
        android:maxLines="2"/>

android:hint：是EditText的独有属性，它是指在输入时输入框会出现一段比较浅的提示语来提醒你输入什么，这一段提示语我们就可以使用android:hint来实现。
android:maxLines：指我们再输入时可以显示的行数，在这里我们设定的显示是2行。

4.imagineView 图片

imagineView是我们用来存放图片的控件，在目录res中有drawable子目录来专门存放我们所需要的图片，我们将自己的图片命名为img_1.jpg后拖入到该目录当中，然后输入代码：

<ImageView
        android:id="@+id/imagine_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:src="@drawable/img_1"/>

android:src：是指调用drawable中的图片来显示到手机界面上，其中/后面需要写所需要调用图片的名称。

5.ProgressBar 进度条

ProgressBar就是类似于进度条的控件，它的使用方法是：

 <ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        
        android:visibility="gone"/>

android:visibility：是一个公共属性，它的具体功能是控制该控件是否是可见的，一般是有三个选项：visible、invisible和gone。visible指的是可见，如果不特意写出来所有的控件默认都是visible，invisible则是不可见，但是这里的“不可见”可以看做是透明，即虽然看不到，但确是真实存在的，最后是gone，它就是指彻彻底底的看不见（并不是透明了）。

基本布局的介绍

布局简单来说就是控制控件的摆放方式“容器”，布局可以指定每个控件的摆放方式，包括大小，位置，所占的百分比等。Android中有4种基本的布局，下面就来一一了解它们吧。

1.LinearLayout 线性布局

线性布局是我们最常使用的一种布局方式，在上上面介绍控件的时候我们就是使用的线性布局。找到res—layout，然后点击右键，找到new—layout resource file点击之后就会出现创建布局的面板，我们将布局命名为linear_layout（注意必须是小写）将布局方式选择为LinearLayout：

创建布局

创建完成之后我们修改代码如下：

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

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:text="button1"/>
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="button2"/>
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:text="button3"/>

</LinearLayout>

完成之后我们会发现右边的手机视图出现了三个水平排列的按钮，这就是LinearLayout的功劳了。分析代码，我们可以看到在开头中有android:orientation="vertical"这一行，而这就是LinearLayout的专有属性了，android:orientation可以控制控件的排列方式，一般是有2种方式可供选择：vertical（垂直排列）和horizontal（水平排列）。但是要注意如果选择的排列方式是vertical（垂直排列），则控件中的android:layout_height就不能选择match_parent了，因为此时控件的摆放方式是受布局的影响的，同理horizontal（水平排列）时就不能在android:layout_width上使用match_parent。

接着再来介绍有关线性布局的其他重要属性：
layout_gravity：可以看到它和之前的gravity有一点像，它们之间的区别是layout_gravity是指控件之间的相对布局，而gravity则是文字在控件中的相对位置。layout_gravity有很多个选项，一般我们会使用的有：top、center和bottom。

接着我们修改代码：

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

    <EditText
        android:id="@+id/edit_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="input"/>
    
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Button"/>

</LinearLayout>

可以看到我们使用了android:layout_weight这个属性，这个属性是指控件在宽度上的相对大小，在这里就是EditText和Button各占一半了（因为都是设置的为1），但是要注意我们在这里将控件的android:layout_width都设置成了0dp，因为此时我们需要控件是由android:layout_weight来控制，而设置为0dp是一种标准的写法。

2.RelativeLayout 相对布局

相对布局可以让我们对控件有更加随意控制。相对布局主要有2种方式：相对父布局和相对控件布局。我们再创建一个布局，然后选择布局模式为RelativeLayout ，然后修改代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Button1"/>
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Button2"/>
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button3"/>
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:text="Button4"/>
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="Button5"/>

</RelativeLayout>

其实这样大致看下来就会很简单，就是在控件中加上android:layout_alignParentRight、android:layout_alignParentLeft等等相对于父布局的位置，然后设定为true就可以，如果不设定一般默认为false。

除此以外，我们还可以相对于控件来进行布局，修改代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button3"/>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button3"
        android:layout_toLeftOf="@+id/button3"
        android:text="Button1"/>
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button3"
        android:layout_toRightOf="@+id/button3" 
        android:text="Button2"/>
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button3"
        android:layout_toLeftOf="@+id/button3"
        android:text="Button4"/>
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button3"
        android:layout_toRightOf="@+id/button3" 
        android:text="Button5"/>

</RelativeLayout>

这个也是很好理解的，就是Button1\2\4\5放在Button3的四周，但是需要注意的是在设置属性时需要将Button3的id传进去，因此我们需要将Button3先设置在最前面，放置后面的控件找不到Button3的id。

3.FrameLayout 帧布局

帧布局是最简单的一种布局了，它就是简单的将控件默认放在整个布局的左上角。我们一起来看一看吧：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"/>
    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"/>

</FrameLayout>

通过左边的视图可以看到按钮和图片都出现在了左上角，但是这样会使得图片遮盖住后面的按钮，所以这种布局我们不常使用。

4.百分比布局

百分比布局是Android引入的一种权限全新的布局方式，在这种布局中，我们可以不使用wrap_cntent和match_partent等方式来控制控件的大小，而是直接允许设置控件在布局中所占的百分比。因为LinearLayout已经允许设定控件的百分比，所以百分比布局主要是为Relati veLayout和FramLayout提供扩展，分别是PercentRelativeLayout和PercentFramLayout。

要使用百分比布局，我们首先需要在build.gradle中添加百分比布局的依赖。打开app—build.gradle，然后在dependencies修改成如下代码：

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    compile 'com.android.support:percent:26.1.0'   
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

之后点击上方的sync now后更新一下，我们就可以使用百分比布局了。创建一个新的布局，然后修改代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentFrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button1"
        android:text="Button1"
        android:layout_gravity="left|top"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"/>
    <Button
        android:id="@+id/button2"
        android:text="Button2"
        android:layout_gravity="right|top"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"/>
    <Button
        android:id="@+id/button3"
        android:text="Button3"
        android:layout_gravity="left|bottom"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"/>
    <Button
        android:id="@+id/button4"
        android:text="Button4"
        android:layout_gravity="right|bottom"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"/>

</android.support.percent.PercentFrameLayout>

其实代码的整体部分是比较好理解的，这里就不多说了。需要注意的是在开头需要设定一个命名空间app，然后在使用的时候需要在前面加上命名空间，之后就可以正常的使用了。