本發(fā)明涉及應(yīng)用程序界面優(yōu)化技術(shù)領(lǐng)域,更具體地,涉及一種可視化控件圓角化處理方法及系統(tǒng)。
背景技術(shù):
目前,隨著應(yīng)用程序,尤其是移動端app的快速發(fā)展,app產(chǎn)品的設(shè)計不再僅限于功能的實現(xiàn),而會更加追求用戶體驗和app的整體美觀,可視化控件的圓角化處理就是其中一種常見的美化界面ui的方式。
不同控件的圓角處理方法都大同小異,無非是設(shè)置邊框顏色、圓角半徑、剪切圖層等基本方法,被處理的基本控件也大都是uiview、uiimageview、uibutton、uilable、uitextview幾中類型。傳統(tǒng)的應(yīng)用程序可視化控件圓角化處理方法在需美化的應(yīng)用程序源代碼中需要實現(xiàn)空間圓角化的地方增加圓角化的代碼,從而實現(xiàn)對于應(yīng)用程序可視化控件的圓角化。
然而,這種傳統(tǒng)的圓角處理方法存在一些不足,主要表現(xiàn)在:1、當(dāng)角化需求改變時,對于代碼修改的工作量繁重且易出錯;2、降低應(yīng)用程序的開發(fā)效率;3、降低代碼質(zhì)量;4、使得應(yīng)用程序占用更多的內(nèi)存空間。
技術(shù)實現(xiàn)要素:
本發(fā)明為克服上述問題或者至少部分地解決上述問題,提供一種可視控件圓角化處理方法及系統(tǒng)。
根據(jù)本發(fā)明的一個方面,提供一種可視控件圓角化處理方法,包括:
步驟1,定義一個圓角化類,在所述圓角化類中定義各圓角化參數(shù)與處理接口;
步驟2,在應(yīng)用程序中調(diào)用所述處理接口,基于所述圓角化類中的各圓角化參數(shù)對所述應(yīng)用程序內(nèi)各可視控件進行圓角化處理。
進一步,所述步驟2后還包括:步驟3,基于修改需求,對所述各圓角化參數(shù)進行修改。
進一步,所述圓角化類中還包括可視控件的類型,所述各類型可視控件分別對應(yīng)各自的圓角化參數(shù)。
進一步,所述圓角化參數(shù)包括:圓角半徑、可視控件邊框?qū)挾?、可視控件邊框顏色?/p>
進一步,所述步驟2中進一步包括:判斷待圓角化可視控件的類型,根據(jù)所述可視控件的類型獲取其對應(yīng)的圓角化參數(shù)。
進一步,所述步驟判斷待圓角化可視控件的類型,根據(jù)所述可視控件的類型獲取其對應(yīng)的圓角化參數(shù)前還包括:當(dāng)待圓角化可視控件的邊框?qū)挾葏?shù)為空時,將所述邊框?qū)挾葏?shù)值設(shè)置為0;當(dāng)待圓角化可視控件的顏色參數(shù)為空時,將所述邊框顏色設(shè)置為透明。
進一步,所述步驟判斷待圓角化可視控件的類型,根據(jù)所述可視控件的類型獲取其對應(yīng)的圓角化參數(shù)進一步包括:當(dāng)待圓角化可視控件的類型屬于所述圓角化類中可視控件的類型時,根據(jù)所述可視控件的類型獲取其對應(yīng)的圓角化參數(shù);當(dāng)待圓角化可視控件的類型不屬于所述圓角化類中可視化空間的類型時,將所述待圓角化可視控件轉(zhuǎn)換成任一所述圓角化類中可視控件的類型,根據(jù)所述可視控件的類型獲取其對應(yīng)的圓角化參數(shù)。
進一步,所述圓角化類中進一步包括可視控件中待圓角化處理圓角的位置。
進一步,所述步驟基于所述圓角化類中的各圓角化參數(shù)對所述應(yīng)用程序內(nèi)各可視控件進行圓角化處理進一步包括:在ios環(huán)境中,基于所述圓角化類中的各圓角化參數(shù),利用uibezierpath類對所述應(yīng)用程序內(nèi)各可視控件進行圓角化處理。
根據(jù)本發(fā)明的一個方面,提供一種應(yīng)用程序可視控件圓角化處理系統(tǒng),包括定義模塊和處理模塊:
所述定義模塊,與所述處理模塊相連,用于定義一個圓角化類,在所述圓角化類中定義各圓角化參數(shù)與處理接口;
所述處理模塊,與所述定義模塊相連,用于在應(yīng)用程序中調(diào)用所述處理接口,基于所述圓角化類中的各圓角化參數(shù)對所述應(yīng)用程序內(nèi)各可視控件進行圓角化處理。
本申請?zhí)岢鲆环N可視控件圓角化處理方法及系統(tǒng),所述方法首先定義一個圓角化類,在所述圓角化類中定義各圓角化參數(shù)與處理接口;其次在應(yīng)用程序中調(diào)用所述處理接口,基于所述圓角化類中的各圓角化參數(shù)對所述應(yīng)用程序內(nèi)各可視控件進行圓角化處理。本發(fā)明具有以下有益效果:1、當(dāng)圓角化需求改變時,只需修改所述圓角化類中的參數(shù),極大減輕了代碼修改的工作量;2、開發(fā)過程中的一次性定義圓角化類,減少了研發(fā)過程中的開發(fā)效率;3、提升了代碼質(zhì)量;4、減少了代碼的冗余,使得應(yīng)用程序占用的內(nèi)存空間變少。
附圖說明
圖1為根據(jù)本發(fā)明實施例一種可視化控件圓角化處理方法的整體流程示意圖;
圖2為根據(jù)本發(fā)明實施例一種可視化控件圓角化處理系統(tǒng)的整體框架示意圖;
圖3為根據(jù)本發(fā)明實施例一種可視化控件圓角化處理方法的測試設(shè)備整體框架示意圖。
具體實施方式
下面結(jié)合附圖和實施例,對本發(fā)明的具體實施方式作進一步詳細描述。以下實施例用于說明本發(fā)明,但不用來限制本發(fā)明的范圍。
隨著應(yīng)用程序,尤其是移動端app的快速發(fā)展,app產(chǎn)品的設(shè)計不再僅限于功能的實現(xiàn),而會更加追求用戶體驗和app的整體美觀,可視化控件的圓角化處理就是其中一種常見的美化界面ui的方式。不同控件的圓角處理方法都大同小異,無非是設(shè)置邊框顏色、圓角半徑、剪切圖層等基本方法,被處理的基本控件也大都是uiview、uiimageview、uibutton、uilable、uitextview幾中類型。傳統(tǒng)的應(yīng)用程序可視化控件圓角化處理方法在需美化的應(yīng)用程序源代碼中需要實現(xiàn)空間圓角化的地方增加圓角化的代碼,從而實現(xiàn)對于應(yīng)用程序可視化控件的圓角化。這種傳統(tǒng)的圓角處理方法存在一些不足,主要表現(xiàn)在:1、當(dāng)角化需求改變時,對于代碼修改的工作量繁重且易出錯;2、降低應(yīng)用程序的開發(fā)效率;3、降低代碼質(zhì)量;4、使得應(yīng)用程序占用更多的內(nèi)存空間。
本發(fā)明為解決上述問題,提出一種可視化控件圓角化處理方法及系統(tǒng)。
如圖1,示出本發(fā)明一個具體實施例中一種可視控件圓角化處理方法整體流程示意圖??傮w上,包括:步驟1,定義一個圓角化類,在所述圓角化類中定義各圓角化參數(shù)與處理接口;步驟2,在應(yīng)用程序中調(diào)用所述處理接口,基于所述圓角化類中的各圓角化參數(shù)對所述應(yīng)用程序內(nèi)各可視控件進行圓角化處理。本具體實施例具有以下有益效果:當(dāng)圓角化需求改變時,只需修改所述圓角化類中的參數(shù),極大減輕了代碼修改的工作量;開發(fā)過程中的一次性定義圓角化類,減少了研發(fā)過程中的開發(fā)效率;提升了代碼質(zhì)量;減少了代碼的冗余,使得應(yīng)用程序占用的內(nèi)存空間變少。
在本發(fā)明另一個具體實施例中,一種可視控件圓角化處理方法,所述步驟2后還包括:步驟3,基于修改需求,對所述各圓角化參數(shù)進行修改。本具體實施例中,當(dāng)產(chǎn)品需求進行改變,需要改變圓角化需求時,只需將先前圓角化類中的相應(yīng)部分進行修改,即可快速進行修改,相比現(xiàn)有技術(shù),減少了研發(fā)人員代碼修改工作量。
在本發(fā)明另一個具體實施例中,一種可視控件圓角化處理方法,所述圓角化參數(shù)包括:圓角半徑、可視控件邊框?qū)挾?、可視控件邊框顏色?/p>
在本發(fā)明另一個具體實施例中,一種可視控件圓角化處理方法,所述步驟2中進一步包括:判斷待圓角化可視控件的類型,根據(jù)所述可視控件的類型獲取其對應(yīng)的圓角化參數(shù)。本實施例中,由于應(yīng)用程序在對其中各可視控件進行圓角化優(yōu)化時,很有可能針對不同的可視控件類型進行不同視覺風(fēng)格的圓角化處理,所以根據(jù)不同的可視控件類型對應(yīng)加載不同的圓角化參數(shù),從而達到一類可視控件、一類圓角化風(fēng)格的有益效果。
在本發(fā)明另一個具體實施例中,一種可視控件圓角化處理方法,所述步驟判斷待圓角化可視控件的類型,根據(jù)所述可視控件的類型獲取其對應(yīng)的圓角化參數(shù)前還包括:當(dāng)待圓角化可視控件的邊框?qū)挾葏?shù)為空時,將所述邊框?qū)挾葏?shù)值設(shè)置為0;當(dāng)待圓角化可視控件的顏色參數(shù)為空時,將所述邊框顏色設(shè)置為透明。
在本發(fā)明另一個具體實施例中,一種可視控件圓角化處理方法,步驟判斷待圓角化可視控件的類型,根據(jù)所述可視控件的類型獲取其對應(yīng)的圓角化參數(shù)進一步包括:當(dāng)待圓角化可視控件的類型屬于所述圓角化類中可視控件的類型時,根據(jù)所述可視控件的類型獲取其對應(yīng)的圓角化參數(shù);當(dāng)待圓角化可視控件的類型不屬于所述圓角化類中可視化空間的類型時,將所述待圓角化可視控件轉(zhuǎn)換成任一所述圓角化類中可視控件的類型,根據(jù)所述可視控件的類型獲取其對應(yīng)的圓角化參數(shù)。在本發(fā)明上述具體實施例中,對應(yīng)用程序可視控件進行圓角化優(yōu)化的過程中多數(shù)情況的待優(yōu)化可視控件是可以在預(yù)先定義的圓角化類中找到的,我們可以直接調(diào)用該類型的可視化控件相對應(yīng)的視覺優(yōu)化參數(shù),對所述可視控件進行圓角化優(yōu)化操作。但難免很多時候應(yīng)用程序中待優(yōu)化的可視控件并不屬于先前定義的可視化類中,所以為了該種可視控件同樣進行圓角化操作,在此需要先將所述待圓角化可視控件轉(zhuǎn)換成任一所述圓角化類中可視控件的類型,再根據(jù)所述可視控件的類型獲取其對應(yīng)的圓角化參數(shù)。
在本發(fā)明另一個具體實施例中,一種可視控件圓角化處理方法,所述圓角化類中進一步包括可視控件中待圓角化處理圓角的位置。本發(fā)明上述具體實施例中,當(dāng)需要針對可視控件四周(左上、左下、右上、右下)同時/或部分設(shè)置圓角的處理方法,如果開發(fā)中遇到只需要設(shè)置上左等部分圓角的需求,則可以使用上述具體實施例所述方法進行實現(xiàn)。
在本發(fā)明另一個具體實施例中,一種可視控件圓角化處理方法,所述步驟基于所述圓角化類中的各圓角化參數(shù)對所述應(yīng)用程序內(nèi)各可視控件進行圓角化處理進一步包括:在ios環(huán)境中,基于所述圓角化類中的各圓角化參數(shù),利用uibezierpath類對所述應(yīng)用程序內(nèi)各可視控件進行圓角化處理。使用uibezierpath類進行圓角處理,這是一種從calayer層面進行圓角剪切的,這種可以減少離屏渲染,效率更高,占用的內(nèi)存更少。
如圖2,示出本發(fā)明一個具體實施例中一種應(yīng)用程序可視控件圓角化處理系統(tǒng)整體框架示意圖。總體上,包括:定義模塊a1和處理模塊a2:
所述定義模塊a1,與所述處理模塊a2相連,用于定義一個圓角化類,在所述圓角化類中定義各圓角化參數(shù)與處理接口;
所述處理模塊a2,與所述定義模塊a1相連,用于在應(yīng)用程序中調(diào)用所述處理接口,基于所述圓角化類中的各圓角化參數(shù)對所述應(yīng)用程序內(nèi)各可視控件進行圓角化處理。
在本發(fā)明另一個具體實施例中,一種可視控件圓角化處理系統(tǒng),所述系統(tǒng)還包括:修改模塊,與所述定義模塊相連,用于基于修改需求,對所述各圓角化參數(shù)進行修改。
在本發(fā)明另一個具體實施例中,一種可視控件圓角化處理系統(tǒng),所述圓角化類中還包括可視控件的類型,所述各類型可視控件分別對應(yīng)各自的圓角化參數(shù)。
在本發(fā)明另一個具體實施例中,一種可視控件圓角化處理系統(tǒng),所述圓角化參數(shù)包括:圓角半徑、可視控件邊框?qū)挾取⒖梢暱丶吙蝾伾?/p>
在本發(fā)明另一個具體實施例中,一種可視控件圓角化處理系統(tǒng),所述處理模塊還用于判斷待圓角化可視控件的類型,根據(jù)所述可視控件的類型獲取其對應(yīng)的圓角化參數(shù)。
在本發(fā)明另一個具體實施例中,一種可視控件圓角化處理系統(tǒng),所述處理模塊還用于當(dāng)待圓角化可視控件的邊框?qū)挾葏?shù)為空時,將所述邊框?qū)挾葏?shù)值設(shè)置為0;當(dāng)待圓角化可視控件的顏色參數(shù)為空時,將所述邊框顏色設(shè)置為透明。
在本發(fā)明另一個具體實施例中,一種可視控件圓角化處理系統(tǒng),所述處理模塊還用于當(dāng)待圓角化可視控件的類型屬于所述圓角化類中可視控件的類型時,根據(jù)所述可視控件的類型獲取其對應(yīng)的圓角化參數(shù);當(dāng)待圓角化可視控件的類型不屬于所述圓角化類中可視化空間的類型時,將所述待圓角化可視控件轉(zhuǎn)換成任一所述圓角化類中可視控件的類型,根據(jù)所述可視控件的類型獲取其對應(yīng)的圓角化參數(shù)。
在本發(fā)明另一個具體實施例中,一種可視控件圓角化處理系統(tǒng),所述圓角化類中進一步包括可視控件中待圓角化處理圓角的位置。
在本發(fā)明另一個具體實施例中,一種可視控件圓角化處理系統(tǒng),所述處理模塊還用于在ios環(huán)境中,基于所述圓角化類中的各圓角化參數(shù),利用uibezierpath類對所述應(yīng)用程序內(nèi)各可視控件進行圓角化處理。
一種可視控件圓角化處理方法在ios開發(fā)環(huán)境下的具體應(yīng)用實施例:創(chuàng)建一個繼承于uiview的工具類,提供一個設(shè)置圓角的類方法,同時傳入控件、圓角半徑、邊框?qū)挾群瓦吙蝾伾然緟?shù),為圓角設(shè)置做準(zhǔn)備。處理圓角的函數(shù)是:+(void)clipcornerview:(id)viewradius:(cgfloat)radiusborderwidth:(cgfloat)borderwidthbordercolor:(uicolor*)bordercolor;其中,view傳入了控件的類型,radius是圓角半徑,borderwidth是邊框?qū)挾龋琤ordercolor是邊框顏色。這個函數(shù)的特點是,在任何需要設(shè)置圓角的地方,只需要調(diào)用該函數(shù),傳入以上幾個參數(shù),就可以針對uiview、uiimageview、uibutton、uilable、uitextview等不同的控件,設(shè)置出顏色自定義、寬度自定義、大小自定義的圓角。這個函數(shù)的編寫過程如下:分別判斷borderwidth和bordercolor是否為空,如果borderwidth為空,邊框?qū)挾仍O(shè)為0;如果bordercolor為空,邊框顏色設(shè)為透明;調(diào)用iskindofclass函數(shù)判斷控件類型,獲取控件的具體類型,實現(xiàn)圓角的精準(zhǔn)處理。拿到圓角的layer,通過cornerradius、borderwidth、bordercolor、maskstobounds幾個屬性實現(xiàn)圓角的設(shè)置。
上述具體實施例具有如下有益效果:將設(shè)置圓角的需要的要素:設(shè)置圓角的對象view,邊框的寬度borderwidth,邊框的顏色bordercolor,圓角的大小radius,都當(dāng)做參數(shù)傳入到這個自己編寫的函數(shù),項目中會有其他的地方幾百處,甚至上千處剪切圓角的地方,不管需要設(shè)置四個圓角,都只需要調(diào)用這一行代碼就可以實現(xiàn)。無論控件是什么類型(uiview、uiimageview、uibutton、uilable、uitextview,任一種)都可以用一行代碼設(shè)置圓角??丶膶ο笫莍d類型的,外面調(diào)用這個函數(shù)的時候無需關(guān)心什么類型,只需要調(diào)用這個編寫的函數(shù)就可以設(shè)置圓角,在這個函數(shù)的底層就可以實現(xiàn)判斷是什么類型,作對應(yīng)的圓角化處理。所有的圓角都使用一種方法便于對圓角剪切進行統(tǒng)一管理,如果項目需求改動了(比如隨著技術(shù)發(fā)展讓圓角更高效等),只需要改動這個函數(shù)的實現(xiàn),就可以,其他調(diào)用這個函數(shù)的地方無需更改。
一種可視控件圓角化處理方法在ios開發(fā)環(huán)境下的具體應(yīng)用實施例:上述一個具體實施例主要是針對控件四周(左上、左下、右上、右下)同時設(shè)置圓角的處理方法,如果開發(fā)中遇到只需要設(shè)置上左等部分圓角的需求,則可以使用下面這個函數(shù)來實現(xiàn),具體的函數(shù)是:+(void)clipcorerview:(id)viewradius:(cgfloat)radiusrectcorner:(uirectcorner)rectcorner;其中,view傳入了控件的類型,radius是圓角半徑,rectcorner是待設(shè)置的圓角。這個函數(shù)的特點是,在任何需要設(shè)置圓角的地方,只需要調(diào)用該函數(shù),傳入以上幾個參數(shù),就可以設(shè)置指定位置的圓角。
這個函數(shù)的編寫過程是:
調(diào)用iskindofclass函數(shù)判斷控件類型,如果是uiview(或者其他類型控件),就進行圓角處理,并將view強制轉(zhuǎn)換成uiview(其他類型的控件)。
用uibezierpath類調(diào)用bezierpathwithroundedrect:bezierpathwithroundedrect:viewnew.boundsbyroundingcorners:rectcornercornerradii:cgsizemake(dadius,dadius)方法,設(shè)置指定位置的圓角。
用[cashapelayerlayer]創(chuàng)建一個masklayer,設(shè)置frame、path屬性;將masklayer賦值給viewnew.layer.mask;如果是其他的類型的控件,比如是uiview、uiimageview、uibutton、uilable、uitextview等其他控件都可以使用。
上述具體實施例具有如下有益效果:使用uibezierpath類進行圓角處理,這是一種從calayer層面進行圓角剪切的,這種可以減少離屏渲染,效率更高,占用的內(nèi)存更少。
這種圓角方案,在列表的使用中,界面圓角很多的時候,為了提高性能有很好的優(yōu)勢。
uirectcorner,是一個枚舉類型的參數(shù),通過這個參數(shù)可以實現(xiàn)只剪切(左上,右上,左下,右下中的某一個圓角),方便的對剪切的圓角進行控制,在直播app的禮物面板有使用。
圖3是示出本申請實施例的可視控件圓角化處理方法的測試設(shè)備的結(jié)構(gòu)框圖。
參照圖3,所述可視控件圓角化處理方法的測試設(shè)備,包括:處理器(processor)301、存儲器(memory)302、通信接口(communicationsinterface)303和總線304;
其中,
所述處理器301、存儲器302、通信接口303通過所述總線304完成相互間的通信;
所述通信接口303用于該測試設(shè)備與可視控件圓角化處理方法的通信設(shè)備之間的信息傳輸;
所述處理器301用于調(diào)用所述存儲器302中的程序指令,以執(zhí)行上述各方法實施例所提供的方法,例如包括:定義一個圓角化類,在所述圓角化類中定義各圓角化參數(shù)與處理接口;在應(yīng)用程序中調(diào)用所述處理接口,基于所述圓角化類中的各圓角化參數(shù)對所述應(yīng)用程序內(nèi)各可視控件進行圓角化處理。
本實施例公開一種計算機程序產(chǎn)品,所述計算機程序產(chǎn)品包括存儲在非暫態(tài)計算機可讀存儲介質(zhì)上的計算機程序,所述計算機程序包括程序指令,當(dāng)所述程序指令被計算機執(zhí)行時,計算機能夠執(zhí)行上述各方法實施例所提供的方法,例如包括:定義一個圓角化類,在所述圓角化類中定義各圓角化參數(shù)與處理接口;在應(yīng)用程序中調(diào)用所述處理接口,基于所述圓角化類中的各圓角化參數(shù)對所述應(yīng)用程序內(nèi)各可視控件進行圓角化處理。
本實施例提供一種非暫態(tài)計算機可讀存儲介質(zhì),所述非暫態(tài)計算機可讀存儲介質(zhì)存儲計算機指令,所述計算機指令使所述計算機執(zhí)行上述各方法實施例所提供的方法,例如包括:定義一個圓角化類,在所述圓角化類中定義各圓角化參數(shù)與處理接口;在應(yīng)用程序中調(diào)用所述處理接口,基于所述圓角化類中的各圓角化參數(shù)對所述應(yīng)用程序內(nèi)各可視控件進行圓角化處理。
本領(lǐng)域普通技術(shù)人員可以理解:實現(xiàn)上述方法實施例的全部或部分步驟可以通過程序指令相關(guān)的硬件來完成,前述的程序可以存儲于一計算機可讀取存儲介質(zhì)中,該程序在執(zhí)行時,執(zhí)行包括上述方法實施例的步驟;而前述的存儲介質(zhì)包括:rom、ram、磁碟或者光盤等各種可以存儲程序代碼的介質(zhì)。
以上所描述的可視控件圓角化處理方法的測試設(shè)備等實施例僅僅是示意性的,其中所述作為分離部件說明的單元可以是或者也可以不是物理上分開的,作為單元顯示的部件可以是或者也可以不是物理單元,即可以位于一個地方,或者也可以分布到多個網(wǎng)絡(luò)單元上。可以根據(jù)實際的需要選擇其中的部分或者全部模塊來實現(xiàn)本實施例方案的目的。本領(lǐng)域普通技術(shù)人員在不付出創(chuàng)造性的勞動的情況下,即可以理解并實施。
通過以上的實施方式的描述,本領(lǐng)域的技術(shù)人員可以清楚地了解到各實施方式可借助軟件加必需的通用硬件平臺的方式來實現(xiàn),當(dāng)然也可以通過硬件?;谶@樣的理解,上述技術(shù)方案本質(zhì)上或者說對現(xiàn)有技術(shù)做出貢獻的部分可以以軟件產(chǎn)品的形式體現(xiàn)出來,該計算機軟件產(chǎn)品可以存儲在計算機可讀存儲介質(zhì)中,如rom/ram、磁碟、光盤等,包括若干指令用以使得一臺計算機設(shè)備(可以是個人計算機,服務(wù)器,或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行各個實施例或者實施例的某些部分所述的方法。
最后,本申請的方法僅為較佳的實施方案,并非用于限定本發(fā)明的保護范圍。凡在本發(fā)明的精神和原則之內(nèi),所作的任何修改、等同替換、改進等,均應(yīng)包含在本發(fā)明的保護范圍之內(nèi)。