Android UI 学习记录

 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://schemas.android.com/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://schemas.android.com/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(R.id.text1);
tv.setBackgroundResource(R.mipmap.ic_launcher);

最后我们整合一下MainActivity.java文件。 

package com.example.myapp;

import androidx.appcompat.app.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(R.id.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(用于设置字体大小)

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章