AndroidUI

android的界面是通过布局(Layout)文件设定的;文件位于res/layout中,这次重点就是来学习如何编写它

五种常用布局

以下图片均引自 https://developer.android.com/guide/topics/ui/declaring-layout?hl=zh-cn#id

  • LinearLayout(线性布局)
  • RelativeLayout(相对布局)
  • FrameLayout(帧布局)
  • TableLayout(表格布局)
  • AbsoluteLayout(绝对布局)

线性布局(LinearLayout)

控件水平或者垂直排列,子组件以垂直或水平的方式来定位.(默认是垂直)

android:orientation :属性指定布局方向

android:orientation : 定义布局内的方向水平或垂直(horizontal/vertical )

android:layout_weight :子元素对未占用空间【水平或垂直】分配权重值,其值越小,权重越大

android:layout_width :宽(1.fill_parent: 父元素决定,2.wrap_content: 本身的内容决定)

android:layout_height : 高(3.高直接指定一个 px 值);

android:gravity:内容的排列形式(常用 top, bottom, left, right,centerLeft|center_)

表格布局(TableLayout)

类似Html里的Table.使用TableRow来布局,其中TableRow代表一行,TableRow的每一个视图组件代表一个单元格

collapseColumns:设置需要被隐藏的列的列序号,多个列序号之间用逗号隔开;

shrinkColumns:设置允许被收缩的列序号,多个列序号之间用逗号隔开;

stretchColumns:设置允许被拉伸的列序号,多个列序号之间用逗号隔开。

相对布局(RelativeLayout)

依赖其他组件或是顶层父组件确定下一个组件的位置,所以要定位一个组件,就要定义它依赖的组件位置

android:layout_below:在某元素的下方

android:layout_above:在某元素的上方

android:layout_toLeftOf:在某元素的左边

android:layout_toRightOf:在某元素的右边

android:layout_alignXxx:控制与某元素的边界对其方式

帧布局(FrameLayout)

所有添加到这个布局中的视图以层叠的方式显示,并且后遮挡先声明的控件

帧布局的大小由控件最大的确定

android:foreground :前景图

android:foregroundGravity :前景图位置

绝对布局(AbsoluteLayout)

采用坐标轴的方式定位组件,左上角是(0,0)点,往右x轴递增,往下Y轴递增;每个子组件都需要通过两个XML属性来确定坐标:layout_x:指定该子组件的X坐标;layout_y:指定该子组件的Y坐标,由于使用很繁琐,基本上不用

常用组件

TextView文本框

  • android:id 设置一个组件id
  • android:layout_width 组件的宽度
  • android:layout_height 组件的高度
  • android:gravity 文本位置
  • android:text 文本内容
  • android:textColor 字体颜色
  • android:textStyle 字体风格
  • android:textSize 字体大小
  • android:background 背景颜色

EditText输入框

  • android:hint 提示的文本内容
  • android:textColorHint 提示文本的颜色
  • android:selectAllOnFocus 设为true的EditText获得焦点后 选中的是所有文本
  • android:inputType 限制输入
  • android:minLines 设置最小行的行数
  • android:maxLines 设置EditText最大的行数
  • android:textScaleX 设置字与字的水平间隔
  • android:textScaleY 设置字与字的垂直间隔

Button(按钮)与ImageButton(图像按钮)

  • state_enabled:控件是否可用
  • state_checkable:控件可否被勾选,eg:checkbox
  • state_checked:控件是否被勾选

ImageView(图像视图)