一個軟件想要吸引用戶那么友好的操作界面是必不可少的敲董。那如何設(shè)計一個美觀的界面呢头镊,首先我們需要知道AS為我們提供了哪些UI工具以及它們的基本使用方法疆液,簡單控件篇將介紹以下幾個常用的簡單控件:
控件篇將介紹幾個簡單的控件:
- TextView 文本框
- EditText 輸入框
- AutoCompleteTextView 自動匹配文本框
- MutiAutoCompleteTextView 支持多次自動匹配文本內(nèi)容
- ImageView 圖片
- Button 按鈕
- Toggle Button 多狀態(tài)按鈕
- CheckBox 復(fù)選框
- RadioButton 單選框
這些簡單的控件可以通過在XML中編寫程序?qū)崿F(xiàn)雳窟,在layout文件夾下創(chuàng)建xml文件,進(jìn)行實(shí)現(xiàn):
1票腰、TextView 文本框
TextView文本框作為開發(fā)中最常用的控件之一城看,
基本屬性:
android:id(指控件id,在其他地方可通過id找到這個控件杏慰,注意書寫格式@+id/控件名)
android:layout_width(指控件的寬度测柠,通常有兩個常用的選值炼鞠,wrap_content包裹控件內(nèi)容的寬度,match_parent鋪滿父容器的寬度鹃愤,可以自定寬度簇搅,單位dp完域,如android:layout_width="200dp");
android:layout_height(指控件的高度软吐,可選值與android:layout_width相同)
以上的三個屬性是Android所有控件都有的屬性。除了這些還有每個控件特有的屬性吟税,下邊介紹TextView常用的屬性
android:text(指文本內(nèi)容凹耙,賦值的方式有兩種,一種直接在xml布局中直接進(jìn)行賦值肠仪,另一種是文本內(nèi)容放到values->strings中肖抱,通過@string/名引用)
android:textSize(指文本大小,單位sp)
android:textColor(指文本字體, 一種通過#六位數(shù)字設(shè)置异旧,另一種本內(nèi)容放到values->colors中意述,通過@color/名引用)
android:background(指控件背景,可以設(shè)置顏色也可以是圖片吮蛹,如果是圖片荤崇,會鋪滿整個控件,很可能會變形)
圖片中涉及到margin潮针,padding后邊會進(jìn)行詳細(xì)講解术荤。
2、EditText :可輸入文本框
這個控件用于輸入文本的文本框每篷。下邊介紹幾個獨(dú)有的屬性:
android:hint(指輸入提示文本內(nèi)容瓣戚,當(dāng)然EditText也有android:text屬性,它們的區(qū)別是焦读,當(dāng)用戶準(zhǔn)備在輸入文本框輸入的時候子库,hint的文本內(nèi)容會消失,而text的文本內(nèi)容不會消失矗晃,會在當(dāng)前的文本框中)
android:inputType(指輸入文本的類型仑嗅,比如data,number喧兄,password等等无畔,保證用戶輸入的格式正確)
3、AutoCompleteTextView 自動匹配文本框
當(dāng)我們在搜索引擎查找內(nèi)容的時候吠冤,當(dāng)有想要輸入的信息就會出現(xiàn)其他與其相關(guān)的提示信息浑彰,這就是AutoCompleteTextView的功能,它有一個很重要的屬性拯辙,
android:completionHint(設(shè)置出現(xiàn)在下拉菜單中的提示標(biāo)題)
android:completionThreshold(設(shè)置用戶至少輸入多少個字符才會顯示提示)
android:dropDownHorizontalOffset(下拉菜單于文本框之間的水平偏移郭变。默認(rèn)與文本框左對齊)
android:dropDownVerticalOffse(直偏移量)
android:dropDownHeight(下拉菜單的高度)
android:dropDownWidth(下拉菜單的寬度)
android:singleLine(單行顯示)
android:dropDownAnchor(設(shè)置下拉菜單的定位”錨點(diǎn)”組件颜价,沒有設(shè)置的時候默認(rèn)是Textview組件)
android:dropDownSelector(設(shè)置下拉菜單點(diǎn)擊效果)
android:popupBackground(設(shè)置下拉菜單的背景)
能被提示的數(shù)據(jù)源還需要自己手動設(shè)置,接下來MainActivity可以上場了诉濒,見下圖周伦,關(guān)于activity后續(xù)會詳細(xì)介紹。
效果圖如下:
4未荒、MutiAutoCompleteTextView 支持多次自動匹配文本內(nèi)容
當(dāng)我們同時給多個人發(fā)郵件的時候會注意到专挪,每次輸入一個收件郵箱都會有提示內(nèi)容,這就是.MutiAutoCompleteTextView功能片排,它有個方法setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer())指設(shè)置以逗號分隔符為結(jié)束的符號寨腔。方法setTokenizer(new MultiAutoCompleteTextView.Tokenizer())可以對分割規(guī)則進(jìn)行自定義。它的使用方法和AutoCompleteTextView的特性和基本使用方法一致率寡,不再贅述迫卢,具體代碼參照下圖。
5冶共、ImageView 圖片
ImageView指用來顯示圖片乾蛤。
android:src(指需要被展示的圖片的)
android:background(指控件背景,可以是圖片可以是顏色值捅僵,如果是圖片家卖,大小會受控件大小的影響,可能會變形)
android:adjustViewBounds(設(shè)置ImageView是否調(diào)整自己的邊界來保持所顯示圖片的長寬比)
android:scaleType(因?yàn)殛P(guān)于圖像在ImageView中的顯示效果命咐,所以有如下屬性值可以選擇:
matrix:用矩陣來繪制(從左上角起始的矩陣區(qū)域)篡九。
fitXY:橫向、縱向獨(dú)立縮放醋奠,以適應(yīng)該ImageView榛臼。
fitStart:保持縱橫比縮放圖片,并且將圖片放在ImageView的左上角窜司。
fitCenter:保持縱橫比縮放圖片沛善,縮放完成后將圖片放在ImageView的中央。
fitEnd:保持縱橫比縮放圖片塞祈,縮放完成后將圖片放在ImageView的右下角金刁。
center:把圖片放在ImageView的中央,但是不進(jìn)行任何縮放议薪。
centerCrop:保持縱橫比縮放圖片尤蛮,以使圖片能完全覆蓋ImageView。
centerInside:保持縱橫比縮放圖片斯议,以使得ImageView能完全顯示該圖片产捞。)
示例圖: