Android之實例界面設計

最近很久沒冒泡了。剛學Android沒多久，就開始在搞界面。layout文件。

越搞才越覺得有意思。廢話不多說，先送上我的layout文件，然後解說。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:background="@drawable/background_login">
    
	<TextView android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="15dip"
        android:paddingRight="15dip"
	android:layout_marginTop="10dip"
        android:textColor="@android:color/white" 
        android:textSize="17dip"
        android:ellipsize="marquee" 
        android:focusable="true" 
        android:marqueeRepeatLimit="marquee_forever" 
        android:focusableInTouchMode="true" 
        android:scrollHorizontally="true"
        android:text="@string/runtext"
       />
    
    <!--
       padding 內邊距   layout_margin 外邊距
  		android:layout_alignParentTop 佈局的位置是否處於頂部
    -->

    <RelativeLayout 
        android:id="@+id/login_div"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
		android:layout_margin="17dp"
        android:background="@drawable/background_login_div_bg"
        android:padding="15dip" >  
 	              
	    <!-- 賬號 -->     
		<TableRow android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:gravity="center"
			android:id="@+id/account"
			>
		    <TextView 
		        style="@style/normalText"
		        android:layout_width="wrap_content"
		        android:layout_height="wrap_content"
		        android:layout_marginTop="5dp"
		        android:text="@string/login_label_username" />
		    
		    <EditText 
		        android:id="@+id/login_edit_username"
		        android:layout_width="fill_parent"
		        android:layout_height="wrap_content"
		        android:hint="@string/login_username_hint"
		        android:inputType="text"
		        android:singleLine="true" />	    
			    
		</TableRow>
	
	    
		<TableRow android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:gravity="center"
			android:layout_below="@id/account"
			android:id="@+id/password"
			>
		    <!-- 密碼text  -->
		    
		    <TextView 
		        style="@style/normalText"
		        android:layout_width="wrap_content"
		        android:layout_height="wrap_content"
		        android:layout_marginTop="3dp"
		        android:text="@string/login_label_password"  />
		    
		    <EditText 
		        android:id="@+id/login_edit_password"
		        android:layout_width="fill_parent"
		        android:layout_height="wrap_content"
		        android:hint="@string/login_password_hint"
		        android:inputType="textPassword"
		        android:minWidth="180dip"
		        android:password="true"
		        android:singleLine="true" />
		</TableRow>
	   
		<TableRow android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:gravity="center"
			android:layout_below="@id/password"
			android:id="@+id/funButton"
			android:layout_marginTop="10dp"
			>
		    <!-- 登錄button -->
		    <Button
		        android:id="@+id/login_btn_login"
		        android:layout_width="wrap_content"
		        android:layout_height="wrap_content"
		        android:layout_marginRight="20dp"
				style="@style/button"
		        android:text="@string/login_label_signin" />
		    
		    <!-- 清空button -->
		    <Button
		        android:id="@+id/login_btn_cleanup"
		        android:layout_width="wrap_content"
		        android:layout_height="wrap_content"
		        android:layout_marginRight="20dp"
				style="@style/button"
		        android:text="@string/login_label_cleanup" />
		        		        
		    <!-- 註冊button -->
			<Button 
			    android:id="@+id/login_btn_reg"
			    android:layout_width="wrap_content"
			    android:layout_height="wrap_content"
			    style="@style/button"
			    android:text="@string/login_label_register"  />
			
		</TableRow>		
    </RelativeLayout>

    <RelativeLayout 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        >
    <!-- 家居掌 中寶，捧在手心裏的至愛 -->   
   	<ImageView
   	    android:layout_width="wrap_content"
   	    android:layout_height="wrap_content"
   	    android:layout_marginLeft="25dip"
   	    android:layout_marginTop="15dp"
   	    android:src="@drawable/title" />

   	<!-- 釣魚島 -->
	<ImageView

	    android:src="@drawable/chinese"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:layout_alignParentRight="true"
	    android:layout_alignParentBottom="true"
		android:layout_margin="15dp"
	    />

    </RelativeLayout>
</LinearLayout>

這些都是素材。網上找了點，自己改了點。

這是總體效果，還有兩個文件。背景文件

background_login.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
	<gradient 
		android:startColor="#80BA55D3"
		android:endColor="#FFEE82EE"
		android:angle="45"
	/>
</shape>

background_login_div_bg.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
	<solid android:color="#55FFFFFF" />
	
	<!-- 
	設置圓角
	注意：	bottomRightRadius是左下角而不是右下角  bottomLeftRadius右下角
	-->
	
	<corners android:topLeftRadius="10dp" android:topRightRadius="10dp"
		android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp"/>
</shape>

首先，看到<LinearLayout....>。線性佈局。

在線性佈局中，你所添加的Widget會一個挨一下放。這裏就是一個Widget一行。

android:orientation="vertical" 。這個就是設置線性的方向吧。垂直線性。

android:background="@drawable/background_login"   整個界面的背景，這裏採用一個xml內容設置背景

下面是一個<TextView>    其實很多都很簡單的。width。height這些是寬高設置。wrap_content是適應內容大小。

而fill_parent是指填充滿父佈局。這裏就是寬是佔滿整個LinearLayout

padding是內邊距的意思。加個left就是左內邊距了。這些應該知道了。

margin是外邊距的意思。而textColor是指字體顏色，這裏用的是android本身定義好的。

textsize是文字大小。       

android:ellipsize=”marquee”–以跑馬燈的方式顯示(動畫橫向移動)

android:focusable="true"  獲取焦點

android:marqueeRepeatLimit="marquee_forever"  表示一直滾動

 android:focusableInTouchMode="true"    可以通過touch獲得焦點

android:scrollHorizontally="true"表示一個EditText滿了後是自動橫着移動不是默認的換行。

<RelativeLayout>是相關佈局。在這個佈局中，所有你所添加的Widget都要加上相對位置。不然就會重疊在一塊了。

例如密碼，密碼是放在賬號下面吧。所以在密碼的TableRow.中會有一行android:layout_below="@id/account"

而這裏的account是在添加賬號TableRow的時候添加的id。這是安卓中爲了找到對象的方便而提供的。

這裏說到的TableRow是一種表格。橫向表格。一行裏你可以放幾個Widget，它會自動幫你對齊，即使在RelativeLayout中，

也不需要加相對位置。

<TextView>是顯示文本的Widget。而<EditText>是輸入文本的框。

android:hint=""這個是用在，當你沒在EditText中輸入內容時，默認顯示的文字。而當你輸入內容後就會消失。

android:password="true"會把你輸入的內容當成密碼，顯示圓點

android:signleLine，當你輸入的內容超過框之後，不會換行，而是向左移動。

<ImageView>是插入圖片的Widget。