精华内容
下载资源
问答
  • web常见控件介绍

    万次阅读 2018-05-18 08:40:05
    常见控件: 1.文本输入框(TextBox) 2.按钮控件(Button) 3.下拉选框(DropList) 4.日期/时间控件(Date/TimePicker) 5.(图片、文件)上传控件(Upload) 6.树形控件(TreeView) 7.列表框(ListBox) 8...

     常见的控件:
      1.文本输入框(TextBox)

      2.按钮控件(Button)

      3.下拉选框(DropList

      4.日期/时间控件(Date/TimePicker)

      5.图片、文件)上传控件(Upload)

      6.树形控件(TreeView)

      7.列表框(ListBox)

      8.多格式文本框(RichTextBox)

      9.Tab控件

    10.其他控件

    11.多浏览器兼容性问题

    以下是上述常用控件就样式、属性、功能、测试点等方面的总结

    1.文本框

       纯文本框(不带其他类型控件)主要分为密码框、文本框(TextBox)和多行文本框(TextArea

    1.1密码框

    (1)样式:

         

    (2)属性:

        输入的文本会自动以黑色圆点或星号加密显示。

    (3)功能:

        用于输入密码

    (4)测试点(功能):

          1.字符长度

          2.是否区分字母大小写

          3.全角半角输入(数字、英文)

          4.是否允许空格字符

          5.输入的密码是否密文显示,是否可以“显示密码”

          6.安全性:是否可以复制、粘贴方式输入、复制粘贴后是否看到明文  

          7.安全性:密码传输过程是否加密、数据库保存是否加密

          8.密码验证方式是否为比对模式。

          9.登录后是否会用明文传递参数

          10.利用复制粘贴等操作强制输入不允许的输入数据

          11.同文本框测试点


    1.2文本框

    (1)样式:

        

    (2)属性:

        普通文本框,允许输入文本、数字等类型的字符

    (3)功能:

        用于普通文本的输入和显示,常搭配其他控件使用

    (4)测试点(功能)

          1.输入中文、英文大小写、数字、特殊字符,构建有效等价类和无效等价类

          2.全角半角输入(数字、英文)和显示

          3.输入框是否为必填项(空输入)

          4.是否可以输入空格以及对空格的处理(包括全角半角、中英文、文本首尾、文本间的空格)

          5.字符长度

          6.支不支持快捷键操作(Enter、Ctrl+“C/V/X/A/Z”复制粘贴剪切全选撤销等)

          7.数值型、日期型、时间型文本框的合法性校验

          8.利用复制粘贴等操作强制输入不允许的输入数据

          9.特殊字符(串):单引号、双引号、分号、Null、null、/、\、转义字符、</html>等

          10.JavaScript代码:<b>Hello</b>、alert("hello")

          11.html代码:<font>你好</font>、<script>alert(/xss/)</script>

          12.注入式Bug

         

    1.3多行文本框

    (1)样式:


    (2)属性:

          可以输入复数行的文本。一般附带滚动条(样式1)或可以拖曳文本框大小(样式2),以便浏览多行文本

    (3)功能:

        多行文本的输入。

    (4)测试点(功能)

          1.是否允许Enter换行

          2.保存后是否保持输入时的格式显示

          3.仅输入Enter换行能否保存

          4.是否能够调整文本框大小,拖动调整大小时,能否与页面其他元素自适应

          5.当输入文本较长时,是否出现滚动条或者自动扩展文本框大小

          6.同“文本框”的1~6测试点


    2.按钮控件    

        按钮(Button)主要分为命令按钮(Push/Command Button)、单选钮(Radio Button)、复选框(Check Box)以及它们的组合。


    2.1命令按钮

           应用程序中使用户通过简单的点击按钮来执行操作。当用户点击按钮后,不仅会执行相应操作,还会使该按钮看上去象被按下并释放一样。部分按钮会在鼠标悬浮其上且没有点击时改变按钮显示形态(如弹出说明框、字体变化、高亮)或改变光标显示形态(如变成手型)。

           命令按钮的显示形式可以是文本、图形或图片。大致可以分为纯文本、纯图标、纯图片、文本、文本和图标结合。

           对命令按钮的操作一般只有鼠标单击或键盘敲Enter/Space,有些按钮单击和双击的实现功能不同,而有些功能丰富的按钮在鼠标右键点击之后会弹出右键菜单。

         点击命令按钮产生的响应有弹出新窗口、弹出框体、弹出新页面、切换或弹出菜单(结合菜单栏)、弹出列表框(结合下拉列表)、刷新、放大/缩小/收起/关闭窗口等等。


        以下就命令按钮的显示形式进行讲解。

    2.1.1 纯文本按钮

    (1)样式:



    (2)属性:

    一般纯文本形式的按钮在

           光标悬浮其上时,一般文本的显示形态会变化,具体表现为底部出现下划线、字体颜色变化、字体高亮或出现背景框,还很有可能弹出详细的说明信息框。而且光标的形状会变成手型。当然文本形态也可以不变化。这些表现形式都是为了引导用户点击操作。

           操作按钮后,按钮的形态不定:可能不变化,可能字体颜色改变or文字改变以传达按钮已被点击过的意思,也可能按钮置灰无法二次操作。

    (3)功能:

           大部分纯文本按钮都出现在网页中,用于打开新的页面(在新窗口或当前窗口打开);在菜单中实现菜单切换或者弹出菜单栏,相当于选项卡,如Word的菜单栏就是点击文本进行切换的;其它丰富的功能,如点赞按钮、收起展开按钮、收藏按钮、验证码刷新按钮等等。

    (4)测试点:

          1.按钮的文本是否正确、简洁、明了,样式是否美观、统一

          2.光标悬浮在按钮上时,文本和鼠标光标是否有需求的形态变化

          3.点击按钮是否响应正确的操作,如打开正确页面、实现需求功能

          4.点击完成后,按钮文本的形态是否正确

          5.能否实现tab、Enter等快捷键功能

          6.快速点击两次,是否一次有效;鼠标左键长按后移开是否取消了操作

          7.是否有右键菜单,且菜单内的功能是否实现

          8.是否能够复制文本文字(鼠标长按拖到输入框或光标选中复制粘贴)


    2.1.2 纯图标按钮

    (1)样式:

                

    (2)属性:

           纯图标按钮的形状本身就具有很形象的解释力,光标悬浮在按钮上时经常会弹出更详细的说明信息框,用来具体解释此按钮实现的功能。鼠标悬浮时,也会出现图案高亮、出现背景框、光标变手型等形态变化。

          图标按钮经常会有两种状态:可使用和置灰状态。置灰状态对点击操作不响应。

          某些图标按钮会被分配相应的快捷键。

          图标不同于图片,一般大小比图片要小。

    (3)功能:

         点击按钮后可以打开新页面新窗口,可以弹出菜单栏,也可以实现各种丰富的功能。最经典的图标按钮就是Windows的最小化、最大化、关闭、前进后退、刷新按钮。图标图案还可能是某网站的Logo,点击进入网站首页。

    (4)测试点:

          1.按钮图标是否正确对应功能含义、是否风格大小统一、是否清晰美观

          2.光标悬浮时,图标和鼠标光标是否有需求的形态变化

          3.点击按钮是否响应正确的操作

          4.点击完成后,按钮的形态变化是否正确

          5.如果是置灰的按钮,是否不能点击操作

          6.能否实现tab、Enter等快捷键功能

          7.如果分配了快捷键,快捷键操作是否有效

          8.快速点击两次,是否一次有效;鼠标左键长按后移开是否取消了操作

          9.是否有右键菜单,且菜单内的功能是否实现


    2.1.3纯图片按钮

    (1)样式:



    (2)属性:

           纯图片按钮就是一张图片可以点击产生响应,不同于图标按钮,图片更有预览意义,图片内容不代表功能,同一功能可能因为场景、对象不同而图片内容不同

          对图片按钮的操作一般就是单击,还可能右键弹出功能菜单。

    (3)功能:

           图片按钮主要有三种功能:带有新页面的链接地址,点击能够打开新页面;点击能够打开功能窗口,如头像设置、封面修改窗口;点击放大查看图片。

    (4)测试点:

          1.按钮图片是否正确对应内容、样式是否统一美观,图片分辨率是否良好

              2.光标悬浮时,图片和鼠标光标是否有需求的形态变化

          3.点击按钮是否打开正确的页面、正确的功能窗口或者是否正确放大

          4.快速点击两次,是否一次有效;鼠标左键长按后移开是否取消了操作

             5.是否有右键菜单,且菜单内的功能是否实现

          6.图片是否可以复制


    2.1.4文本方框按钮

    (1)样式:

                 

    (2)属性:

          文本方框按钮是最常见最经典的按钮,文字置于一个不透明的方框中间。一般方框的形状为长方形而不是正方的。

          此类按钮也会有可用和置灰状态,也可能有右键菜单、快捷操作,但一般不能复制文本和图案。如果按钮带有网站链接倒可以复制。

          按钮的方框使其脱离其他控件,在页面中很凸显。

    (3)功能

         此类按钮一般很少用于链接网址,基本用于实现具体的功能或打开新的功能窗口。

    (4)测试点:

          1.按钮中的文本是否正确,样式是否美观统一,是否置于方框正中,方框的样式是否美观

          2.光标悬浮时,按钮和鼠标光标是否有需求的形态变化

          3.点击完成后,按钮的形态变化是否正确

          4.如果是置灰的按钮,是否不能点击操作

          5.能否实现tab、Enter等快捷键功能

          6.如果分配了快捷键,快捷键操作是否有效

          7.是否有右键菜单,且菜单内的功能是否实现

          8.对非法的输入或操作给出足够的提示说明,如,空输入时点击“上传”按钮要给出提示

       9.对可能造成数据无法恢复的操作必须给出确认信息,给用户放弃选择的机会,比如“删除”按钮


    2.1.5 文本与图标结合的按钮

    (1)样式:

                    


           此类按钮类似于纯图标按钮加了文字的简略解说,能更好的解释按钮的功能。

          其属性功能和测试点也基本差不多,详情参考纯图标按钮。


    2.2单选钮

    (1)样式:

                  

    (2)属性:

          我们选中单选钮选项时,圆环中间出现一个小实心圆点表示该项被选中。在一组单选按钮选项中,只能选中其中一项,这和复选框是不同的。一组单选钮可以有初始值也可以没有。

    (3)功能:

          用于用户只能从选项列表中选择一项的情况。

    (4)测试点:

         1.单选选项是否统一按钮居左、文字描述居右

         2.选择单选按钮保存后,是否正确执行功能,或者数据库是否正确存入了选项值

         3.单选钮是否有初始值、默认选项

         4.同一组单选钮是否只能选中一个(互斥)

         5.同一组单选钮是否不能同时为空

         6.刷新页面后,是否仍然选中选项或默认值

         7.操作是只点击按钮选中还是可以点击按钮文字选中


    2.3复选框

          复选框一般是用户多选的选项框。在更复杂的组合复选框中,复选框还能实现“全选”、“全不选”、“反选”功能。

    2.3.1普通的选项复选框

    (1)样式:

                               

                

                                  

    (2)属性:

          同一组复选框中可以同时选中多项,选中后会呈现打钩状。一组复选框一般没有初始值。

          复选框除了有选中和不选中两个状态,还有一个独立的属性:“不确定”(indeterminate)

          不确定状态的checkBox的值仍然只有checked或unchecked,状态仅仅是为了用户视觉界面上看起来更友好例如带复选框的级联菜单时,子级菜单的多个复选框为部分选中的时,父级菜单的复选框应处于不确定状态,来反映子菜单的部分选中情况;或者为了表示选中或不选中都不影响时,可以显示为不确定,但实际内在值是确定的。

    (3)功能:

          用于用户从选项列表中自由选择选项的情况(单选、多选、不选)。

    (4)测试点:

          1.选择复选框选项保存后,是否正确执行功能,或者数据库是否正确存入了选项值

          2.复选框是否有初始值、默认选项

          3.复选框是否可以同时选中多个

          4.复选框是否可以同时为空

          5.刷新页面后,是否清除选项

             6.操作是只点击方框选中还是可以点击复选框文字选中

          7.父级菜单的复选框为不确定状态时,子集菜单是否为部分选中

          8.复选框为不确定状态时,是否符合逻辑

    2.3.2全选反选复选框

    (1)样式:

          

          

    (2)属性:

          全选复选框——点击全选,其下的选项复选框组全选中,再次点击取消全选中

         反选复选框——选项复选框全选中或无选中时相当于全选;当选项复选框部分选中时,点击反选,所有选项复选框反向选择(即选中变为不选中,不选中变为选中)

         复选框可以同时实现全选和反选功能,也可以只实现全选功能。

    (3)功能:

         实现选项全选或反选。

    (4)测试点:

          1.当没有选项选中时,点击全选复选框,是否选项全选中,全选复选框变为选中状态

          2.当选项全选中时,点击全选复选框,是否选项取消全选中,全选复选框变为未选中状态

          3.当选项部分选中时,点击全选复选框,是否选项全选中,全选复选框变为选中状态

          4.当选项部分选中时,点击反选复选框,是否选项反向选择,反选复选框变为相反状态

           

    3.下拉选框

    (1)样式:

                

           

                       

    (2)属性:

          下拉选框(DropList)包括一个右侧带有倒三角图标的文本框和下拉列表框,点击倒三角图标会弹出下拉列表,点击列表中的选项,选项就显示在文本框中。

          文本框可以编辑新增选项也可能选项固定,可以有初始值也可以初始为空。

          选项可以多选也可以单选,且多选下拉列表经常还会配合复选框来实现同时多选的效果。当光标悬浮于选项时,

    还可以即时显示对应的预览效果。

          VB组合框中的Dropdown List/Combo,功能上和DropList十分类似,区别在于组合框明确只可单选选项、用户不能输入和编辑选项。实际情况下可以一同测试。

    (3)功能:

          选择控件。

    (4)测试点:

          1.初始值(即操作下拉框前文本框中显示的值):为空、提示信息、某一选项

          2.列表选项的文本是否正确、左对齐、显示完全以及选项排列顺序

          3.列表选项是否可以为空,是否可以编辑

          4.列表框的长度高度是否合适,长度是否可变,如何将不能完全显示的选项显示出来

          5.列表内容是否可变,可变的最好要用SQL或其他方式验证正确性,不允许出现重复值

          6.列表超过列表框显示区域是否自动提供滚动条

          7.光标定位到下拉列表上时,是否支持键盘快捷操作,如↑,↓,Home ,End ,PageUP ,PageDown等

          8.可编辑下拉列表框是否可以插入新选项值,插入值的有效/无效等价类验证(包括空格、全半角字符、特殊字符等情况)、长度验证以及重复性验证

          9.可编辑下拉列表框是否可以删除选项,是否可以删除所有选项

        10.可编辑下拉列表框新增或删除选项值后,选项是否正确显示

        11.一组联动的下拉框,改变其中一个下拉框的选项值,其余的下拉框是否作出相应的可选选项内容的改变

        12.选择一个选项后,下拉列表是否自动收起

        13.多选下拉框选择多个选项后,文本框中显示是否正确

        14.有预览效果的下拉框,光标悬浮于选项时,显示的预览效果是否正确


    4.日期/时间控件

    (1)样式:

                   

                          

    (2)属性:

                日期/时间控件输入年月日或时分秒的时间信息。

           日期控件包含一个显示文本框和日期选择框插件。一般鼠标点击文本框或者右侧表示时间的图标就能弹出选择框。日期以日历表形式展现,一般月份年份会有个下拉列表供选择,选定好具体日期直接在日历表上单击、双击或“确定”。此外“日历表”还支持左右翻页、“清空”、“今天”、“确定”或“关闭”等功能按钮

           时间控件一般支持手动输入和点击下拉选项设置。可以用up-down控件来调整时间。

           日期和时间控件使得时间信息的输入通过几次单击操作就能完成,更为方便。两种控件可以结合在一起使用。

    (3)功能:

           实现日期或时间的输入

    (4)测试点:

       <1>日期控件:

           1.选择日期后,文本框是否显示正确日期,日期选择框是否收起

           2.日期格式是否正确,年月日是否有限制

           3.用左右按钮、下拉框切换年月是否正确

           4.是否有初始日期,如当前日期

           5.日期文本框是否可以手动输入或修改日期,修改成错误的年月日、错误的格式、错误的字符类型(中文字母特殊字符空格)是否有提示信息或者限制此类错误输入

           6.清空、今天、确定、关闭等按钮是否实现功能

       <2>时间控件:

           1.时间格式是否正确

           2.用up-down按钮、下拉框切换时分秒是否正确

           3.up-down按钮调整分和秒自增或自减时是否自动进位或退位(如满60秒分加1)

           4.是否有初始时间

           5.时间文本框是否可以手动输入或修改时间,修改成错误的时分秒、错误的格式、错误的字符类型(中文字母特殊字符空格)是否有提示信息或者限制此类错误输入


    5.(图片、文件)上传控件

    (1)样式:

             

          

          

    (2)属性:

           实现文件的上传功能一般先点击“浏览”或“添加”按钮,会弹出本地文件“打开”窗口,按路径找到合适的文件并选中、打开(或者直接双击),文件名称(名称可能带路径)就会显示在列表或文本框中,再点击“上传”按钮等待上传即可。上传的过程中,会有进度显示条显示上传的完成情况。

    (3)功能:

           上传本地文件到相关服务器上,然后对文件进行后续操作。

    (4)测试点:

          1.选择合法格式大小的文件是否能够上传成功(每一种格式、文件大小的最大最小值和边界值都要测)

          2.选择不合法的格式或大小的文件上传,是否不成功且有错误提示

          3.选择0 kb的图片上传是否不成功且有错误提示

          4.选择一个合法但是正在使用中的文件(如打开的word文档),是否上传成功

          5.如果允许手动输入文件路径,在文本框中手动输入如下情况是否上传成功:

           (1)手动输入一个存在的合法的文件路径

           (2)输入不存在文件的路径

           (3)输入的路径下文件不合法

           (4)只输入文件名称不带路径

           (5)正确的文件路径包含空格(前中后、全半角空格)

           (6)路径为空

           (7)超长字符的路径是否可以输入

          6.是否支持中文路径或中文名称的文件上传

          7.文件名称最大最小字符个数,名称包含特殊字符、空格、程序语句是否影响上传

          8.上传常见木马,上传过程中有断网、服务器宕机等异常情况

          9.上传时服务器空间接近已满

        10.上传成功的文件是否可以查看、删除、替换和下载,是否可以取消上传

        11.批量上传

        12.上传同名文件是否给出错误提示


    6.树形控件

    (1)样式:

             

          

    (2)属性:

           树形控件用于管理一组分级的文件夹。最左侧的方框或者三角形图标控制着文件夹的收拢和展开。

           文件夹收拢时,方框图标内是一个“+”号、三角形图标正三角指右;点击图标,节点展开,显示出下级的文件夹或文件,方框图标内变成一个“-”号、三角形图标指下。而且树形图标只显示于有下级菜单的节点,没有下级菜单的不显示。

           经常,树形控件还会带有选择功能,每个文件夹或文件都附带一个复选框,上下级的选择状态互相影响。

    (3)功能:

           文件菜单分级管理功能。

           文件菜单选择功能。

    (4)测试点:

          1.树节点的图标展开前后是否风格一致,如果有树结构的连线是否显示正确

          2.默认树结构是展开还是收拢的

          3.所有节点和叶子的图标、名称是否正确

          4.点击某个节点时,是否只展开下一级的节点和显示该级的叶子还是显示下一级全部的

          5.页面刷新后,是保持现状还是恢复到默认树形状态

          6.执行了某一操作或树结构上的数据发生了变化,是保持现状还是恢复到默认树形状态

          7.选中某一节点的复选框,下级节点是否全部自动置为选中

          8.当两级节点全部选中时,取消选中上级节点,下级节点是否全部自动取消选中

          9.当两级节点全部选中时,取消选中某一下级节点,上级节点是否也自动取消选中或者置为不确定状态


    7.列表框

    (1)样式:

               

        

    (2)属性:

           列表框用于提供一组条目(数据项),用户可以用鼠标选择其中一个或者多个条目,但是不能直接编辑列表框的数据。当列表框不能同时显示所有项目时候,他将自动添加滚动条,使用户可以滚动查阅所有选项。

           值得关注的是,列表框中的项目是通过程序插入到其中的,用户无法向清单中输入数据或者编辑数据,当选择其中的项目,并在用户单击一个按钮或者执行某个操作时,由应用程序完成对指定项目的具体操作。

           列表框和组合框的区别在于,组合框带有一个文本框,既能输入数据又能选择数据。

    (3)功能:

           选中列表框中一个或多个选项,配合执行功能按钮或操作(如删除、上传、导出、下载、移动等等)。如果可以选中多个选项,即可实现批量操作。

    (4)测试点:

          1.列表框中的文本是否正确、格式风格美观统一

          2.选择选项后执行操作是否成功

          2.列表选项超过列表显示区域时是否及时出现滚动条(包括垂直和水平方向)

          3.能否用键盘快捷键选择选项(上下键、Enter、Space等)

          4.能否用Shift键+点击连续多选、用Ctrl键+点击选择性多选、Ctrl+All键全选、直接用鼠标点击多选选项

          5.是否响应双击操作


    8.多格式文本框

    (1)样式:

          

                  

    (2)属性:

           RichTextBox(多格式文本框)控件是基于TextBox控件开发的一种功能更为强大、使用更为方便的控件,它可以完成TextBox的一切功能,具有上百个属性与方法:设置字体、颜色和链接;从文件中加载文本、插入图片;进行撤消与重做等编辑操作。

    (3)功能:

           该控件常用于文本显示和编辑的字处理插件,如Windows的写字板或Office Word中。

    (4)测试点:

          1.选中文本依次测试各种操作,是否正确实现,保存文本后是否正确显示

          2.不选中文本,点击操作,是否不实现

          3.点击文本格式类的操作后,再输入文本,是否正确响应(如设置字体为红色后输入文本,是否为红色)

          4.点击插入类的操作(如插入图片、表情、特殊字符、表格、分页符等),是否正确插入和显示

          5.复制粘贴剪切和撤销功能是否正确

          6.是否有查找字符和替换字符功能

          7.是否可以在文本编辑框实现快捷键操作以及右键菜单操作

          8.文本超过文本编辑框显示区域时,是否自动显示滚动条

          9.操作按钮点击后是否有按钮形态的变化,比如表示设置为倾斜状态的形态变化

        10.文字和图片、表情、特殊字符等插入元素的排列位置以及间距是否美观


    9.Tab控件

    (1)样式:

          

          


    (2)属性:

          Tab控件也叫选项卡。每个选项卡代表一个活动的区域,用于将相关的控件集中在一起,放在一个页面中用以显示多种综合信息。浏览器的每个Tab代表一个网页,它方便在同一个窗口中打开多个网站。

           每个Tab选项卡通过鼠标选中或者快捷键实现切换,通过双击或者点击叉图标实现关闭,还可以长按拖动选项卡之间的位置。

    (3)功能:

           Tab控件通常用于显示多个选项卡,其中每个选项卡均可包含图片和其他控件。

    (4)测试点:

          1.选项卡的样式风格是否统一美观

          2.点击是否可以选中选项卡,切换是否流畅,每个选项卡的内容是否显示正确,被选中的选项卡是否高亮显示

          3.快捷键Ctrl+Tab键能否切换选项卡

          4.选项卡是否有关闭图标,点击是否能够关闭,双击能否关闭选项卡

          5.选项卡是否可以拖动改变位置,或者拖动移出窗口成为一个单独的页面

          6.当选项卡标题中的文字较长时,文字如何显示,光标悬浮其上时,是否会弹出完整的标题信息框

          7.选项卡标题中的图案是否显示清晰,分辨率良好

          7.选项卡的长度是否会根据选项卡标题长度或者窗口中打开的选项卡数目自适应


    10.其它

           其它还有各种常见的控件,比如翻页控件、滚动条等。

    10.1 翻页控件

    (1)样式

          

             

    (2)属性:

           翻页控件实际上就是一组实现翻页功能的控件组合。一般可以分为“首页”、“尾页”、“上一页”、“下一页”、数字页(即点击该数字就翻到第几页)按钮,通常还会带有页码的数字文本输入框和“确定”按钮组合实现快速翻页。

           数字页按钮除了点击翻页的功能,按钮的选中状态还能显示出当前所在页的页码。而文本框通常支持“Enter”快捷键,一般不支持全角数字输入。

    (3)功能:

          将一个大的页面分成两个或以上的页面,并在页面之间便捷地相互跳转。

    (4)测试点:

          1.翻页控件的整体风格样式是否美观统一,符合需求

          2.在非首页页面,点击“首页”(或代表首页的图标按钮),是否跳转到第一页,且数字“1”变为选中状态

          3.在非末页页面,点击“尾页”(或代表末页的图标按钮),是否跳转到最后一页,且最后一位数字变为选中状态

          4.随机点击数字页,是否跳转正确,且相应的数字变为选中状态

          5.在非首页点击“上一页”(或代表上一页的图标按钮),是否跳转到上一页

          6.在首页点击“上一页”,是否按钮置灰不能点击或者不跳转或者给出正确的错误提示

          7.在非末页点击“下一页”(或代表下一页的图标按钮),是否跳转到下一页

          8.在末页点击“下一页”,是否按钮置灰不能点击或者不跳转或者给出正确的错误提示

          9.当页码过多时,分别点击靠前、中间、靠后的页码,“...”省略号和数字页按钮的位置是否正确合理

                 示例:

        10.页码输入文本框输入任意页数范围内的有效数字,点击“确定”是否正确跳转页面

        11.页码输入文本框输入0、超过总页数的数字、负数、特殊字符、中英文、全角字符,点击“确定”是否不跳转或者给出正确的错误提示或者不允许输入

        12.页码输入文本框输入空格(全半角、中英文状态),点击“确定”是否不跳转或者跳转到首页或者不允许输入

        13.页码输入文本框输入的数字含有空格(前中后、全半角、中英文状态

        14.页码输入文本框输入有效数字,敲“Enter”是否可以正确跳转

        15.如果没有“首页”和“尾页”按钮,数字“1”和总页数数字是否常显

        16.关于总页数的文字信息是否正确

        17.当页面较长、翻页控件在页面底部时,点击页码,是否跳转到相应页面顶部


    10.2 滚动条

    (1)样式:
             
    (2)属性:
           滚动条由滚动滑块和滚动箭头组成,是一种图形用户界面控件。控制滚动条移动的方式有用鼠标滚轮控制,用键盘控制,用鼠标拖动滑块或点击滚动箭头控制。页面的位置随着滚动滑块的移动而移动。滚动滑块的长度可以随页面长度自动调整。
    (3)功能:
          当页面较长时,实现跨页浏览。
    (4)测试点:
          1.滚动条的滚动滑块和滚动箭头的样式风格是否美观统一,是否与滚动框相匹配
          2.滑动鼠标滚轮、鼠标拖动滑块是否正确滚动页面且快速流畅
          3.光标定位在整个页面,敲键盘上下键和鼠标点击上下滚动箭头,页面滚动的幅度和速度是否合适
          4.长按键盘上下键和上下滚动箭头,页面是否均匀连续滚动。
          5.是否有右键菜单,菜单中选项的功能是否实现
          6.滚动条是固定在页面还是当页面过长时才出现
          7.滚动滑块的长度是否随着页面长度自适应,是否符合页面位置和长度的百分比

    展开全文
  • iOS常见控件的基本使用

    万次阅读 2016-04-29 17:01:44
    UIView 常见属性和方法 UIView属性 UIView方法 UIControl 常用控件 UIImageView 图片显示控件android ImageView UISlider可拖动的进度条 android SeekBar UIButton按钮 UILable 文本 android TextView UIText 文本...

    UI相关类继承关系

    这里写图片描述

    UIView 常见属性和方法

    1. UIView属性

    Controller的viewDidLoad方法:当所有控件加载完毕后调用,相当于Android中View的onFinishInflate方法;
    UIView superview 获得自己的父控件对象;
    NSArray subview 获得自己的子控件对象,用数组NSArray保存;
    NSInteger tag 控件的ID标示,父控件可以通过tag来找到对应的子控件;
    CGRect fram 控件所在矩形框的位置和尺寸(以父控件的左上角为坐标原点);
    CGRect bounds 控件所在矩形框的位置和尺寸(以自己左上角为坐标原点,所以bounds的x\y永远为0);
    CGPoint center 控件中点的位置(以父控件 的左上角为坐标原点);
    CGAffineTransform transform 控件的形变属性(可以设置旋转角度、比例缩放、平移等属性);
    UIColor backgroundColor 背景颜色
    BOOL hidden 设置是否隐藏
    CGFloat alpha 透明度(0~1)
    CGFloat opaque 不透明度(0~1)
    BOOL userInteractionEnabled 默认YES,是否可以和用户交互(相当于android enable)
    UIViewContentMode contentMode 内容显示的模式(android:gravity =“center_vertical”)
    另外UIView中有很多扩展协议,用来处理控件的属性
    修改UIView的尺寸(宽高):frame、bounds
    修改UIView的位置:frame(左上角的位置)、center(中点的位置)

    ## 2. UIView方法 `addSubview` 添加子控件,被添加到最上面(subviews中的最后面) `removeFromSuperview` 将自己从父控件中移除 `viewWithTag` 父控件可以根据这个tag标示找到对应的子控件(遍历所有的子控件)`findViewById` `insertSubview:atIndext` 添加子控件到指定的位置 `beginAnimations: context:` 执行动画 /*...需要执行动画的代码...*/ `commitAnimations` 利用代码块block执行动画 ```Objective-c /* *duration 动画持续时间 *animations 存放需要执行动画的代码 *completion 存放动画执行完毕后需要执行的代码 */ + (void)animateWithDuration:(NSTimeInterval) duration animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion ```

    3. UIControl

    只要继承了UIControl就能简单处理一些事件(点击事件、值改变事件);
    继承了UIControl的子类有:UIButton、UISlider、UISwitch、UIDatePicker等等;
    当需要监听一个子控件的事件的时候,先要看它是否继承自UIControl,再看它内部是否有delegate属性(代理);
    常用属性:
    enable 是否处理事
    contentVerticalAlignment 内容在垂直方向上的排布方式
    contentHorizontalAlignment 内容在水平方向上的排布方式
    常用方法
    addTarget 添加事件监听器(参数:监听器对象、事件触发回调方法、事件类型)
    removeTarget 删除事件监听器
    allTargets 获取所有的监听器对象集合


    常用控件

    1. UIImageView 图片显示控件(android ImageView)

    @property (weak, nonatomic) IBOutlet UIImageView *imageView;
    self.imageView.image = [UIImage imageNamed:@“icon.png"];
    

    设置图片展示模式(android ImageView 的scaleType属性):
    这里写图片描述

    2. UISlider可拖动的进度条 (android SeekBar

    @property (weak, nonatomic) IBOutlet UISlider *slider;
    //设置最大值
    self.slider.maximumValue = self.imageDate.count;
    //设置最小值
    self.slider.minimumValue = 1;
    //设置当前值
    self.slider.value = 1;
    

    3. UIButton按钮

    常用属性
    titleLable 获取内部的UILabel对象
    imageView 获取内部的UIImageView对象
    常见方法
    setTitle:forState: 设置背部UILable显示的文本内容(不能写btn.titleLabel.text = @"123"
    setTileColor:forState 设置内部UILabel文字颜色
    setTileShaowColor:forState 设置内部UILabel文字的阴影颜色
    setImage:forState 设置内部UIImageView的图片(不能写btn.iamgeView.image =[ UIImage imagedName:@"0.png"])
    setTileShaowColor:forState 设置内部UILabel文字的阴影颜色
    setBackgroundImage:forState 设置背景图片
    下面方法可以获取不同状态下的一些属性值:
    titleForState 获取某个状态下显示文字
    titleColorForState 获取某个状态下文字颜色
    titleShadowColorForState 获取某个状态下文字阴影颜色
    imageForState 获取某个状态下图片
    backgroundImageForState 获取某个状态下背景图片
    下面两个方法需要交给子类重写(继承UIButton):
    titleRectForContentRect 返回内部UILabel的frame(位置和尺寸)
    imageRectForContentRect 返回内部UIImageView的frame(位置和尺寸)

    示例代码
    普通按钮custom

    //创建按钮
    UIButton*orangeBtn = [[UIButtonalloc]init];
    orangeBtn.tag=kOrangeTag;
    //设置按钮的frame(位置和尺寸)
    orangeBtn.frame=CGRectMake(100,100,100,100);
    //设置背景色
    orangeBtn.backgroundColor= [UIColororangeColor];
    //设置按钮文字
    [orangeBtnsetTitle:@"普通"forState:UIControlStateNormal];
    [orangeBtnsetTitle:@"按下"forState:UIControlStateHighlighted];
    //设置按钮按下时文字颜色
    [orangeBtnsetTitleColor:[UIColorredColor]forState:UIControlStateHighlighted];
    UIButton*btn = [[UIButtonalloc]init];
    //添加按钮的唯一标示
    btn.tag = 1;
    //根据图片名称去项文件系统中加载图片对象
    UIImage*imageNormal = [UIImageimageNamed:@"sub_black_prev.png"]];
    UIImage*imagePress = [UIImageimageNamed:@"sub_blue_prev.png"]];
    //设置按钮背景图片
    [btnsetBackgroundImage:imageNormalforState:UIControlStateNormal];
    [btnsetBackgroundImage:imagePressforState:UIControlStateHighlighted];
    //设置按钮的frame(位置和尺寸)//btn.frame = CGRectMake(point.x, point.y, imageNormal.size.width, imageNormal.size.height);
       /*
         struct CGRect {
         CGPoint origin;
         CGSize size;
         };
        */
    btn.frame = (CGRect){point, imageNormal.size};
    //绑定监听
    [btn addTarget:self action:@selector(directionBtnClick:) forControlEvents:UIControlEventTouchUpInside];
    //根据按钮的tag获取子控件
    UIButton*orangeBtn = [self.viewviewWithTag:kOrangeTag];
    CGPoint center = orangeBtn.center;
    staticCGFloatDELETE =50;
    center.y += DELETE;
    //重新赋值按钮的中点
    orangeBtn.center= center;
    

    根据系统自带样式类型创建

    //创建一个加号的按钮
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeContactAdd];
    btn.center = CGPointMake(100, 100);
    

    4. UILable 文本 (android TextView)

    常用属性:
    text 显示文本内容
    textColor 文字颜色
    font 字体
    shadowColor 文字的阴影颜色
    shadowOffset 阴影的偏差距离(width水平方向的偏差距离,整数右边;height垂直方向上的偏差距离,正数下边)
    textAlignment 设置文字的排列方式(偏左、偏右、居中)
    numberOfLines 允许文字最多几行(默认1,如果是0,自动换行)

    5. UIText 文本输入框(android EditText)

    6. UISwitch 开关

    #pragma mark 开关值改变监听
    -(IBAction)switchChanged:(UISwitch *)sender {
    	NSLog(@"开关值%d", sender.isOn);
    	self.view.backgroundColor = sender.isOn?[UIColor darkGrayColor]:[UIColor whiteColor];
    }
    

    7. UIDatePicker日期控件

    -(void) viewDidLoad{
        [super viewDidLoad];
       
        UIDatePicker *picker = [[UIDatePicker alloc] init];
        //设置区域
        picker.locale = [[NSLocale alloc] initWithLocaleIdentifier:@"zh_CN"];
        //设置模式(显示日期还是时间)
        picker.datePickerMode = UIDatePickerModeDate;
       
    }
    #pragma mark 拖动时间改变后监听
    -(IBAction)dateChanged:(UIDatePicker *) dataPicker{
        //获取日期值
        NSDate * date = dataPicker.date;
        //格式化日期
        NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
        formatter.dateFormat = @"yyyy/MM/bb";
       
        self.label.text = [formatter stringFromDate:date];
    }
    

    8. UIPickerView 跟android Spinner相似

    设置数据源和代理(监听)为控制器,控制器遵循数据源河代理的协议,重写协议的方法:

    • 简单使用
    #pragma mark 控制器充当UIPickerView的数据源和代理,必须遵循两个协议
    @interface ViewController : UIViewController <UIPickerViewDataSource, UIPickerViewDelegate>
    @property (weak, nonatomic) IBOutlet UIPickerView *pickerView;
    @end
    
    #import "ViewController.h"
    @interface ViewController()
    @property (nonatomic,strong) NSArray *oneCol;
    @property (nonatomic,strong) NSArray *towCol;
    @end
    
    @implementation ViewController
    -(void) viewDidLoad{
        self.oneCol = @[@"00", @"01", @"02", @"03"];
        self.towCol = @[@"000", @"001", @"002", @"003", @"004"];
    }
    #pragma mark - UIPickerView的数据源方法(返回第component列的行数)
    -(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
       
        return component == 0?self.oneCol.count:self.towCol.count;
    }
    #pragma mark - UIPickerView的数据源方法(返回列数)
    -(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
        return 2;
    }
    #pragma mark - UIPickerView的代理方法(返回第component列第row航显示的字符串数据-设置数据)
    -(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
        if(component==0){
            return self.oneCol[row];
        }else{
            return self.towCol[row];
        }
    }
    #pragma mark - UIPickerView的代理方法(选中了某一行调用)
    -(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
        if(component==0){
            NSString *leftRow = self.oneCol[row];
            //获取第二列当前停留的行数
            int towRow = [pickerView selectedRowInComponent:1];
            NSString *rightRow = self.towCol[towRow];
            NSLog(@"第%d列:%@-----第%d列:%@", component, leftRow, 1, rightRow);
        }else{
            NSString *rightRow = self.towCol[row];
            int oneRow = [pickerView selectedRowInComponent:0];
            NSString *leftRow = self.oneCol[oneRow];
            NSLog(@"第%d列:%@-----第%d列:%@", 0, leftRow, 1, rightRow);
        }
    }
    @end
    
    • 显示自定义条目
    #pragma mark 修改每一行的高度
    -(CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component{
        return 70;
    }
    #pragma mark 返回地component列第row行需要显示的控件
    -(UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view{
        UIView *rowView = [[UIView alloc] init];
        CGFloat rowViewH = 40;
        CGFloat rowViewW = 200;
        rowView.bounds = CGRectMake(0, 0, 200, rowViewH);
       
        //国家名称
        UILabel *nameLable = [[UILabel alloc] init];
        CGFloat nameW = 70;
        nameLable.frame = CGRectMake(0, 0, nameW, rowViewH);
        nameLable.textAlignment = NSTextAlignmentCenter;
        nameLable.text = @"asdfsd";
        [rowView addSubview:nameLable];
        //国旗
        UIImageView *imageView = [[UIImageView alloc] init];
        imageView.frame = CGRectMake(nameW, 0, rowViewW-nameW, rowViewH);
        imageView.image = [UIImage imageNamed:@"zhongguo.jpg"];
        [rowView addSubview:imageView];
       
        return rowView;
    }
    

    9. UIScollView (android ScollView)

    UIPageControl 请见:分页显示
    当子控件内容太多或者子控件太大显示不全时,用UIScrollView实现滚动

    • 常用属性
      CGPoint contentOffset UIScrollView当前滚动到哪个位置了(相对于内容左上角的坐标)
      CGSize contentSize UIScrollView的滚动范围(内容的尺寸)
      UIEdgeInsets contentInset 这个属性可以在四周增加滚动范围
      这里写图片描述
      BOOL bounces; 是否有弹簧效果
      BOOL scrollEnabled; 是否能滚动
      BOOL showsHorizontalScrollIndicator 是否显示水平方向的滚动条
      BOOL showsVerticalScrollIndicator 是否显示垂直方向的滚动条
      UIScrollViewIndicatorStyle indicatorStyle 设定滚动条的样式
      BOOL tracking 是否正在被拖拽
      BOOL dragging 当touch后还没有拖动的时候值是YES,否则是NO
      BOOL decelerating 是否正在减速

    • 使用示例:

    UIImage *image = [UIImage imageNamed:@"1.png"];
    //通过图片初始化UIImageview,这样ImageView的宽高就跟图片宽高一样了
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
    [self.scroll addSubview:imageView];
    //self.scroll.frame.size  UIScrollView控件的大小(可视范围)
    //设置内容的宽高(可滚动范围)
    self.scroll.contentSize = image.size;
    //为UIScrollView设置上下左右额外的可拖动范围(空隙)
    self.scroll.contentInset = UIEdgeInsetsMake(10, 20, 30, 40);
    self.scroll.backgroundColor = [UIColor lightGrayColor];
       //self.scroll.contentOffset.x += 10;//不能直接修改对象的结构体属性的成员
    //修改UIScrollView当前拖动的位置(相对于内容左上角的坐标)
    CGPoint offset = self.scroll.contentOffset;
    //向左移动(查看右边的内容)
    offset.x += 50;
    //执行动画
    [UIView animateWithDuration:0.3 animations:^{
        self.scroll.contentOffset = offset;
    }];
    
    • 手势识别缩放
    @property(nullable,nonatomic,weak) id<UIScrollViewDelegate>        delegate;
    
    iOS中的UIScrollView已经封装了手势识别,不需要我们分析手指位置以及滑动方向,只需要设置上面的代理属性即可(代理可以理解为回调接口),这个代理需要遵守UIScrollViewDelegate协议;然后选择性的实现里面的回调方法。
    而android中如果要实现此功能,需要我们分析多点触控以及手指位置和滑动方向来判断缩放还是放大。</br>
    

    步骤:
    ①、设置UIScrollView的代理delegate为控制器,控制器遵守UIScrollViewDelegate协议
    ②、设置最大和最小缩放比例maximumZoomScaleminimumZoomScale
    ③、让代理对象实现方法,返回需要缩放的子控件

    //设置最大缩放比例
    self.scroll.maximumZoomScale = 2;
    //设置最小缩放比例
    self.scroll.minimumZoomScale = 0.5;
     #pragma mark -UIScrollView的代理方法:返回需要进行缩放的空间(必须是UIScrollVIew的子控件)
    (nullable UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
        return self.imageView;
    }
    
    • 代理中其他方法:
    - (void)scrollViewDidScroll:(UIScrollView *)scrollView;    // any offset changes offset属性变化时调用(在被拖动)
    // 将要开始拖拽时调用
    - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;      
    // 拖拽将要结束时调用
    - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset NS_AVAILABLE_IOS(5_0);
    // 拖拽结束时调用
    - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;
    - (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView;   // called on finger up as we are moving
    - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;      // ScrollView减速完毕后调用                                             
    - (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView; // called when setContentOffset/scrollRectVisible:animated: finishes. not called if not animating
    
    - (nullable UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;     // 返回需要进行缩放的子控件
    - (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view NS_AVAILABLE_IOS(3_2); // 将要缩放之前调用
    - (void)scrollViewDidZoom:(UIScrollView *)scrollView NS_AVAILABLE_IOS(3_2); // any zoom scale changes 缩放时调用
    - (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view atScale:(CGFloat)scale; // 缩放完毕后调用
    - (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView;   // return a yes if you want to scroll to the top. if not defined, assumes YES
    - (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView;      // called when scrolling animation finished. may be called immediately if already at top
    
    • 分页显示(android ViewPager)
      这里写图片描述
    #define kCount 5
    @interface ViewController ()
    @property (nonatomic, weak) UIPageControl *_pageControl;
    @property (nonatomic, weak) UIScrollView *_scrollView;
    @end
    
    @implementation ViewController
    - (void)viewDidLoad {
       [super viewDidLoad];
       for(int i = 0; i<self.view.subviews.count; i++){
            [self.view.subviews[i] removeFromSuperview];
        }
        //分页显示
        //1、添加UIScrollView
        UIScrollView *scrollView = [[UIScrollView alloc] init];
       
        //设置填充父窗体
        scrollView.frame = self.view.bounds;
        [self.view addSubview:scrollView];
        self._scrollView = scrollView;
       
        CGFloat scrollWdith = scrollView.frame.size.width;
        CGFloat scrollHight = scrollView.frame.size.height;
       
        // 2、添加所有的ImageView
        for(int i = 0;i<=kCount;i++){
            //加载图片
            NSString *imageName = [NSString stringWithFormat:@"pages.bundle/%d.jpg", i];
            UIImage *image = [UIImage imageNamed:imageName];
            UIImageView *imageView = [[UIImageView alloc] init];
            imageView.image = image;
            imageView.frame = CGRectMake((i-1)*scrollWdith, 0, scrollWdith, scrollHight);
            [scrollView addSubview:imageView];
           
        }
       
        //3、设置滚动范围
        scrollView.contentSize = CGSizeMake(kCount*scrollWdith, 0);
        //隐藏滚动条
        scrollView.showsHorizontalScrollIndicator = NO;
        //4、开启分页功能(按照ScrollView的宽度将内容分为若干页,正好ImageView的宽度相等,就实现了分页)
        scrollView.pagingEnabled = YES;
       
        //5、添加PageControl
        UIPageControl *pageControl = [[UIPageControl alloc] init];
        pageControl.bounds = CGRectMake(0, 0, 150, 50);
        pageControl.center = CGPointMake(scrollWdith * 0.5, scrollHight - 50);
        //设置页数
        pageControl.numberOfPages = kCount;
        //当前选中页码对应控制器的颜色
        pageControl.currentPageIndicatorTintColor = [UIColor redColor];
        //其他控制器的颜色
        pageControl.pageIndicatorTintColor = [UIColor blackColor];
        //监听pageControl事件
        [pageControl addTarget:self action:@selector(pageChanged:) forControlEvents:UIControlEventValueChanged];
       
        //添加控制器
        [self.view addSubview: pageControl];
       
        self._pageControl = pageControl;
       
        //设置代理
        scrollView.delegate = self;
        //不需要弹簧效果
        scrollView.bounces = NO;
       
    }
    #pragma mark -滚动代理:减速完毕后调用(停止了)
    - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
        CGFloat offset = scrollView.contentOffset.x;   //当前x轴方向上滚动了多少
        int pageNum = offset/scrollView.frame.size.width;
        //设置页码
        self._pageControl.currentPage = pageNum;
    }
    #pragma mark pageControl值变化时调用
    -(void) pageChanged{
        CGFloat offsetX = self._pageControl.currentPage * self.view.frame.size.width;
        [UIView beginAnimations:nil context:nil];
        self._scrollView.contentOffset = CGPointMake(offsetX, 0);
        [UIView commitAnimations];
    }
    @end
    

    10. UITableView( android ListView GridView ExpandListView)

    10.1 数据源方法

    TableView相当于ListView,设置数据源需要遵循UITableViewDataSource协议,相当于BaseAdapter,下面是协议的所有接口:

    @protocol UITableViewDataSource<NSObject>
    @required   必须实现的
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;   // 第section组有多少行数据
    // 返回每一行显示的具体数据View(相当于getView()方法)
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;
    @optional  选择实现的
    - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;  // 一共有多少组数据(如果没有实现,默认为1)
    - (nullable NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section; // 分组头部标题
    - (nullable NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section; // 分组尾部标题
    // Individual rows can opt out of having the -editing property set for them. If not implemented, all rows are assumed to be editable.
    - (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath;
    // Moving/reordering
    // Allows the reorder accessory view to optionally be shown for a particular row. By default, the reorder control will be shown only if the datasource implements -tableView:moveRowAtIndexPath:toIndexPath:
    - (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath;
    //索引(e.g. "ABCD...Z#")
    - (nullable NSArray<NSString *> *)sectionIndexTitlesForTableView:(UITableView *)tableView __TVOS_PROHIBITED;                                                 
    - (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index __TVOS_PROHIBITED;  // tell table which section corresponds to section title/index (e.g. "B",1))
    // Data manipulation - insert and delete support
    // After a row has the minus or plus button invoked (based on the UITableViewCellEditingStyle for the cell), the dataSource must commit the change
    // Not called for edit actions using UITableViewRowAction - the action's handler will be invoked instead
    - (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath;
    // Data manipulation - reorder / moving support
    - (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath;
    @end
    

    10.2 代理 UITableViewDelegate

    // 返回条目高度(可以根据不同的行号返回不同的高度)
    - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;
    - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section;
    - (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section;
    //  选中某一行的时候调用(点击)
    -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
    // 取消选中某一行
    -(void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath
    

    10.3 常用属性和方法

    这里写图片描述

    10.4 多组数据

    这里写图片描述

    @interface ViewController ()
         @property (nonatomic, strong) NSArray *gd;
         @property (nonatomic, strong) NSArray *hn;
    @end
    @implementation ViewController
    - (void)viewDidLoad {
        [super viewDidLoad];
        self.gd = @[@"广州", @"东莞", @"惠州"];
        self.hn = @[@"常德", @"长沙", @"湘潭", @"株洲", @"岳阳", @"湘西自治州"];
    }
    #pragma mark - 数据源方法
    #pragma mark - 1、一共多少组数据
    -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
        return 2;   //广东、湖南
    }
    #pragma mark - 2、第section组有多少行数据
    -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
       return section==0?self.gd.count:self.hn.count;
    }
    #pragma mark - 3、返回每一行显示的具体数据
    -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
        // 组 indexPath.section
        // 列 indexPath.row
        UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil];
        NSString *city = nil;
       
        if(indexPath.section == 0){
            city = self.gd[indexPath.row];
        }else {
            city = self.hn[indexPath.row];
        }
        //设置右边箭头样式
        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
        //设置cell上面显示的文本数据
        cell.textLabel.text = city;
        return cell;
    }
    #pragma mark - 4、 第section组的header标题
    -(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
        return section == 0? @"广州" : @"湖南";
    }
    #pragma mark - 5、 第section组的尾部标题
    -(NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section{
        return section == 0? @"广东很多帅哥": @"湖南很多美女";
    }
    #pragma mark- 6、 索引,通讯录效果,是按照分组而不是拼音首字母的索引
    - (nullable NSArray<NSString *> *)sectionIndexTitlesForTableView:(UITableView *)tableView __TVOS_PROHIBITED{
        return @[@"广州", @"湖南", @"湖南", @"湖南", @"湖南", @"湖南", @"湖南", @"湖南", @"湖南", @"湖南", @"湖南", @"湖南", @"湖南", @"湖南", @"湖南", @"湖南", @"湖南", @"湖南", @"湖南", @"湖南", @"湖南", @"湖南", @"湖南", @"湖南", @"湖南", @"湖南"];
    }
    
    #pragma mark- UITableView代理方法
    #pragma mark- 1、 返回某一行的高度
    - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
        return 70;
    }
    #pragma mark- 2、 选中某一行的时候调用(点击)
    -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
        NSString *city = indexPath.section == 0? self.gd[indexPath.row] : self.hn[indexPath.row];
        //弹出对话框修改地名
        UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"地名" message:nil delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"确定", nil];
        //设置alertview样式
        alert.alertViewStyle = UIAlertViewStylePlainTextInput;
        //取出文本输入框
        [alert textFieldAtIndex:0].text = city;
        alert.tag = 1;
        //显示对话框
        [alert show];
    }
    
    #pragma mark- UIAlertView代理方法
    #pragma mark- 对话框按钮点击
    - (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex NS_DEPRECATED_IOS(2_0, 9_0){
        if(buttonIndex == 1){
            //点击了确定按钮
            //取得输入框文本
            NSString *city = [alertView textFieldAtIndex:0].text;
            NSString *old = self.gd[0];
            old = [NSString stringWithFormat:@"%@", city];
            //刷新UITableView数据,相当于android 的 adaptert.notifyDatesetChanged()
            //刷新所有数据
    //        [self.tableView reloadData];
            //局部刷新
            NSIndexPath *path = [NSIndexPath indexPathForRow:alertView.tag inSection:0];
            [self.tableView reloadRowsAtIndexPaths:@[path] withRowAnimation:UITableViewRowAnimationLeft];
        }
    }
    @end
    

    10.5 单组数据(ListView效果)

    数据源返回分组数量的方法返回值为1就能实现单组效果
    UITableViewCell系统样式:
    这里写图片描述
    条目右边箭头样式:
    这里写图片描述

    10.6 性能优化

    • 复用Cell
      Android的ListView在性能优化的时候复用convertView,这样getView方法不用每次加载创建条目View;iOS中UITableView的数据源方法cellForRowAtIndexPath中同样也可以复用缓存中的cell
          #pragma mark 每当有一个cell进入视野范围内就会调用,返回当前这行显示的cell
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        // 0.用static修饰的局部变量,只会初始化一次< # # >
        static NSString *ID = @"Cell";
       
        // 1.拿到一个标识先去缓存池中查找对应的Cell
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
       
        // 2.如果缓存池中没有,才需要传入一个标识创建新的Cell
        if (cell == nil) {
            cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
        }
       
        // 3.覆盖数据
        cell.textLabel.text = [NSString stringWithFormat:@" fdsfdsf-%d", indexPath.row];
       
        return cell;
    }
    
    • 用户代码提醒
      Xcode中有很多系统自带的代码块,只需要拖动到编辑器中,就能自动生成代码,这样可以避免写很多重复代码,方便编程;也可以自定义用户代码块,比如上面复用Cell的模板方法,选中代码后拖动到右下角代码块中即可。
      这里写图片描述

    10.7 编辑模式

    这里写图片描述

    • 删除\添加
      开启编辑模式:
     // 开启编辑模式
        //self.tableView.editing = YES;
        //[self.tableView setEditing:YES];
        // 带有动画效果
        [self.tableView setEditing:! edt animated:YES];
    

    下面方法的返回值决定编辑模式是添加还是删除:

    #pragma mark - 代理方法
    #pragma mark 当tableview开启编辑模式就会调用
    - (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        //return indexPath.row%2 ? UITableViewCellEditingStyleDelete : UITableViewCellEditingStyleInsert;
        return tableView.tag;
    }
    

    实现数据源的方法删除或添加数据:

    #pragma mark 提交编辑操作(点击了"删除"或者"+"按钮)时调用
    // 实现了这个方法,就有左划删除功能
    - (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle  forRowAtIndexPath:(NSIndexPath *)indexPath
    {
        //NSLog(@"------commit---%d", indexPath.row);
       
        if (editingStyle == UITableViewCellEditingStyleDelete) {
            // 删除
            // 1.更改数据(删除本行的数据)
            [self.mydata removeObjectAtIndex:indexPath.row];
           
            // 2.刷新UI界面
            //[tableView reloadData];
            [tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationLeft];
        } else {
            // 添加
           
            // 1.更改数据(添加数据)
            // [self.mydata addObject:@" hahahhahah"];添加到最后面去了
            // 插入数据到本行的后面
            [self.mydata insertObject:@"新添加的数据...." atIndex:indexPath.row + 1];
           
            // 2.刷新UI界面
            //[tableView reloadData];
           
            // 刷新指定行(个数不变)
            //[tableView reloadRowsAtIndexPaths:<#(NSArray *)#> withRowAnimation:<#(UITableViewRowAnimation)#>];
            // 删除指定行
            //[tableView deleteRowsAtIndexPaths:<#(NSArray *)#> withRowAnimation:<#(UITableViewRowAnimation)#>];
            // 插入新的行
           
            NSIndexPath *newPath = [NSIndexPath indexPathForRow:indexPath.row + 1 inSection:0];
            [tableView insertRowsAtIndexPaths:@[newPath] withRowAnimation:UITableViewRowAnimationTop];
        }
    
    }
    
    • 排序
      如果实现了数据源UITableViewDataSource的moveRowAtIndexPath方法,就会有排序拖动功能,但这只是界面表面的变化,数据顺序并没有变,所以在这个方法中,需要改变数据顺序。
    #pragma mark 如果实现了这个方法, 就会有排序功能
    - (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath
    {
        // 取出即将要删除的数据
        NSString *data = self.mydata[sourceIndexPath.row];
       
        // 删除需要移动的那一行
        [self.mydata removeObject:data];
       
        // 插入之前删除的数据
        [self.mydata insertObject:data atIndex:destinationIndexPath.row];
    }
    
    • 4个刷新UI界面的方法
      添加新的行:
      [tableView insertRowsAtIndexPaths:@[path] withRowAnimation:UITableViewRowAnimationTop];
      删除指定的行:
      [tableView deleteRowsAtIndexPaths:@[path] withRowAnimation:UITableViewRowAnimationTop]
      局部刷新指定的行:
      [tableView reloadRowsAtIndexPaths:@[path] withRowAnimation:UITableViewRowAnimationTop]
      整体刷新所有的行:
      [tableView reloadData]

    10.8 自定义Cell

    • 步骤:
      ①、新建xid来描述Cell(拖一个UITableViewCell设置宽高以及identify);
      ②、实现数据源和代理方法,返回数据和Cell的高度(heightForRowAtIndexPath );
      ③、拿到Cell中的子控件绑定数据(根据tag);
      ④、拿到按钮绑定监听器(根据事件取得事件点对应的行号)
    #pragma mark 每当有一个cell进入视野范围内就会调用,返回当前这行显示的cell
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        // 0.用static修饰的局部变量,只会初始化一次
        static NSString *ID = @"Cell";
       
        // 1.拿到一个标识先去缓存池中查找对应的Cell
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
       
        // 2.如果缓存池中没有,才需要传入一个标识创建新的Cell
        if (cell == nil) {
            // 通过 xib文件来加载cell
            NSBundle *bundle = [NSBundle mainBundle];
            NSArray * objs = [bundle loadNibNamed:@"BookCell" owner:nil options:nil];
            cell = [ objs lastObject];
           
            // 绑定监听器
            UIButton *collect  = (UIButton *)[cell viewWithTag:3];
            [collect addTarget:self action:@selector(collectBook:event:) forControlEvents:UIControlEventTouchUpInside];
        }
       
        //cell.tag = indexPath.row + 1000;
       
        // 3.覆盖数据
        // 3.1 取出book对象
        Book *book = self.books[indexPath.row]; 
        // 3.2 设置名称
        UILabel *nameLabel = (UILabel *)[cell viewWithTag:1];
        nameLabel.text = book.name;
         
        return cell;
    }
    
    
    • cell中的按钮添加点击事件
      通过点击事件点的位置,确定cell的索引:
    // 得到触摸事件对象 --->  得到触摸点  ---> 得到触摸点在UITableView中的位置 ---> 得到触摸点在UITableView中的行号
    - (void)collectBook:(UIButton *) btn event:(UIEvent *)event
    {
        //NSLog(@"----%@", event);
        UITableView *tableView = (UITableView *)self.view;
       
        // 获取所有的触摸点(UITouch对象,如果是单点触碰,就只有1个UITouch)
        NSSet *touches = [event allTouches];
       
        // 一个UITouch对象对应一根手指
        UITouch *touch = [touches anyObject];
       
        // 获取触摸点在UITableView上面的的位置
        CGPoint position = [touch locationInView:tableView];
       
        // 根据触摸位置 得到 对应的行号
        NSIndexPath *indexPath = [tableView indexPathForRowAtPoint:position];
        //NSLog(@"%d", indexPath.row);
       
        Book *book = self.books[indexPath.row];
        NSLog(@"%@", book.name);
    }
    
    • Cell属性封装:
      根据tag找控件(android根据id找控件),tag太多不好管理,效率不高,如果控件太多代码量大:
      定义一个类继承UITableViewCell,xid指向这个类,子控件作为此类的属性即可,创建Cell时用这个类接受:

    这里写图片描述

    10.9 九宫格

    iOS中没有Android中的GridView,九宫格是由UITableView实现的,自定义Cell,每一行Cell中放入numClunk(多少列) 个按钮。

    10.10 qq联系人列表

    iOS中没有Android中的ExpandListView,如果需要实现分组展开合并功能,只需要控制返回那个分组返回的行数,行数为0就是合并了。

    • 自定义分组标题
    #pragma mark 第section组对应的标题
    - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
    {
        HeaderView *titleView = [HeaderView buttonWithType:UIButtonTypeCustom];
        
        // 设置标题内容
        NSDictionary *dict = self.allFriends[section];
        [titleView setTitle:dict[@"group"] forState:UIControlStateNormal];
        
        // 设置标题颜色
        [titleView setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        
        // 设置背景颜色
        [titleView setBackgroundColor:[UIColor grayColor]];
        
        // 设置按钮的tag为组号
        titleView.tag = section;
        
        // 监听标题点击
        [titleView addTarget:self action:@selector(titleClick:) forControlEvents:UIControlEventTouchUpInside];
        
        // 取出第section组的状态
        int result = [self.status[@(section)] intValue];
        // 对状态进行取反
        if (result == 0) {
            titleView.imageView.transform = CGAffineTransformIdentity;
        } else {
            titleView.imageView.transform = CGAffineTransformMakeRotation(M_PI_2);
        }
        
        return titleView;
    }
    
    • 合并展开分组
    #pragma mark - 监听标题点击
    - (void)titleClick:(UIButton *)btn {
        // 取出标题按钮对应的组号
        int section = btn.tag;
        
        // 取出第section组的状态
        int result = [self.status[@(section)] intValue];
        
        // 对状态进行取反
        if (result == 0) {
            [self.status setObject:@1 forKey:@(section)];
        } else {
            [self.status setObject:@0 forKey:@(section)];
        }
        
        // 刷新数据(会重新给数据源发送消息)
        [self.tableView reloadData];
    }
    
    //- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
    //{
    //    // 1.获取这组对应的字典数据
    //    NSDictionary *dict = self.allFriends[section];
    //    
    //    return dict[@"group"];
    //}
    
    
    #pragma mark 每一组中有多少行数据
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    {
        // 取出第section组对应的状态
        int result = [self.status[@(section)] intValue];
        
        if (result == 0) { // 合并状态
            return 0;
        } else { // 展开状态
            // 1.先获取这组对应的数据
            NSDictionary *group = self.allFriends[section];
            // 2.获取这组里面的好友
            NSArray *friends = group[@"friends"];
            return friends.count;
        }
    }
    
    
    
    展开全文
  • 这边文章是从我的自己撰写掘金博文搬过来的: Android Studio 的五种常见控件和五种常见布局,同时通过这篇文章可以比较一下CSDN和掘金网站的优缺点… 一、View和ViewGroup Android体系中UI的设计采用视图层次的结构...

    一、View和ViewGroup

    Android体系中UI的设计采用视图层次的结构。

    视图层次: 由View和ViewGroup组成。在创建UI时,开发人员不会真正去创建View或者ViewGroup,而是直接使用Android所提供的具有不同功能的控件,因此通常是看不到View或ViewGroup。

    View是Android系统中最基本的组件,同时也是Android所有可视组件的父类,它完成了构建按钮、文本框、时钟等诸多控件的基本功能。此外View还有一个非常重要的子类ViewGroup。
    View与ViewGroup的区别:ViewGroup能够容纳多个View作为ViewGroup的子组件,同时View也可以包含ViewGroup作为其子组件,所以View和ViewGroup是相互包容、“你中有我,我中有你”的关系。


    wrap_content: 是layout_width和layout_height的属性值之一,表示和自身内容一样的长度。(由内容决定)

    match_parent: 是layout_width和layout_height的属性值之一,表示和父组件一样的长度。

    fill_parent: 以填充布局单元内尽可能多的空间。

    margin属性: 外边距,指当前视图与其他视图间的距离,可以一次性指定上下左右四个外边距值,也可以一次性指定上下左右采用同一个边距值。

    android:layout_margin="10dp"
    
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    

    padding属性: 内边距,指当前视图边距与其内容间的距离。赋值跟margin属性同类型。

    android:layout_padding="10dp"
    
    android:layout_paddingTop="10dp"
    android:layout_paddingBottom="10dp"
    android:layout_paddingLeft="10dp"
    android:layout_paddingRight="10dp"
    

    visible属性:

    android:visiblity="visible"
    android:visiblity="invisible"
    android:visiblity="gone"
    

    二、Android的五种常见控件

    2.1 文本控件

    在Android的体系结构中,TextView和EditView之间是父类和子类的关系。即EditText继承于TextView,因此EditText几乎具备TextView的所有功能,两者之间最大的不同在于:EditText能够支持用户输入,而TextView不能。

    2.1.1 TextView


    TextView是用于显示文字(字符串)的控件,可在代码中通过设置属性改变文字的大小、颜色、样式等功能。

    注意:
    颜色值组成(三原色)有三种表示方法

    1.#RGB:3位16进制整数,如:#f00

    2.#RRGGBB:#00ff00

    3.#AARRGGBB:#ff0000ff

    2.1.2 EditText


    EditText是可以进行编辑操作(用于用户输入和编辑文字或字符的控件)的文本框,将用户信息传递给Android程序。还可以为EditText控件设置监听器,用来测试用户输入的内容是否合法。

    2.2 按钮控件

    2.2.1 Button

    Android的体系结构中Button继承于TextView,而ImageButton继承于ImageView。虽然这两个控件继承于不同的控件,但是Button和ImageButton都是用于完成用户的单击按钮时的onClick事件。


    Button是按钮,是用于响应用户的一系列点击事件,使程序更加流畅和完整。

    点击事件(监听事件)实现方式(三种):

    ☞ 实现方式一:

    先在layout文件中指定onClick属性:Android:onClick=“click”。然后在Activity中实现这个click方法

    public void click (View v){
       /// 处理按钮监听事件
    }
    

    ☞ 实现方式二:在Activity中添加匿名内部类

    Button button = findViewById(R.id.button);
    
    
    button.setOnClickListener(new View.OnClickListener(){
        @Override
        public void OnClick(View v){
       /// 处理按钮监听事件
        Log.i("匿名内部类方式","button is clicked");  
        }
    });
    

    ☞ 实现方式三:

    public class MainActivity implements View.OnClickListener
    {
        //实现接口抽象方法
        public void onClick(View v){
        //处理按钮监听事件
        }
    }
    
    //在Activity中注册回调接口
    button.setOnClickListener(this);
    

    2.2.2 RadioButton


    RadioButton为单选按钮,它需要与RadioGroup配合使用,提供两个或多个互斥的选项集。(如男、女)
    RadioGroup是单选组合框,可容纳多个RadioButton,并把它们组合在一起,实现单选状态。


    RadioButton按钮的实现步骤:

    1.先在UI布局文件activity——main.xml中的LinearLayout标签中添加如下代码:

    <RadioGroup
       android:id="@+id/radiogroup"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:orientation="horizontal">
       
        <RadioButton
       android:id="@+id/radiobutton1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:checked="true"
       android:text="Male"/>
       <RadioButton
       android:id="@+id/radiobutton2"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Female"/>
       
     </RadioGroup>
    

    然后在MainActivity.java中添加onCreate函数中添加以下代码:

    RadioGroup radiogroup = (RadioGroup)findViewById(R.id.radiogroup);
    radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener(){
        public void onCheckedChanged(RadioGroup group,int checkedId){
        switch(checkedId){
            case R,id.maleradio:editText.setText("男");
            break;
         }
           case R,id.femaleradio:editText.setText("女");
            break;
         }
        }
    }
    
    ///另外Switch也可以用以下方法表示
    if(checked==R.id.radiobutton1){
        textView.setText("男");
    }
    else{
         case R,id.maleradio:editText.setText("女");
            break;
         } 
    }
    

    2.2.3 CheckBox


    CheckBox即多选按钮,允许用户在一组选项中进行单选和多选。用法与RadioButton类似。

    CheckBox按钮的实现步骤:

    1.先在UI布局文件activity——main.xml中的LinearLayout标签中添加代码(与radioBox的相似)
    2.

    注意:响应事件从何而来?(两个来源)

    1.由系统提供的,具有特定函数名的响应函数(在OnCreate中进行定义和实现)

    2.自定义响应函数名的方法来响应用户事件(放在Activity中作为一个成员函数来使用)

    public void CheckboxClicked(View view){
        boolean checked = ((Checked)view).isChecked();
        case R.id.meat:
        if(checked){
            editText.setText("肉类");
        }else{
            ...
        }
        break;
        
        ...
    }
    

    2.3 图片控件

    2.3.1 ImageView

    ImageView是视图控件,它继承于View,其功能是在屏幕中显示图像,ImageView类可以从各种来源加载图像(如资源库或网络),并提供缩放、裁剪、着色(渲染)等功能。

    ///在UI布局文件activity——main.xml中添加
    
    <ImageView 
    android:id="@id/imageView1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:srcCompat="@tolls:sample/backgrounds/scenic[0]"
    
    ///在MainActivity.java中添加onCreate函数中定义ImageView对象
    ImageView imageView;
    imageView.setImageResource(R.drawable.ic_launcher_foreground);
    

    2.4 列表控件

    2.4.1 ListView

    普通列表–ListView在程序中使用频率相对比较高,很多地方都会用到这个控件,其中的内容会以一个列表的形式显示出来,但是在使用ListView时需要一个适配器(应用自带适配器、z自定义适配器)(Adapter)类显示需要的内容。当显示的内容复杂的时候系统的适配器不能满足要求了,这时可以自定义适配器,写一个类继承BaseAdapter。

    2.4.2 Spinner

    下拉列表–Spinner 控件也是一种列表类型的控件,可以极大地提高用户的体验性。当需要用户选择时,可以提供一个下拉列表将所有可选的项列出来,供用户选择。

    2.4.3 ExpandableListView

    多级列表ExpandableListView控件提供的是一个多级列表(一般是两级)。


    如何实现这个两级列表呢?既然ExpandableListView采用列表的形式,它也是应该有一个适配器,但是它的适配器不是继承BaseAdapter,而是继承它独有的适配器BaseExpandableListView,同时也需要实现其中的几个方法:

    BaseExpandableListView中的方法:

    方法名称 参数 说明
    getGroudId int groundPosition 获取在给定的位置编号
    getChildId int groundPosition,int childPosition 获取给定组的孩子的ID
    getGroudCount 获取第一级列表的列数
    getChildrenCount int groupPosition 获取指定组中孩子的数量
    getGroup int groupPosition 获取定组相关的数据
    getGroupView int groupPositin,boolean isExpanded,View convertView,ViewGroup parent 获取一个显示的视图给定组
    getChild int groupPosition,int childPosition 获取与孩子在给定的组相关的数据
    getChildView int groupPosition,boolean isLastChild,View convertView,ViewGroup parent 获取一个视图显示在给定的组的孩子的数据

    2.5 时间日期控件

    2.5.1 AnalogClock(模拟时钟的显示方式)和DigitalClock

    这两个控件都是通过获取系统时间展示给用户。AnalogClock是以模拟时钟的形式展示,DigitalClock是以数字时钟 的形式向用户展示。

    2.5.2 DatePicker和TimePiker

    用户可以通过这两个控件来设置日期和时间,DatePicker(会在Android 4.0中自动产生一个日历的功能)用于选择日期,TimePicker用于选择时间。

    三、五种常用的布局

    在Android程序中界面是通过布局文件设定的,在每个应用程序创建会默认包含一个主界面布局,该布局位于res/layout目录中。实际开发中每个应用程序都包含多个界面,而程序默认提供的一个主界面布局无法满足需求,因此经常会在程序中添加多个布局。

    在Android中有两种方式创建布局:一种是在项目中的layout文件夹中写XML,将各个布局写在XML中;一种是在程序中通过代码去编写,这种方式一般用得比较少。

    四种布局常用的单位:

    1.px: 像素,即在屏幕中可以显示最小元素单位。

    2.pt: 磅数,一磅等于1/72英寸,一般pt作为字体的单位来显示

    3.dp(与密度无关的像素,dp与dip相同): 基于屏幕密度的抽象单位。不同设备由不同的显示效果,更具分辨率的不同来去顶控件的尺寸。

    4.sp: 可伸缩像素,采用与dp相同的设计理念,推荐设置文字大小时使用。

    3.1 线性布局(LinearLayout)

    线性布局就是将一些控件排放在一条线上,但是有水平方向和垂直方向两种。水平和垂直方向的控制由属性android:orientation来控制,这个属性有两个值:水平(Vertical)和垂直(Horizaontal),在线性布局中还有一些比较常用的属性,如:android:gravity、android:weight(控件的权值)等。

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:background="#ffffff"
        >
        <LinearLayout
            android:id="@+id/LinearLayout01"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:orientation="horizontal"
            >
            <Button
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:gravity="center_horizontal"
                android:text="按钮1"
                android:layout_weight="1.0"
                />
            <Button
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:gravity="center_horizontal"
                android:text="按钮2"
                android:layout_weight="1.0"
                />
            <Button
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:gravity="center_horizontal"
                android:text="按钮3"
                android:layout_weight="1.0"
                />
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
    
            <Button
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="按钮4"
                android:layout_weight="1.0"
                />
            <Button
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="按钮5"
                android:layout_weight="1.0"
                />
            <Button
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="按钮6"
                android:layout_weight="1.0"
                />
        </LinearLayout>
    </LinearLayout>
    

    运行效果效果如下:

    3.2 相对布局(RelativelLayout)

    线对布局是指按照控件间的相对位置进行布局,也就是说我们可以选一个控件作为参照,其他的控件可以在它的上边、下边、左边及右边等。

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:background="#ffffff"
        >
       <TextView
           android:id="@+id/textView01"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="AA"
           android:textColor="#00FF00"
           android:textSize="22sp"
           android:layout_marginLeft="20px"/>
    
        <TextView
        android:id="@+id/textRight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
            android:layout_toRightOf="@id/textView01"
        android:text="BB"
            android:textColor="#FF0000"
            android:textSize="22sp"
        android:layout_marginLeft="20px"/>
        <TextView
            android:id="@+id/text02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/textView01"
            android:text="CC"
            android:textColor="#00FFFF"
            android:textSize="22sp"
            android:layout_marginLeft="20px"/>
        <TextView
            android:id="@+id/textView02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/textRight"
            android:layout_toRightOf="@id/text02"
            android:text="DD"
            android:textColor="#000000"
            android:textSize="22sp"
            android:layout_marginLeft="20dip"/>
    
    </RelativeLayout>
    

    运行结果如下:
    BB相对于AA的左边,CC相对于AA的下边边,DD相对于BB的下边且相对于CC的右边

    3.3 帧布局(FrameLayout)

    帧布局是五大布局中最简单的一个布局,在这个布局中,整个界面被当成一块空白备用区域,所有的子元素都不能被指定放置的位置,它们统统放于这块区域的左上角,并且后面的子元素直接覆盖在前面的子元素上,将前面的子元素部分和全部遮挡。

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/FrameLayout01"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#ffffff"
        >
        <TextView
            android:id="@+id/TextView01"
            android:layout_width="1000px"
            android:layout_height="1000px"
            android:background="#ff0000"
            android:text="文本框1"
            android:textColor="#ffffff"/>
        <TextView
            android:id="@+id/TextView02"
            android:layout_width="750px"
            android:layout_height="750px"
            android:background="#0000ff"
            />
        <TextView
            android:id="@+id/TextView03"
            android:layout_width="500px"
            android:layout_height="500px"
            android:background="#00ff00"
            />
    </FrameLayout>
    

    运行结果如下:

    3.4 表格布局(TableLayout)

    表格布局适用于N行N列的布局格式。一个TableLayout由许多TableRow组成,一个TableRow就代表TableLayout中的一行。TableRow的数量决定表格的行数。而表格的列数是由包含最多控件的TableRow决定。

    <?xml version="1.0" encoding="utf-8"?>
    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#ffffff"
        android:stretchColumns="1"
        >
        <TableRow>
        <TextView
            android:layout_column = "1"
            android:padding="3dip"
            android:textColor="#000000"
            android:text="open..."/>
        <TextView
            android:gravity="right"
            android:padding="3dip"
            android:textColor="#000000"
            android:text="Ctrl_o"/>
        </TableRow>
    
        <View
            android:layout_height="2dip"
            android:background="#FF909090"/>
    
        <TableRow>
        <TextView
            android:layout_column = "1"
            android:padding="3dip"
            android:textColor="#000000"
            android:text="Save..."/>
        <TextView
            android:gravity="right"
            android:padding="3dip"
            android:textColor="#000000"
            android:text="Ctrl_s"/>
        />
        </TableRow>
    
        <View
            android:layout_height="2dip"
            android:background="#FF909090"/>
    
        <TableRow>
        <TextView
            android:layout_column = "1"
            android:padding="3dip"
            android:textColor="#000000"
            android:text="Save As..."/>
        <TextView
            android:gravity="right"
            android:padding="3dip"
            android:textColor="#000000"
            android:text="Ctrl_shift_s"/>
        </TableRow>
    
        <View
            android:layout_height="2dip"
            android:background="#FF909090"/>
    
        <TableRow>
        <TextView
            android:layout_column = "1"
            android:padding="3dip"
            android:textColor="#000000"
            android:text="X"/>
        <TextView
            android:gravity="right"
            android:padding="3dip"
            android:textColor="#000000"
            android:text="Import..."/>
        </TableRow>
    </TableLayout>
    

    运行结果如下:

    3.5 绝对布局(AbsoluteLayout)

    绝对布局是通过指定x、y坐标来控制每一个控件位置的。

    四、参考资料

    《从零开始学Android编程》

    中国大学慕课网:Android应用开发

    中国大学慕课网:Android基础应用开发

    展开全文
  • PyQt5常见控件之QTextEdit类

    千次阅读 2020-10-23 16:20:46
    QTextEdit类是一个多行文本框控件,也是一个所见即所得的富文本编辑框,可以显示多行文本内容,还支持HTML4标签子集,可以加载纯文本和富文本的文件,适用于浏览大型的文本文件。当文本内容超出控件显示范围时,可以...

    QTextEdit类

    QTextEdit类是一个多行文本框控件,也是一个所见即所得的富文本编辑框,可以显示多行文本内容,还支持HTML4标签子集,可以加载纯文本和富文本的文件,适用于浏览大型的文本文件。当文本内容超出控件显示范围时,可以显示水平个垂直滚动条,QTextEdit不仅可以用来显示文本还可以用来显示HTML文档。


    常用方法

    方法 描述
    setPlainText() 设置多行文本框的内容
    insertPlainText() 插入普通文本
    toPlainText() 返回多行文本框的文本内容
    setHtml() 设置多行文本框的文本内容为HTML文档,HTML文档是描述网页的
    insertHtml(str) 插入Html文本
    toHtml() 返回多行文本框的HTML内容
    clear() 清除多行文本框的内容
    append() 追加文本
    setPlaceholderText() 设置占位文本
    placeholderText() 获取占位文本
    setFontPointSize(float) 设置字体大小
    setFontFamily(str) 设置字体

    文本光标对象

    Word 软件在编辑的时候,其实已经存在一个 docx 文档,Word 只是提供编辑的功能,QTextEdit 也是类似的原理,我们可以通过直接操作这个对象(文本文档),来达到改变文本显示的效果。可以通过文本光标来操作文本文档,PyQt中,文本光标和文本文档都是一个对象。
    首先获取文本光标通过QLineEdit.textCursor()来获取光标对象;
    文本光标对象可以往文本文档添加内容,如插入文本,图标,句子,列表,表格,文本框和框架等,具体可查看API文档
    链接: QLineEdit的API文档

    1.插入普通文本

    可以插入一个Html的句子(段落): QTextDocumentFragment.fromHtml("<h1>标题1</h1>")
    效果:

    在这里插入图片描述
    code:

    '''
    插入普通文本演示
    '''
    from PyQt5.Qt import *
    import sys
    
    app = QApplication(sys.argv)
    te = QTextEdit()
    te.setWindowTitle("插入普通文本演示")
    tc = te.textCursor()
    tc.insertText("Hello PyQt5!")
    te.show()
    
    if __name__ == '__main__':
        sys.exit(app.exec_())
    

    2.插入富文本

    insertText()的重载函数insertText(self, str, QTextCharFormat),多了一个QTextCharFormat参数,这个参数指定了文本的格式。
    QTextCharFormat Class提供了非常多的功能,使得文本的样式设置变得更加的灵活和强大。还可以设置下划线颜色,下划线类型等等。这些API函数都可以在QTextCharFormat Class 查看。单独设置下划线颜色不会显示,还需要设置下划线类型才可以显示(或单独使能下划线setfontUnderline(True))。
    效果:

    在这里插入图片描述

    code:

    '''
    插入富文本
    '''
    from PyQt5.Qt import *
    import sys
    
    app = QApplication(sys.argv)
    
    te = QTextEdit()
    te.setWindowTitle("插入富文本演示")
    
    # 0.获取光标对象
    tc = te.textCursor()
    # 1.创建一个 QTextCharFormat 对象
    cjw = QTextCharFormat()
    # 2.设置相关的参数
    cjw.setToolTip("使用QTextCharFormat设置格式的文本")   #设置ToolTip:光标停留在文本上面,光标右下的提示文本框
    cjw.setFontFamily("楷体")                              #设置字体
    cjw.setFontPointSize(30)                               #设置字体大小
    cjw.setUnderlineColor(QColor("Red"))                 #设置下划线颜色
    cjw.setUnderlineStyle(QTextCharFormat.WaveUnderline)   #设置下划线的类型为波浪线
    tc.insertText("Hello PyQt5!", cjw)
    # 显示
    te.show()
    
    if __name__ == '__main__':
        sys.exit(app.exec_())
    
    

    3.插入图片

    insertImage(QTextImageFormat) 可以插入一张指定格式的图片
    效果:

    在这里插入图片描述
    code:

    '''
    插入图片演示
    '''
    from PyQt5.Qt import *
    import sys
    
    app = QApplication(sys.argv)
    
    te = QTextEdit()
    te.setWindowTitle("插入图片演示")
    te.resize(350,250)
    
    # 0.获取光标对象
    tc = te.textCursor()
    # 1.创建一个 QTextImageFormat 对象
    cjw = QTextImageFormat()
    
    # 2.设置相关的参数
    cjw.setName("D:/监控系统v1.0/images/icon1.png")    #图片名称
    cjw.setWidth(300)            #图片宽度
    cjw.setHeight(200)           #图片高度
    
    tc.insertImage(cjw)          #插入图片
    
    te.show()
    
    if __name__ == '__main__':
        sys.exit(app.exec_())
    

    4.插入列表

    QTextCursor中,列表有插入列表创建列表两种类型,它们的用法类似,只是插入列表会在光标处插入一个列表,所以光标右侧的文本就称为了列表的内容,而创建列表则光标所在行的文本都称为了列表的内容。
    列表有两类参数:枚举值和 QTextListFormat对象,前者便捷的设置列表样式,但是风格固定,而后者开发者可以自定义类型。
    效果:

    在这里插入图片描述

    code:

    '''
    插入列表演示
    '''
    from PyQt5.Qt import *
    import sys
    
    app = QApplication(sys.argv)
    
    te = QTextEdit()
    te.setWindowTitle("插入列表演示")
    te.resize(350,250)
    
    # 0.获取光标对象
    tc = te.textCursor()
    # 1.创建一个 QTextListFormat 对象
    cjw = QTextListFormat()
    # 2.设置相关的值
    cjw.setNumberPrefix("-")       #数字前缀
    cjw.setNumberSuffix(":")       #数字后缀
    cjw.setStyle(QTextListFormat.ListLowerAlpha) #列表序号为小写拉丁字母
    cjw.setIndent(2)               #缩进2个tab
    tc.insertList(cjw)
    
    te.show()
    
    if __name__ == '__main__':
        sys.exit(app.exec_())
    

    5.插入表格

    通过光标对象可以插入表格,并设置它的函数,列数和线粗等。和“插入列表”相同,插入表格也有2种方式,直接插入和设置一个结构体插入。
    需要区分QTextTableFormat()对象和QTextTable对象是不同的,一个是表格对象本身,一个是表格格式的对象。
    效果:

    在这里插入图片描述

    code:

    '''
    插入表格演示
    '''
    from PyQt5.Qt import *
    import sys
    
    app = QApplication(sys.argv)
    
    te = QTextEdit()
    te.setWindowTitle("插入表格演示")
    te.resize(350,250)
    
    # 0.获取光标对象
    tc = te.textCursor()
    # 1. 创建 QTextTableFormat 对象
    cjw = QTextTableFormat()
    # 2. 设置格式的值
    cjw.setAlignment(Qt.AlignRight) #表格对齐方式:居中对齐
    cjw.setCellPadding(6)           #设置外边距
    cjw.setCellSpacing(3)           #插入内边距
    
    table = tc.insertTable(5, 3, cjw) #插入3列5行的表格
    # 3.通过表格对象修改
    table.appendColumns(5)          #追加5列
    
    te.show()
    
    if __name__ == '__main__':
        sys.exit(app.exec_())
    

    6.插入框架

    效果:

    在这里插入图片描述

    code:

    '''
    插入文本框架演示
    '''
    from PyQt5.Qt import *
    import sys
    
    app = QApplication(sys.argv)
    
    te = QTextEdit()
    te.setWindowTitle("插入文本框架演示")
    te.resize(300,100)
    
    # 0.获取光标对象
    tc = te.textCursor()
    # 1.创建并设置框架
    cjw = QTextFrameFormat()
    cjw.setBorder(5)
    cjw.setBorderBrush(QColor(120, 150, 15))
    tc.insertFrame(cjw)
    
    te.show()
    
    if __name__ == '__main__':
        sys.exit(app.exec_())
    

    7.插入文本块

    文本块可以设置格式,如文本块里面段落的格式,字体的格式等。
    效果:

    在这里插入图片描述

    code:

    '''
    插入段落演示
    '''
    from PyQt5.Qt import *
    import sys
    
    app = QApplication(sys.argv)
    
    te = QTextEdit()
    te.setWindowTitle("插入段落演示")
    te.resize(500,750)
    
    # 0.获取光标对象
    tc = te.textCursor()
    
    # 创建一个段格式对象并设置
    cjw = QTextBlockFormat()
    cjw.setAlignment(Qt.AlignLeft)  #对齐方式
    cjw.setLineHeight(30, QTextBlockFormat.FixedHeight) #设置行高:30 像素
    cjw.setRightMargin(10)          #设置右边距
    cjw.setTopMargin(60)             #设置段前距离
    cjw.setBottomMargin(5)          #设置段后距离
    
    # 创建一个字符格式对象并设置
    cjj = QTextCharFormat()
    cjj.setFontFamily("楷体")
    cjj.setFontPointSize(20)
    
    tc.insertBlock(cjw, cjj)
    
    te.show()
    
    if __name__ == '__main__':
        sys.exit(app.exec_())
    
    

    实现QTextEdit格式设置

    合并格式和设置格式的区别,前者是添加格式,后者是设置格式。

    相关函数 含义
    setBlockCharFormat(QTextCharFormat) 设置要格式化的当前块(或选择中包含的所有块)char 格式
    setBlockFormat(QTextBlockFormat) 设置当前块的块格式(或选择中包含的所有块)以进行格式化
    setCharFormat(QTextCharFormat) 将光标的当前字符格式设置为给定格式。若光标有选择,则给定格式应用于当前选择
    mergeBlockCharFormat(QTextCharFormat) 合并当前块的char格式
    mergeBlockFormat(QTextBlockFormat) 合并当前块的格式
    mergeCharFormat(QTextCharFormat) 合并当前字符格式

    效果:

    在这里插入图片描述

    code:

    '''
    文本格式设置演示
    '''
    from PyQt5.Qt import *
    import sys
    
    app = QApplication(sys.argv)
    
    w = QWidget()
    w.setWindowTitle("文本格式设置演示")
    w.resize(400, 500)
    
    te = QTextEdit(w)
    te.resize(400, 400)
    
    btn_underline = QPushButton("下划线", w)
    btn_underline.move(60, 420)
    
    btn_font = QPushButton("楷 体", w)
    btn_font.move(170, 420)
    
    btn_italic = QPushButton("斜 体", w)
    btn_italic.move(280, 420)
    
    
    def addUnderline():
        tc = te.textCursor()  # 获取光标对象
    
        cjw = QTextCharFormat()
        cjw.setFontUnderline(True)
        # 2.追加格式
        tc.mergeCharFormat(cjw)
    
    
    def setFont():
        tc = te.textCursor()  # 获取光标对象
        # 1.创建字符格式并设置
        cjw = QTextCharFormat()
        cjw.setFontFamily("楷体")
        cjw.setFontPointSize(30)
        # 2.追加格式
        tc.mergeCharFormat(cjw)
    
    
    def italic():
        te.setFocus()
        tc = te.textCursor()  # 获取光标对象
    
        # 1.创建字符格式并设置
        cjw = QTextCharFormat()
        cjw.setFontItalic(True)
        # 2.追加格式
        tc.setCharFormat(cjw)
    
    
    # 连接信号槽
    btn_underline.clicked.connect(addUnderline)
    btn_font.clicked.connect(setFont)
    btn_italic.clicked.connect(italic)
    
    w.show()
    
    if __name__ == '__main__':
        sys.exit(app.exec_())
    
    

    实现QTextEdit显示

    显示文本和Html内容
    QPlainTextEdit 的区别:
    QPlainTextEdit 为纯文本的编辑框,QTextEdit 支持富文本(链接: QTextEdit支持的富文本)。
    setText 函数中 参数 text 的 ‘\n’ 会被QPlainTextEdit 识别为换行,而在后者识别为空格。由此,由‘\n’分割的多段(block)的纯文本,不能使用QTextEdit 来显示及计算位置等。

    实现效果:

    在这里插入图片描述

    code:

    '''
    实现QTextEdit显示
    '''
    from PyQt5.QtWidgets import QApplication,QWidget,QTextEdit,QVBoxLayout,QPushButton
    import sys
    
    class TextEditDemo(QWidget):
        def __init__(self,parent=None):
            super(TextEditDemo, self).__init__(parent)
            self.setWindowTitle('实现QTextEdit显示')
    
            #定义窗口的初始大小
            self.resize(400,270)
            #创建多行文本框
            self.textEdit=QTextEdit()
            #创建两个按钮
            self.btnPress1=QPushButton('显示文本')
            self.btnPress2=QPushButton('显示HTML')
    
            #实例化垂直布局
            layout=QVBoxLayout()
            #相关控件添加到垂直布局中
            layout.addWidget(self.textEdit)
            layout.addWidget(self.btnPress1)
            layout.addWidget(self.btnPress2)
    
            #设置布局
            self.setLayout(layout)
    
            #将按钮的点击信号与相关的槽函数进行绑定,点击即触发
            self.btnPress1.clicked.connect(self.btnPress1_clicked)
            self.btnPress2.clicked.connect(self.btnPress2_clicked)
    
        def btnPress1_clicked(self):
            #以文本的形式输出到多行文本框
            self.textEdit.setPlainText('Hello PyQt5!')
    
        def btnPress2_clicked(self):
            #以Html的格式输出多行文本框,字体红色,字号6号
            self.textEdit.setHtml("<font color='blue' size='10'><red>Hello PyQt5!</font>")
    
    if __name__ == '__main__':
        app=QApplication(sys.argv)
        md=TextEditDemo()
        md.show()
        sys.exit(app.exec_())
    

    END

    展开全文
  • MFC开发 常见控件

    千次阅读 2016-03-12 10:40:58
    APB还包含了其他效果,比如,设置整个按钮对象或其背景透明以及不同的透明度级别的设定。APB提供了针对图片和标题的垂直和水平对齐以及合并的功能。 Prof-UIS也算一个, 不过免费版本功能不多 用这样的库...
  • 常见ActiveX控件下载大全

    千次阅读 2013-09-09 11:31:49
    ActiveX是微软对于一系列策略性面向对象程序技术和工具的称呼,ActiveX控件可以在Windows窗体和Web程序上使用,所以不管是什么语言开发的应用程序只要在windows窗体和html页面中使用,同时也可以在MAC和JAVA平台使用...
  • Qt入门(4)——Qt常见控件

    千次阅读 2014-09-04 10:48:43
    Qt提供了大量的内建控件及通用对话框可满足程序员的绝大部分要求。我们将对这些控件和对话框作一个大概的介绍。1. QLabel定义QLabel* m_labelOrdered = newQLabel("0", this);对文字的左右对齐设置m_labelOrdered->...
  • TextViewEditTextButtonMenu//1.在Activity03当中,要声明四个控件 在main.xml声明。//2.要为其中的两个控件设置显示的值//3.创建一个监听器类,监听按钮...将监听器类的对象,绑定在按钮对象上1在main.xml声明四个控件
  • 一、TextView控件常见的属性属性名称描述android:autoLink设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接。可选值(none/web/email/phone/map/all)。这里只有在同时设置text时才自动识别链接...
  • VC使用ActiveX控件常见问题

    千次阅读 2015-12-24 16:57:22
    VC使用ActiveX控件常见问题一方面,它表示将你联系到Microsoft、Internet和业界的新技术的小型快速的可重用组件。它与开发语言无关,任何支持 ActiveX控件的软件开发平台(如VB、VC++、Access、VFP、Delphi、Power...
  • //对控件对象进行声明 private RadioGroup genderGroup = null; private RadioButton femaleButton = null; private RadioButton maleButton = null; private CheckBox swimBox = null; private CheckBox...
  • //复写onCreateDialog方法并一个TimePickerDialog实例对象 @Override public Dialog onCreateDialog(Bundle savedInstanceState) { // 使用当前时间作为缺省值 final Calendar c = Calendar.getInstance(); ...
  • 常见UI控件的使用-富文本、textview

    千次阅读 2015-08-19 14:08:17
    TextView AutoCompleteTextView MultiAutoCompleteTextVeiw Button EditText ImageView ProgressBar AlertDialog ...CheckBox所有控件都可以加点击事件:TextViewxml: 1)android:singleLine=”true” //只能
  • delphi FMX控件常见属性

    千次阅读 2017-11-01 22:07:14
    EnableDragHighlight:指定拖动对象超出控件时是否突出显示控件。 Height : 指定控件的垂直尺寸(像素) Width : 指定控件的水平尺寸 HIT :当鼠标放在控件上显示 HitTest :当这个属性为True时hit才...
  • VS2010 使用控件常见问题

    千次阅读 2011-04-12 11:16:00
    VS2010 控件使用 绘图控件NTGRAPH
  • 控件分类,控件概述 时间:2009-6-18 20:19:33 点击:1158 <!-- --> <!-- @font-face {font-family:宋体} @font-face {font-family:"\@宋体"} p.MsoNormal, li.MsoNormal, div.MsoNormal {margin:0...
  • C#中常见控件及功能(一)

    万次阅读 多人点赞 2012-12-24 14:33:36
    1、StatusBar控件——显示各种状态信息。 StatusBar控件可以有状态栏面板(用于显示图标以指示状态)或一系列动画图标(用于指示某个进程正在工作,例如,表示正在保存文档的 Microsoft Word)。 2、...
  • 一、LinearLayout布局控件 xml属性 android:baselineAligned:是否允许用户调整它内容的基线。 android:baselineAlignedChildIndex:当一个线性布局与另一个布局是按基线对齐的一部分,它可以指定其内容的基线...
  • 以前我刚开始学习ArcGIS时候,看得最常见的一篇博客是Ersi中国官方写的一篇《ArcGIS for Android地图控件的5大常见操作》
  • 报表控件是使用图形及数据实现报表的设计及打印能力的控件。在图形用户界面(GUI)中屏幕上的一种对象,用户可操作该对象来执行对报表的各项设计,修改等操作。 常见报表类型解析 根据报表的布局、数据源结构、打印...
  • 解决电脑无法运行 Mscomctl.ocx控件 常见的4个问题 问题1:Mscomctl.ocx控件或者他的依赖对象没有正确注册文件缺失 问题2:Component’mscomctl.ocx’ or one of its dependencies not correctly registerd: a file ...
  • UIView控件

    2016-05-11 23:32:52
    UIView的常见对象方法 补充: 1. 什么是控件? 屏幕上的所有UI元素都叫做控件,也有人叫做视图、组件 按钮(UIButton)、文本(UILabel)都是控件 2. 控件的共同属性有哪些?- 尺寸 - 位置 - 背景色 - ......苹果将...
  • 常见CAD/CAM控件大全

    千次阅读 2013-07-01 16:32:57
     ——基于对象的软件开发工具包,提供了完全可配置的曲面和实体网格划分能力。 ModuleWorks系列控件 特点:使用于机械方面如机床等的3D控件,用户群很大  ModuleWorks是全球领先的CAD/CAM...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 83,460
精华内容 33,384
关键字:

常见控件对象