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...）

第一步：布局背景設定

要將布局背景設定為白色，源碼如下：

第二步：ImageButton設定

源碼如下：

其中：第一個ImageButton通過設定android:layout_alignParentTop這個屬性為true，從而達到與父控制項頂端對齊的目的；第二個ImageButton通過設定android:layout_alignLeft="@+id/btnFacebook"從而達到與第一個ImageButton左邊對齊的目的；第一個ImageButton通過設定android:layout_centerHorizontal這個屬性為true，從而達到水平置中的目的。到現在為止，介面顯示效果如下：

第三步：TextView設定

拖五個TextView控制項到布局當中去，然後將需要顯示的不同的文本儲存在res/values/strings.xml檔案當中，源碼如下：

    LoginLayout    Facebook    LinkedIn    To use Highlight, please sign in with one of the services below:    Why not email?    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.                    Please let us know if you have feedback on this or if         you would like to log in with another identity service. Thanks!               We will not post things without your permission.

然後給相應的TextView設定上相應的顯示文本，並做一下基本的屬性的設定，整個布局檔案的源碼如下：

做完了這些設定，介面效果如下：

第四步：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可以從以下地址下載：http://download.csdn.net/detail/kongre/7299753