首先看一下主界面的設計,首先要說的是搜索框,搜索框中包含“刪除”按鈕是怎麼實現的。
以前聽說過是重寫TextView可以實現這種效果,如google的搜索框,但我沒有實現過,而我直接在佈局文件中就解決掉瞭這個問題。
當然啊,沒有google做的美觀,功能上也沒有google的做的全面,一來是博主審美觀天生缺陷,二來也是根據業務需求來的。
那麼我就介紹一下我的實現方式。
RelativeLayout相對佈局,RelativeLayout其內部的子組件的位置總是相對兄弟組件、父容器來決定的,因此叫做相對佈局。上面的搜索框中包含一個TextView 和IamgeButton,search鍵先不要管,它不包含在RelativeLayout內,隻看前面這兩個控件,他們包含在RelativeLayout中,我這裡先:
1、確定RelativeLayout中組件的排列方式為水平排列,android:orientation="horizontal"
2、將TextView 組件左對齊與其父組件(也就是RelativeLayout),android:layout_alignParentLeft="true"
3、將IamgeButton組件放置在TextView的右邊,android:layout_alignRight="@id/word"
通過以上三步,就可以實現上面的樣子。
1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 android:orientation="horizontal" 3 android:layout_width="wrap_content" 4 android:layout_height="wrap_content" 5 android:gravity="center_vertical" 6 > 7 <EditText 8 android:id="@+id/word" 9 android:layout_width="250dp" 10 android:layout_height="wrap_content" 11 android:textSize="18sp" 12 android:layout_alignParentLeft="true" 13 android:paddingRight="37px" 14 android:hint="@string/tishi" 15 android:textColorHint="#55000000"/> 16 <ImageButton 17 android:id="@+id/delete_button" 18 android:background="@drawable/delete" 19 android:scaleType="fitCenter" 20 android:layout_alignRight="@id/word" 21 android:layout_height="wrap_content" 22 android:layout_width="wrap_content" 23 android:layout_marginRight="10dp" 24 android:layout_marginTop="5dp"/> 25 </RelativeLayout>
其實,做佈局最重要的是對各個屬性的瞭解與掌握,比如layout__margin與padding之間的區別,layout_gravity與gravity之間的區別,在這裡我就不說瞭,網上有很多的例子,但是對於初學者來說真的是搞不清的,(就像我),除非你想做一個專業級的UI。第二點就是細心,像字體大小的調節margin的調節都是一點一點調出來的,也跟自己個人經驗少有關,關於這點,我覺的一定有必要知道px、dip(dp)、sp、in、mm、pt這些單位是怎麼回事
1、px(像素):每個px對應屏幕上的一個點。
2、dip(dp device independent pixels 設備獨立像素):一種基於屏幕密度的抽象單位,每英寸160點的顯示器上 ,1dp=1px,隨著屏幕密度的改變,dp與px的換算也會改變。屏幕密度一般分為240、160、120,你也可以根據實際開發在模擬器上修改你的屏幕密度。點擊AVD Manager選擇模擬器點details就可以看到瞭(1.6以上)。
3、sp(scaled pixels 比例像素):主要處理字體大小,可以根據用戶的字體大小首選項進行縮放。
4、in(英寸):標準長度單位。
5、mm(毫米):標準長度單位。
6、pt(磅):標準長度單位,1/72英寸。
好瞭,繼續,關於內容顯示的部分,這部分我的設計思路是這樣的,當軟件開啟時,默認的界面是這樣:什麼內容也沒有,當然也可以在後期,根據業務的需求在空白處添加一些連接,和一些功能模塊。當在搜索框內添加瞭內容並Search後,在顯示區內就有瞭內容。
當初我實現這個功能的時候,是為每一個View 設置瞭android:visibility屬性,然後在程序中去控制,這樣每一個View都要設置一遍,實在麻煩,但當我無意間發現 Layout組件也有這個屬性的時候,我才發現,我可以直接控制Layout的android:visibility,當然Layout也是View嘛,隻是沒有想到。還有,需要被控制的View都要放在這個Layout中才可以,離開這個Layout,人傢就不負責瞭。這個佈局代碼沒什麼技術含量就不貼瞭。
再說一下,ProgressBar,在進行網絡訪問,或者查詢數據庫時,都會有一定的耗時,為瞭給用戶更好的體驗,我們不僅在程序中用到Handler機制(後面會講),也要在界面上做足功夫,那麼ProgressBar就是一個很好的組件,讓用戶不會感覺程序在後臺處理數據的無反應狀態這段時間裡,認為程序“掛掉”。
ProgressBar的使用有簡單的也有復雜的,它的表現形式也有很多種,比如進度條,還有像調節控件如經常見到的音量調節,未知耗時的讀取等多種表現形式。關於具體的實現和用法大傢可以查閱API或者上網查閱論壇資料,這裡給大傢一個同仁的鏈接供大傢學習。
http://www.eoeandroid.com/thread-1081-1-1.html
如何在界面中間顯示ProgressBar,並且在ProgressBar運行時,並且輸入法調出,也不會改變ProgressBar的形狀,我使用到瞭FrameLayout佈局,因為當時由於直接在LinearLayout中居中顯示,導致輸入法調出時ProgressBar會變成橢圓形,被壓扁瞭一樣,是因為輸入法從下向上調出時占領瞭ProgressBar的位置。
FrameLayout幀佈局,說白瞭這個佈局的特點就是,在其內部所有的組件,都是重疊在一起的,一個壓在一個身上,而主頁面的整個根佈局用的就是FrameLayout。也就是說,在FrameLayout內部的組件,他們都共享這一片大的區域,誰也不會影響到誰,玩過PS的同學應該能馬上明白這個道理,那麼,我隻要設置ProgressBar在FrameLayout中center就可以瞭。在這個功能中,我同樣設置瞭一個TextView來顯示文字,看以看到TextView和ProgressBar是重疊在一起的,但他們誰也不會影響到誰,如同存在於同一個地點中的不同空間一樣。
關於佈局,就說這麼多瞭,我把整個頁面的源碼粘上。
main
1 <?xml version="1.0" encoding="utf-8"?> 2 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="fill_parent" 4 android:layout_height="fill_parent" 5 > 6 7 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 8 android:orientation="vertical" 9 android:layout_width="fill_parent" 10 android:layout_height="fill_parent" 11 android:background="#ff373737"> 12 13 <LinearLayout 14 android:orientation="horizontal" 15 android:layout_height="wrap_content" 16 android:background="#ff7d899d" 17 android:gravity="center_horizontal" 18 android:layout_marginBottom="20.0dp" 19 android:layout_marginTop="20.0dp" 20 android:layout_width="match_parent"> 21 22 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 23 android:orientation="horizontal" 24 android:layout_width="wrap_content" 25 android:layout_height="wrap_content" 26 android:gravity="center_vertical" 27 > 28 <EditText 29 android:id="@+id/word" 30 android:layout_width="250dp" 31 android:layout_height="wrap_content" 32 android:textSize="18sp" 33 android:layout_alignParentLeft="true" 34 android:paddingRight="37px" 35 android:hint="@string/tishi" 36 android:textColorHint="#55000000"/> 37 <ImageButton 38 android:id="@+id/delete_button" 39 android:background="@drawable/delete" 40 android:scaleType="fitCenter" 41 android:layout_alignRight="@id/word" 42 android:layout_height="wrap_content" 43 android:layout_width="wrap_content" 44 android:layout_marginRight="10dp" 45 android:layout_marginTop="5dp"/> 46 </RelativeLayout> 47 <ImageButton android:id="@+id/selectContent" 48 android:layout_height="wrap_content" 49 android:src="@drawable/toolbar_find" 50 android:layout_marginLeft="2.0dp" 51 android:scaleType="fitCenter" android:layout_width="wrap_content"/> 52 </LinearLayout> 53 54 <LinearLayout 55 android:id="@+id/layout_showdetails" 56 android:layout_width="match_parent" 57 android:layout_height="wrap_content" 58 android:orientation="vertical" 59 android:visibility="gone"> 60 61 <RelativeLayout android:orientation="horizontal" 62 android:layout_width="fill_parent" 63 android:layout_height="wrap_content" 64 android:layout_margin="8dp"> 65 66 <TextView android:id="@+id/details" 67 android:layout_width="wrap_content" 68 android:layout_height="wrap_content" 69 android:textSize="18sp" 70 android:textStyle="bold" 71 android:textColor="#ffffff" 72 android:layout_alignParentLeft="true" 73 /> 74 <ImageView android:id="@+id/speaker" 75 android:src="@drawable/speaker_button" 76 android:layout_gravity="right" 77 android:layout_alignParentRight="true" 78 android:layout_width="50dp" 79 android:layout_height="50dp"/> 80 </RelativeLayout> 81 82 <TextView android:id="@+id/tilte_one" 83 android:layout_width="fill_parent" 84 android:layout_height="wrap_content" 85 android:text="☆基本翻譯" 86 android:textColor="#ffffff" 87 android:background="#ff7d899d" 88 android:layout_margin="8dp"/> 89 <TextView android:id="@+id/trans_content" 90 android:layout_width="fill_parent" 91 android:layout_height="wrap_content" 92 android:textSize="18sp" 93 android:layout_margin="8dp" 94 android:textStyle="bold" 95 android:textColor="#ffffff"/> 96 <Button android:id="@+id/check_more" 97 android:layout_width="wrap_content" 98 android:layout_height="wrap_content" 99 android:layout_margin="8dp" 100 android:text="@string/show_more" 101 android:layout_gravity="right"/> 102 </LinearLayout> 103 </LinearLayout> 104 <ProgressBar android:id="@+id/progressBar" 105 android:layout_width="wrap_content" 106 android:layout_height="wrap_content" 107 android:indeterminate="true" 108 android:layout_gravity="center" 109 android:visibility="gone"/> 110 <TextView android:id="@+id/call_now" 111 android:layout_width="wrap_content" 112 android:layout_height="wrap_content" 113 android:textSize="7sp" 114 android:layout_gravity="center" 115 android:text="@string/search_now" 116 android:textColor="#ffffff" 117 android:visibility="gone"/> 118 </FrameLayout>
對於界面,還有許多的不足,比如用戶點擊圖片按鈕,按鈕的表現我並沒有處理,按理來說要用到<selector>資源,可是我卻怎麼也實現不瞭,也就不瞭瞭之瞭。由於Android提供的組件種類繁多,粗略計算有5個佈局,10個基礎組件,20左右的高級組件,有加上大量的屬性學起來還真的很費勁,對於我來說唯一的方法就是多寫多敲,查閱API。我們不可能把所有的組件與屬性都能倒背如流,唯一能做的是瞭解Android組件的設計思想,然後展開自己天馬行空的想象力,即便想到瞭卻不知道怎麼實現,也完全可以查閱資料,瀏覽論壇等手段現學現用。做界面如同搭積木,雖然每個人手上的積木都是相同的,但搭出來的卻一人一樣,隻要功能實現,操作順手人性,界面美觀就足矣瞭。
寫博的目的主要是記錄這段時間學習的內容,從頭到尾的詳細的做個總結,希望關註此博的同學能給我提一些更好的意見,幫助我學習。
下一篇,Web Service,Ksoap2
摘自:One Kid Sky