学习笔记| 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(指控件背景,可以是颜色或图片,如果是图片,大小会受控件大小影响,可能会变形)。

>简单控件篇(下)会接着介绍后五种控件

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,566评论 25 707
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,415评论 22 663
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,201评论 0 17
  • L君和我共性不多,却都对W城的米粉欲罢不能。从初中开始我们就特别注重培养自己网罗学校周边优质米粉店的能力...
    菜瓜饭阅读 256评论 2 3
  • 1、感恩父母的养育之恩,感恩母亲替我照顾孩子!谢谢你们!我爱你们! 2、感恩金钱的帮助!让我有了自己的事业,让我能...
    海清_3a07阅读 149评论 0 1