UI小总结

来源:互联网 发布:mac 双系统两个windows 编辑:程序博客网 时间:2024/06/05 17:21

UI界面是人与手机之间数据传递、交互信息的重要媒介和对话接口,界面是通过布局文件设定的。
match_parent:视图扩展至父元素大小
wrap_parent:视图显示包含的全部内容

Android的布局包括6种,相对布局(RelativeLayout),线性布局(LinearLayout),表格布局(TableLayout),网格布局(GridLayout),帧布局(FrameLayout),绝对布局(AbsoluteLayout)。

一、在相对布局(RelativeLayout)中,以控件之间相对位置或相对父容器位置进行排列;margin是用来指定组件间的距离的,与此类似,padding是用来指定控件的
内边距的,即指定视图外边框与内容之间的距离。

二、线性布局(LinearLayout)是程序中最常见的一种布局方式,线性布局可以分为水平线性布局和垂直线性布局两种,通过Android:orientation属性可以设置线性布
局的方向。

android:orientation:vertical (垂直方向) 、horizontal(水平方向)

android:gravity————设置的是控件自身上面的内容位置

android:layout_gravity—–设置控件本身相对于父控件的显示位置

android:layout_weight—– 给控件分配剩余空间

三、表格布局(TableLayout)

android:stretchColumns:设置指定的列为可伸展的列,以填满剩下的多余空白空间

四、网格布局(GridLayout):

①设置有多少行: android:rowCount=”4” //设置网格布局有4行

②设置有多少列: android:columnCount=”4” //设置网格布局有4列

*设置某个组件位于几行几列

注:都是从0开始算的

①组件在第几行: android:layout_row = “1” //设置组件位于第二行

②组件在第几列: android:layout_column = “2” //设置该组件位于第三列

*设置某个组件横跨几行几列:

①横跨几行: android:layout_rowSpan = “2” //纵向横跨2行

②横跨几列: android:layout_columnSpan = “3” //横向横跨2列

android:layout_gravity = “fill” 设置表明组件填满所横越的整行或者整列

*用法总结:
step 1:先定义组件的对其方式 android:orientation 水平或者竖直

step 2:设置组件所在的行或者列,记得是从0开始算的

step 3:设置组件横跨几行或者几列;设置完毕后,需要在设置一个填充:android:layout_gravity = “fill”

下面是一个登录界面的实现:

这里写代码片activity_login:<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    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"    android:background="@drawable/loginbg"    tools:context="cn.edu.bzu.case_login.MainActivity">    <include layout="@layout/login_top"></include>    <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        app:srcCompat="@drawable/deer"        android:layout_alignParentBottom="true"        android:id="@+id/imageView"        android:layout_alignParentRight="true"        android:layout_alignParentEnd="true" />        </RelativeLayout>
这里写代码片login_top:<?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"    android:padding="@dimen/activity_horizontal_margin"    android:background="@drawable/login_topboundback"><EditText    android:id="@+id/etName"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:ems="10"    android:drawablePadding="10dp"    android:drawableLeft="@drawable/icon_user"    android:hint="@string/etName"    android:background="@android:drawable/edit_text"    >    <requestFocus/>    </EditText>    <EditText        android:id="@+id/etPassword"        android:layout_below="@id/etName"        android:layout_width="match_parent"        android:inputType="textPassword"        android:layout_height="wrap_content"        android:ems="10"        android:drawablePadding="10dp"        android:drawableLeft="@drawable/icon_pass"        android:hint="@string/etPass"        android:background="@android:drawable/edit_text"        >        <requestFocus/>    </EditText>    <LinearLayout        android:layout_below="@id/etPassword"        android:layout_width="match_parent"        android:layout_height="wrap_content">        <Button            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@drawable/btn_select"            android:text="@string/btnLogin"/>        <Button            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:layout_marginLeft="10dp"            android:background="@drawable/btn_select"            android:text="@string/btnRegister"/>    </LinearLayout></RelativeLayout>
这里写代码片btn_select:<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/btn_shape" android:state_pressed="true"></item><item android:drawable="@drawable/btn_shape_after" android:state_pressed="true"></item></selector>btn_shape:<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <solid android:color="#aeeeee"></solid>    <corners android:radius="10dp"></corners></selector>btn_shape_after:<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">   <solid android:color="#aeeeee"></solid>    <corners android:radius="10dp"></corners></selector>loginbg:<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">   <gradient       android:startColor="#aeeeee"       android:endColor="#87ffdf"       android:angle="45"       /></selector>login_topboundback:<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">    <corners android:radius="10dp"></corners>    <solid android:color="#add8e6"></solid></shape>
这里写代码片strings:<resources>    <string name="app_name">case_login</string>    <string name="etName">请输入账号</string>    <string name="etPass">请输入密码</string>    <string name="btnLogin">登录</string>    <string name="btnRegister">注册</string></resources>

这里写图片描述

这里写图片描述