本篇博客主要给大家演示怎样一步一步地创建一个类似于下图展示的这么一个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。从而达到水平居中的目的。

到如今为止,界面显示效果例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva29uZ3Jl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="400" height="200" alt="">

第三步: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效果如图所看到的:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva29uZ3Jl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

三、Demo下载地址:

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

最新文章

  1. C# 方法返回值的个数
  2. javascripts 实习自动提交表单 onsubmit
  3. IOS-day03_OC中的get和set
  4. linux 下 epoll 编程
  5. webserver&lt;1&gt;
  6. java链接sqlite资料整理
  7. 转移服务器,DEDE网站遇到no input file specified!
  8. 3.5 用NPOI操作EXCEL--巧妙使用Excel Chart
  9. ASP.NET - 多文件上传,纯代码,不使用插件
  10. Redis的安装及学习
  11. python学习之旅(入门)
  12. nginx 添加response响应头
  13. 【Python3练习题 016】 猴子吃桃问题:猴子第一天摘下若干个桃子,当即吃了一半,还不瘾,又多吃了一个。第二天早上又将剩下的桃子吃掉一半,又多吃了一个。以后每天早上都吃了前一天剩下的一半零一个。到第10天早上想再吃时,见只剩下一个桃子了。求第一天共摘了多少。
  14. 激活WIN10系统
  15. pycharm安装激活及简单设置
  16. 【LOJ】#2056. 「TJOI / HEOI2016」序列
  17. 用C++实现文件压缩(1.5)
  18. AliRedis单机180w QPS, 8台服务器构建1000w QPS Cache集群(转)
  19. 取消sudo的密码
  20. leepcode作业解析 - 5-19

热门文章

  1. Statement执行静态SQL语句
  2. 【OpenCV for Android】Android Studio集成OpenCV
  3. C语言:指针实现交换两个变量的值
  4. linux中如何清空一个文件的内容
  5. IO知识点整理(四种基类的使用)
  6. Java 分布式系统 实现session共享
  7. 应用Mongoose开发MongoDB(2)模型(models)
  8. P1890 gcd区间
  9. ehcache 在web项目中使用
  10. android stuidio 导入项目问题。