本章主要介绍基本的平常较多使用的控件,包括TextView、EditView、ImageView、Button等。本章将介绍相关控件基本属性的使用,为以后章节的进阶学习提供基础。案例中引用的LinearLayout布局,可先不必深究,后续章节将会详细介绍。

TextView


TextView控件的基本属性,android:layout_width 布局宽度android:layout_height 布局高度。这两个属性参数是必须的。
TextView 中android:layout_width与android:layout_height可供选择的参数:


  • match_parent   :匹配父控件大小(宽、高)【官方建议使用】
  • fill_parent    :填充父控件大小(宽、高)等效于match_parent
  • wrap_content   :包裹内容

TextView扩展的属性:


  • android:text指定控件的文本
  • android:gravity指定控件的基本位置
  • android:drawableLef指定text左边输出的drawable(如图片)
  • android:drawableRight指定text右边输出的drawable(如图片)
  • android:drawableTop指定text顶部输出的drawable(如图片)
  • android:drawableBottom指定text底部输出的drawable(如图片)


【布局文件】activity_textview.xml。


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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="TextView" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/tupiao"
        android:gravity="center"
        android:text="TextView_drawableLeft" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableRight="@drawable/tupiao"
        android:gravity="center"
        android:text="TextView_drawableRight" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/tupiao"
        android:gravity="center"
        android:text="TextView_drawableTop" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableBottom="@drawable/tupiao"
        android:gravity="center"
        android:text="TextView_drawableBottom" />

</LinearLayout>



效果截图:



android ui 与android 常用控件_控件



EditText


EditText控件,主要提供用户填写(输入)信息的接口作用,而之前介绍的TextView主要作用是信息的显示。
EditText中android:layout_width与android:layout_height可供选择的参数:

  • match_parent   :匹配父控件大小(宽、高)【官方建议使用】
  • fill_parent    :填充父控件大小(宽、高)等效于match_parent
  • wrap_content   :包裹内容

EditText扩展的属性:

  • android:text 指定控件的文本
  • android:gravity 指定控件的基本位置
  • android:password 指定文本以小点“•”显示
  • android:hint 指定Text为空时显示的文字提示信息
  • android:drawableLef 指定text左边输出的drawable(如图片)
  • android:drawableRight 指定text右边输出的drawable(如图片)
  • android:drawableTop 指定text顶部输出的drawable(如图片)
  • android:drawableBottom 指定text底部输出的drawable(如图片)


【布局文件】activity_edittext.xml。


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

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="EditText" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:hint="please input your message! " />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/tupiao"
        android:gravity="center"
        android:hint="please input your message! " />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/tupiao"
        android:gravity="center"
        android:text="EditText" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/tupiao"
        android:gravity="center"
        android:password="true"
        android:text="EditText" />

</LinearLayout>


效果截图:

android ui 与android 常用控件_Text_02





ImageView


ImageView控件,主要提供图片显示的作用,但当对基本的控件了解清楚之后,就会发现这些基本控件很多都可以通用适用,例如按钮的点击事件监听操作。
ImageView中android:layout_width与android:layout_height可供选择的参数:

  • match_parent   :匹配父控件大小(宽、高)【官方建议使用】
  • fill_parent    :填充父控件大小(宽、高)等效于match_parent
  • wrap_content   :包裹内容

ImageView扩展的属性:

  • android:src 指定前景drawable(如图片)
  • android:background 指定背景drawable(如图片)

注:background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸。src是图片内容(前景),background是背景,可以同时使用。

【布局文件】activity_imageview.xml。


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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/image" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/background_dark"
        android:src="@drawable/image" />

</LinearLayout>


效果截图:


android ui 与android 常用控件_android_03




Button    ImageButton


Button控件,从命名本身就可以很明了,提供按钮的控件,而ImageButton更显而易见是提供图片按钮。
Button/ImageButton中android:layout_width与android:layout_height可供选择的参数:

  • match_parent   :匹配父控件大小(宽、高)【官方建议使用】
  • fill_parent    :填充父控件大小(宽、高)等效于match_parent
  • wrap_content   :包裹内容

Button/ImageButton扩展的属性:

  • android:src 指定前景drawable(如图片)
  • android:text     对于ImageButton控件无效
  • android:background 指定前景drawable(如图片)

【布局文件】activity_button.xml。


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

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/button"
        android:text="Button" />

    <ImageButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/button_with_text" />

</LinearLayout>


效果截图:


android ui 与android 常用控件_布局_04



Android常用的控件有很多种,本章主要介绍这些较为常用的控件,以方便后续章节的使用与为新知识点的引入做铺垫。本章的学习就此结束,敬请期待下一章节。