TW201426493A - 自繪控制項的螢幕適配方法及裝置 - Google Patents

自繪控制項的螢幕適配方法及裝置 Download PDF

Info

Publication number
TW201426493A
TW201426493A TW102131770A TW102131770A TW201426493A TW 201426493 A TW201426493 A TW 201426493A TW 102131770 A TW102131770 A TW 102131770A TW 102131770 A TW102131770 A TW 102131770A TW 201426493 A TW201426493 A TW 201426493A
Authority
TW
Taiwan
Prior art keywords
margin
interface
control item
self
drawn
Prior art date
Application number
TW102131770A
Other languages
English (en)
Other versions
TWI490772B (zh
Inventor
Jian-Qiang Zhang
Chun-Hua Luo
Yu Tian
Cheng Guo
Zhi-Qiang He
Original Assignee
Tencent Tech Shenzhen Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Tencent Tech Shenzhen Co Ltd filed Critical Tencent Tech Shenzhen Co Ltd
Publication of TW201426493A publication Critical patent/TW201426493A/zh
Application granted granted Critical
Publication of TWI490772B publication Critical patent/TWI490772B/zh

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04842—Selection of displayed objects or displayed text elements
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

本發明涉及一種自繪控制項的螢幕適配方法。該方法包括：根據初始螢幕的解析度佈局自繪控制項，得到與初始螢幕適配的第一視圖；根據目標螢幕的解析度確定第一介面在目標螢幕上的適配介面；為第一介面上的自繪控制項定義容器控制項，並定義第一介面為自繪控制項的容器控制項；將第一介面按照適配介面的尺寸進行縮放，根據第一介面內的每個自繪控制項相對於其對應容器控制項的邊距的屬性對每個自繪控制項進行調整，得到第二視圖；在該目標螢幕上繪製該第二視圖。另提供一種自繪控制項的螢幕適配裝置。

Description

自繪控制項的螢幕適配方法及裝置
本發明涉及電腦技術領域，特別是涉及一種自繪控制項的螢幕適配方法及裝置。
由於目前電信網、電腦網路和有線電視網路所能夠提供的包括語音、資料、圖像等綜合多媒體的通訊業務在技術上表現的越來越趨向一致，越來越多的應用產品開始需要可以跨網路、跨終端地實現應用，例如需要在PC、移動終端設備、電視以及機上盒之間進行跨設備的應用，自然，應用產品也需要適應這些設備不同解析度的顯示幕幕，也就是說應用產品也需要適配不同的終端螢幕。
通常，終端設備的應用開發者在開發應用產品時，面對各種終端的不同螢幕解析度，需要消耗大量的時間甚至不惜為某種解析度單獨開發版本從而實現對某個平臺所有螢幕解析度的適配，重複工作量大導致開發效率低下。雖然某些設備作業系統官方提供的UI(User Interface，使用者介面)控制項支援在多解析度下的自動佈局，但是這些API(Application Programming Interface，應用程式設計發展介面)大多只適用於簡單的應用開發，對於某些複雜的場景(比如遊戲場景)，以及開發者自訂繪製的場景，就不適用了。
對於這個問題，終端設備的應用開發者在開發終端應用時，除了使用官方提供的SDK開發包(Software Development Kit，即軟體開發 套件)中的UI控制項之外，還可以依據終端設備的特點和語言類型，封裝一套自繪控制項方便終端應用的開發。這個自繪控制項庫在開發中完全取代了官方SDK提供的相關UI控制項，因此其功能可以實現任意擴充，開發比較靈活並容易實現在不同平臺中的移植，這種自繪控制項庫的典型框架結構如圖1所示。
在以IOS為作業系統的終端設備中，由於其螢幕解析度固 定都是3：2(如iphone3GS解析度為320*480，iphone4解析度為640*960)，因此在這些設備上面使用自繪控制項開發的應用程式，採用對於繪製區域的自繪控制項大小按照比例拉伸或者壓縮，座標按照比例調整，就能實現比較完美的螢幕適配。但是，在以Android為作業系統的終端設備中，由於其螢幕解析度比例不統一，自繪控制項的螢幕適配則不能進行簡單的比例運算，必須按照需求對不同位置、不同用途和不同屬性的自繪控制項分別在編碼時進行計算處理，勉強實現在多種解析度下面的自繪控制項的螢幕適配工作。
綜上所述，現有技術存在以下的問題：1、對於自繪控制項很多的複雜自繪介面，螢幕適配難度大並且適配複雜，需要分別計算每一個自繪元件在不同解析度下面的位置和大小，開發效率低下，工作量巨大。2、開發者在開發過程中需要時刻關注每個自繪控制項大小和位置，在某些控制項螢幕適配過程中，很可能不是簡單的按比例計算大小、位置，消耗在UI調試方面的時間較多，開發難度高。3、為了實現幾個自繪控制項對齊、居中等具有相互位置和大小有關聯的介面，必須增加各個自繪控制項之間的依賴，不方便介面改動和優化。
有鑑於此，如何提供簡單、高效率的自繪控制項的螢幕適配方法與裝置，係為發展本發明之主要目的。
本發明的一目的在於提供自繪控制項的螢幕適配方法，以期 達到簡單、高效的效果。為達前述目的，自繪控制項的螢幕適配方法包括根據初始螢幕的解析度佈局自繪控制項，得到與初始螢幕適配的第一視圖，第一視圖包括第一介面以及佈局於第一介面上的自繪控制項；根據目標螢幕的解析度確定第一介面該目標螢幕上的適配介面；為每個第一介面上的自繪控制項定義容器控制項，並定義第一介面為其中一個自繪控制項的容器控制項，獲取每個自繪控制項相對於其對應的容器控制項的邊距，並設定該邊距的屬性為固定邊距或縮放邊距，對應屬性為固定邊距的邊距始終保持固定不變，對應屬性為縮放邊距的邊距隨著所對應的容器控制項的縮放進行改變；將第一介面按照適配介面的尺寸進行縮放，根據第一介面內的每個自繪控制項相對於其對應容器控制項的邊距的屬性對每個自繪控制項進行調整，得到第二視圖；以及在目標螢幕上繪製第二視圖。
在本發明之一實施例中，上述之適配介面的大小與目標螢幕 的大小相同。
在本發明之一實施例中，上述之根據第一介面上的每個自繪 控制項相對於其對應容器控制項的邊距的屬性對自繪控制項進行調整，包括將第一介面按照適配介面的尺寸進行縮放；以及判斷第一介面內的每個自繪控制項相對於其對應容器控制項的每個邊距的屬性是固定邊距還是縮放邊距，如果邊距為固定邊距，則自繪控制項相對於其容器控制項的邊距保持不變，如果邊距為縮放邊距，則自繪控制項相對於其容器控制項的邊距根據該容器控制項在邊距方向上的伸縮比進行等比縮放。
本發明的另一目的在於提出一種自繪控制項的螢幕適配方 法，以期達到簡單、高效的效果。為達前述目的，該方法包括根據初始螢幕的解析度佈局自繪控制項，得到與初始螢幕適配的第一視圖，第一視圖包括第一介面以及佈局於第一介面上的自繪控制項；根據目標螢幕的解析度確定第一介面在目標螢幕上的適配介面；根據目標螢幕的解析度以及初 始螢幕的解析度計算介面預處理比例，根據介面預處理比例對第一視圖的第一介面以及自繪控制項進行等比縮放，得到第二視圖，第二視圖包括第二介面以及佈局於第二介面上的自繪控制項；為每個第二介面上的自繪控制項定義一個容器控制項，並定義第二介面為其中一個自繪控制項的容器控制項，取每個自繪控制項相對於其對應的容器控制項的邊距，設定該邊距的屬性為固定邊距或縮放邊距，對應屬性為固定邊距的邊距始終保持固定不變，對應屬性為縮放邊距的邊距隨著所對應的容器控制項的縮放進行改變；將第二介面按照適配介面的尺寸進行縮放，根據第二介面內的每個自繪控制項相對於其對應容器控制項的邊距的屬性對每個自繪控制項進行調整，得到第三視圖；以及在目標螢幕上繪製第三視圖。
在本發明之一實施例中，上述之介面預處理比例為目標螢幕 的橫向解析度與初始螢幕的橫向解析度之比以及目標螢幕的縱向解析度與初始螢幕的縱向解析度之比中的較小值。
在本發明之一實施例中，上述之適配介面的大小與該目標螢 幕的大小相同。
在本發明之一實施例中，上述之根據該第二介面內的每個自 繪控制項相對於其對應容器控制項的邊距的屬性對該自繪控制項進行調整，包括將第二介面按照適配介面的尺寸進行縮放；以及判斷第二介面內的每個自繪控制項相對於其對應容器控制項的每個邊距的屬性是固定邊距還是縮放邊距，如果邊距為固定邊距，則自繪控制項相對於其容器控制項的邊距保持不變，如果邊距為縮放邊距，則自繪控制項相對於其容器控制項的邊距根據該容器控制項在邊距方向上的伸縮比進行等比縮放。
本發明的另一目的在於提出一種自繪控制項的螢幕適配裝置，以期達到簡單、高效的效果。為達前述目的，自繪控制項的螢幕適配裝置包括初始佈局模組、目標確定模組、縮放模組、調整模組及繪製模組。其中，初始佈局模組用於根據初始螢幕的解析度佈局自繪控制項，得到與 初始螢幕適配的第一視圖，第一視圖包括第一介面以及佈局於第一介面上的自繪控制項；目標確定模組用於根據目標螢幕的解析度確定第一介面在目標螢幕上的適配介面；縮放模組用於為每個第一介面上的自繪控制項定義容器控制項，並定義第一介面為其中一個自繪控制項的容器控制項，獲取每個自繪控制項相對於其對應的容器控制項的邊距，並設定邊距的屬性為固定邊距或縮放邊距，對應屬性為固定邊距的邊距始終保持固定不變，對應屬性為縮放邊距的邊距隨著所對應的容器控制項的縮放進行改變；調整模組用於將第一介面按照適配介面的尺寸進行縮放，根據第一介面內的每個自繪控制項相對於其對應容器控制項的邊距的屬性對每個自繪控制項進行調整，得到第二視圖；以及繪製模組用於在目標螢幕上繪製第二視圖。
在本發明之一實施例中，上述之自繪控制項的螢幕適配裝 置，其中，當適配介面的大小與目標螢幕的大小相同時，目標確定模組省略，調整模組用於將第一介面按照目標螢幕的尺寸進行縮放。
在本發明之一實施例中，上述之調整模組包括介面縮放子模 組及判斷調整子模組。其中，介面縮放子模組用於將第一介面按照適配介面的尺寸進行縮放；判斷調整子模組用於判斷第一介面內的每個自繪控制項相對於其對應容器控制項的每個邊距的屬性是固定邊距還是縮放邊距，如果邊距為固定邊距，則自繪控制項相對於其容器控制項的邊距保持不變，如果邊距為縮放邊距，則自繪控制項相對於其容器控制項的邊距根據該容器控制項在邊距方向上的伸縮比進行等比縮放。
本發明的另一目的在於提出一種自繪控制項的螢幕適配裝 置，以期達到簡單、高效的效果。為達前述目的，自繪控制項的螢幕適配裝置包括初始佈局模組、目標確定模組、預處理模組、縮放模組、調整模組及繪製模組。其中，初始佈局模組用於根據初始螢幕的解析度佈局自繪控制項，得到與初始螢幕適配的第一視圖，第一視圖包括第一介面以及佈局於第一介面上的自繪控制項；目標確定模組用於根據目標螢幕的解析度 確定第一介面在目標螢幕上的適配介面；預處理模組用於根據目標螢幕的解析度以及初始螢幕的解析度計算介面預處理比例，根據介面預處理比例對第一視圖的第一介面以及自繪控制項進行等比縮放，得到第二視圖，該第二視圖包括第二介面以及佈局於該第二介面上的自繪控制項；縮放模組用於為每個該第二介面上的自繪控制項定義一個容器控制項，並定義第二介面為其中一個自繪控制項的容器控制項，獲取每個自繪控制項相對於其對應的容器控制項的邊距，設定邊距的屬性為固定邊距或縮放邊距，對應屬性為固定邊距的邊距始終保持固定不變，對應屬性為縮放邊距的邊距隨著所對應的容器控制項的縮放進行改變；調整模組用於將第二介面按照該適配介面的尺寸進行縮放，根據第二介面內的每個自繪控制項相對於其對應容器控制項的邊距的屬性對每個自繪控制項進行調整，得到第三視圖；以及繪製模組用於在目標螢幕上繪製第三視圖。
在本發明之一實施例中，上述之自繪控制項的螢幕適配裝 置，其中，該適配介面的大小與目標螢幕的大小相同時，目標確定模組省略，調整模組用於將第二介面按照目標螢幕的尺寸進行縮放。
在本發明之一實施例中，上述之介面預處理比例為目標螢幕 的橫向解析度與初始螢幕的橫向解析度之比以及目標螢幕的縱向解析度與初始螢幕的縱向解析度之比中的較小值。
在本發明之一實施例中，上述之調整模組包括介面縮放子模 組及判斷調整子模組。其中，介面縮放子模組用於將第二介面按照適配介面的尺寸進行縮放；以及判斷調整子模組用於判斷第二介面內的每個自繪控制項相對於其對應容器控制項的每個邊距的屬性是固定邊距還是縮放邊距，如果邊距為固定邊距，則自繪控制項相對於其容器控制項的邊距保持不變，如果邊距為縮放邊距，則自繪控制項相對於其容器控制項的邊距根據容器控制項在邊距方向上的伸縮比進行等比縮放。
為更進一步闡述本發明為達成預定發明目的所採取的技術 手段及功效，以下結合附圖及較佳實施例，對依據本發明提出的自繪控制項的螢幕適配方法及裝置其具體實施方式、方法、步驟、結構、特徵及其功效，詳細說明如下。
11、21、31、41‧‧‧初始螢幕
12、32‧‧‧第一視圖
121、221、321、421‧‧‧第一介面
122、322‧‧‧自繪控制項
123、323‧‧‧顯示區域
13、23、33、43‧‧‧目標螢幕
14、34‧‧‧適配介面
15、35、45‧‧‧第二視圖
36‧‧‧第三視圖
51、61、71、81‧‧‧初始佈局模組
52、72‧‧‧目標確定模組
53、62、74、83‧‧‧縮放模組
54、63、75、84‧‧‧調整模組
541、751‧‧‧介面縮放子模組
542、752‧‧‧判斷調整子模組
55、64、76、85‧‧‧繪製模組
73、82‧‧‧預處理模組
A1、A2‧‧‧自繪控制項
B‧‧‧容器控制項
S11、S12、S13、S14、S15‧‧‧本發明第一實施例中的自繪控制項的螢幕適配方法之步驟流程
S141、S142、S143、S144‧‧‧本發明第一實施例中步驟S14之具體步驟流程
S21、S22、S23、S24‧‧‧本發明第二實施例中的自繪控制項的螢幕適配方法之步驟流程
S31、S32、S33、S34、S35、S36‧‧‧本發明第三實施例中的自繪控制項的螢幕適配方法之步驟流程
S41、S42、S43、S44、S45‧‧‧本發明第四實施例中的自繪控制項的螢幕適配方法之步驟流程
圖1是現有技術中自繪控制項庫的典型框架結構。
圖2是本發明第一實施例中的自繪控制項的螢幕適配方法的流程示意圖。
圖3是本發明第一實施例中初始螢幕以及第一視圖與目標螢幕的比較示意圖。
圖4是自繪控制項相對於容器控制項的邊距示意圖。
圖5是容器控制項B的大小發生改變前後，自繪控制項A1與自繪控制項A2相對於容器控制項B的大小、位置的對比示意圖。
圖6是圖2中步驟S14的具體流程示意圖。
圖7是本發明第一實施例在目標螢幕上完成第二視圖繪製後的效果圖。
圖8是本發明第二實施例中的自繪控制項的螢幕適配方法的流程示意圖。
圖9是本發明第二實施例中初始螢幕與目標螢幕的比較示意圖。
圖10是本發明第二實施例在目標螢幕上完成第二視圖繪製後的效果圖。
圖11是本發明第三實施例中的自繪控制項的螢幕適配方法的流程示意圖。
圖12是本發明第三實施例中初始螢幕與目標螢幕的比較示意圖。
圖13是本發明第三實施例經過介面預處理之後得到的第二視圖與目 標螢幕的比較效果圖。
圖14是本發明第三實施例在目標螢幕上完成第三視圖繪製後的效果圖。
圖15是本發明第四實施例中的自繪控制項的螢幕適配方法的流程示意圖。
圖16是本發明第四實施例中初始螢幕與目標螢幕的比較示意圖。
圖17是本發明第四實施例經過介面預處理之後得到的第二視圖與目標螢幕的比較效果圖。
圖18是本發明第四實施例在目標螢幕上完成第三視圖繪製後的效果圖。
圖19是本發明第五實施例中的自繪控制項的螢幕適配裝置的結構示意圖。
圖20是本發明第六實施例中的自繪控制項的螢幕適配裝置的結構示意圖。
圖21是本發明第七實施例中的自繪控制項的螢幕適配裝置的結構示意圖。
圖22是本發明第八實施例中的自繪控制項的螢幕適配裝置的結構示意圖。
有關本發明的前述及其他技術內容、特點及功效，在以下配 合參考圖式的較佳實施例的詳細說明中將可清楚呈現。透過具體實施方式的說明，當可對本發明為達成預定目的所採取的技術手段及功效得以更加深入且具體的瞭解，然而所附圖式僅是提供參考與說明之用，並非用來對本發明加以限制。
本發明的說明書和申請專利範圍及上述附圖中的術語“第 一”、“第二”、“第三”、“第四”等(如果存在)是用於區別類似的物件，而不必用於描述特定的順序或先後次序。應可理解這樣使用的資料在適當情況下可以互換，以便這裡描述的本發明之實施例例如能夠以除了在這裡圖示或描述的那些以外的順序實施。此外，術語“包括，，和“具有”以及他們的任何變形，意圖在於覆蓋不排他的包含，例如，包含了一系列步驟或單元的過程、方法、系統、產品或設備，不必限於清楚地列出的那些步驟或單元，而是可包括沒有清楚地列出的或對於這些過程、方法、產品或設備固有的其它步驟或單元。
參見圖2，圖2為本發明第一實施例中的自繪控制項的螢幕適配方法的流程示意圖。本實施例中的自繪控制項的螢幕適配方法包括：步驟S11：根據初始螢幕的解析度佈局自繪控制項，得到與該初始螢幕適配的第一視圖，該第一視圖包括第一介面以及佈局於該第一介面上的自繪控制項。
螢幕解析度即顯示器上面可以顯示的圖元個數，如螢幕解析度為480*800的螢幕橫向有480個畫素、縱向有800個畫素。請同時參照圖3，於步驟S11中，按照初始螢幕11(或設計稿)的解析度佈局各個自繪控制項得到與初始螢幕11適配的第一視圖12，第一視圖12包括第一介面121以及佈局於該第一介面121上的多個自繪控制項122，圖3中以自繪控制項122為介面標題列(title)、介面的三個按鈕(button)以及顯示區域123中的六個專案(item)為例，當然，本發明並不以自繪控制項的具體佈局為限。第一視圖12中的所有自繪控制項122沒有經過任何座標和大小的轉換，在具有與初始螢幕11相同解析度的終端螢幕上面可以完美適配。
步驟S12：根據目標螢幕的解析度確定該第一介面在該目標螢幕上的適配介面。請參照圖3，圖3中目標螢幕13由虛線表示，在目標螢幕13上面繪製介面之前，需要得到目標螢幕13的螢幕解析度。於步驟S12中，根據目標螢幕13的解析度確定該第一介面121在該目標螢幕13 上的適配介面14的尺寸，也就是第一介面121在目標螢幕13上完美適配的適配介面14的尺寸，可以將第一介面121按照目標螢幕與初始螢幕的比例拉伸或者壓縮得到適配介面14。
步驟S13：為每個第一介面上的自繪控制項定義一個容器控制項，並定義該第一介面為其中一個自繪控制項的容器控制項，獲取每個自繪控制項相對於其對應的容器控制項的邊距，並設定該邊距的屬性為固定邊距或縮放邊距，對應屬性為固定邊距的邊距始終保持固定不變，對應屬性為縮放邊距的邊距隨著所對應的容器控制項的縮放進行改變。
步驟S14：將該第一介面按照適配介面的尺寸進行縮放，根據該第一介面內的每個自繪控制項相對於其對應容器控制項的邊距的屬性對每個自繪控制項進行調整，得到第二視圖。
步驟S13以及步驟S14是對第一介面進行縮放並對其上的自繪控制項的佈局進行微調的過程。對於任意一個自繪控制項(component)都可以定義一個容器控制項(container)，例如，可以定義第一視圖12中的標題列的容器控制項為第一介面121，可以定義第一視圖12中的按鈕的容器控制項為標題列。這樣，自繪控制項的大小、位置就可以抽象為相對於其容器控制項的上、下、左、右四個邊距，如圖4所示。因此，當對應的容器控制項的大小發生變化時，可以透過控制自繪控制項的四個邊距，來定位變化之後的自繪控制項的位置和大小。
具體的，可以定義自繪控制項相對於其容器控制項的四個邊距分別為：左邊距(margin_lift)、右邊距(margin_right)、上邊距(margin_top)、下邊距(margin_bottom)，則自繪控制項(component)在容器控制項(container)中的位置(x,y)為(margin_lift,margin_top)，寬度為：container.width-margin_lift-margin_right，高度為：container.height-margin_top-margin_bottom。同時，自繪控制項的大小、位置可以表示為(橫坐標、縱坐標、寬度、高度)。
對這四個邊距的屬性分別進行設定，邊距的屬性可以設定為固定邊距(margin_fix)或者縮放邊距(margin_zoom)，以下將分別介紹這兩種屬性。
(1)固定邊距(margin_fix)：即自繪控制項相對於其容器控制項的某個邊距固定大小不變，例如自繪控制項的左邊距和右邊距設置為margin_fix，則無論容器控制項大小如何變化，自繪控制項相對於其容器控制項的左、右邊距始終保持不變，自繪控制項的寬度為container.width’(容器控制項的目標寬度)-margin_lift-margin_right，自繪控制項的高度為container.height’(容器控制項的目標高度)-margin_lift-margin_right。請參照圖5，圖5左邊表示的是在容器控制項B的大小發生改變前，自繪控制項A1與自繪控制項A2相對於容器控制項B的大小、位置；圖5右邊表示的是在容器控制項B的大小發生改變後，自繪控制項A1與自繪控制項A2相對於容器控制項B的大小、位置。以圖5中的自繪控制項A1為例，在其容器控制項B的大小發生改變前自繪控制項A1的左、右邊距分別為：margin_lift=40，margin_right=290；設置margin_lift、margin_right的屬性為margin_fix，則當容器控制項B的寬度由480變大為700時，保持自繪控制項A1相對於容器控制項B的左、右邊距不變，自繪控制項A1的寬度變為：width=700-margin_lift-margin_right=370，自繪控制項A1的座標、大小變為(40,40,370,80)。
(2)縮放邊距(margin_zoom)：即自繪控制項的邊距隨著所對應的容器控制項的縮放進行改變。具體的，容器控制項大小改變後，自繪控制項中被設定為縮放邊距的某個邊距=改變前的該邊距*容器控制項目標大小/容器控制項原始大小。以圖5中的自繪控制項A2為例，其左邊距、右邊距設置為margin_zoom，則：容器控制項B的大小改變前，自繪控制項A2的左、右邊距分別為：margin_lift=240，margin_right=480-240-150=90，當容器控制項B的大小變化之後，自繪控制項A2相對於 容器控制項B的左、右邊距分別為：margin_lift=240*700/480=350，margin_right=90*700/480=132，因此，自繪控制項A2的寬度變為：700-350-132=218，自繪控制項A2的座標、大小變為(380,220,218,80)。
同理，對上、下邊距也可以設置其屬性為固定邊距或者縮放邊距，從而實現當容器控制項的大小發生變化時，根據自繪控制項的邊距的屬性可以靈活地對自繪控制項進行佈局調整，使得自繪控制項在第二視圖中的佈局更加協調，更加美觀。
於步驟S13至步驟S14中，透過設定自繪控制項相對於其對應的容器控制項的四個邊距的屬性，按照其屬性對對應邊距進行處理，可以實現自繪控制項在其容器控制項中的佈局的調整，同時，自繪控制項自身也可以為其他自繪控制項的容器控制項。於本實施例中，第一介面被定義為其中一個自繪控制項的容器控制項，當然，第一介面也可以為其他自繪控制項的容器控制項，被定義以第一介面為容器控制項的該自繪控制項也可以作為其他自繪控制項的容器控制項。也就是說，可以將第一介面定義為其他所有自繪控制項的容器控制項，也可以將第一介面定義為一個自繪控制項(例如標題列)的容器控制項，而該自繪控制項(標題列)又作為其他自繪控制項(例如按鈕)的容器控制項，也就是將第一介面定義為第一層容器控制項，該自繪控制項(標題列)定義為第二層容器控制項，如果有需要，還可以繼續第三層容器控制項、第四層容器控制項等。這樣，當第一層容器控制項，也就是第一介面的大小發生變化時，每個自繪控制項的佈局都可以按照自己邊距的屬性被調整，透過遍歷每個UI控制項，最終可以實現所有自繪控制項的螢幕適配處理。
具體的，請參照圖6，步驟S14中可以包括以下步驟：步驟S141：將第一介面按照適配介面的尺寸進行縮放；步驟S142：判斷第一介面內的每個自繪控制項相對於其對應容器控制項的每個邊距的屬性是固定邊距還是縮放邊距，如果該邊距為 固定邊距，則進行步驟S143，如果該邊距為縮放邊距，則進行步驟S144；步驟S143：該自繪控制項相對於其容器控制項的邊距保持不變(可參照圖5中的自繪控制項A1)；步驟S144：該自繪控制項相對於其容器控制項的邊距根據該容器控制項在邊距方向上的伸縮比進行等比縮放(可參照圖5中的自繪控制項A2)。
“邊距方向”指的是與該邊距的測量方向相同的方向，例如左、右邊距的方向為橫向，上、下邊距的方向為縱向。假設容器控制項在橫向的伸縮比為a，那麼自繪控制項的左、右邊距也根據伸縮比a進行縮放，假設容器控制項在縱向的伸縮比為b，那麼自繪控制項的上、下邊距也根據伸縮比b進行縮放。
最後進行步驟S15：在該目標螢幕上繪製該第二視圖。
在目標螢幕上對第二視圖進行全螢幕繪製，最終實現在具有目標螢幕解析度的目標終端螢幕上面的完美適配，請參照圖7，圖7為在目標螢幕13上完成第二視圖15繪製後的效果圖。
相對於現有技術，本實施例提出的自繪控制項的螢幕適配方法，使用介面縮放與控制項佈局調整的介面處理方式，方法簡單，效率高，並且可以使應用軟體在UI上各種自繪控制項的佈局更加協調、更加美觀。
另外，該方法使用的原始UI資源少，安裝包小，安裝門檻降低，代碼維護也比較簡單，螢幕上各種自繪控制項耦合小，更方便代碼維護。
圖8為本發明第二實施例中的自繪控制項的螢幕適配方法的流程示意圖。請參照圖8，本實施例中的自繪控制項的螢幕適配方法包括：步驟S21：根據初始螢幕的解析度佈局自繪控制項，得到與該初始螢幕適配的第一視圖，該第一視圖包括第一介面以及佈局於該第一介面上的自繪控制項；步驟S22：為每個第一介面上的自繪控制項定義一個容器控 制項，並定義該第一介面為其中一個自繪控制項的容器控制項，獲取每個自繪控制項相對於其對應的容器控制項的邊距，並設定該邊距的屬性為固定邊距或縮放邊距，對應屬性為固定邊距的邊距始終保持固定不變，對應屬性為縮放邊距的邊距隨著所對應的容器控制項的縮放進行改變；步驟S23：將該第一介面按照目標螢幕的尺寸進行縮放，根據該第一介面內的每個自繪控制項相對於其對應容器控制項的邊距的屬性對每個自繪控制項進行調整，得到第二視圖；步驟S24：在該目標螢幕上繪製該第二視圖。
請同時參照圖9、圖10，與第一實施例不同的是，於本實施例中，第一介面221的大小與初始螢幕21的大小相同，或者說第一介面221佈滿整個初始螢幕21，因此，第一介面221的適配介面的大小與目標螢幕23的大小相同，因此第一實施例中的步驟S12在本實施例中可以省略，於步驟S23中，直接將該第一介面221按照目標螢幕23的尺寸進行縮放，然後根據該第一介面內的每個自繪控制項相對於其對應容器控制項的邊距的屬性對每個自繪控制項進行調整，得到第二視圖。其他步驟與第一實施例中的相關步驟相同，因此這裡不再贅述。請參照圖10，最後，在目標螢幕23上完成對第二視圖的繪製。
圖11為本發明第三實施例中的自繪控制項的螢幕適配方法的流程示意圖。請參照圖11，本實施例中的自繪控制項的螢幕適配方法包括：步驟S31：根據初始螢幕的解析度佈局自繪控制項，得到與該初始螢幕適配的第一視圖，該第一視圖包括第一介面以及佈局於該第一介面上的自繪控制項。
步驟S32：根據目標螢幕的解析度確定該第一介面在該目標螢幕上的適配介面。
步驟S33：根據該目標螢幕的解析度以及該初始螢幕的解析 度計算介面預處理比例，根據該介面預處理比例對該第一視圖的第一介面以及自繪控制項進行等比縮放，得到第二視圖，該第二視圖包括第二介面以及佈局於該第二介面上的自繪控制項。
於該步驟中，需要確定一個介面預處理比例，該介面預處理比例為目標螢幕的橫向解析度與初始螢幕的橫向解析度之比以及目標螢幕的縱向解析度與初始螢幕的縱向解析度之比中的較小值。
請同時參照圖12，圖12中包括按照初始螢幕31(或設計稿)的解析度佈局的各個自繪控制項得到與該初始螢幕31適配的第一視圖32，第一視圖32包括第一介面321以及佈局於該第一介面321上的多個自繪控制項322，圖7中以自繪控制項為標題列(title)、三個按鈕(button)以及六個項目(item)為例。第一視圖32中的所有自繪控制項322沒有經過任何座標和大小的轉換，在具有初始螢幕解析度的終端螢幕上面可以完美適配。其中，初始螢幕31的橫向解析度(寬度)為w個畫素，初始螢幕31的縱向解析度(高度)為h個畫素。圖12中還包括目標螢幕33，由虛線表示，在目標螢幕33上面繪製介面之前，需要得到目標螢幕33的螢幕解析度。例如，圖12中的目標螢幕33的橫向解析度(寬度)為W個畫素，縱向解析度(高度)為H個畫素。於步驟S32中，根據目標螢幕33的解析度確定該第一介面321在該目標螢幕33上的適配介面34的尺寸，也就是第一介面121在目標螢幕13上完美適配的適配介面34的尺寸。介面預處理比例f為min(目標螢幕的橫向解析度W/初始螢幕的橫向解析度w，目標螢幕的縱向解析度H/初始螢幕的縱向解析度h)，即取目標螢幕與初始螢幕寬、高比例中的較小值，這樣在進行預處理時，盡可能滿足處理之後的視圖在橫向或縱向已經實現螢幕適配。例如目標螢幕解析度為480*854，初始螢幕的解析度為320*480，則介面預處理比例f=min(480/320,854/480)=1.5。請參照圖13，圖13為經過介面預處理之後得到的第二視圖35與目標螢幕33的比較效果圖。
步驟S34：為每個該第二介面上的自繪控制項定義一個容器 控制項，並定義該第二介面為其中一個自繪控制項的容器控制項，獲取每個自繪控制項相對於其對應的容器控制項的邊距，設定該邊距的屬性為固定邊距或縮放邊距，對應屬性為固定邊距的邊距始終保持固定不變，對應屬性為縮放邊距的邊距隨著所對應的容器控制項的縮放進行改變。
步驟S35：將該第二介面按照該適配介面的尺寸進行縮放，根據該第二介面內的每個自繪控制項相對於其對應容器控制項的邊距的屬性對每個自繪控制項進行調整，得到第三視圖。
步驟S36：在該目標螢幕上繪製該第三視圖。
請參照圖14，圖14所示為在目標螢幕33上完成第三視圖36後的效果圖。相對於現有技術，本實施例提出的自繪控制項的螢幕適配方法，在對控制項進行佈局調整前，還增加了對第一視圖進行預處理的步驟，這樣在進行預處理時，盡可能滿足處理之後的視圖在橫向或縱向已經螢幕適配，一方面可以使適配效果更好，另一方面可以加快適配的速度，特別適用於初始螢幕與目標螢幕的解析度相差較大的情況。
圖15為本發明第四實施例中的自繪控制項的螢幕適配方法的流程示意圖。請參照圖15，本實施例中的自繪控制項的螢幕適配方法包括：步驟S41：根據初始螢幕的解析度佈局自繪控制項，得到與該初始螢幕適配的第一視圖，該第一視圖包括第一介面以及佈局於該第一介面上的自繪控制項。
步驟S42：根據該目標螢幕的解析度以及該初始螢幕的解析度計算介面預處理比例，根據該介面預處理比例對該第一視圖的第一介面以及自繪控制項進行等比縮放，得到第二視圖，該第二視圖包括第二介面以及佈局於該第二介面上的自繪控制項。
步驟S43：為每個該第二介面上的自繪控制項定義一個容器控制項，並定義該第二介面為其中一個自繪控制項的容器控制項，獲取每 個自繪控制項相對於其對應的容器控制項的邊距，設定該邊距的屬性為固定邊距或縮放邊距，對應屬性為固定邊距的邊距始終保持固定不變，對應屬性為縮放邊距的邊距隨著所對應的容器控制項的縮放進行改變。
步驟S44：將該第二介面按照該目標螢幕的尺寸進行縮放，根據該第二介面內的每個自繪控制項相對於其對應容器控制項的邊距的屬性對每個自繪控制項進行調整，得到第三視圖。
步驟S45：在該目標螢幕上繪製該第三視圖。
請同時參照圖16至圖18，與第三實施例不同的是，於本實施例中，第一介面421的大小與初始螢幕41的大小相同，或者說第一介面421佈滿整個初始螢幕41(請參照圖16)，因此，第一介面421的適配介面的大小與目標螢幕43的大小相同，因此第三實施例中的步驟S32在本實施例中可以省略。圖17為本實施例經過介面預處理之後得到的第二視圖45與目標螢幕43的比較效果圖。於步驟S44中，直接將該第二介面按照該目標螢幕的尺寸進行縮放，根據該第二介面內的每個自繪控制項相對於其對應容器控制項的邊距的屬性對每個自繪控制項進行調整，得到第三視圖。其他步驟與第三實施例中的相關步驟相同，因此這裡不再贅述。請參照圖18，最後，在目標螢幕43上完成對第三視圖的繪製。
圖19為本發明第五實施例中的自繪控制項的螢幕適配裝置的結構示意圖。請參照圖19，本實施例提出的自繪控制項的螢幕適配裝置用於實現第一實施例提出的自繪控制項的螢幕適配方法，包括：初始佈局模組51、目標確定模組52、縮放模組53、調整模組54、繪製模組55。
初始佈局模組51用於根據初始螢幕的解析度佈局自繪控制項，得到與該初始螢幕適配的第一視圖，該第一視圖包括第一介面以及佈局於該第一介面上的自繪控制項。目標確定模組52用於根據目標螢幕的解析度確定該第一介面在該目標螢幕上的適配介面。縮放模組53用於為每個第一介面上的自繪控制項定義一個容器控制項，並定義該第一介面為其中 一個自繪控制項的容器控制項，獲取每個自繪控制項相對於其對應的容器控制項的邊距，並設定該邊距的屬性為固定邊距或縮放邊距，對應屬性為固定邊距的邊距始終保持固定不變，對應屬性為縮放邊距的邊距隨著所對應的容器控制項的縮放進行改變。調整模組54用於將該第一介面按照該適配介面的尺寸進行縮放，根據該第一介面內的每個自繪控制項相對於其對應容器控制項的邊距的屬性對每個自繪控制項進行調整，得到第二視圖。繪製模組55用於在該目標螢幕上繪製該第二視圖。
調整模組54包括介面縮放子模組541、判斷調整子模組542。介面縮放子模組541用於將該第一介面按照該適配介面的尺寸進行縮放。判斷調整子模組542用於判斷該第一介面內的每個自繪控制項相對於其對應容器控制項的每個邊距的屬性是固定邊距還是縮放邊距，如果該邊距為固定邊距，則該自繪控制項相對於其容器控制項的該邊距保持不變，如果該邊距為縮放邊距，則該自繪控制項相對於其容器控制項的該邊距根據該容器控制項在該邊距方向上的伸縮比進行等比縮放。
圖20為本發明第六實施例中的自繪控制項的螢幕適配裝置的結構示意圖。請參照圖20，本實施例提出的自繪控制項的螢幕適配裝置用於實現第二實施例提出的自繪控制項的螢幕適配方法，包括：初始佈局模組61、縮放模組62、調整模組63、繪製模組64。於本實施例中，第一介面的適配介面的大小與目標螢幕的大小相同，因此第五實施例中的目標確定模組52在本實施例中可以省略，調整模組63用於將該第一介面按照該目標螢幕的尺寸進行縮放。其他模組與第五實施例中的相關模組相同，因此這裡不再贅述。
圖21為本發明第七實施例中的自繪控制項的螢幕適配裝置的結構示意圖。請參照圖21，本實施例提出的自繪控制項的螢幕適配裝置用於實現第三實施例提出的自繪控制項的螢幕適配方法，包括：初始佈局模組71、目標確定模組72、預處理模組73、縮放模組74、調整模組75、 繪製模組76。
初始佈局模組71用於根據初始螢幕的解析度佈局自繪控制項，得到與該初始螢幕適配的第一視圖，該第一視圖包括第一介面以及佈局於該第一介面上的自繪控制項。目標確定模組72用於根據目標螢幕的解析度確定該第一介面在該目標螢幕上的適配介面。預處理模組73用於根據該目標螢幕的解析度以及該初始螢幕的解析度計算介面預處理比例，根據該介面預處理比例對該第一視圖的第一介面以及自繪控制項進行等比縮放，得到第二視圖，該第二視圖包括第二介面以及佈局於該第二介面上的自繪控制項。該介面預處理比例為目標螢幕的橫向解析度與初始螢幕的橫向解析度之比以及目標螢幕的縱向解析度與初始螢幕的縱向解析度之比中的較小值。縮放模組74用於為每個該第二介面上的自繪控制項定義一個容器控制項，並定義該第二介面為其中一個自繪控制項的容器控制項，獲取每個自繪控制項相對於其對應的容器控制項的邊距，設定該邊距的屬性為固定邊距或縮放邊距，對應屬性為固定邊距的邊距始終保持固定不變，對應屬性為縮放邊距的邊距隨著所對應的容器控制項的縮放進行改變。調整模組75用於將該第二介面按照該適配介面的尺寸進行縮放，根據該第二介面內的每個自繪控制項相對於其對應容器控制項的邊距的屬性對每個自繪控制項進行調整，得到第三視圖。繪製模組76用於在該目標螢幕上繪製該第三視圖。
圖22為本發明第八實施例中的自繪控制項的螢幕適配裝置的結構示意圖。請參照圖22，本實施例提出的自繪控制項的螢幕適配裝置用於實現第四實施例提出的自繪控制項的螢幕適配方法，包括：初始佈局模組81、預處理模組82、縮放模組83、調整模組84、繪製模組85。於本實施例中，第一介面的適配介面的大小與目標螢幕的大小相同，因此第七實施例中的目標確定模組72在本實施例中可以省略，調整模組84用於將該第二介面按照該目標螢幕的尺寸進行縮放。其他模組與第七實施例中的 相關模組相同，因此這裡不再贅述。
綜上所述，相對於現有技術，本發明提出的自繪控制項的螢幕適配方法，使用介面縮放與控制項佈局微調的介面處理方式，方法簡單，效率高，並且可以使應用軟體在UI上各種自繪控制項的佈局更加協調、更加美觀。另外，該方法使用的原始UI資源少，安裝包小，安裝門檻降低，代碼維護也比較簡單，螢幕上各種自繪控制項耦合小，更方便代碼維護。
需要說明的是，本說明書中的各個實施例均採用遞進的方式描述，每個實施例重點說明的都是與其他實施例的不同之處，各個實施例之間相同相似的部分互相參見即可。對於裝置類實施例而言，由於其與方法實施例基本相似，所以描述的比較簡單，相關之處參見方法實施例的部分說明即可。
本領域中具有通常知識者可以理解實現上述實施例的全部或部分步驟可以透過硬體來完成，也可以透過程式來指令相關的硬體完成，該的程式可以存儲於一種電腦可讀存儲介質中，上述提到的存儲介質可以是唯讀記憶體，磁片或光碟等。
以上所述，僅是本發明的較佳實施例而已，並非對本發明作任何形式上的限制，雖然本發明已以較佳實施例揭露如上，然而並非用以限定本發明，任何熟悉本專業的技術人員，在不脫離本發明技術方案範圍內，當可利用上述揭示的技術內容做出些許更動或修飾為等同變化的等效實施例，但凡是未脫離本發明技術方案內容，依據本發明的技術實質對以上實施例所作的任何簡單修改、等同變化與修飾，均仍屬於本發明技術方案的範圍內。
S11、S12、S13、S14、S15‧‧‧本發明第一實施例中的自繪控制項的螢幕適配方法之步驟流程

Claims (14)

  1. 一種自繪控制項的螢幕適配方法，其包括：根據一初始螢幕的解析度佈局自繪控制項，得到與該初始螢幕適配的一第一視圖，該第一視圖包括一第一介面以及佈局於該第一介面上的自繪控制項；根據一目標螢幕的解析度確定該第一介面在該目標螢幕上的一適配介面；為每個第一介面上的自繪控制項定義一容器控制項，並定義該第一介面為其中一個自繪控制項的容器控制項，獲取每個自繪控制項相對於其對應的容器控制項的邊距，並設定該邊距的屬性為固定邊距或縮放邊距，對應屬性為固定邊距的邊距始終保持固定不變，對應屬性為縮放邊距的邊距隨著所對應的容器控制項的縮放進行改變；將該第一介面按照該適配介面的尺寸進行縮放，根據該第一介面內的每個自繪控制項相對於其對應容器控制項的邊距的屬性對每個自繪控制項進行調整，得到一第二視圖；以及在該目標螢幕上繪製該第二視圖。
  2. 如申請專利範圍第1項所述之自繪控制項的螢幕適配方法，其中，該適配介面的大小與該目標螢幕的大小相同。
  3. 如申請專利範圍第1項所述之自繪控制項的螢幕適配方法，其中，根據該第一介面上的每個自繪控制項相對於其對應容器控制項的邊距的屬性對該自繪控制項進行調整，包括：將該第一介面按照該適配介面的尺寸進行縮放；以及判斷該第一介面內的每個自繪控制項相對於其對應容器控制項的每個邊距的屬性是固定邊距還是縮放邊距， 如果該邊距為固定邊距，則該自繪控制項相對於其容器控制項的該邊距保持不變，如果該邊距為縮放邊距，則該自繪控制項相對於其容器控制項的該邊距根據該容器控制項在該邊距方向上的伸縮比進行等比縮放。
  4. 一種自繪控制項的螢幕適配方法，其包括：根據一初始螢幕的解析度佈局自繪控制項，得到與該初始螢幕適配的一第一視圖，該第一視圖包括一第一介面以及佈局於該第一介面上的自繪控制項；根據一目標螢幕的解析度確定該第一介面在該目標螢幕上的一適配介面；根據該目標螢幕的解析度以及該初始螢幕的解析度計算介面預處理比例，根據該介面預處理比例對該第一視圖的該第一介面以及自繪控制項進行等比縮放，得到一第二視圖，該第二視圖包括一第二介面以及佈局於該第二介面上的自繪控制項；為每個該第二介面上的自繪控制項定義一個容器控制項，並定義該第二介面為其中一個自繪控制項的容器控制項，獲取每個自繪控制項相對於其對應的容器控制項的邊距，設定該邊距的屬性為固定邊距或縮放邊距，對應屬性為固定邊距的邊距始終保持固定不變，對應屬性為縮放邊距的邊距隨著所對應的容器控制項的縮放進行改變；將該第二介面按照該適配介面的尺寸進行縮放，根據該第二介面內的每個自繪控制項相對於其對應容器控制項的邊距的屬性對每個自繪控制項進行調整，得到一第三視圖；以及在該目標螢幕上繪製該第三視圖。
  5. 如申請專利範圍第4項所述之自繪控制項的螢幕適配方法，其中， 該介面預處理比例為該目標螢幕的橫向解析度與該初始螢幕的橫向解析度之比以及該目標螢幕的縱向解析度與該初始螢幕的縱向解析度之比中的較小值。
  6. 如申請專利範圍第4項所述之自繪控制項的螢幕適配方法，其中，該適配介面的大小與該目標螢幕的大小相同。
  7. 如申請專利範圍第6項所述之自繪控制項的螢幕適配方法，其中，根據該第二介面內的每個自繪控制項相對於其對應容器控制項的邊距的屬性對該自繪控制項進行調整，包括：將該第二介面按照該適配介面的尺寸進行縮放；以及判斷該第二介面內的每個自繪控制項相對於其對應容器控制項的每個邊距的屬性是固定邊距還是縮放邊距，如果該邊距為固定邊距，則該自繪控制項相對於其容器控制項的該邊距保持不變，如果該邊距為縮放邊距，則該自繪控制項相對於其容器控制項的該邊距根據該容器控制項在該邊距方向上的伸縮比進行等比縮放。
  8. 一種自繪控制項的螢幕適配裝置，其包括：一初始佈局模組，用於根據一初始螢幕的解析度佈局自繪控制項，得到與該初始螢幕適配的一第一視圖，該第一視圖包括一第一介面以及佈局於該第一介面上的自繪控制項；一目標確定模組，用於根據一目標螢幕的解析度確定該第一介面在該目標螢幕上的一適配介面；一縮放模組，用於為每個該第一介面上的自繪控制項定義一容器控制項，並定義該第一介面為其中一個自繪控制項的容器控制項，獲取每個自 繪控制項相對於其對應的容器控制項的邊距，並設定該邊距的屬性為固定邊距或縮放邊距，對應屬性為固定邊距的邊距始終保持固定不變，對應屬性為縮放邊距的邊距隨著所對應的容器控制項的縮放進行改變；一調整模組，用於將該第一介面按照該適配介面的尺寸進行縮放，根據該第一介面內的每個自繪控制項相對於其對應容器控制項的邊距的屬性對每個自繪控制項進行調整，得到一第二視圖；以及一繪製模組，用於在該目標螢幕上繪製該第二視圖。
  9. 如申請專利範圍第8項所述之自繪控制項的螢幕適配裝置，其中，當該適配介面的大小與該目標螢幕的大小相同時，該目標確定模組省略，該調整模組用於將該第一介面按照該目標螢幕的尺寸進行縮放。
  10. 如申請專利範圍第8項所述之自繪控制項的螢幕適配裝置，其中，該調整模組包括：一介面縮放子模組，用於將該第一介面按照該適配介面的尺寸進行縮放；以及一判斷調整子模組，用於判斷該第一介面內的每個自繪控制項相對於其對應容器控制項的每個邊距的屬性是固定邊距還是縮放邊距，如果該邊距為固定邊距，則該自繪控制項相對於其容器控制項的該邊距保持不變，如果該邊距為縮放邊距，則該自繪控制項相對於其容器控制項的該邊距根據該容器控制項在該邊距方向上的伸縮比進行等比縮放。
  11. 一種自繪控制項的螢幕適配裝置，其包括：一初始佈局模組，用於根據一初始螢幕的解析度佈局自繪控制項，得到與該初始螢幕適配的一第一視圖，該第一視圖包括一第一介面以及佈局於該第一介面上的自繪控制項； 一目標確定模組，用於根據一目標螢幕的解析度確定該第一介面在該目標螢幕上的一適配介面；一預處理模組，用於根據該目標螢幕的解析度以及該初始螢幕的解析度計算介面預處理比例，根據該介面預處理比例對該第一視圖的該第一介面以及自繪控制項進行等比縮放，得到一第二視圖，該第二視圖包括一第二介面以及佈局於該第二介面上的自繪控制項；一縮放模組，用於為每個該第二介面上的自繪控制項定義一個容器控制項，並定義該第二介面為其中一個自繪控制項的容器控制項，獲取每個自繪控制項相對於其對應的容器控制項的邊距，設定該邊距的屬性為固定邊距或縮放邊距，對應屬性為固定邊距的邊距始終保持固定不變，對應屬性為縮放邊距的邊距隨著所對應的容器控制項的縮放進行改變；一調整模組，用於將該第二介面按照該適配介面的尺寸進行縮放，根據該第二介面內的每個自繪控制項相對於其對應容器控制項的邊距的屬性對每個自繪控制項進行調整，得到一第三視圖；以及一繪製模組，用於在該目標螢幕上繪製該第三視圖。
  12. 如申請專利範圍第11項所述之自繪控制項的螢幕適配裝置，其中，當該適配介面的大小與該目標螢幕的大小相同時，該目標確定模組省略，該調整模組用於將該第二介面按照該目標螢幕的尺寸進行縮放。
  13. 如申請專利範圍第11項所述之自繪控制項的螢幕適配裝置，其中，該介面預處理比例為該目標螢幕的橫向解析度與該初始螢幕的橫向解析度之比以及該目標螢幕的縱向解析度與該初始螢幕的縱向解析度之比中的較小值。
  14. 如申請專利範圍第11項所述之自繪控制項的螢幕適配裝置，其 中，該調整模組包括：一介面縮放子模組，用於將該第二介面按照該適配介面的尺寸進行縮放；以及一判斷調整子模組，用於判斷該第二介面內的每個自繪控制項相對於其對應容器控制項的每個邊距的屬性是固定邊距還是縮放邊距，如果該邊距為固定邊距，則該自繪控制項相對於其容器控制項的該邊距保持不變，如果該邊距為縮放邊距，則該自繪控制項相對於其容器控制項的該邊距根據該容器控制項在該邊距方向上的伸縮比進行等比縮放。
TW102131770A 2012-12-19 2013-09-04 自繪控制項的螢幕適配方法及裝置 TWI490772B (zh)

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201210553224.6A CN103885755A (zh) 2012-12-19 2012-12-19 自绘控件的屏幕适配实现方法及实现装置

Publications (2)

Publication Number Publication Date
TW201426493A true TW201426493A (zh) 2014-07-01
TWI490772B TWI490772B (zh) 2015-07-01

Family

ID=50954668

Family Applications (1)

Application Number Title Priority Date Filing Date
TW102131770A TWI490772B (zh) 2012-12-19 2013-09-04 自繪控制項的螢幕適配方法及裝置

Country Status (6)

Country Link
US (1) US20150268850A1 (zh)
EP (1) EP2936289A4 (zh)
CN (1) CN103885755A (zh)
CA (1) CA2894197A1 (zh)
TW (1) TWI490772B (zh)
WO (1) WO2014094628A1 (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
TWI717317B (zh) * 2014-10-22 2021-02-01 香港商阿里巴巴集團服務有限公司 對顯示裝置的顯示圖像進行截屏的方法及裝置

Families Citing this family (36)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105653254B (zh) * 2014-12-03 2019-07-09 科大讯飞股份有限公司 原生界面适配方法、装置及应用其的电子设备
CN105718228B (zh) * 2014-12-05 2019-07-23 金蝶软件（中国）有限公司 动态内容显示的方法和装置
KR20160080851A (ko) * 2014-12-29 2016-07-08 엘지전자 주식회사 디스플레이 장치 및 제어 방법
CN105812881B (zh) * 2014-12-30 2019-03-01 Tcl集团股份有限公司 一种用户界面的窗口处理方法、系统及电视机
CN104598107A (zh) * 2014-12-31 2015-05-06 乐视网信息技术（北京）股份有限公司 界面控件的生成方法及系统
CN106033387B (zh) * 2015-03-11 2018-09-11 广州市动景计算机科技有限公司 测试flash内部控件的方法和装置
CN106033410B (zh) * 2015-03-20 2019-11-26 广州金山移动科技有限公司 一种对象尺寸调整方法
CN105187634A (zh) * 2015-08-07 2015-12-23 北京思特奇信息技术股份有限公司 一种终端应用动态适配智能终端屏幕的方法及系统
CN106708495B (zh) * 2015-11-18 2021-05-07 优信拍（北京）信息科技有限公司 一种基于移动终端的页面显示方法及装置
CN105335295A (zh) * 2015-12-01 2016-02-17 上海斐讯数据通信技术有限公司 响应式布局界面的测试方法、系统及浏览器
CN106406794A (zh) * 2016-09-14 2017-02-15 乐视控股（北京）有限公司 一种屏幕适配方法及其装置
CN106484424A (zh) * 2016-10-18 2017-03-08 武汉斗鱼网络科技有限公司 一种获得与屏幕适配的控件的方法和系统
CN107015793A (zh) * 2016-12-12 2017-08-04 阿里巴巴集团控股有限公司 设计稿适配方法、装置及系统
CN106873991B (zh) * 2017-01-20 2019-01-11 腾讯科技（深圳）有限公司 页面生成方法和装置
CN106940612A (zh) * 2017-03-20 2017-07-11 网易（杭州）网络有限公司 按钮控件的布局方法及装置、存储介质和处理器
CN107066267B (zh) * 2017-03-27 2021-09-07 网易（杭州）网络有限公司 页面尺寸处理方法、装置及设备
CN108334354A (zh) * 2017-09-01 2018-07-27 武汉斗鱼网络科技有限公司 匹配模式的视图设计方法及装置
CN109491729A (zh) * 2017-09-08 2019-03-19 深圳市中兴微电子技术有限公司 一种界面自动调整装置及方法
CN108434728B (zh) * 2018-02-09 2022-05-13 网易（杭州）网络有限公司 操作控件的适配方法、装置、电子设备及存储介质
CN108304136A (zh) * 2018-02-26 2018-07-20 网易（杭州）网络有限公司 控件的显示控制方法及装置
CN110262858A (zh) * 2018-03-12 2019-09-20 上海擎感智能科技有限公司 Ui控件自适应屏幕的方法、系统、存储介质及电子终端
CN108427596B (zh) * 2018-03-15 2021-07-02 上海哔哩哔哩科技有限公司 移动终端应用界面视图分辨率匹配方法、装置及存储介质
CN110364127A (zh) * 2018-04-10 2019-10-22 普天信息技术有限公司 智能大屏幕系统的自适应显示方法及装置
CN108628656A (zh) * 2018-05-09 2018-10-09 平安普惠企业管理有限公司 Ios设备上界面适配方法、装置、计算机设备及存储介质
CN109739456A (zh) * 2018-12-29 2019-05-10 苏州玩友时代科技股份有限公司 一种自适应的ui适配方法及系统
CN110109595B (zh) * 2019-04-30 2021-08-24 努比亚技术有限公司 一种显示控制方法、可穿戴设备及计算机可读存储介质
CN110674433B (zh) * 2019-09-25 2022-05-06 博锐尚格科技股份有限公司 一种图表显示方法、存储介质及电子设备
CN111223155B (zh) * 2019-10-22 2023-12-05 浙江大搜车软件技术有限公司 图像数据处理方法、装置、计算机设备和存储介质
CN111552530B (zh) * 2020-04-22 2024-04-12 北京完美赤金科技有限公司 用户界面的终端屏幕适配方法、装置及设备
CN112099887B (zh) * 2020-08-21 2021-12-17 完美世界(重庆)互动科技有限公司 界面调整方法、装置、计算机设备及计算机可读存储介质
CN112055244B (zh) * 2020-09-04 2022-06-21 维沃移动通信有限公司 图像获取方法、装置、服务器和电子设备
CN112269527B (zh) * 2020-11-16 2022-07-08 Oppo广东移动通信有限公司 应用界面的生成方法及相关装置
CN112817507B (zh) * 2021-01-26 2023-11-03 广州虎牙科技有限公司 控件适配方法、装置、电子设备及存储介质
CN113961158A (zh) * 2021-09-08 2022-01-21 北京房江湖科技有限公司 一种跨平台的画笔同步方法及装置
CN114327656A (zh) * 2021-12-27 2022-04-12 杭州圆规网络科技有限公司 动态布局应用程序界面的方法以及装置、存储介质、电子装置
CN116932120B (zh) * 2023-09-15 2023-12-12 云粒智慧科技有限公司 地图底图的可视化页面缩放方法、装置和电子设备

Family Cites Families (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20080177994A1 (en) * 2003-01-12 2008-07-24 Yaron Mayer System and method for improving the efficiency, comfort, and/or reliability in Operating Systems, such as for example Windows
US7487447B1 (en) * 2005-05-25 2009-02-03 Google Inc. Web page zoom feature
CN101140516A (zh) * 2007-10-22 2008-03-12 金蝶软件（中国）有限公司 一种动态布局界面元素的方法和系统
US9864612B2 (en) * 2010-12-23 2018-01-09 Microsoft Technology Licensing, Llc Techniques to customize a user interface for different displays
US20120284631A1 (en) * 2011-05-02 2012-11-08 German Lancioni Methods to adapt user interfaces and input controls
CN102298495A (zh) * 2011-06-27 2011-12-28 上海北大方正科技电脑系统有限公司 一种android软件自适应不同屏幕密度的方法
CN102662616B (zh) * 2012-03-28 2015-12-16 北京邮电大学 用于移动终端的屏幕图形自适应方法及系统

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
TWI717317B (zh) * 2014-10-22 2021-02-01 香港商阿里巴巴集團服務有限公司 對顯示裝置的顯示圖像進行截屏的方法及裝置

Also Published As

Publication number Publication date
CA2894197A1 (en) 2014-06-26
US20150268850A1 (en) 2015-09-24
EP2936289A4 (en) 2016-02-10
TWI490772B (zh) 2015-07-01
WO2014094628A1 (en) 2014-06-26
CN103885755A (zh) 2014-06-25
EP2936289A1 (en) 2015-10-28

Similar Documents

Publication Publication Date Title
TWI490772B (zh) 自繪控制項的螢幕適配方法及裝置
US20150222814A1 (en) Image Acquisition Method and Apparatus
CN105844256A (zh) 一种全景视频帧图像处理方法和装置
CN104394422A (zh) 一种视频分割点获取方法及装置
WO2020056903A1 (zh) 用于生成信息的方法和装置
DE112015000950T5 (de) Abwärtskompatible Einrichtung und abwärtskompatibles Verfahren zum Bereitstellen von Video mit sowohl Standard- als auch hohem Dynamikbereich
WO2022199364A1 (zh) 图像处理方法、装置、存储介质及设备
CN106060491A (zh) 一种投影图像颜色校正方法及装置
CN104978433A (zh) 一种网页显示方法及装置
CN105407323A (zh) 一种监控视频的分屏方法及装置
CN101329761A (zh) 一种投影设备梯形失真调节方法及装置
US20180082401A1 (en) Warping panoramic images to fit a boundary
WO2023065604A1 (zh) 图像处理方法及装置
CN105094507A (zh) 一种实现3d ui中圆角图标焦点套合方法及系统
JP6897681B2 (ja) 情報処理装置、情報処理方法、及びプログラム
CN107861711B (zh) 页面适配方法及装置
CN106657848A (zh) 一种投影方法及电子设备
CN103218226A (zh) 一种处理应用显示界面的方法及装置
JP2021006982A (ja) 文字の色を決定する方法および装置
CN106155677A (zh) 一种界面显示的方法和系统
US20130137482A1 (en) Perspective correction using a reflection
CN104516696A (zh) 一种信息处理方法及电子设备
CN114419322B (zh) 一种图像实例分割方法、装置、电子设备及存储介质
KR102620702B1 (ko) 모바일 장치 및 모바일 장치의 제어 방법
CN114399645A (zh) 多模态数据扩充方法、系统、介质、计算机设备及终端