Android 用户登录界面

本篇博客主要给大家演示怎样一步一步地创建一个类似于下图展示的这么一个UI界面：



一、准备图片资源

记住：因为Demo其中用到的图片资源都是直接从上面图片截取的，所以图片质量上面会差一些，只是。不影响我们的演示效果。主要准备下面三张图片：

1）facebook_connect.png

2）linkedin_connect.png

3）ic_highlight.png

准备好了过后，直接拷贝到我们Demo其中的drawable-xhdpi目录其中。

在正式发行的App其中，为了要适配不同分辨率的显示效果，有一些图片，我们往往会准备多套。

为了演示的方便，我们仅仅准备了一套适配xhdpi分辨率的图片。

二、開始布局

布局其中将会包含下面几个UI控件：

TextView（To use highlight...）
ImageButton（Facebook）
ImageButton（LinkedIn）
TextView（Why not email?）
TextView（Highlight is based...）
TextView（Please let us know...）
TextView（We will not post things without...）

第一步：布局背景设置

要将布局背景设置为白色。源代码例如以下：

<?

xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff">

</RelativeLayout>

第二步：ImageButton设置

源代码例如以下：

<ImageButton
android:id="@+id/btnFacebook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="@null"
android:contentDescription="@string/facebook_desc"
android:src="@drawable/facebook_connect" />

<ImageButton
android:id="@+id/btnLinkedIn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/btnFacebook"
android:layout_below="@+id/btnFacebook"
android:layout_marginTop="5dp"
android:background="@null"
android:contentDescription="@string/linkedin_desc"
android:src="@drawable/linkedin_connect" />

当中：第一个ImageButton通过设置android:layout_alignParentTop这个属性为true，从而达到与父控件顶端对齐的目的。第二个ImageButton通过设置android:layout_alignLeft="@+id/btnFacebook"从而达到与第一个ImageButton左边对齐的目的。第一个ImageButton通过设置android:layout_centerHorizontal这个属性为true。从而达到水平居中的目的。

到如今为止，界面显示效果例如以下：



第三步：TextView设置

拖五个TextView控件到布局其中去，然后将须要显示的不同的文本保存在res/values/strings.xml文件其中，源代码例如以下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">LoginLayout</string>
<string name="facebook_desc">Facebook</string>
<string name="linkedin_desc">LinkedIn</string>
<string name="highlight_preamble">To use Highlight, please sign in with one of the services below:</string>
<string name="why_not_email_title">Why not email?

</string>
<string name="why_not_email_body">Highlight is based on real identity and mutual friends.
Using these services allows us to show you how you are connected to the people around you.
It also makes it super easy to create a Highlight profile.
</string>
<string name="feedback_label">
<![CDATA[
Please <a href="http://highlight.com">let us know</a> if you have feedback on this or if
you would like to log in with another identity service. Thanks!
]]>
</string>
<string name="permission_label">We will not post things without your permission.</string>
</resources>

然后给对应的TextView设置上对应的显示文本，并做一下主要的属性的设置。整个布局文件的源代码例如以下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff">

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
android:layout_alignParentTop="true"
android:text="@string/highlight_preamble"
android:textColor="#575757"
android:textSize="14sp" />

<ImageButton
android:id="@+id/btnFacebook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="@+id/textView1"
android:layout_marginTop="10dp"
android:background="@null"
android:contentDescription="@string/facebook_desc"
android:src="@drawable/facebook_connect" />

<ImageButton
android:id="@+id/btnLinkedIn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/btnFacebook"
android:layout_below="@+id/btnFacebook"
android:layout_marginTop="10dp"
android:background="@null"
android:contentDescription="@string/linkedin_desc"
android:src="@drawable/linkedin_connect" />

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/textView1"
android:layout_below="@+id/btnLinkedIn"
android:layout_marginTop="23dp"
android:text="@string/why_not_email_title"
android:textColor="#7e7e7e"
android:textStyle="bold" />

<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/textView2"
android:layout_below="@+id/textView2"
android:layout_marginTop="10dp"
android:text="@string/why_not_email_body"
android:textColor="#7e7e7e" />

<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/textView3"
android:layout_below="@+id/textView3"
android:layout_marginTop="10dp"
android:text="@string/feedback_label"
android:textColor="#7e7e7e" />

<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView4"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="@string/permission_label"
android:textColor="#bbbbbb"
android:textSize="12sp" />

</RelativeLayout>

做完了这些设置，界面效果例如以下：



第四步：let us know超链接设置

源代码例如以下：

public class MainActivity extends Activity
{
TextView mTVFeedBack;

@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTVFeedBack = (TextView)findViewById(R.id.textView4);
mTVFeedBack.setText(Html.fromHtml(getString(R.string.feedback_label)));

}
}

终于的UI效果如图所看到的：



三、Demo下载地址：

Demo能够从下面地址下载：http://download.csdn.net/detail/kongre/7299753