2025-02-09

首先看一下主界面的設計,首先要說的是搜索框,搜索框中包含“刪除”按鈕是怎麼實現的。

  以前聽說過是重寫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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *