【技术实现步骤摘要】
本申请涉及终端，特别涉及一种用于显示用户界面(user interface，ui)的方法及设备。
技术介绍
1、目前，当平板、折叠手机等大屏电子设备姿态发生变化时，如平板从竖屏显示切换为横屏显示，或折叠手机从折叠态切换为展开态显示，用于显示内容的显示区域宽度增加，而应用程序按照显示区域的宽度重新布局，放大了显示内容，导致屏幕显示的内容信息量减少。
技术实现思路
1、本申请提供了一种用于显示用户界面的方法及设备，以在电子设备姿态改变切换到宽屏显示时，使得用户界面呈双页面显示，增加了电子设备显示的内容量，提升了用户体验。
2、第一方面，本申请提供一种用于显示用户界面的方法，应用于电子设备，该方法可由电子设备实现，包括：当电子设备的显示屏的第一宽高比在预设的阈值区间时，根据第二宽度和第二高度布局应用程序的用户界面，得到布局视图；布局视图包括第一部分和第二部分，第一部分和第二部分的宽度均等于第二宽度，第一部分位于第二部分的上方，第一部分和第二部分的高度之和小于或等于第二高度；其中，第二宽度小于第一宽度，第一宽度为窗口的宽度，窗口用于显示用户界面；第二高度大于第一高度，第一高度为窗口的高度；通过调整画布，使得窗口的左半部分显示第一部分，窗口的右半部分显示第二部分；其中，画布用于绘制用户界面。本申请电子设备通过根据小于显示区域宽度的第二宽度和高于显示区域高度的第二高度布局所述应用程序的用户界面，以增加布局的内容，以及通过调整画布，使得电子设备的显示屏分左右两部分显示用户界面(即用户
3、在一种可能的实现方式中，上述调整画布，包括：通过平移和/或裁切画布，使得第一画布位于窗口的左半部分，第二画布位于窗口的右半部分；其中，第一画布为画布上用于绘制第一部分的部分，第二画布为画布上用于绘制第二部分的部分。
4、在一种可能的实现方式中，上述根据第二宽度和第二高度布局应用程序的用户界面，得到布局视图之前，还包括：在显示屏的第一宽高比在阈值区间时，将应用程序获取的显示屏的宽度修改为第二宽度，以使用户界面中的元素尺寸小于或等于第一尺寸，第一尺寸为用户界面在显示屏的第二宽高比下显示的元素尺寸，第二宽高比小于第一宽高比。这样，电子设备切换到宽屏显示时，如电子设备从竖屏显示切换为横屏显示，或从折叠态显示切换为展开态显示时，显示的用户界面元素大小保持不变甚或略变小，且用户界面呈双面显示，能够有效增加显示的内容量，提升用户体验。
5、在一种可能的实现方式中，上述根据第二宽度和第二高度布局应用程序的用户界面，得到布局视图之后，还包括：遍历用户界面中的元素，判断是否存在第一元素；第一元素的顶top坐标值小于第一高度，底bottom坐标值大于第一高度；当存在第一元素时，确定偏移量和偏移方向，以使所述第一元素整体显示在所述窗口的左半部分或右半部分；将偏移量和偏移方向提供给应用程序。通过遍历查找可能被割裂的用户界面元素，并将偏移量和偏移方向提供给应用程序，使得用户界面中的元素即使经过画布调整，也可能被完整显示而不被割裂，能够进一步提升用户体验。
6、在一种可能的实现方式中，上述确定偏移量和偏移方向包括：将|top-h|、|h-bottom|、或|top-h|和|h-bottom|中的较小值作为偏移量；其中，h为第一高度；当偏移量为|top-h|时，将向下作为偏移方向；当偏移量为|h-bottom|时，将向上作为偏移方向。
7、在一种可能的实现方式中，上述通过调整画布，使得窗口的左半部分显示第一部分，窗口的右半部分显示第二部分之后，还包括：感知用户界面的点击事件；将点击事件从第一位置映射到第二位置；其中，第一位置为点击事件在显示屏右半部分中的位置，第二位置为第一位置向左偏移第二宽度，向下偏移第一高度后的位置。能够使得右半部显示的用户界面被点击的情况下，电子设备仍然能够响应。
8、在一种可能的实现方式中，上述根据第二宽度和第二高度布局所述应用程序的用户界面，得到布局视图之前，还包括：在窗口的左半部分设置第一区域；第一区域用于显示固定内容；将第一区域的信息提供给应用程序。使得应用程序的用户界面在双面显示时能够一半内容固定，一半内容滑动，满足更多的应用程序提供者的应用需求，以及进一步提升用户体验。
9、在一种可能的实现方式中，上述用于显示用户界面的方法还包括：在窗口的左半部分设置第二区域，第二区域位于第一区域的下方，第二区域显示的内容与窗口的右半部分显示的内容关联；将第二区域的信息提供给应用程序。使得应用程序的用户界面布局能够满足更多的需求，进一步提升用户体验。
10、在一种可能的实现方式中，上述根据第二宽度和第二高度布局所述应用程序的用户界面，得到布局视图，还包括：根据第二宽度和第二高度布局包含导航栏的用户界面，得到包含导航栏视图的布局视图；导航栏视图位于第二部分的下方；导航栏视图与第一部分和第二部分的高度之和小于或等于第二高度；例如，第二高度等于2×h_screen-3×h_b，其中，h_screen为第一高度，h_b为导航栏的高度。上述通过调整画布，使得窗口的左半部分显示第一部分，窗口的右半部分显示第二部分，包括：通过调整画布，使得导航栏视图在窗口中，显示在第一部分和第二部分的下方，进一步提升用户体验。
11、在一种可能的实现方式中，上述通过调整画布，使得导航栏视图在窗口中，显示在第一部分和第二部分的下方，包括：通过放大第三画布，使得导航栏视图在窗口中，显示在第一部分和第二部分的下方。例如，将第三画布的高度和宽度放大两倍。
12、第二方面，本申请提供一种用于显示用户界面的方法，应用于电子设备，包括：接收偏移量和偏移方向；根据偏移量和偏移方向制定布局规则；根据布局规则布局用户界面，以使用户界面分左右两部分显示在电子设备的显示屏中，且用户界面中的元素保持完整。该方法适配上述方法中对可能发生割裂的元素进行的处理，使得用户界面中的元素不被割裂。
13、第三方面，本申请提供一种用于显示用户界面的方法，应用于电子设备，包括：接收第一区域的信息；根据第一区域的信息制定布局规则；根据布局规则布局用户界面，以使用户界面分左右两部分显示在电子设备的显示屏中，且第一区域中的内容固定。该方法适配上述方法中设置固定区域，用于提升用户体验。
14、在一种可能的实现方式中，上述用于显示用户界面的方法还包括：接收第二区域的信息；根据第二区域的信息制定布局规则；根据布局规则布局用户界面，以使第二区域显示的内容与用户界面的右部分的内容关联，进一步提升用户体验。
15、第四方面，本申请提供一种用于显示用户界面的装置，应用于电子设备，包括：布局模块和显示模块。布局模块用于当电子设备的显示屏的第一宽高比在预设的阈值区间时，根据第二宽度和第二高度布局应用程序的用户界面，得到布局视图；布局视图包括第一部分和第二部分，第一部分和第二部分的宽度均等于第二宽度，第一部分位于第二部分本文档来自技高网...
【技术保护点】
1.一种用于显示用户界面的方法，应用于电子设备，其特征在于，包括：
2.根据权利要求1所述的方法，其特征在于，调整画布，包括：
3.根据权利要求1或2所述的方法，其特征在于，根据第二宽度和第二高度布局所述应用程序的用户界面，得到布局视图之前，还包括：
4.根据权利要求1至3任一项所述的方法，其特征在于，根据第二宽度和第二高度布局所述应用程序的用户界面，得到布局视图之后，还包括：
5.根据权利要求4所述的方法，其特征在于，确定偏移量和偏移方向包括：
6.根据权利要求1至5任一项所述的方法，其特征在于，通过调整画布，使得所述窗口的左半部分显示所述第一部分，所述窗口的右半部分显示所述第二部分之后，还包括：
7.根据权利要求1至6任一项所述的方法，其特征在于，根据第二宽度和第二高度布局所述应用程序的用户界面，得到布局视图之前，还包括：
8.根据权利要求7所述的方法，其特征在于，还包括：在所述窗口的左半部分设置第二区域，所述第二区域位于所述第一区域的下方，所述第二区域显示的内容与所述窗口的右半部分显示的内容
9.根据权利要求1至8任一项所述的方法，其特征在于，根据第二宽度和第二高度布局所述应用程序的用户界面，得到布局视图，还包括：
10.根据权利要求9所述的方法，其特征在于，通过调整画布，使得所述导航栏视图在所述窗口中，显示在所述第一部分和第二部分的下方，包括：
11.一种用于显示用户界面的方法，应用于电子设备，其特征在于，包括：
12.一种用于显示用户界面的方法，应用于电子设备，其特征在于，包括：
13.根据权利要求12所述的方法，其特征在于，还包括：
14.一种用于显示用户界面的装置，应用于电子设备，其特征在于，包括：
15.根据权利要求14所述的装置，其特征在于，所述显示模块还用于：通过平移和/或裁切所述画布，使得第一画布位于所述窗口的左半部分，第二画布位于所述窗口的右半部分；其中，所述第一画布为所述画布上用于绘制所述第一部分的部分，所述第二画布为所述画布上用于绘制所述第二部分的部分。
16.根据权利要求14或15所述的装置，其特征在于，还包括：修改模块，用于在所述布局模块根据第二宽度和第二高度布局所述应用程序的用户界面，得到布局视图之前，在所述显示屏的第一宽高比在所述阈值区间时，将所述应用程序获取的所述显示屏的宽度修改为所述第二宽度，以使所述用户界面中的元素尺寸小于或等于第一尺寸，所述第一尺寸为所述用户界面在所述显示屏的第二宽高比下显示的元素尺寸，所述第二宽高比小于所述第一宽高比。
17.根据权利要求14至16任一项所述的装置，其特征在于，还包括：
18.根据权利要求17所述的装置，其特征在于，所述偏移确定模块还用于当存在所述第一元素时，将|top-h|、|h-bottom|、或|top-h|和|h-bottom|中的较小值作为偏移量；其中，h为所述第一高度；还用于当偏移量为|top-h|时，将向下作为偏移方向；当偏移量为|h-bottom|时，将向上作为偏移方向。
19.根据权利要求14至18任一项所述的装置，其特征在于，还包括：
20.根据权利要求14至19任一项所述的装置，其特征在于，还包括：
21.根据权利要求20所述的装置，其特征在于，还包括：
22.根据权利要求14至21任一项所述的装置，其特征在于，所述布局模块还用于：根据第二宽度和第二高度布局包含导航栏的所述用户界面，得到包含导航栏视图的布局视图；所述导航栏视图位于所述第二部分的下方；所述导航栏视图与所述第一部分和所述第二部分的高度之和小于或等于所述第二高度；
23.根据权利要求22所述的装置，其特征在于，所述显示模块还用于：通过放大第三画布，使得所述导航栏视图在所述窗口中，显示在所述第一部分和第二部分的下方。
24.一种用于显示用户界面的装置，应用于电子设备，其特征在于，包括：
25.一种用于显示用户界面的装置，应用于电子设备，其特征在于，包括：
26.根据权利要求25所述的装置，其特征在于，还包括：
27.一种电子设备，其特征在于，包括上述权利要求14至23任一项所述的装置。
28.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机程序，当其在计算机上运行时，使得计算机执行权利要求1至13任一项所述的方法。
...【技术特征摘要】
1.一种用于显示用户界面的方法，应用于电子设备，其特征在于，包括：
2.根据权利要求1所述的方法，其特征在于，调整画布，包括：
3.根据权利要求1或2所述的方法，其特征在于，根据第二宽度和第二高度布局所述应用程序的用户界面，得到布局视图之前，还包括：
4.根据权利要求1至3任一项所述的方法，其特征在于，根据第二宽度和第二高度布局所述应用程序的用户界面，得到布局视图之后，还包括：
5.根据权利要求4所述的方法，其特征在于，确定偏移量和偏移方向包括：
6.根据权利要求1至5任一项所述的方法，其特征在于，通过调整画布，使得所述窗口的左半部分显示所述第一部分，所述窗口的右半部分显示所述第二部分之后，还包括：
7.根据权利要求1至6任一项所述的方法，其特征在于，根据第二宽度和第二高度布局所述应用程序的用户界面，得到布局视图之前，还包括：
8.根据权利要求7所述的方法，其特征在于，还包括：在所述窗口的左半部分设置第二区域，所述第二区域位于所述第一区域的下方，所述第二区域显示的内容与所述窗口的右半部分显示的内容关联；
9.根据权利要求1至8任一项所述的方法，其特征在于，根据第二宽度和第二高度布局所述应用程序的用户界面，得到布局视图，还包括：
10.根据权利要求9所述的方法，其特征在于，通过调整画布，使得所述导航栏视图在所述窗口中，显示在所述第一部分和第二部分的下方，包括：
11.一种用于显示用户界面的方法，应用于电子设备，其特征在于，包括：
12.一种用于显示用户界面的方法，应用于电子设备，其特征在于，包括：
13.根据权利要求12所述的方法，其特征在于，还包括：
14.一种用于显示用户界面的装置，应用于电子设备，其特征在于，包括：
15.根据权利要求14所述的装置，其特征在于，所述显示模块还用于：通过平移和/或裁切所述画布，使得第一画布位于所述窗口的左半部分，第二画布位于所述窗口的右半部分；其中，所述第一画布为所述画布上用于绘制所述第一部分的部分，所述第二画布为所述画布上用于绘制所述第二部分的部分。
16.根据权利要求14或15所述的装置，其特征在...
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。