动手学Android之六——布局初步（三）

如果觉得现在做的事情没意思，就自己做点有意思的

         我知道之前讲了2节布局，你肯定还是没有感觉，觉得只是知道了一些知识，还不知道怎么用呢。没关系，今天我们就来动手写一个登陆界面，把我们的布局知识实际用一用。

         首先新开一个工程，叫做Login，然后把该准备的准备上咯，MainActivity，布局文件…

         首先，我们希望登陆者提供账号和密码，并且可以选择下次是否自动登陆，同时，我们还提供注册的功能，我们可以出一个简单的原型稿。

我们的登陆界面大概就是这些元素啦！原型稿过于丑陋，但是我们程序真的出来的话肯定效果比这好的。

         废话不多说，先分析下布局：虽然这个布局很普通，但是对于初学者来说并不是一件简单的事情。首先我们想一想，最外层用什么布局比较好，我个人觉得可以用一个线性布局，大的是一个垂直的线性布局包括5栏，第一栏是应用程序标题，第二栏包括中间的应用程序图标、用户名、密码、下次登陆框，第三栏包括登陆和注册按钮，第四栏是一些错误信息，第五栏是永不退缩的广告位。

         先把大的布局搞定，为了兼容不同的机型，我们使用weight属性来做：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2" 
        android:background="@color/red"
        ></LinearLayout>
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3" 
        android:background="@color/green"
        ></LinearLayout>
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2" 
        android:background="@color/blue"
        ></LinearLayout>
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" 
        android:background="@color/black"
        ></LinearLayout>
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" 
        android:background="@color/white"
        ></LinearLayout>

</LinearLayout>

         这个效果出来后：

         然后我们现在第一个红色的栏内写上我们的应用程序标题，标题要水平垂直居中的，所以我们加一个相对布局：

<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="0dp"
	android:layout_weight="2" 
	android:background="@color/background"
	>
	
	<RelativeLayout 
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		>
		<TextView
			android:id="@+id/titleText"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="@string/title" 
			android:layout_centerInParent="true"
			android:textColor="@color/title"
			android:textSize="40sp"
			android:textStyle="bold"
			/>
	</RelativeLayout>
	
</LinearLayout>

         看看效果：

下面来看第二栏：由一个ImageView、两个EditText和一个CheckBox组成，使用相对布局，先搞定这个RelativeLayout，我们希望它宽300dp，然后居中显示：

<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="0dp"
	android:layout_weight="3" 
	android:background="@color/background"
	android:orientation="horizontal"
	>
	
	<RelativeLayout
		android:layout_width="300dp"
		android:layout_height="match_parent"
		android:background="@color/red"
		>
	</RelativeLayout>
	
</LinearLayout>

我们先看下这样的效果：

那么我们怎么让它居中呢？你是不是会想到android:layout_centerInParent="true"，但是请注意，这是在RelativeLayout中才能使用的属性，我们这里实在LinearLayout中，这里有两个方法可以解决这个问题：layout_gravity和gravity，其中gravity是用在父元素中的，而layout_gravity用在子元素中。我们先用gravity试下：在LinearLayout中添加属性android:gravity="center"，看一下：（这里我们在Graphical Layout中查看，这样不用运行）

         已经居中了，我们再试下layout_gravity，我们在子元素RelativeLayout中加上android:layout_gravity="center"，看下效果：

         咦？怎么还是靠左边，难道layout_gravity没有用吗？这里的问题出在我们LinearLayout的orientation上面，我们把它改成vertical就对了，为啥呢？当orientation是水平的时候，只有垂直居中是有效的，反之，当orientation是竖直时，水平居中才是有效的。好了，我们用一种方法让它居中就行。然后我们来看ImageView。

         ImageView我们第一次见，其实它很简单，就是代表一个图片，我们看下代码：

<RelativeLayout
	android:layout_width="300dp"
	android:layout_height="match_parent"
	android:background="@color/red"
	>
	
	<ImageView
		android:id="@+id/appImage"
		android:layout_margin="10dp"
		android:layout_width="80dp"
		android:layout_height="100dp"
		android:layout_alignParentTop="true"
		android:layout_alignParentLeft="true" 
		android:src="@drawable/cat"
		/>
	
</RelativeLayout>

我们放一张cat的图片到drawable-hdpi中，注意，当我们把图片放在这个文件夹的时候，R.java文件就同步更新了，这时我们就可以通过@drawable/cat来引用这张图片了。我们的cat图片是

