Android miniTwitter登录界面

导读：一个非常细致的登录界面解析，当我们看见一个界面的时候，大家就应该明白把他们都给分开，这样我们在写代码的时候就会非常的方便，也就是一个一个的来实现。

 

布局分析：分成三个部分，该Activity是一个无标题的,设置无标题需要在setContentView之前设置，否则会报错，

1	requestWindowFeature(Window.FEATURE_NO_TITLE);

2	setContentView(R.layout.login);

第一部分是一个带渐变色背景的LinearLayout布局，关于背景渐变色请参照 android小技巧：android 背景渐变色(shape,gradient)  ，

1	<?xml version="1.0" encoding="UTF-8"?>

2	<shape xmlns:android="http://schemas.android.com/apk/res/android">

3	<solid android:color="#55FFFFFF" />

4

<!-- 设置圆角

5	注意： bottomRightRadius是左下角而不是右下角 bottomLeftRadius右下角-->

6	<corners android:topLeftRadius="10dp" android:topRightRadius="10dp"

7	android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp"/>

8

</shape>

  solid表示填充色，这里填充的是淡蓝色。 corners是设置圆角。 dp (即dip,device independent pixels)设备独立像素：这个和设备硬件有关，一般我们为了支持WVGA、HVGA和QVGA ，不依赖像素。 在android上开发的程序将会在不同分辨率的手机上运行。为了让程序外观不至于相差太大，所以引入了dip的概念。比如定义一个矩形10 x 10dip. 在分辨率为160dpi 的屏上，比如G1，正好是10 x 10像素。 而在240 dpi 的屏，则是15 x 15 像素. 换算公式为 pixs = dips * (density/160). density 就是屏的分辨率 然后RelativeLayou的background引用此drawable,具体RelativeLayout设置如下

1	<RelativeLayout

2	android:id="@+id/login_div"

3	android:layout_width="fill_parent"

4	android:layout_height="wrap_content"

5	android:padding="15dip"

6	android:layout_margin="15dip"

7	android:background="@drawable/background_login_div_bg"

8

>

9	</RelativeLayout>

padding 是指内边距(也就是指内容与边框的距离)， layout_margin为外边距(它的上一层与边框的距离)。 接下来是区域2，为账号的文本和输入框，首先是账号的文本，代码如下:

1

<TextView

2	android:id="@+id/login_user_input"

3	android:layout_width="wrap_content"

4	android:layout_height="wrap_content"

5	android:layout_alignParentTop="true"

6	android:layout_marginTop="5dp"

7	android:text="@string/login_label_username"

8	style="@style/normalText"/>

android:layout_alignParentTop 这里表示此TextView的位置处于顶部 android:layout_marginTop="5dp" 这里表示此TextView的边框与RelativeLayout的顶部边框距离有5dp 这里需要对这个TextView设置下字体颜色和字体大小，定义在res/style.xml里面  

1	<style name="normalText" parent="@android:style/TextAppearance">

2	<item name="android:textColor">#444</item>

3	<item name="android:textSize">14sp</item>

4

</style>

定义账号的输入框，如下

1

<EditText

2	android:id="@+id/username_edit"

3	android:layout_width="fill_parent"

4	android:layout_height="wrap_content"

5	android:hint="@string/login_username_hint"

6	android:layout_below="@id/login_user_input"

7	android:singleLine="true"

8	android:inputType="text"/>

android:hint 输入框里面的提示文字， android:layout_below这里是设置为在账号的文本框的下面， android:singleLine 为单行输入(即你输入回车的时候不会在换行了) android:inputType这里text表示 输入的类型为文本 区域3是密码文本和输入框,同区域2，代码如下：  

01

<TextView

02	android:id="@+id/login_password_input"

03	android:layout_width="wrap_content"

04	android:layout_height="wrap_content"

05	android:layout_below="@id/username_edit"

06	android:layout_marginTop="3dp"

07	android:text="@string/login_label_password"

08	style="@style/normalText"/>

09

<EditText

10	android:id="@+id/password_edit"

11	android:layout_width="fill_parent"

12	android:layout_height="wrap_content"

13	android:layout_below="@id/login_password_input"

14	android:password="true"

15	android:singleLine="true"

16	android:inputType="textPassword"

17

/>

区域4，登录按钮

1

<Button

2	android:id="@+id/signin_button"

3	android:layout_width="wrap_content"

4	android:layout_height="wrap_content"

5	android:layout_below="@id/password_edit"

6	android:layout_alignRight="@id/password_edit"

7	android:text="@string/login_label_signin"

8	android:background="@drawable/blue_button"

9

/>