[安卓基础] 005.创建一个简单的UI

*:first-child {
margin-top: 0 !important; }
body > *:last-child {
margin-bottom: 0 !important; }

a {
color: #4183C4;
text-decoration: none; }
a.absent {
color: #cc0000; }
a.anchor {
display: block;
padding-left: 30px;
margin-left: -30px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
bottom: 0; }

h1, h2, h3, h4, h5, h6 {
margin: 20px 0 10px;
padding: 0;
font-weight: bold;
-webkit-font-smoothing: antialiased;
cursor: text;
position: relative; }

h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA09pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoMTMuMCAyMDEyMDMwNS5tLjQxNSAyMDEyLzAzLzA1OjIxOjAwOjAwKSAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM2NjlDQjI4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM2NjlDQjM4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzY2OUNCMDg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzY2OUNCMTg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsQhXeAAAABfSURBVHjaYvz//z8DJYCRUgMYQAbAMBQIAvEqkBQWXI6sHqwHiwG70TTBxGaiWwjCTGgOUgJiF1J8wMRAIUA34B4Q76HUBelAfJYSA0CuMIEaRP8wGIkGMA54bgQIMACAmkXJi0hKJQAAAABJRU5ErkJggg==) no-repeat 10px center;
text-decoration: none; }

h1 tt, h1 code {
font-size: inherit; }

h2 tt, h2 code {
font-size: inherit; }

h3 tt, h3 code {
font-size: inherit; }

h4 tt, h4 code {
font-size: inherit; }

h5 tt, h5 code {
font-size: inherit; }

h6 tt, h6 code {
font-size: inherit; }

h1 {
font-size: 28px;
color: black; }

h2 {
font-size: 24px;
border-bottom: 1px solid #cccccc;
color:#00ccff;
margin: 25px auto 12px auto;
padding-bottom: 2px;
}

h3 {
font-size: 18px;
color:#993300;}

h4 {
font-size: 16px; }

h5 {
font-size: 14px; }

h6 {
color: #777777;
font-size: 14px; }

p, blockquote, ul, ol, dl, li, table, pre {
margin: 0 0; }

/*hr {
background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC) repeat-x 0 0;
border: 0 none;
color: #cccccc;
height: 4px;
padding: 0;
}*/
hr {
margin: 0 0 19px;
border: 0;
border-bottom: 1px solid #ccc;
}

body > h2:first-child {
margin-top: 0;
padding-top: 0; }
body > h1:first-child {
margin-top: 0;
padding-top: 0; }
body > h1:first-child + h2 {
margin-top: 0;
padding-top: 0; }
body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child {
margin-top: 0;
padding-top: 0; }

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
margin-top: 0;
padding-top: 0; }

h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {
margin-top: 0; }

li p.first {
display: inline-block; }
li {
margin: 0; }
ul, ol {
padding-left: 30px; }

ul :first-child, ol :first-child {
margin-top: 0; }

dl {
padding: 0; }
dl dt {
font-size: 14px;
font-weight: bold;
font-style: italic;
padding: 0;
margin: 15px 0 5px; }
dl dt:first-child {
padding: 0; }
dl dt > :first-child {
margin-top: 0; }
dl dt > :last-child {
margin-bottom: 0; }
dl dd {
margin: 0 0 15px;
padding: 0 15px; }
dl dd > :first-child {
margin-top: 0; }
dl dd > :last-child {
margin-bottom: 0; }