我们来看下效果：

         这个应该是大家意料之中的，图片会根据我们设置的长宽来进行缩放，但是真的是这样吗？我们其实可以看到ImageView还有一个android:background属性，它同样可以设置图片，那么他们的区别在哪里呢？为了看到他们的区别，我们换一张图片：

         先是android:background="@drawable/smallcat"，效果如下：

         我们看到图片在两个方向上都被拉伸了，再看下android:src="@drawable/smallcat"

         啊哈，图片也被拉伸了，但是它的长宽比没有变，这就是他们的区别，但是src也是可以设置如何拉伸的，如果我们设置android:scaleType="fitXY"，那效果就和background一样了。

         我们换回cat图片，下面开始编写两个EditText，其实很简单：

<EditText
	android:id="@+id/userEdit"
	android:layout_marginLeft="10dp"
	android:layout_width="180dp"
	android:layout_height="wrap_content"
	android:layout_alignTop="@id/appImage" 
	android:layout_toRightOf="@id/appImage"
	android:drawableLeft="@drawable/user"
	android:inputType="textEmailAddress"
	/>

<EditText
	android:id="@+id/passwordEdit"
	android:layout_marginLeft="10dp"
	android:layout_width="180dp"
	android:layout_height="wrap_content"
	android:layout_alignBottom="@id/appImage" 
	android:layout_toRightOf="@id/appImage"
	android:layout_alignBaseline="@id/appImage"
	android:drawableLeft="@drawable/password"
	android:inputType="textPassword"
	/>

         我们让第一个EditText与图片上方对其，让第二个EditText与图片下方对其，EditText还有一个android:drawableLeft属性，可以指定图片的，这个很好用的，还有一个很好用的属性是android:inputType，如果是密码指定textPassword，输入的时候就会自动变成***了。效果看下吧：

         再来搞定CheckBox

<CheckBox
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="@string/autologin"
	android:layout_centerHorizontal="true"
	android:layout_below="@id/appImage"
	/>

         我们去掉红色背景看下效果：

         效果还不错的吧，但是好像我们的字离图标太近了，怎么办呢？很好办，我们给图片加一段空白就好了嘛？一个小小的障眼法就OK了

         这里先不看效果了，先搞定两个按钮，登陆和注册吧：

<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="0dp"
	android:layout_weight="2" 
	android:background="@color/background"
	android:orientation="horizontal"
	>
	
	<Button
		android:id="@+id/loginBtn"
		android:layout_width="0dp"
		android:layout_height="wrap_content"
		android:layout_weight="1"
		android:layout_margin="10dp"
		android:text="@string/login"
		android:textColor="@color/white"
		android:background="@color/blue"
		android:textSize="20sp"
		android:padding="10dp"
		></Button>
	
	<Button
		android:id="@+id/loginBtn"
		android:layout_width="0dp"
		android:layout_height="wrap_content"
		android:layout_weight="1"
		android:layout_margin="10dp"
		android:text="@string/register"
		android:textColor="@color/white"
		android:background="@color/blue"
		android:textSize="20sp"
		android:padding="10dp"
		></Button>
	
</LinearLayout>

         我们又一次用到了weight属性，我个人觉得理解了它还是很好用的哦！看下效果：

         不错吧，再把剩下的加上：

<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="0dp"
	android:layout_weight="1.5" 
	android:background="@color/background"
	android:orientation="horizontal"
	android:gravity="center_horizontal"
	>
	
	<TextView
		android:id="@+id/errMess"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:textColor="@color/red"
		android:textSize="20sp"
		android:text="test"
		/>
	
</LinearLayout>

<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="0dp"
	android:layout_weight="1" 
	android:background="@color/background"
	android:orientation="horizontal"
	>
	
	<ImageView
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		android:background="@drawable/banner" 
		/>
	
</LinearLayout>

         我们来看下最终效果：

         当然，我这里的图都是没有经过处理的，比较丑陋，但是布局的目的不是图片，而是把元素放在该放的位置，我们的目的已经达到了。

         下面我们来总结一下吧：

1、新控件ImageView和CheckBox

2、EditText的属性android:drawableLeft和android:inputType

3、layout_gravity和gravity

4、ImageView的属性src和background

5、还有，你要自己学会总结哈

这节的例子在http://download.csdn.net/detail/yeluoxiang/7306271，欢迎大家和我讨论！

补充：在有些机器上测试，EditText默认不是白色的，这时候有些问题：

       解决方法有两个：1、用PS把图片的白色部分改成透明的；2、用原始图片，在EditText中添加属性：android:drawablePadding，该属性可以设置文字和图片的间隔。代码还是老代码，请大家下下来后自己更正。