赞
踩
用户可以看到的就是手机屏幕,App与用户进行交互实际上依赖的就是Activity。当用户点击屏幕时,Android系统会检测到屏幕上所发生的事情,并将这个事情封装成为事件对象,然后将事件分发给对应的Activity进行处理。
Activity是一个包含用户界面的应用组件,用户可以与activity提供的屏幕界面进行交互。一个应用中可以包含零个或者多个acitivity,每个Activity都会获得一个用于绘制其用户界面的窗口。窗口通常是充满整个屏幕,但也可以小于屏幕并浮动在其它窗口之上。
Android应用设计讲究的是逻辑和视图分离,最好每个活动Activity都能对应一个布局文件,布局就是用来显示界面中内容
生成的结果:
1、布局文件都是通过xml实现的,在java类中通过setContentView方法给Activity活动添加布局
2、文件分类清晰
3、代码和UI分开,在国际化和代码维护方面非常重要。在开发过程中使用这种MVC的框架思想,尽量减少使用硬编码
4、所有的活动Activity都要在AndroidManifest.xml中进行注册才能生效
MainActivity.java在src/main/java文件夹下,控制界面逻辑
activity_main.xml在res/layout文件夹下,对应的UI界面
AndroidManifest.xml在src/main文件夹下,应用清单文件
SDK定义了多种布局管理方式用于用户的UI设计。所有的布局管理器都是ViewGroup类的子类,Android提供了6种布局管理器:FrameLayout单帧布局、LinearLayout线性布局、AbsoluteLayout绝对布局、RelativeLayout相对布局、GridLayout网格布局和TableLayout表格布局
FrameLayout单帧布局是最简单的布局管理器,将屏幕当做一个矩形区域,所有的子组件都在这个区域中进行叠放,后加入的组件将覆盖前面加入的组件。一般用于整个页面只有一个子控件的场景下或者用于实现翻页效果
<FrameLayout 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:layout_width="fill_parent" 占满整个屏幕 android:layout_height="fill_parent" tools:context=".MainActivity"> <TextView android:id="@+id/tv01" android:textColor="#00ff00" 定义文字的颜色,这里采用的16进制的写法,每两位作为一个只,对应RGB红绿蓝 android:textSize="100dp" 定义文字的大小 android:text="@string/first" 定义具体的文字内容,这里采用res\strings.xml中的定义方法 android:layout_width="wrap_content" 指定组件的宽度为刚好包裹其中的内容 android:layout_height="wrap_content"/> <TextView android:textColor="#00ffff" android:textSize="70dp" android:text="@string/second" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </FrameLayout>
霓虹灯效果
<?xml version="1.0" encoding="utf-8"?> <FrameLayout 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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:id="@+id/textView1" 组件id用于操作当前组件 android:layout_width="220dp" 组件宽度 android:layout_height="160dp" 组件高度 android:background="#DD6060" 背景色/> <TextView android:id="@+id/textView2" android:layout_width="200dp" android:layout_height="140dp" android:background="#8BC34A" android:layout_marginLeft="10dp" android:layout_marginTop="10dp"/>margin用于设置当前组件和其兄弟组件之间的间距 </FrameLayout>
如果需要实现定时变色,可以引入线程定时执行修改背景色更新ui显示
可以使放入其中的组件以水平或者垂直方式整齐的进行排列,通过orientation属性可以指定具体的排列方向,可以通过weight设置每个组件在布局中所占的比重。线性布局不会进行换行,如果排到头后则剩余的组件不显示
<LinearLayout 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:layout_width="match_parent" android:orientation="horizontal" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="1" 设置当前组件在布局管理器中所占的比重值 android:background="#00ff00" android:textSize="30sp" 设置所显示的文本信息字符的大小 android:gravity="bottom" 对齐方式 android:text="小王" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="2" android:textSize="40sp" android:background="#ff0000" android:text="liu" /> </LinearLayout>
登录或者注册界面
<LinearLayout 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:layout_width="match_parent" android:orientation="vertical" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView 提示输入内容的文本显示组件 android:text="用户名称:" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <EditText 接收用户输入的组件,可以根据不同的输入内容设置达到控制弹出的软键盘上的内容,例如电话号码或者email android:layout_width="fill_parent" android:layout_height="wrap_content"/> <TextView android:text="用户口令:" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <EditText android:layout_width="fill_parent" android:layout_height="wrap_content"/> <LinearLayout android:orientation="horizontal" android:gravity="right" 设置线性布局中的子组件为右对齐模式 android:layout_width="match_parent" android:layout_height="wrap_content"> <Button android:text="登录" android:layout_marginRight="5dp" 设置右边的组件间的间隔 android:layout_width="wrap_content" android:layout_height="wrap_content"/> <Button android:text="取消" android:layout_marginRight="5dp" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <Button android:text="注册新用户" android:layout_marginRight="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout> </LinearLayout>
Android早期推荐使用的布局管理器就是RelativeLayout,专门用于设计复杂的排版。现在一般推荐使用ConstraintLayout,但是实际应用中RelativeLayout还是有很多应用
RelativeLayout是一种让组件以相对于容器或者相对于同容器中的另外一个组件的相对位置进行放置的布局方式。
提供了一组设置相对位置的属性,例如layout_above、layout_below、layout_toLeftOf…
<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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:id="@+id/label1" 因为下面的输入框要相对这个组件,所以组件必须命名 android:text="Hello" android:layout_width="match_parent" android:layout_height="wrap_content"/> <EditText android:id="@+id/et01" android:layout_alignParentLeft="true" 相对于父组件左对齐 android:layout_below="@+id/label1" 在label1组件的下方 android:layout_width="match_parent" android:layout_height="wrap_content"/> <Button android:id="@+id/btn1" android:layout_below="@+id/et01" 在et01组件的下方 android:text="btn1" android:layout_alignParentRight="true" 相对于父组件右对齐 android:layout_width="wrap_content" android:layout_height="wrap_content"/> <Button android:layout_alignBottom="@+id/btn1" 相对于btn1组件底部对齐 android:layout_alignParentLeft="true" 相对于父组件左对齐 android:layout_width="wrap_content" android:text="btn2" android:layout_height="wrap_content"/> </RelativeLayout>
梅花布局
<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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <ImageView 正中央的组件,是相对于父组件定义位置,这是其它组件的基准。注意在使用相对布局时一定要选择一个基准组件,其它组件的位置是由基准组件进行定位 android:id="@+id/img1" android:layout_centerInParent="true" 相对于父组件水平和垂直居中 android:src="@drawable/a01" android:layout_width="80dp" android:layout_height="80dp"/> <ImageView android:src="@mipmap/ic_launcher" android:layout_centerVertical="true" 相对于父组件垂直居中 android:layout_toLeftOf="@+id/img1" 相对于img1组件位于img1的左边 android:layout_width="80dp" android:layout_height="80dp"/> <ImageView android:src="@mipmap/ic_launcher" android:layout_centerVertical="true" android:layout_toRightOf="@+id/img1" 相对于img1组件位于img1的右边 android:layout_width="80dp" android:layout_height="80dp"/> <ImageView android:src="@mipmap/ic_launcher" android:layout_above="@+id/img1" 相对于img1组件位于img1的上边 android:layout_centerHorizontal="true" 相对于父组件水平居中 android:layout_width="80dp" android:layout_height="80dp"/> <ImageView android:src="@mipmap/ic_launcher" android:layout_below="@+id/img1" 相对于img1组件位于img1的下边 android:layout_centerHorizontal="true" android:layout_width="80dp" android:layout_height="80dp"/> </RelativeLayout>
GridLayout将显示区域划分为n行n列,每列的宽度一致,可以得到一种类似于表格的排版方式。一个view组件加入网格布局需要指定layout_row和layout_column指定该组件位于网格布局中的第几行第几列
出错:layout_gravity和gravity的区别
android:gravity是针对控件里的元素来说的,用来控制元素在该控件里的显示位置。例如,在一个Button按钮控件中设置两个属性android:gravity="left"和android:text=“提交”,这时Button上的文字“提交”将会位于Button的左部。
android:layout_gravity是针对控件本身而言,用来控制该控件在包含该控件的父控件中的位置。同样,当在Button按钮控件中设置android:layout_gravity="left"属性时,表示该Button按钮将位于界面的左部。
计算器界面
<GridLayout 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:columnCount="4" 指定网格布局的总列数 android:rowCount="6" 执行网格布局的总行数 android:layout_marginLeft="5dp" android:layout_marginTop="5dp" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_columnSpan="4" 定义组件所占用的列数 android:background="#eeeeee" android:layout_gravity="fill" 设置组件的对齐方式,填充所占用的所有空间 android:text="0" android:textSize="30sp" /> <Button android:layout_width="174dp" android:layout_height="wrap_content" android:layout_row="0" android:layout_columnSpan="2" android:layout_gravity="fill" android:text="回退" /> <Button android:layout_width="169dp" android:layout_row="1" android:layout_columnSpan="2" android:layout_gravity="fill" android:text="清空" /> <Button android:text="+"/> <Button android:text="1"/> <Button android:text="2"/> <Button android:text="3"/> <Button android:text="4"/> <Button android:text="5"/> <Button android:text="6"/> <Button android:text="7"/> <Button android:text="8"/> <Button android:text="9"/> <Button android:text="0" android:layout_columnSpan="2" android:layout_gravity="fill"/> <Button android:text="." android:layout_width="wrap_content" /> <Button android:text="-"/> </GridLayout>
以行列的方式管理内部的UI组件,但是各行之间是独立的,每一行的列数可以不同。每一行对应的是一个单独的Layout,称为TableRow。所以添加一行时需要先添加一个TableRow,然后向此TableRow中添加View
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TableRow> 指定一个行 <TextView android:text="Row1-Column1"/>指定第一个列 <TextView android:text="Row1-Column2"/> <TextView android:text="Row1-Column3"/> </TableRow> <TextView android:text="Row2-Column1" android:gravity="center" android:background="#eeeeee"/>如果没有添加TableRow的View默认占用一行 <TableRow> <Button android:layout_span="3" android:gravity="center_horizontal" android:text="button1" android:textColor="#f00"/> <TextView android:layout_height="wrap_content" android:background="#aa0055" android:text="单独的一个TextView"/> </TableRow> <TableRow> <TextView android:text="TextView"/> <Button android:text="Button1"/> <Button android:text="Button2" android:layout_span="2"/> </TableRow> </TableLayout>
特殊设置
android:stretchColumns用于设置可伸展的列,设定的列会自动扩展长度以填满所有的可用空间
android:shrinkColumns用于设置可收缩的列,如果当前行的组件总宽度大于父组件的宽度,定义哪些列可以自动收缩宽度
android:collapseColumns用于设置隐藏的列
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:stretchColumns="0,3" 设置可伸缩的列为第0列和第3列 android:gravity="center_vertical" 设置管理器中的所有内容垂直居中 android:background="#ff0" tools:context=".MainActivity"> <TextView android:text="用户登录系统" android:layout_width="match_parent" android:gravity="center"/> 不在TableRow中默认一个组件占用一行 <TableRow> <TextView /> 主要用于使第1和第2居中显示,因为后这两个组件后还有一个TextView,而且TableLayout设置允许0,3两列可以自动伸展 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="用户名称:"/> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:minWidth="150dp"/> 设置输入框的最小宽度为150dp <TextView /> </TableRow> <TableRow> <TextView /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="用户口令:"/> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:minWidth="150dp"/> <TextView /> </TableRow> <TableRow> <TextView /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="登录系统"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="重置数据" android:layout_marginLeft="5dp"/> <TextView /> </TableRow> </TableLayout>
放入布局管理器的组件需要通过layout_x和layout_y两个属性指定这个组件的坐标值,以实现显示在固定的位置。基本不使用,因为应用在不同屏幕尺寸的手机上运行时会有不同的显示效果
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> 这个布局管理器一般不建议使用 <Button android:layout_x="30px" 组件左上角的x坐标值,整个显示区域的左边原点为父组件的左上角 android:layout_y="50px" 组件左上角的y坐标值 android:text="Button1" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <Button android:layout_x="140px" android:layout_y="50px" android:text="Button2" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <Button android:layout_x="90px" android:layout_y="140px" android:text="Button3" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </AbsoluteLayout>
像素px,表示屏幕上的物理像素
磅pt,1pt等于1英寸的1/72,常用于印刷业
放大像素sp,主要用于字体,Android默认采用sp最为字符的字号单位
密度独立像素dp或者dip,使用160dp屏幕作为参考,将其映射到实际的物理屏幕毫米mm
基本需求:最上面是一个头像,中间是用户名输入框,其下是密码输入框,最下面是登录按钮
需求分析:
1、内容整体纵向上居中,因为一般屏幕都是竖着看
2、文本输入和按钮控件高度一般是wrap_content,高度由内容决定
3、图像由于不确定图像的大小,所以不采用内容决定,可以设置成固定的大小,使图像按照比例缩放自适应。
4、最麻烦的问题:相对布局则需要一个基准。使用用户名输入框为基准
<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/inputName" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <EditText android:id="@+id/inName" android:layout_width="300dp" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_centerHorizontal="true" android:ems="10" android:hint="请输入用户名称" android:inputType="textPersonName" /> <EditText android:id="@+id/inPassword" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignRight="@+id/inName" android:layout_alignLeft="@+id/inName" android:layout_below="@+id/inName" android:hint="请输入用户口令" android:layout_marginTop="25dp" android:ems="10" android:inputType="textPassword" /> <Button android:id="@+id/subBtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/inName" android:layout_below="@+id/inPassword" android:layout_marginTop="25dp" android:layout_marginLeft="20dp" android:text="登录系统" /> <Button android:id="@+id/resetBtn" android:text="重置数据" android:layout_alignRight="@+id/inName" android:layout_marginTop="25dp" android:layout_marginRight="20dp" android:layout_below="@+id/inPassword" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <ImageView android:id="@+id/img" android:layout_width="100dp" android:layout_height="100dp" android:layout_marginBottom="25dp" android:layout_above="@+id/inName" android:layout_centerHorizontal="true" app:srcCompat="@drawable/a01" /> </RelativeLayout>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。