blockquote {
border-left: 4px solid #dddddd;
padding: 0 15px;
color: #777777; }
blockquote > :first-child {
margin-top: 0; }
blockquote > :last-child {
margin-bottom: 0; }

/*table {
padding: 0;border-collapse: collapse; }
table tr {
border-top: 1px solid #cccccc;
background-color: white;
margin: 0;
padding: 0; }
table tr:nth-child(2n) {
background-color: #f8f8f8; }
table tr th {
font-weight: bold;
border: 1px solid #cccccc;
margin: 0;
padding: 6px 13px; }
table tr td {
border: 1px solid #cccccc;
margin: 0;
padding: 6px 13px; }
table tr th :first-child, table tr td :first-child {
margin-top: 0; }
table tr th :last-child, table tr td :last-child {
margin-bottom: 0; }*/

img {
max-width: 100%; }

span.frame {
display: block;
overflow: hidden; }
span.frame > span {
border: 1px solid #dddddd;
display: block;
float: left;
overflow: hidden;
margin: 13px 0 0;
padding: 7px;
width: auto; }
span.frame span img {
display: block;
float: left; }
span.frame span span {
clear: both;
color: #333333;
display: block;
padding: 5px 0 0; }
span.align-center {
display: block;
overflow: hidden;
clear: both; }
span.align-center > span {
display: block;
overflow: hidden;
margin: 13px auto 0;
text-align: center; }
span.align-center span img {
margin: 0 auto;
text-align: center; }
span.align-right {
display: block;
overflow: hidden;
clear: both; }
span.align-right > span {
display: block;
overflow: hidden;
margin: 13px 0 0;
text-align: right; }
span.align-right span img {
margin: 0;
text-align: right; }
span.float-left {
display: block;
margin-right: 13px;
overflow: hidden;
float: left; }
span.float-left span {
margin: 13px 0 0; }
span.float-right {
display: block;
margin-left: 13px;
overflow: hidden;
float: right; }
span.float-right > span {
display: block;
overflow: hidden;
margin: 13px auto 0;
text-align: right; }

code, tt {
margin: 0 2px;
padding: 0 0px;
white-space: nowrap;
/*background-color: #fff;*/
color: rgba(51, 102, 255, 255);
/*border: 1px solid #eaeaea;*/
/*background-color: #f8f8f8;*/
/*border-radius: 3px; */}

pre code {
margin: 0;
padding: 0;
white-space: pre;
border: none;
color: rgba(0, 0, 0, 255);
background: transparent; }

.highlight pre {
background-color: #f8f8f8;
border: 1px solid #cccccc;
font-size: 13px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px; }

pre {
background-color: #f8f8f8;
border: 1px solid #cccccc;
font-size: 14px;
line-height: 19px;
overflow: auto;
padding: 6px 10px;
border-radius: 3px; }
pre code, pre tt {
background-color: transparent;
border: none; }

sup {
font-size: 0.83em;
vertical-align: super;
line-height: 0;
}
* {
-webkit-print-color-adjust: exact;
}
@media screen and (min-width: 914px) {
body {
/*width: 854px;*/
/*margin:0 auto;*/
}
}
@media print {
table, pre {
page-break-inside: avoid;
}
pre {
word-wrap: break-word;
}
}

#cnblogs_post_body li ul li {
list-style-type: circle !important;
}
#cnblogs_post_body a {
text-decoration: none;
color: #4183C4;
}

#mainContent .postBody h2 {
margin: 25px auto 12px auto;
padding-bottom: 2px;
}
-->

创建一个简单的UI界面

这篇课程你会学到：
1、一个UI布局标签Linear Layout的初体验
2、在布局中使用一个输入框
3、res文件夹下的String.xml初体验
4、在布局中使用一个按钮
5、让你的输入框变的更合适屏幕的宽度

android的图形用户界面（简单的说就是你看到的app界面）是用一堆的View类和ViewGroup（一些View和ViewGroup的子孙）来按照布局文件一个一个堆叠起来的。比如：按钮，输入框，还有一些不可见的View容器（如：LinearLayout、RelativeLayout）,都是继承自View或者ViewGroup。他们都是View和ViewGroup的子孙。继承关系如下图：

android也提供了xml的布局方式，他们的名称和这些类的名称一样，使用这些标签，也可以来定义UI。

在这篇课程中，你会使用xml的布局方法来创建一个有着输入框和按钮的界面，并且你会了解如何在按钮中编写响应事件的代码。

创建一个LinearLayout

在res/layout目录下，打开activity_main.xml文件。
把自动生成的TextView标签代码删掉。添加下面这段代码：

     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="horizontal">

     </LinearLayout>

LinearLayout是一个ViewGroup（一个继承ViewGroup的子类），在它里面可以承装许多的View和ViewGroup。

