Android 学习之路--android基础(三) | Talent?C 盒子 盒子
Posts List作者Talent?C
转载请注明出处
前言
上一篇文章我们介绍了 活动(Activity) 的作用及相关用法,我们知道活动是用来给用户展示 UI界面 的,那么在Android中都有哪些UI控件呢?今天就让我们来简单学习几种常见的 UI控件。
如何编写UI界面?
Android Studio中为我们提供两种UI界面的编辑方式, 第一种是通过Android Studio 提供的UI可视化的编辑器直接将控件拖入到预览区域即可;第二种是通过 XML代码 实现UI界面,等你完全掌握了使用 XML 来编写界面的方法后,不管是进行高度复杂的界面实现,还是分析和修改当前现有界面,对你来说都是手到擒来。
我们今天都以 XML 的方式创建控件,我们以几个比较常用的控件做演示。
TextView的使用
TextView,在屏幕上显示一段文字信息。它与OC中的 UILabel 作用一样,显示一段文字;但是它比 UILabel 更加灵活,TextView 可以自动显示几种超链接形式的文本,比如 电话,E-mail,网址 等,也可以自定义哪些文字可以点击并可以触发对应事件。
(1)显示普通文本
我们创建一个活动并在活动的布局文件中编辑UI界面
代码示例:一个活动的布局文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation=
"vertical">
<TextView
android:id=
"@ id/textView"
android:layout_width=
"match_parent"
android:layout_height=
"wrap_content"
android:text=
"普通文字显示"
android:gravity=
"center"
android:textSize=
"25sp"
android:background=
"#cfcccc"
/>
</LinearLayout>
|
<TextView>标签之前的属于布局文件的相关配置信息这些后面再细说,在TextView中我们使用了android:id给当前控件定义了一个唯一标识符,然后使用 android:layout_width与android:layout_height指定控件宽高。Android中所有的控件都有这两个属性,这两个属性为布局属性后面我们在讲解布局的时候会详细介绍,可选值有三种: match_parent 、 fill_parent 和 wrap_content。其中 match_parent与fill_parent意义相同,现在官方比较推荐我们使用match_parent,match_parent表示让当前控件的大小与父布局一样大小,也就是由父布局决定当前控件的大小。 wrap_content表示让控件的大小刚好能够包含里面的内容,也就是当前控件的大小由其内容决定;所以上面的控件宽度与手机屏幕宽度一致,高度与内容高度一致。
控件显示的文字内容为”普通文字显示”,文字大小使用android:textSize属性设置单位使用 sp,文字居中方式使用android:gravity属性决定,多个属性可以使用 “|” 连接, 如 android:gravity=”center” 等价于 android:gravity=”center_horizontal|center_vertical”,更多属性请查阅 API。
运行程序会在屏幕顶部显示一个这个控件了。
(2)显示自动识别的超链接
TextView控件自动匹配超链接模式默认是不匹配的,我们需要通过android:autoLink开启,有六种可以选择 none(默认) 、all 、phone 、email 、map 和 web。我们这里选择 all 全部启用。
代码示例:我们在创建一个TextView
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<TextView
android:id=
"@ id/textView_link"
android:layout_width=
"match_parent"
android:layout_height=
"wrap_content"
android:gravity=
"center_vertical"
android:textSize=
"25sp"
android:text=
"带有电话:123456780 email:[email protected] 网址:http://www.chuliangliang.com"
android:autoLink=
"all"
android:layout_marginTop=
"20dp"
android:background=
"#fae017"
android:textColor=
"#222"
android:linksClickable=
"true"
/>
|
运行程序,我们可以看到电话号、邮箱、网址均变成了可以点击了,点击对应区域就出触发对应事件, 如点击电话号码 就会调出拨打电话的界面,点击网页链接就会打开浏览器加载网页,是不是很方便啊。
(3)自定可点击文字
在实际开发中可能上诉的两种文字显示方式并不能满足开发需求,比如某些功能要求我们点击一段汉字或一段字母也能触发事件,这时就需要我们自定义可点击文字了,废话不多说直接上代码。
1
2
3
4
5
6
7
8
9
10
11
|
<TextView
android:id=
"@ id/textView_customLink"
android:textColor=
"#fff"
android:text=
"自定义文字链接:我是链接一, 链接二: 我是链接二"
android:textSize=
"20sp"
android:layout_marginTop=
"20dp"
android:layout_height=
"wrap_content"
android:layout_width=
"match_parent"
android:gravity=
"center_vertical"
android:background=
"#f16a48"
/>
|
我们想将上述控件中的 “我是链接一” 和 “我是链接二” 这两段文字可以响应点击事件,光靠布局文件中这几行文字是做不到,我们需要相应的Java代码配合才可以。我们来看看这个文件对应的活动中如何添加相关代码。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
private
static
final String TAG =
"ActivityForTextView";
private
static
final String CUSTOM_linkString =
"自定义文字链接:我是链接一, 链接二: 我是链接二";
private
static
final String CUSTOM_link1 =
"我是链接一";
private
static
final String CUSTOM_link2 =
"我是链接二";
protected void (Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_textview_layout);
TextView tView = (TextView) findViewById(R.id.textView_customLink);
this.doInitForlinkTextView(tView);
}
//设置textView显示文字及可点击文字区域等
private void doInitForlinkTextView(TextView textView)
{
ClickableSpan clickableSpan =
new ClickableSpan() {
public void onClick(View widget) {
if (widget
instanceof TextView) {
link1OnClick();
}
}
};
ClickableSpan clickableSpanForServer =
new ClickableSpan() {
public void onClick(View widget) {
if (widget
instanceof TextView) {
link2OnClick();
}
}
};
//第一个点击区域的文字开始与结束
int link1StingStart = CUSTOM_linkString.indexOf(CUSTOM_link1);
int link1StingEnd = link1StingStart CUSTOM_link1.length();
//第二个点击区域的文字开始与结束
int link2StingStart = CUSTOM_linkString.indexOf(CUSTOM_link2);
int link2StingEnd = link2StingStart CUSTOM_link2.length();
SpannableString sp =
new SpannableString(CUSTOM_linkString);
sp.setSpan(clickableSpan, link1StingStart, link1StingEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
sp.setSpan(clickableSpanForServer, link2StingStart, link2StingEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
textView.setText(sp);
textView.setLinkTextColor(Color.GRAY);
textView.setMovementMethod(LinkMovementMethod.getInstance());
textView.setFocusable(
false);
textView.setClickable(
false);
textView.setLongClickable(
false);
}
//link1文本点击事件
public void link1OnClick()
{
Log.d(TAG,CUSTOM_link1
"点击事件");
this.toast(CUSTOM_link1
"点击事件");
}
//link2文本点击事件
public void link2OnClick()
{
Log.d(TAG,CUSTOM_link2
"点击事件");
this.toast(CUSTOM_link2
"点击事件");
}
//封装的toast提示方法
private void toast(String str)
{
Toast.makeText(
this, str, Toast.LENGTH_SHORT).show();
}
|
我们在活动的内部定义三个常量, CUSTOM_linkString CUSTOM_link1 和 CUSTOM_link2, CUSTOM_linkString 是整个文字区域的完整文字, CUSTOM_link1 需要设置可以点击的第一段文字, CUSTOM_link2 需要设置可以点击的第二段文字,分别查找这两段文字在全部文字内容中的位置信息, 然后将按照位置信息设置点击事件回调方法。
Button的使用
关于Button的用法我们很早就接触过了,之前我们都是通过Java代码为Button设置点击事件的,今天我们来看看如何在布局文件中设置点击事件。
不管在哪里设置Button的点击事件,这个事件的回调方法肯定是Java代码,那么这个Java代码写在哪里呢?当然写在活动里。
活动中的代码示例:
1
2
3
4
5
|
/演示textView按钮点击事件
public void btn_TextView(View view)
{
//在这里接收按钮的点击事件
}
|
在活动的对应布局文件中如下设置
1
2
3
4
5
6
7
8
|
<Button
android:layout_width=
"match_parent"
android:layout_height=
"wrap_content"
android:id=
"@ id/button_textView"
android:text=
"演示TextView(文本显示控件)"
android:textAllCaps=
"false"
android:onClick=
"btn_TextView" //设置按钮点击事件回调
/>
|
按钮点事件回调的方法要满足如下规则:
- 方法必须使用 public 修饰。
- 方法返回值必须是 void。
- 方法中含有参数,参数类型为 View 型。
EditText的使用
EditText是程序与用户进行交互的另一个重要控件,它允许用户在控件里输入和编辑内容,并可以在程序中对这些内容做一些处理,如QQ或者微信聊天的文字输入框都有它的身影。
同样也是可以在布局文件创建,代码示例:
1
2
3
4
5
6
|
<EditText
android:layout_width=
"match_parent"
android:layout_height=
"wrap_content"
android:id=
"@ id/editView1"
android:hint=
"输入点文字吧~~"
android:maxLines=
"2"/>
|
android:hint属性默认提示的文字,当输入框中没有文字时会显示此文字,如果用户输入了文字,则不会显示此文字;android:maxLines,设置输入框中最多可以同时展示多少行文字,如上设置为2行,也就是输入框外观高度为两行文字的高度,当输入第三行及以上时, 内部的文字可以上下滚动。更多属性参考API。
ImageView的使用
ImageView是用于在界面上展示图片的一种控件,学习这个控件之前我们先来回忆一下 drawable 这个文件夹的作用,这个文件是用来保存程序中使用到的图片资源的,在其内部又可分为多个文件夹,代表同一张图片在不同分辨率的手机的对应的图片资源,这里我们只是用一种图片演示了。
首先我们将一张图片放入 drawable 文件夹下,命名为 “talentImage.png”。
创建ImageView代码示例:
1
2
3
4
5
6
|
<ImageView
android:layout_width=
"match_parent"
android:layout_height=
"wrap_content"
android:id=
"@ id/imgView_id"
android:src=
"@drawable/talentImage"
/>
|
XML 中通过android:src为ImageView控件填充图片,在Java代码中可以通过setImageResource()设置图片,图片控件的简单使用就介绍这么多吧,大家可以查看ImageView这类的API中的其他功能。
ProgressBar的使用
ProgressBar有很多样式, 如半环形不停的转圈, 条形带有进度的样式等等。
半环形,类似于OC中的UIActivityIndicatorView控件。
代码示例:
1
2
3
4
5
|
<ProgressBar
android:layout_width=
"match_parent"
android:layout_height=
"wrap_content"
android:id=
"@ id/progressView"
/>
|
运行程序你会发现这个指示器永远不消失,那么如何让它消失呢?我们可以通过修改android:visibility属性的值来控制其显示/隐藏,Android中所有UI控件都有此属性,此属性有三个值可以选择: visible 、invisible 和 gone。visible 表示控件是可见的,这个属性值是默认的,不指定android:visibility属性时,控件都是可见的。invisible 表示控件不可见,但是它仍然会占据着原来的位置和大小,可以理解成控件变成透明状态了。gone 表示控件不仅不可见,而且不再占用任何屏幕空间。我们还可以用过代码调用setVisibility()方法,传入值 View.VISIBLIE 、View.INVISIBLE 和 View.GONE 这三个值。
条形进度条,类似于OC中的UIProgressView类似。
示例代码
1
2
3
4
5
6
7
8
9
10
|
<ProgressBar
android:layout_width=
"match_parent"
android:layout_height=
"wrap_content"
android:id=
"@ id/progressView_h"
android:progressTint=
"#0ce743"
style=
"?android:attr/progressBarStyleHorizontal"
android:maxHeight=
"100dp"
android:max=
"100"
android:progress=
"50"
/>
|
通过style="?android:attr/progressBarStyleHorizontal"可以设置ProgressBar外观样式,通过android:progress属性设置进度。
AlertDialog的使用
AlertDialog可以在当前的界面弹出一个对话框,这个对话框是置顶于所有界面元素之上的,能够屏蔽掉其他控件的交互能力,因此AlertDialog一般用于一些非常重要的内容或者警告信息,比如防止用户误删重要信息。
代码示例: 在一个按钮点击事件中弹出一个AlertDialog控件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
//弹出AlertDialog
public void btn_AlertDialog(View view)
{
//初始化AlertDialog 控件
AlertDialog.Builder dialog =
new AlertDialog.Builder(HomeActivity.
this);
dialog.setTitle(
"alert 标题");
dialog.setMessage(
"我是消息内容");
dialog.setCancelable(
false);
//是否可以通过点击空白区域或者back键取消alert
dialog.setPositiveButton(
"OK",
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
Toast.makeText(HomeActivity.
this,
"您点击了 ok 按钮", Toast.LENGTH_SHORT).show();
}
});
dialog.setNegativeButton(
"Cancel",
new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
Toast.makeText(HomeActivity.
this,
"您点击了 Cancel 按钮", Toast.LENGTH_SHORT).show();
}
});
dialog.setNeutralButton(
"稍后",
new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
Toast.makeText(HomeActivity.
this,
"您点击了 稍后 按钮", Toast.LENGTH_SHORT).show();
}
});
dialog.show();
}
|
第二种样式,在内容区域前增加一个环形指示器
代码示例:
1
2
3
4
5
6
7
8
|
public void btn_progressDialog(View view)
{
ProgressDialog pd =
new ProgressDialog(HomeActivity.
this);
pd.setTitle(
"带有菊花的Alert标题");
pd.setMessage(
"loading....(带有菊花的文字消息内容)");
pd.setCancelable(
true);
//是否可以通过点击空白区域或者back键取消alert
pd.show();
}
|
好了,关于Android中常用的控件就介绍这么多吧,每个控件都介绍一遍不太现实,不过这些控件在使用上都大体相同,感兴趣的同学可以自己尝试一下,做到举一反三。
总结
今天的东西比较零散,相对来说每个控件都只介绍了基础用法。正所谓师父领进门,修行在个人,大家有时间可以自己去探究更详细的用法。
本文使用到 工程代码 下载
Close原文:大专栏 Android 学习之路--android基础(三)