Android的UI界面设计在main_activity.xml文件中进行,其路径如下图所示。
接下来我们进行UI界面的设计。
(1)首先创建一个空白应用。
(2)找到main_activity.xml文件所在位置,清空里面的原有文件,我们来自己实现一个UI界面
A .我们需要先创建一个Layout布局,在android中支持几种布局,分别是:<LinearLayout>,<AbsoluteLayout >,<FrameLayout> ,<GridLayout >,<RelativeLayout> ,<TableLayout>。
在这里我们创建一个<LinearLayout>并对布局的长、宽以及排列方式进行设置。
<LinearLayout xmlns:android="http:///apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
</LinearLayout>
其中,orientation属性表示布局的排列方式,在这里我们使用垂直排列的方式来进行布局。
B .然后我们在已创建的布局中加入一个TextView控件,接下来我们会了解一下控件中的相关属性,但在此之前,我们需要先了解一下Android的R.java文件。
a.R.java简介
R.java文件是编译器自动生成的,它无需开发人员对其进行维护。R.java会自动收录当前应用中所有的资源,并根据这些资源建立对应的ID,包括:布局资源、控件资源、String资源、Drawable资源等。我们可以简单的把R.java理解成是当前Android应用的资源字典。
在当前项目不能包含任何错误的前提下,手动删除了R.java文件,编译器会立即重新生成一个R.java文件;在res/目录中增加了一个新的资源,编译器也会立即把这个资源的ID收录到R.java文件中。但是都是有个前提的,就是当前项目不能包含任何错误。当发现在更新的资源后,R.java没有对此资源进行收录,那么就需要检查一下当前项目是否存在错误。
b.R.java所在路径(如下图所示)
在了解完R.java文件后,我们接着回到控件中相关属性的介绍,我们重新看到main_activity.xml文件。
c.通常第一步,我们需要将控件加到索引库里
<TextView
android:id="@+id/text1"/>
其中@+表示将后面的内容作为索引的变量名字加入到索引组库当中,id表示将其加入到id当中,这里表示将text1作为变量名加入到索引库的id中。
d .设置控件布局的长和宽。
android:layout_width="wrap_content"
android:layout_height="wrap_content"
这里layout_width和layout_height中可设置的属性有:wrap_content、match_parent、fill_parent。
wrap_content:表示宽度或高度足以包含他们的内容即可
match_parent:表示与父元素的大小进行匹配(根据权重确定大小)
fill_parent:表示填充父元素
e.控件布局的排列方式
android:layout_gravity="center_horizontal"
在这里表示水平居中,值得注意的是,当你将整体布局设置为android:orientation="vertical"时,将layout_gravity设置为center_vertical将是无效的,因为整体布局已经被确定为垂直排列方式,因此无法进行垂直方向的居中。
除了水平和垂直居中外,layout_gravity还可以设置置顶,置底,靠左靠右等。
f.设置内容的高度
android:height="100dp"
g.设置控件的背景
android:background="@mipmap/ic_launcher"
在项目中,程序已经给我们提供了相关的应用图片,例如博主所创建的Android项目在下图目录中有相应的图片,在这里我们可以加以利用。
值得注意的是,这里面提供的相应图片已经被程序加入到索引库中,所以我们需要对其引用。
我们打开R.java文件,在文件结构中找到mipmap对应的地方,找到ic_lancher对应的索引值。
接下来我们在main_activity.xml文件中进行引用。
@mipmap/ic_launcher
其中,@表示引用R.java中的资源,在这里我们选定mipmap中的ic_launcher,并将其设置为背景。
h.设置控件内容的排列方式
android:gravity="bottom"
这里类似控件的布局排列方式,代码中我们将排列方式设置为置底。
i.设置padding属性,表示距离某个边的距离,这里涉及到的单位sp我们后面再进行介绍。
android:paddingBottom="100sp"
j.设置文本
首先,我们需要将文本字符串写入资源R.java中,那么应该怎么写呢?我们打开res中的values文件,会看到strings.xml文件,我们可以通过对该文件进行修改,从而达到将字符串写入索引库中的目的。
我们打开strings.xml文件并进行修改,将我们需要的字符串进行命名并设置对应的字符串内容。
<resources>
<string name="app_name">Myapp</string>
<string name="textViewName">This is a text veiw.</string>
</resources>
在该段代码中,博主将变量textViewName设置为”This is a text veiw.“。这样我们就成功将该字符串变量加入到索引库中,它会被放到R.java中的string中。我们回到main_activity.xml对其进行引用。
android:text="@string/textViewName"
k.设置字体、字体大小和字体样式
android:textSize="20.6sp"
android:textStyle="bold|italic"
android:typeface="serif"
在设置字体样式时,如果需要设置多种字体样式时,需要加上“|”隔开。
最后我们整合一下main_activity.xml文件。
<LinearLayout xmlns:android="http:///apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:id="@+id/text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:height="100dp"
android:background="@mipmap/ic_launcher"
android:gravity="bottom"
android:paddingBottom="100sp"
android:text="@string/textViewName"
android:textSize="20.6sp"
android:textStyle="bold|italic"
android:typeface="serif" />
</LinearLayout>
这个文件将会在MainActivity.java文件中进行调用显示,它被放在onCreate方法中,当然对于页面的设计我们也可以用代码来实现。我们看看MainActivity.java.
a.我们使用下列代码来调用main_activity.xml文件。
setContentView(R.layout.main_activity);
b.设置控件的属性
首先获取控件的id,并对其属性进行设置。
TextView tv = (TextView) findViewById(.text1);
tv.setBackgroundResource(R.mipmap.ic_launcher);
最后我们整合一下MainActivity.java文件。
package com.example.myapp;
import .AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;
import com.example.myapp.ui.main.MainFragment;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_activity);
TextView tv = (TextView) findViewById(.text1);
tv.setBackgroundResource(R.mipmap.ic_launcher);
}
}
最终的结果如下图。
补充:属性的相关单位
in(inch) --英尺
mm --毫米
dpi = dots per inch(每英尺中的像素点个数)
dp Density-Independent Pixels : 160dpi
(自动适配计算对应值,不会因为屏幕大小而影响像素,用于设置控件大小)
sp scaled Pixels based on prefered font size(用于设置字体大小)