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。

转载于:https://my.oschina.net/u/860952/blog/549197