学习笔记| AS入门（二） 简单控件篇（上）

在环境篇中我们学会了如何创建一个project和module，现在就可以在空白的界面里编写程序了。我们都知道，一个软件想要吸引用户那么友好的操作界面是必不可少的。那如何设计一个美观的界面呢，首先我们需要知道AS为我们提供了哪些UI工具以及它们的基本使用方法，简单控件篇将介绍以下几个常用的简单控件：

• TextView 文本框
• EditText 可输入文本框
• AutoCompleteTextView 自动匹配文本内容
• MutiAutoCompleteTextView 支持多次自动匹配文本内容
• ImageView 图片
• Botton 按钮
• ImageButton 图片按钮
• ToggleButton 多状态按钮
• CheckBox 复选框
• RadioButton 单选按钮

在开始之前，我们要知道在哪里操作这些控件：在XML布局文件中通过编写程序实现，可建立XML文件在layout文件夹下，如下图。至于什么是布局，将在下一章布局篇介绍。

1.TextView ：显示文本框

其实这些控件的使用方式有很大的相似性，在具体了解最简单的TextView控件之后再学习其他的控件会更容易一些。下图里展示TextView的一个效果图，界面中显示“Hello World”的字样：

先跳过外层的RelativeLayout相对布局，只要清楚在这个布局里可以包含有很多控件，接下来看TextView控件这一部分。
红框内圈出的前三行：
android:id（指控件id，在其他地方可通过id找到这个控件，注意书写格式@+id/控件名）;
android:layout_width（指控件的宽度，有两个常用选值，wrap_content包裹控件的宽度和match_parent铺满父容器的宽度 ，当然也可以自定义宽度，单位dp，如android:layout_width=“200dp”）;
android:android_height（指控件的高度，可选值同layout_width）;
安卓所有控件都有这三个属性，也是必不可少的属性。除了这些，每个控件还有属于自己的属性，下面介绍TextView常用的属性。
android:text（指文本内容，好编程习惯是将具体的文本内容放到values->strings里，然后用@string/名引用，三种实现方法见下图）

android:textSize（指文本大小，单位sp）
android:textColor（指字体颜色，以#开头的六位，可以在直接修改颜色）

android：background（指控件背景，可以是颜色也可以是图片，如果是图片，会铺满整个控件，也就是可能会变形）

TextView常用属性介绍到这里，因为TextView控件在activity_main.xml布局文件里，只要在MainActivity设置显示的布局文件是activity_main，然后就可以运行模拟器查看效果了！

另外，其实所有的控件都可以在Design界面中从右侧Palette直接拖拽，然后再回到Text界面内编辑需要的属性，但建议初学者最好在代码界面自己敲代码，打牢基础。

2.EditText ：可输入文本框

先来看看EditText效果：

这个界面大家一定不陌生，由此可见EidtView是可以输入文本的文本框。下面来看它的几个独特的属性：
android:hint（指输入提示文本内容。当然EditText也有android:text属性，它们的区别是，当用户准备在输入文本框输入的时候，hint的文本内容会消失，而text的文本内容不会消失会跟在用户输入内容的后面）
android:inputType（指输入文本的类型，比如data，number等等，保证用户输入的格式正确）
至于后面的layout_alignBaseline等是控件之间位置关系的描述，在布局篇会细说。

以下是源代码

 <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="密码"
         android:textSize="32sp"
        android:textColor="#000000"
        android:id="@+id/textView"/>

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="请输入密码"
        android:textSize="32sp"
        android:id="@+id/editText"
        android:layout_alignBaseline="@+id/textView"
        android:layout_alignBottom="@+id/textView"
        android:layout_centerHorizontal="true" />

3.AutoCompleteTextView ：自动匹配文本内容

当我们在搜索引擎查找内容的时候，当有想要输入的信息就会出现其他与其相关的提示信息，这就是AutoCompleteTextView的功能，它有一个很重要的属性，android:completionThreshold，指设置输入多少字符时提示内容。

    <AutoCompleteTextView
        android:hint="请输入要搜索的信息"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/autoCompleteTextView"
        android:completionThreshold="2"/>

当然，能被提示的数据源还需要自己手动设置，接下来MainActivity可以隆重上场了，见下图，关于activity后续会详细介绍。

实现方法，分三步:
第一步：在类内定义一个AutoCompleteTextView对象，然后在onCreate方法里用findViewById的方法找到之前定义好的AutoCompleteTextView控件，格式是R.id.控件id名，这就是为什么要在.xml布局文件里给控件一个id的原因，又由于findViewById返回的是View类对象，要在方法前加上强制转换（AutoCompleteTextView）。
第二步：在类内定义一个适配器ArrayAdapter，适配器是连接数据源和视图界面的桥梁，本例用数据适配器就足够，关于适配器详细内容后续会介绍。然后初始化适配器加载数据源，这里自定义的data数组就是被加载的数据源，其他两个参数this和android.R.layout.simple_list_item_1照写即可。
第三步：用 控件的自身方法setAdapter去加载适配器ArrayAdapter。
完成这三步就可以实现了！

以下是源代码：

public class MainActivity extends AppCompatActivity {

    private ArrayAdapter<String> arrayAdapter;
    private AutoCompleteTextView autoCompleteTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.auto);
        String data[] = {"hello", "how", "happy", "haha"};
        autoCompleteTextView = (AutoCompleteTextView) findViewById(R.id.autoCompleteTextView);
        arrayAdapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, data);
        autoCompleteTextView.setAdapter(arrayAdapter);

    }

4.MutiAutoCompleteTextView ：支持多次自动匹配文本内容

当我们同时给多个人发邮件的时候会注意到，每次输入一个收件邮箱都会有提示内容，这就是.MutiAutoCompleteTextView功能，它有个方法setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer())指设置以逗号分隔符为结束的符号。它的使用方法和AutoCompleteTextView的使用基本一致，不再赘述，具体代码参照下图。

以下是源代码：

 //.xml布局文件里设置一个MultiAutoCompleteTextView控件的代码
 <MultiAutoCompleteTextView
        android:hint="请输入要发送的对象"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/multiAutoCompleteTextView" />
        
//在MainActivity里实现的代码
public class MainActivity extends AppCompatActivity {

    private ArrayAdapter<String> arrayAdapter;
    private MultiAutoCompleteTextView  multiAutoCompleteTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.auto);
        String data[] = {"343028402@qq.com", "292500222@qq.com", "489103913@qq.com", "401804928@qq.com"};
        arrayAdapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, data);
        multiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.multiAutoCompleteTextView);
        multiAutoCompleteTextView.setAdapter(arrayAdapter);
        multiAutoCompleteTextView.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer());

    }

5.ImageView ：显示图片

ImageView控件用来显示图片，和TextView显示文本一样功能简单。需要注意的是ImageView的两个属性的区别:android:src（指需要被显示的图片，原来的图片多大就会显示多大），而android：background（指控件背景，可以是颜色或图片，如果是图片，大小会受控件大小影响，可能会变形）。

>简单控件篇（下）会接着介绍后五种控件