網(wǎng)站首頁 編程語言 正文
自定義標(biāo)題欄
通常我們的活動頁面都會根據(jù)需要都會有不同的標(biāo)題欄需要選擇,一般有兩個場景,一個是統(tǒng)一標(biāo)題欄,通過引入布局到活動來進(jìn)行重復(fù)使用,還有一個就是你的活動頁面每個都需要定制的,就不能統(tǒng)一風(fēng)格了。
布局與九宮格背景圖
下面講講布局與九宮格的一些搭配。
布局
常用設(shè)計標(biāo)題欄的布局都是通過流式布局來進(jìn)行的。為什么呢?是不是覺得有時候流式布局反而更麻煩一點。標(biāo)題欄一般都是有控件依賴關(guān)系的。為什么不采用相對布局呢?相對布局不就是解決依賴關(guān)系的么?是,但是有個設(shè)計的小技巧。相對布局的確對依賴關(guān)系是有很好的適用性。但是要考慮到項目需求的變更。你一開始設(shè)計的,可能是覺得位置都合適了。但是現(xiàn)在需求變更了呢,有些控件需要進(jìn)行改動的話,是不是發(fā)現(xiàn)很麻煩,加入或者刪除都有可能會讓你的布局全都打亂,需要重新指定依賴關(guān)系。
那流式布局是怎么完成依賴關(guān)系的呢?我們可以給他加個view來進(jìn)行隔開。通過權(quán)重進(jìn)行分配,一樣可以實現(xiàn)相對布局的效果。用一個0.1dp高度的view就可以分割開了。
當(dāng)然這也不是絕對的,不是說一定要用流式會好一點,相對于大多數(shù)場景的標(biāo)題欄都是比較簡單的擺放,所以用流式也可以。但是如果啊,如果你的標(biāo)題欄的控件又要水平擺放的,又要垂直擺放的,這種情況下,還想使用流式布局就需要進(jìn)行布局嵌套了,相對來說開銷會增大。如果是這種情況的話,我可能會覺得相對布局好點。
那是不是因為控件的依賴關(guān)系就不太想使用相對布局了呢?其實不然,相對布局最合適使用的地方,我覺得就不是相對控件的依賴關(guān)系(大范圍指定控件),而是相對布局的依賴關(guān)系。這個就顯得更加有用了。通常我們的頁面也會有l(wèi)istview這些列表類的滾動場景,還會有使用系統(tǒng)軟鍵盤進(jìn)行輸入的場景,如果我們不指定布局之間的依賴關(guān)系而采用流式布局這些,你就會發(fā)現(xiàn),點擊輸入框彈出鍵盤的時候,你的頁面底部就被鍵盤頂上去了,頁面控件顯示不全,這是因為高度發(fā)生了改變。當(dāng)然你也可以自定義監(jiān)聽事件,對高度進(jìn)行檢測,再做邏輯處理。
總結(jié):在設(shè)計布局的時候,相對布局盡量是相當(dāng)于父布局上下左右進(jìn)行相對。小的依賴關(guān)系盡量使用流式布局解決,類似于簡單的標(biāo)題欄,便于后期的維護(hù)。
九宮格圖片
那講完布局,與九宮格照片又有什么關(guān)系呢?
先說下九宮格圖片,知道的朋友可以跳過。
首先是它的由來,技術(shù)的進(jìn)步從來都是按需前進(jìn)的。有這個東西就說明是遇到了什么問題。那問題是什么呢?
我們將某張圖片設(shè)置為視圖背景時,如果圖片尺寸太小,系統(tǒng)則會自動拉伸圖片使之填滿背景。可以一旦圖片拉的過大,其畫面就容易變得模糊。為了解決這個問題,Android就設(shè)計了這個點九圖片。它的擴(kuò)展名是png,文件名后面常有“.9”字樣。該圖片劃分成了3*3的區(qū)域。如果背景是一個形狀圖形,它的stroke節(jié)點的width屬性已經(jīng)設(shè)置了固定數(shù)值(如)1dp,那么無論該圖形怎么拉伸,描邊寬度始終是1dp。點九圖片的實現(xiàn)原理與之類似,即拉伸圖形時,只拉伸內(nèi)部區(qū)域,不拉伸邊緣線條。
下面就是一個九宮格的背景圖片:
左邊是加工區(qū)域,右邊是圖片預(yù)覽區(qū)域,從上到下一次是縱向拉伸,橫向拉伸、兩方向同時拉伸的預(yù)覽圖片模式。在左側(cè)窗口圖片四周的馬賽克處單擊會出現(xiàn)一個黑點,把黑點左右或者上下拖動出一條黑線,不同的方向上的黑線就會表示出不同的效果。
左邊黑線是指垂直方向的拉伸區(qū)域。垂直方向拉伸圖片時,只有黑線區(qū)域內(nèi)的圖像會進(jìn)行一個拉伸,不在黑線內(nèi)的區(qū)域就不拉伸,還是維持原狀,這樣就能保證上下兩側(cè)的邊框厚度不變。
上邊黑線是指水平方向的拉伸區(qū)域。與上面是同理。水平拉伸,黑線內(nèi)拉伸,黑線外不拉伸。
下邊黑線是指該圖片作為控件背景時,控件內(nèi)部的文字左右邊界就只能放在黑線區(qū)域內(nèi)。如上圖。這樣的話,就會自動的有了android:paddingLeft和android:paddingRight的效果了。相當(dāng)于自動為你添加了。
右邊黑線于上邊同理。只不過是方面不同。這里就相當(dāng)于上下的邊界在黑線內(nèi)了。同樣是相當(dāng)于自動添加了android:paddingTop與android:paddingBottom的效果。
那是不是與我們的布局就很搭配了,我們通常標(biāo)題欄之類的也需要設(shè)置一個顏色,那么九宮格圖片就能很好的幫助到你,通過簡單的黑線,你就可以減少一些設(shè)置上下左右邊界的代碼了,是不是覺得變簡單了?
還有一點要注意的是,九宮格圖片如果設(shè)置為視圖背景的時候,而且是指定了Horizontal Padding和Vertical Padding,那么視圖內(nèi)部將一直與視圖邊緣保持固定的間距,無論怎么調(diào)整xml文件和java代碼都是不行的。因為是九宮格圖片設(shè)置的padding。
我們還可以給內(nèi)部的控件設(shè)置一些狀態(tài)列表背景進(jìn)行改變, 這樣在點擊控件或者獲取焦點的時候就可以,有一個明顯的效果出來。
總結(jié)
原文鏈接:https://blog.csdn.net/TG_Lcb/article/details/122471622
相關(guān)推薦
- 2022-10-10 react使用axios實現(xiàn)上傳下載功能_React
- 2024-07-18 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nacos服務(wù)端數(shù)據(jù)結(jié)構(gòu)和模型
- 2022-12-29 React動態(tài)更改html標(biāo)簽的實現(xiàn)方式_React
- 2023-01-15 Python?pytest.main()運(yùn)行測試用例_python
- 2023-04-07 React?Fiber構(gòu)建completeWork源碼解析_React
- 2022-12-26 詳解Python中四種關(guān)系圖數(shù)據(jù)可視化的效果對比_python
- 2022-07-28 XML基本概念XPath、XSLT與XQuery函數(shù)介紹_XML/RSS
- 2022-03-26 .Net?Core微服務(wù)rpc框架GRPC通信基礎(chǔ)_基礎(chǔ)應(yīng)用
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運(yùn)行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支