学习笔记| 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(指控件背景,可以是颜色或图片,如果是图片,大小会受控件大小影响,可能会变形)。
>简单控件篇(下)会接着介绍后五种控件