上面的xml代码中，android:orientation属性，是用来定义LinearLayout的布局方向，horizontal表示横向，vertical表示纵向。另外两个属性：android:layout_width和android:layout_height是必须写的，不写会编译报错，这两个属性定义view的宽度和高度。match_parent，表示宽度和高度是会被扩展（膨胀）填充到它的父View(ViewGroup)。

添加一个Text Field（输入框）

在LinearLayout中加上这段代码：

         <EditText
             android:id="@+id/edittext_input"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
5             android:hint="写点东西吧"/>

上面的xml代码中。android:id定义这个View的唯一标识，你可以通过这个id在代码中找到定义这个id的View。我们可以用上面的代码来定义id，(+)，当你第一次定义这个id的适合，你要使用它。这次在android:layout_width和android:layout_height中定义的字符串是：wrap_content，wrap，包裹的意思.说明这个EditText的宽度和高度是只要能干好包裹住里面的内容。match_paraent是往外扩,wrap_content是往里收。android:hint,hint，暗示的意思。这个属性是EditText特有的，表示当输入框没有输入内容是，里面有一段默认的提示文字。

添加字符资源

在应用中如何定义文字呢。你可以直接写，如上面的代码，把“写点东西吧”写在代码中。也可以有更好的管理方式，把这些字符串写在单独的文件中去管理。这样做的好处是更好管理字符串，字符串变成可复用，而且可以实现国际化（这个非常重要，关系到应用的国际化处理，后面再讲）。

在res/values/strings.xml中，我们来定义一些文本信息。添加如下代码：

 <?xml version="1.0" encoding="utf-8"?>
 <resources>

     <!-- 添加的代码 -->
     <string name="edit_default_message">写点东西吧</string>
     <string name="button_send">发送</string>

 </resources>

还记得上面定义的EditText吗，把里面的字符串改一下，改成引用的方式。如下代码：

 <EditText
             android:id="@+id/edittext_input"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:hint="@string/edit_default_message"/>

添加Button（按钮）

我们添加一个按钮，添加如下代码：

 <Button
             android:id="@+id/button_send"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
                android:text="@string/button_send"/>

以上代码写好运行后的布局：

让输入框适配屏幕宽度

虽然上面的步骤做好，就完成了这次的界面布局。但这个布局并不能完美适配所有的手机屏幕。有的屏幕尺寸大，上面的布局就会显得很小气，如果我们能让布局自动根据比例填充整个屏幕，那就更好了。

在这里讲一个属性：

LinearLayout的weight(比重)

weight是LinearLayout专有的属性。用他来定义这个View再布局空间中的比重。weight是数值。数值越大，说明这个控件在空间中的比重越大。比如在LinearLayout中，如果它是横向布局，则比重越大的控件，占据的宽度越多。纵向布局类似。在weight面前，如果是横向布局，android:layout_width的属性作废，如果是纵向布局，android:layout_height属性作废。但因为这两个属性是控件必须定义的属性，所以里面的值，你就改成0dp吧。dp是长度单位，是dip（device independent pixels）的缩写，你写dp和dip都一样。表示(设备独立像素，这个单位和设备硬件有关，支持WVGA、HVGA和QVGA推荐使用这个，不依赖像素。)代码如下：

 <EditText
             android:id="@+id/edittext_input"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:hint="@string/edit_default_message"/>

在此，我们定义EditText控件的weight为1，button为0，运行后，editText控件就把屏幕所有剩余宽度的空间给占据了。如下图：

在此，贴出这次的所有布局代码：

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:paddingBottom="@dimen/activity_vertical_margin"
     android:paddingLeft="@dimen/activity_horizontal_margin"
     android:paddingRight="@dimen/activity_horizontal_margin"
     android:paddingTop="@dimen/activity_vertical_margin"
     tools:context="com.babybus.demo001.MainActivity" >

     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="horizontal">
         <EditText
             android:id="@+id/edittext_input"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:hint="@string/edit_default_message"/>
         <Button
             android:id="@+id/button_send"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
                android:text="@string/button_send"/>
     </LinearLayout>

 </RelativeLayout>

本站文章为宝宝巴士 SD.Team原创，转载务必在明显处注明：（作者官方网站：宝宝巴士) 
转载自【宝宝巴士SuperDo团队】 原文链接: http://www.cnblogs.com/superdo/p/4493142.html