Ⅰ android 新控件之ConstraintLayout(约束布局)
ConstraintLayout (约束布局) 继承于ViewGroup 允许开发者以灵活的方式定位和调整小部件的大小
ConstraintLayout 可让开发者使用扁平视图层次结构(无嵌套视图组)创建复杂的大型布局。它与 RelativeLayout 相似,其中所有的视图均根据同级视图与父布局之间的关系进行布局,但其灵活性要高于 RelativeLayout ,并且更易于与 Android Studio 的布局编辑器配合使用。我理解为ConstraintLayout是一个更加灵活且减少嵌套的 RelativeLayout 的布局
ConstraintLayout作为支持库提供,开发者可以在从 API 级别 9 (Gingerbread) 开始的 Android 系统上使用。
相信在面对一些复杂的UI页面,咱们都是使用 RelativeLayout , LinearLayout 层层嵌套实现的.虽然能实现效果.但是层层嵌套层层解析加载View 无疑会耗费加载时间,耗费手机性能.这是时候ConstraintLayout(约束布局),就应运而生了,它出现的目的就是减少嵌套,优化层层嵌套状况带来的弊端
要在 ConstraintLayout 中定义某个视图的位置, 您必须为该视图添加至少一个水平约束条件和一个垂直约束条件 。每个约束条件均表示与其他视图、父布局或隐形引导线之间连接或对齐方式。每个约束条件均定义了视图在竖轴或者横轴上的位置;因此每个视图在每个轴上都必须至少有一个约束条件,但通常情况下会需要更多约束条件。
当您将视图拖放到布局编辑器中时,即使没有任何约束条件,它也会停留在您放置的位置。不过,这只是为了便于修改;当您在设备上运行布局时,如果视图没有任何约束条件,则会在位置 [0,0](左上角)处进行绘制。
在图 1 中,布局在编辑器中看起来很完美,但视图 C 上却没有垂直约束条件。在设备上绘制此布局时,虽然视图 C 与视图 A 的左右边缘水平对齐,但由于没有垂直约束条件,它会显示在屏幕顶部
请注意,约束中不能有循环依赖。
相对定位是在 ConstraintLayout 中创建布局的基本构建块之一。这些约束允许您相对于另一个小部件定位给定的小部件。您可以在水平和垂直轴上约束一个小部件:
如下图,这告诉系统我们希望按钮 B 的左侧被约束到按钮 A 的右侧。这样的位置约束意味着系统将尝试让两侧共享相同的位置。
这是可用约束的列表:
app:layout_constraintLeft(自身)_toLeftOf(相对于的控件)="相对的控件ID"
1.2 layout_constraintBaseline_toBaselineOf 基线对齐
如果设置了侧边距,它们将应用于相应的约束(如果存在)(图 ),将边距强制为目标端和源端之间的空间。通常的布局边距属性可用于此效果
2.1属性:
请注意,边距只能为正数或等于零,并且取Dimension.
2.2. 约束目标View.GONE的时候 的边距
3.1 居中定位,就是把定位控件的左边对应目标的左边 右边对应目标的右边,上边对应目标的上边
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
如上图,Button的左边位于父布局的左边,右边位于父布局的右边就做到了水平居中的效果
3.2 偏移 : 有时候居中展示还需要做出偏移效果
可以以一定角度和距离约束一个小部件中心相对于另一个小部件中心。这允许您将一个小部件定位在一个圆圈上
ConstraintLayout对标记为 的小部件进行了特定处理View.GONE。
GONE像往常一样,小部件不会被显示并且不是布局本身的一部分(即,如果标记为 ,它们的实际尺寸不会改变GONE)。
但就布局计算而言,GONE小部件仍然是其中的一部分,但有一个重要区别:
注意:
使用的边距将是 B 在连接到 A 时定义的边距(参见图 7 示例)。在某些情况下,这可能不是您想要的边距(例如,A 到其容器的一侧有 100dp 的边距,B 到 A 的边距只有 16dp,将 A 标记为已消失,B 到容器的边距为 16dp)。出于这个原因,您可以指定在连接到被标记为已消失的小部件时使用的备用边距值(请参阅 上面有关已消失的边距属性的部分 )
1.1 您可以为自身定义最小和最大尺寸ConstraintLayout
1.2 控件尺寸约束
android:layout_width可以通过 3 种不同方式设置和 android:layout_height属性 来指定控件的尺寸:
重要提示:
MATCH_PARENT不建议用于ConstraintLayout. 可以通过MATCH_CONSTRAINT将相应的左/右或上/下约束设置为来定义类似的行为"parent"。
WRAP_CONTENT (添加在 1 . 1中):强制约束
如果维度设置为WRAP_CONTENT,则在 1.1 之前的版本中,它们将被视为文字维度——也就是说,约束不会限制结果维度。虽然通常这已经足够(并且更快),但在某些情况下,您可能希望使用WRAP_CONTENT,但继续强制执行约束以限制结果维度。在这种情况下,您可以添加相应的属性之一:
MATCH_CONSTRAINT维度(添加在 1 . 1中)
当维度设置为MATCH_CONSTRAINT时,默认行为是让结果大小占用所有可用空间。有几个额外的修饰符可用:
layout_constraintWidth_min和layout_constraintHeight_min: 将设置此维度的最小尺寸
layout_constraintWidth_max和layout_constraintHeight_max: 将设置此维度的最大尺寸
layout_constraintWidth_percent和layout_constraintHeight_percent: 将此维度的大小设置为父维度的百分比
比率: 宽高比
您还可以将小部件的一个维度定义为另一个维度的比率。为此,您需要将至少一个约束维度设置为0dp(即MATCH_CONSTRAINT),并将属性设置layout_constraintDimensionRatio为给定的比率。例如:
除此之外,在设置宽高比的值的时候,还可以在前面加W或H,分别指定宽度或高度限制。 例如:
app:layout_constraintDimensionRatio="H,2:3"指的是 高:宽=2:3
app:layout_constraintDimensionRatio="W,2:3"指的是 宽:高=2:3
...
Guildline的主要属性:
Constraint 约束布局为了解决嵌套布局的弊端,更快的加载页面而出现,但是约束布局需要整体架构页面要有明确的构建页面的思维,故而学习以及思维模式要有的.所以个人感觉是简单页面还是用相对布局,线性布局就够了,对于复杂布局约束布局是你优化页面加载的不二之选.
*写作不容易,且赞且珍惜!!!*
Ⅱ android app在个别三星手机上有时出现布局错乱
如果手机下载安装的第三方应用出现问题,无法正常使用(无法开启、卡屏、闪退等),三星手机一般建议进行以下步骤排查及处理:
1.关闭重新启动该应用。
2.建议将此软件卸载重新安装尝试。
3.更换其他版本尝试。
4.更新下手机系统版本后安装尝试
5.备份手机数据(电话簿、短信息、多媒体文件等),恢复出厂设置后重新安装尝试
6.若恢复出厂后依旧无法使用,同时其他第三方软件可以正常使用,只有此软件不能正常运行,是与手机系统存在兼容性问题。建议将手机送至就近的服务中心进行检测及进一步处理。
Ⅲ android 怎么分析app界面布局(device monitor不起作用)
android 的device monitor不起作用,抓取不到真机android 9.0 的uix,可以采用adb命令的办法,分两步,一步获取uix,一步获取截图。
命令如下:
Ⅳ 如何解决AndroidApp开发布局显示问题
Android app开发布局显示的方式如下:
View的布局显示方式有下面几种:线性布局(Linear Layout)、相对布局(Relative Layout)、表格布局(Table Layout)、网格视图(Grid View)、标签布局(Tab Layout)、列表视图(List View)、绝对布局(AbsoluteLayout)。
View的布局显示方式直接影响用户界面,View的布局方式是指一组View元素如何布局,准确的说是一个ViewGroup中包含的一些View怎么样布局。ViewGroup类是布局(layout)和视图容器(View container)的基类,此类也定义了ViewGroup.LayoutParams类,它作为布局参数的基类,此类告诉父视图其中的子视图想如何显示。例如,XML布局文件中名为layout_something的属性(参加上篇的4.2节)。我们要介绍的View的布局方式的类,都是直接或间接继承自ViewGroup类,如下图所示:
Ⅳ 在安卓,IOS的app中,其页面布局是怎样实现的
从使用场景上,Web App用户面临比原生APP用户更严峻的问题: 1、 页面跳转更加费力,不稳定感更强 思考点:如何减少跳转(扁平结构、页面布局技巧),增加数据及展示的流畅流程及稳定性(技术) 2、 更小的页面空间(由于浏览器的导航本身占用一部分屏幕空间),更大的信息记忆负担 移动设备的屏幕要小得多。这种如同透过门缝进行的阅读增加了认知的负担。人脑的短期记忆是不稳定的,用户在滚动屏幕的过程中需要临时记忆的信息越多,他们的表现就会越差。——《贴心设计:打造高可用性的移动产品》 思考点:排版更清晰、信息更简练 (可在原生APP基础上去掉一些丰富、复杂的视觉表现) 3、 导航不明显,原有底部导航消失,有效的导航遇到挑战 思考点:如何有效的提供导航?有哪些形式? 4、 交互动态效果收到限制,影响一些页面场景、逻辑的理解。 思考点:比如登录注册流程的弹出、完成及异常退出,做好文字提示。 针对以上困境,解决方法总结如下: 首先,从APP到WAP版,在产品上,最明显且核心的: 1、 精简功能,只将核心的任务实现,非核心的枝节可考虑删减。 2、 做好新的Web App导航. 3、 补充从Web App 对 下载原生APP 的引导。 一、常见的几种Web APP导航样式 1.1顶部底部导航的设计: 1.2导航快捷键设计: 美团:顶部栏固定位置 淘宝:悬浮圆圈–可的按钮 优酷:非首屏时页面右侧悬浮 二、有效的导航设计 1、 基本的快捷导航中包括 返回常用页面(如 首页 我的 等)的快捷方式 2、 出现深层架构时 及时补充返回重要层级页面的快捷方式 3、 情境式导航,方便用户快捷跳转到ta想去的页面,如购买结束时提供查看订单详情的按钮。 PS:Web APP更加需要画页面跳转的流程图,摸清各个页面的入口,尤其是页面返回的流程;有些简化的返回按钮,可以特殊注明返回到的页面 在哪里出现引导? 一般首页、核心任务的页面(如 电商Web APP的商品详情页 、视频Web APP的视频观看页) 二、引导下载APP有哪些形式? 页面顶部放置下载条 页面底部悬浮层引导 融合在页面首屏中 下载按钮形式 底部Foot里含客户端下载入口 其次,在设计Web App时,有以下小技巧可以参考: 1、 从页面布局上减少跳转:使用交互技巧隐藏文字(eg 腾讯视频) 利用收起按钮 减少页面跳转。 2、 取消float浮层,增大展示空间(eg:大众点评) 取消float浮层,同时在详情尾部再次加上 “购买”按钮。 浮层的转换处理。 3、 页面中对图片进行缩小(因情况而异)的处理、精简一些标签导航的视觉展示。 视觉微调。 技术上注意点: 1)各手机浏览器的兼容测试 2)底层服务的调取(能调取,但只有当其是核心功能时才保留 eg:新浪、美团等皆去掉了头像上传功能) 3)注意离线数据存储,减少数据请求频率。 4)考虑保存用户的哪些数据:设置、个人数据、阅读锚点、跳出页面等。 5)避免动效与浏览器的交互冲突 6)按顺序 异步加载 eg: 腾讯视频 腾讯视频异步加载。 虽然Web App目前处于比较尴尬的地位,我们是由于原APP客户端中一些页面需要分享出去才开启制作Web App版。 但是不得不承认,基于Web的轻APP 更新迭代起来更方便,随着H5技术的成熟和发展,也许以后就是基于H5的Web App的天下了 0.0
Ⅵ ios和android设计规范区别
Android 整体视觉设计规范
App 界面的整体视觉组成大致可以分为四个部分:
StatusBar(状态栏)、TopBar(头部栏)、Body Content(内容区域)、FootBar(底部栏)。
StatusBar 的样式由系统 UI 决定,除背景配色外,不需要做其他的设计。
TopBar 两个系统平台规范上的显示高度与内容布局有明显的差异,按各自的规范进行设计。
Body Content 除控件外,采用相同的布局与视觉设计。
FootBar 除控件外,采用相同的布局与视觉设计。
二、Android差异化设计案例解读
1. StatusBar/TopBar 差异化设计
2. 常用的三个系统图标/控件差异化
3. 搜索/输入控件差异化
4. 弹窗样式差异化
三、Android系统交互与iOS系统交互的差异化设计
1. 交互方式:
除了上面提到了弹窗样式与交互差异化之外,对于一些系统交互行为,推荐尽量使用 iOS 与 Android 各自平台的系统控件与交互方式,降低开发与用户学习成本。系统交互行为主要包含以:返回上级/关闭当前页面的方式、通知开启或者关闭设置、发送/提交内容(键盘自带或者新增按钮点击)、Item 列表排序/删除、提示窗显隐、时间选择控件、手势操作等等。
2. 交互动效:
交互动效也推荐尽量使用 iOS 与 Android 各自平台的系统提供的动效。比如 iOS 的镜头切近与高斯模糊,Android 的纸墨磁吸等等。
单条 item 的交互差异示例
总体来说,就是以 iOS 版为参照,底部栏与中间内容区域尽量保持相同的设计,通过对状态栏、头部样式、控件(开关、选框、搜索、输入)、系统图标(返回、分享、更多)、弹窗样式、系统交互进行 Android 规范化差异,以保证该 App 的设计在两个不同的系统平台即能符合中国用户的使用习惯,又能适当体现系统的不同风格与特性。
Ⅶ 如何修改安卓APP的界面布局
修改安卓APP界面布局步骤:
File --> New --> android xml file,选择 一个最外层的容器,输入名字便可创建。
可以复制一个已有的布局,在里面做修改。
View7种布局概述
1、线性布局(Linear Layout)
2、相对布局(Relative Layout)
3、表格布局(Table Layout)
4、列表视图(List View)
5、网格视图(Grid View)
6、绝对布局(AbsoluteLayout)
7、标签布局(Tab Layout)
Ⅷ App登录界面----布局篇
我自学了3个月的Android基础,居然一个App都做不出来。在我之前学的同时居然忘记了之前学的内容。所以我现在重新开始复习,这篇文章将是我复习的开始也是基础的稳固,同时也是将来记不得了可以自我回顾的笔记。首先是从App登录开始。
首先第一是布局,登录界面布局那就要用到控件,登录界面所需控件如下:
1.姓名 输入框 密码 输入框:就要有Textview文本控件 X 2, Editview输入文本框控件 X 2
2.立即注册 忘记密码 登录 :就要有Button控件 X 3
既然要布局就要有布局控件:可以用RelativeLayout相对布局,LinearLayout线性布局,TableLayout表格布局,FrameLayout帧布局,AbsoluteLayout绝对布局。我要选用就就是前两个布局:RelativeLayout相对布局或者LinearLayout线性布局。
这就是我最终预想所要达到的效果:
首先打开布局文件:展开app--->res--->layout--->activity_main.xml
切换到设计模式Design:
然后从调色板Palette就是控件库拖拽出所需控件:
2个Textview,2个Editview ,3个Button.一开始布局控件就是相对布局控件,RelativeLayout相对布局控件允许通过指定显示对象相对于父容器或其他兄弟控件的相对位置结合margin,padding来进行布局。
然后我们再切换回文本模式Text:
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>这就组成了一个控件。
再来解释解释RelativeLayout相对布局控件是啥意思:
上图所表现的意思就是RelativeLayout相对布局控件的特点:TextView文本控件基于父容器(RelativeLayout相对布局控件)之下,再看图:
它会自动添加默认属性:android:text="文本控件"//这是文本属性可以输入文字
android:textSize="50dp"//这是文本大小属性是控制text属性的大小
android:layout_width="wrap_content"//这是宽,选择的自适应屏幕
android:layout_height="wrap_content"这是高。
android:layout_marginTop="253dp"// 重点就在这里了:在RelativeLayout相对布局下拖出的控件会有这条属性,意思是TextView相距父容器253dp的距离
android:id="@+id/textView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
好了我们继续:我写的这个布局呢?只用了两个EditView控件和三个Button控件。先说EditView控件。
拖拽出来改好了各种属性但是和我的不一样,哪里不一样?有边框,边框还是圆角。怎么弄的?这是改变了它的样式。首先目录找到drawable文件按下Alt+lns键,点击Drawable resource file
那就会弹出下面这个框框好创建资源文件,File name:这是资源文件的名字,Root element:这是需要创建什么类型的资源文件。
假如没有出现这个对话框而是另外的对话框就请更换模式
将Android 目录模式切换成Project目录模式
找到drawable文件重复上面操作就会出现
名字就自己取吧,类型选择shape文件
这就是我为EditView设置的资源文件,那么怎么加载它呢?
用背景background属性来加载:@drawable/border用@选择文件位置加载就成功了。
文本框就做好了。噢!!!等等还有个属性android:hint="登录"还没介绍,这是提示语:比如请输入用户名,请输入密码,这样的提示语,只起到提示作用。范例:android:hint="请输入用户名"
好吧依次类推,Button按钮也是这样。我们先来看忘记密码,立即注册两控件这两我没这样加载资源文件,我只用了3条属性,
android:background="@null"//这条意思是背景设置路径为空,作用是消除边框。
android:shadowColor="#338AFF"//改变按钮背景颜色,让它看起来和相对布局背景融为一体。
android:textColor="#0066CC"//改变文字颜色
怎么样是不是和QQ登录界面的差不多
那再来看立即登录按钮,这个按钮我用了三个资源文件,为了让按钮按下抬起有一个变色效果,能够反馈用户视觉:您已按下按钮。
首先看按下的资源文件:
这是按下的模样,radius是设置圆角,然后是按下后的颜色。
再来看抬起:
这是抬起时候的样子,圆角按下抬起都要设置一样,不然按下是一个样,抬起又是另一个样子,然后是抬起的颜色。
这是两个资源文件,如何让按钮呈现出按下抬起的不同效果呢?
就需要另一个资源文件来操控:selector资源文件
由他来控制这两个资源文件:
<item/>这是资源文件的标签,包括shape资源文件的:<corners/><solid/>都是标签
标签<item/>里面
android:drawable="@drawable/clickroundedcolor"//是加载按下资源文件,
android:state_pressed="true"//true就是对,就是一个判断作用,判断是否按下,按下就加载按下的资源文件
然后再一个子标签<item/>
<item android:drawable="@drawable/roundedcolor"/>也就是说当上面pressed不为true的时候执行下面这个标签加载抬起状态的效果。
这就做成了按下深蓝抬起浅蓝的颜色效果。那今天就到这里,复习到了什么Editview Button控件的使用然后在原来的基础上学到了EditView 和Button控件的UI设计一些细节效果。
还熟悉了Android studio。之前用Eclipse学习的Android,现在改用AS还特别不习惯,希望复习后我会熟练Android studio。恩,还有看到忘记密码,立即注册两个按钮是不是还会联想到还有两个布局。没错,忘记密码和立即注册这两个布局文件,就不用记录了,相信会了登录主界面布局,其他两个不在话下。
Ⅸ Android 将App的内容延伸到状态栏/导航栏
来自我的CSDN博客: http://blog.csdn.net/dahaohan/article/details/52175190
看过Android的桌面应用都是介样的:
如何让自己的应用也达到这般效果呢?这里就介绍几种常用的方法以及它们之间的区别。
首先展示下此次demo的布局和初始状态:
初始效果图如下:
使用这个方式首先要理解几个概念,窗口层级以及窗口background/窗口透明:
Google在API-19 以及API-21新增对状态栏/导航栏窗口透明和颜色的控制:
对应的在主题内即可控制:
这里首先要明了这里状态栏和导航栏窗口是系统级窗口而Activity对应的时应用窗口,它们属于不同的窗口层级;
然后状态栏/导航栏系统级窗口是在App应用窗口之上,故而Activity应用窗口虽然有整个屏幕的大小,但是可显示内容的区域得除去其上叠加的不透明的窗口区域。详细的窗口计算绘制可参考大神老罗的博文:
Android窗口管理服务WindowManagerService计算Activity窗口大小的过程分析
下面来使用主题控制导航栏/状态栏透明,同时看看上述两种设置透明的方式效果有何不同:
初始桌面和启动Activity效果图:
可以看到虽然导航栏/状态栏透明了,当时应用窗口显示的内容依然只是除去了两个系统窗口之外的区域,并没有衍生到导航栏/状态栏之下。
效果如下:
可以看到已经将应用的内容布局延伸到导航栏/状态栏下方了,来看看关于android:windowTranslucentStatus
android:windowTranslucentNavigation的官方说明看看来理解其与设置color transparent的区别:
根据FLAG的说明,可以看出设置该标志位等同于View申请设置:
PS:从效果图看,虽然布局延伸到状态栏导航栏区域,但是相应的内容“hello world”文字也被状态栏/导航栏遮住了。在布局根视图设置fitsSystemWindows为true可以使得,系统自动为视图添加一个状态栏/导航栏高度的padding:
效果如下:
查看SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION 和 SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN的说明,可以发现其实还有两个非常接近的FLAG:
根据官方的说明提示,SYSTEM_UI_FLAG_FULLSCREEN / SYSTEM_UI_FLAG_HIDE_NAVIGATION主要用于动态切换隐藏/显示系统导航栏/状态栏;例如书籍阅读应用/视频播放应用等。而像游戏类的全屏应用则推荐使用window flag。
上述的透明导航栏/状态栏等API基本是需要API-19或是API-21才能使用的,这里还有一种API-1的方案能够实现布局内容全屏:
实际上只需要设置FLAG_LAYOUT_NO_LIMITS就足够了;这FLAG是看Android原生的Launcher / Keyguard源码,看到有用到如此设置,其窗口设置具体原理我也没有弄清..... 有大神了解可以指点下。
PS:这个套路下,使用fitsSystemWindows="true"是无效的,智能自己控制号布局位置。