Android图形用户界面
上次课我们学习了Activity间如何传递数据,如何传递数据以及Activity的生命周期,这次我们学习了UI界面,UI是介于用户与硬件而设计彼此之间能够互动沟通的相关软件,目的在于用户能够有效率的去操作硬件,一达成双方之间的互动,完成希望借助硬件完成的工作。用户接口定义广泛,包含了人机界面与图形用户接口,凡是参与人类与机械信息交流的领域凑存在用户接口。
编写UI的俩种方式:
1.与主程序混合在一起
2.写在XML中(建议使用这种方式)
用于显示数据,图片或者其他信息的组建叫做VIEW。
涉及到布局(Layout)和常用控件(View)
1、线性布局和相对布局
2、比较常用的控件View(宽高、颜色、边距、 是否可见、内容居中、在父控件中的位置、点击事件)
3、TextView(显示文本)、EditText(编辑框 属性inputType 常用事件及特有事件addTextChangedListener)、Button(点击按钮) ImageView(src、background、scaleType)
2图形界面的五大布局
五大布局 Layout:
LinearLayout 线性布局
RelativeLayout 相对布局
AbsoluteLayout 绝对布局
GridView 表格布局
FrameLayout 帧布局
<LinearLayout>线性布局的俩个方向:
垂直(vertical)
水平(horizontal)
决定垂直还是水平的属性为Orientation
RelativeLayout 相对布局
android:layout_toRightOf 在指定控件的右边
android:layout_toLeftOf 在指定控件的左边
android:layout_above 在指定控件的上边
android:layout_below 在指定控件的下边
android:layout_alignBaseline 跟指定控件水平对齐
android:layout_alignLeft 跟指定控件左对齐
android:layout_alignRight 跟指定控件右对齐
android:layout_alignTop 跟指定控件顶部对齐
android:layout_alignBottom 跟指定控件底部对齐
android:layout_alignParentLeft 是否跟父布局左对齐
android:layout_alignParentTop 是否跟父布局顶部对齐
android:layout_alignParentRight 是否跟父布局右对齐
android:layout_alignParentBottom 是否跟父布局底部对齐
android:layout_centerVertical 在父布局中垂直居中
android:layout_centerHorizontal 在父布局中水平居中
android:layout_centerInParent 在父布局中居中
编写这个程序的代码:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity"
android:orientation="vertical"
android:background="#FFFFFF"
android:gravity="top|left"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:layout_width="65dp"
android:layout_height="wrap_content"
android:text="用户名"
android:textSize="16sp"
/>
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:hint="请输入 登录 用户名 "
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:layout_width="65dp"
android:layout_height="wrap_content"
android:text="密码"
android:textSize="16sp"
/>
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:hint="请输入 密码 "
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:layout_width="65dp"
android:layout_height="wrap_content"
android:text="年龄"
android:textSize="16sp"
/>
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:hint="请输入 年龄 "
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:layout_width="65dp"
android:layout_height="wrap_content"
android:text="生日"
android:textSize="16sp"
/>
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:hint="请输入 您的生日 "
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:layout_width="65dp"
android:layout_height="wrap_content"
android:text="电话"
android:textSize="16sp"
/>
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:hint="请输入 您的电话"
/>
</LinearLayout>
<Button
android:layout_width="265dp"
android:layout_height="wrap_content"
android:hint="注册"
android:layout_gravity="center_vertical"
/>
</LinearLayout>
编写这个程序的代码:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="@+id/img1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"
android:layout_centerInParent="true"
/>
<ImageView
android:id="@+id/img2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"
android:layout_above="@id/img1"
android:layout_centerInParent="true"
/>
<ImageView
android:id="@+id/img3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"
android:layout_alignTop="@id/img1"
android:layout_toLeftOf="@id/img1"
/>
<ImageView
android:id="@+id/img4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"
android:layout_alignTop="@id/img1"
android:layout_toRightOf="@id/img1"
/>
<ImageView
android:id="@+id/img5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"
android:layout_below="@id/img1"
android:layout_centerInParent="true"
/>
</RelativeLayout>
北京城市学院
14通本2班苏峰