无人机APP五大界面设计

android:layout_alignLeft="@id/名字" 当前控件对齐指定控件的左边 android:layout_alignRight="@id/名字" 当前控件对齐指定控件的右边 android:layout_alignTop="@id/名字" 当前控件对齐指定控件的上边 android:layout_alignBottom="@id/名字" 当前控件对齐指定控件的下边 android:layout_alignBaseline="@id/名字" 当前控件与指定控件的基准线对齐 android:layout_alignParentLeft="true" 当前控件对齐上级控件的左边 android:layout_alignParentRight="true" 当前控件对齐上级控件的右边 android:layout_alignParentTop="true" 当前控件对齐上级控件的上边 android:layout_alignParentBottom="true" 当前控件对齐上级控件的下边
设置控件内容位置
android:gravity系列 android:gravity="top" 控件内容靠控件上边 android:gravity=“bottom” 控件内容靠控件下边 android:gravity="left" 控件内容靠控件左边 android:gravity="right" 控件内容靠控件右边 android:gravity="center_vertical" 控件内容靠控件垂直中心 android:gravity="center_horizontal" 控件内容靠控件水平中心 android:gravity="center" 控件内容靠控件中心 还可以联用，比如： android:gravity="top|right" 控件内容靠控件顶部并且靠右边 android:gravity="center_vertical|right" 控件内容垂直居中并且靠右边
链接属性详解
链接到互联网 android:text="任意文字中包含http://网址" android:autoLink="web" 链接到拨打手机 android:text="任意文字中包含手机号码" android:autoLink="phone" 识别邮箱 android:text="任意文字中包含邮箱地址" android:autoLink="email" android:textColorLink="#fff000" 链接文字的颜色（RGB值，默认蓝色）
表格布局
• 表格布局效果 • 设置控件位置 • 设置控件内容位置
表格布局效果
<TableLayout > 中间放控件 </TableLayout>
设置控件位置 一行一列：用一个控件表示 一行多列： <TableRow></TableRow>表示一行，里面添加一个控件 就表示一列。 跨列： android:layout_span="3" 跨几列值就写几 拉伸列： android:stretchColumns=“1” 值写入要拉伸列的序号，一行未填满时可以用。 收缩列：android:shrinkColumns="1" 值写入要拉伸列的序号，控件超出一行时可以用。 隐藏列： android:collapseColumns=“1” 值写入要拉伸列的序号
xmlns:android="http://schemas.android.com/apk/res/android" 开发时的技术环境，这个是必须的，后面是环境地址。 xmlns:tools="http://schemas.android.com/tools" 开发时的技术环境，这个可以省略，后面是环境地址。 tools:context="" 表示当前布局和哪个activity相关联，可以省略。
无人机
• 1.常用UI布局 • 2.控件位置处理 • 3.UI比例分配
五大布局
线性布局 LinearLayout 相对布局 RelativeLayout 层布局 FrameLayout 表格布局 TableLayout 网格布局 GirdLayout
•
线性布局
• • • • 线性布局横向排列效果 线性布局纵向排列效果 设置控件位置 设置控件内容位置
位置属性详解1
android:layout_width="" android:layout_height=“” android:layout_above="@id/名字" android:layout_below="@id/名字" android:layout_toRightOf="@id/名字" android:layout_toLeftOf="@id/名字" 指定控件的宽度 指定控件的高度 当前控件在指定控件的上面 当前控件在指定控件的下面 当前控件在指定控件的右面 当前控件在指定控件的左面
控件内容离控件的左边距 控件内容离控件的右边距 控件内容离控件的上边距 控件内容离控件的下边距 控件内容离控件四边的距离
相对布局
• 相对布局效果 • 设置控件位置 • 设置控件内容位置
相对布局效果
<RelativeLayout > 中间放控件 </RelativeLayout>
设置控件位置 • 命令和其他布局一样，但相对布 局是最灵活的。 设置控件内容位置 • android:padding系列和 android:gravity系列
android:padding系列 android:paddingLeft="20dp" android:paddingRight="20dp" android:paddingTop="20dp" android:paddingBottom="20dp" android:padding="20dp"
输入文字类型详解
android:inputType="none" android:inputType="textPassword" android:inputType="number" android:inputType="numberDecimal" 数 android:inputType="date" android:inputType="time" 可输入任何文字（默认的） 以密码的形式输入文字 只能输入数字 只能输入数字或小 以日期格式输入 以时间格式输入
android:id="@+id/名字" android:background="@drawable/图片名" android:backgound="#fff000" 指定控件的标识 设置背景图片 设置背景颜色
text属性详解
android:text="" 指定控件里的文字内容 android:text="@string/名字" 在strings.xml文件指定文字内容 android:textSize="20sp" 指定文字大小 android:textColor="#fff000" 指定文字颜色（RGB值） android:hint="文字内容" 用于EditText控件里的提示信息 android:textColorHint="#fff000" 设置EditText控件提示文字的颜色 android:textAllCaps="true" 把文字设置为大写字母
基本样式
• • • • • 1.设置控件背景图片 2.设置控件背景颜色 3.控件添加文字 4.设置控件文字颜色 5.设置控件文字大小
设置控件背景图片 步骤： 第1步：把图片复制粘贴到项目的任何一个 drawable目录下 第2步：给控件里添加一个android:background属 性 第3步：给属性的值设置为添加的图片， 如： android:background="@drawable/qifei"
线性布局纵向排列效果
<LinearLayout android:orientation="vertical" > 中间放控件 </LinearLayout>
线性布局横向排列效果
<LinearLayout android:orientation="horizontal" > 中间放控件 </LinearLayout>
图片显示属性详解
android:scaleType="matrix" android:scaleType="fitXY" android:scaleType="fitStart" android:scaleType="fitCenter" android:scaleType="fitEnd" android:scaleType="center" 以矩阵方式显示图片 把图片放满控件，不按比例缩放。 把图片从控件的左上角开始放置，按比例缩放。 把图片从控件的中心开始放置，按比例缩放。 把图片从控件的右下角开始放置，按比例缩放。 把图片从控件的中心开始放置，不缩放。
层布局
• 层布局效果 • 设置控件位置 • 设置控件内容位置
层布局效果
<FrameLayout > 中间放控件 </FrameLayout>
设置控件位置 所有控件都是按放进布局的先后顺序层层叠加。 布局内控件与控件之间的位置命令是无效的。只 有控件与布局之间的位置命令有效，如 android:layout_gravity系列。 设置控件内容位置 android:padding系列和android:gravity系列
位置属性详解2
android:layout_marginRight="16dp" 当前控件与对齐控件右边的距离 android:layout_marginLeft="16dp" 当前控件与对齐控件左边的距离 android:layout_marginTop="16dp" 当前控件与对齐控件上边的距离 android:layout_marginBottom="16dp" 当前控件与对齐控件下边的距离 android:layout_margin="16dp" 当前控件与对齐控件四边的距离 android:paddingLeft="20dp" android:paddingRight="20dp" android:paddingTop="20dp" android:paddingBottom="20dp" android:padding="20dp" android:gravity="top" android:gravity="bottom" android:gravity="left" android:gravity="right" android:gravity="center" android:gravity="center_vertical" android:gravity="center_horizontal" 控件内容离控件的左边距 控件内容离控件的右边距 控件内容离控件的上边距 控件内容离控件的下边距 控件内容离控件四边的距离 控件内容靠控件上边 控件内容靠控件下边 控件内容靠控件左边 控件内容靠控件右边 控件内容靠控件中心 控件内容垂直居中 控件内容水平居中
android:layout_margin系列 设置控件内容位置 android:padding系列和android:gravity系列
布局属性详解
• • • • • • 1 基本属性详解 2 text属性详解 3 位置属性详解 4 链接属性详解 5 输入文字类型详解 6 图片显示属性详解
基本属性详解
设置控件位置
• android:layout_gravity="bottom" • android:layout_margin="4dp" • android:layout_marginLeft="14dp" 当前控件与上级控件对齐方式 当前控件与对齐控件四边的距离 当前控件与对齐控件的边距
• 当实现纵向排列效果时，如果使用了设置控件内容位置，要和 android:layout_gravity="" 联用才能对齐。 • 注意，有些对齐方式与对齐方式之间会发生ቤተ መጻሕፍቲ ባይዱ突，以至于设置无效， 要注意调整。