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