Android——UI

一

1.首先创建一个新的Project，界面如下：

这里写图片描述

然后一直点Next就OK~

这里写图片描述

这就是建完Project之后的界面~

2.我们在做这个之前准备了一些需要用到的图标图片，然后把这些图标图片导入到res/drawable文件夹下，如下：

这里写图片描述

现在准备工作就完成了，接下来就需要编写代码部分。

二.实例代码

这一部分虽说是代码，但是代码内容很好理解。

1.由于编写布局文件时，相同控件之间的外边距和宽高都是固定的。因此会产生大量重复的布局代码，为了代码简洁和重复使用可以将相同代码抽取为样式单独放在一个style.xml文件中。下面是style.xml的编写：

这里写图片描述

上面我们自己添加了命名为h_wrap_content和tv_style的两个style，其中设置了高，宽，距离顶部距离，距离底部距离和背景颜色等属性，方便其他页面来引用这些属性。

2.在res目录下创建values-zh-rCN、values-en-rUS文件夹，并在这两个文件夹下创建相应的strings.xml文件。

这里写图片描述

上图为创建values-zh-rCN文件夹，另一个文件夹创建方式同上。

但是在这个地方我们会有疑惑，我们创建的这两个文件夹去哪儿了呢，肯定很多人会有这个疑惑，其实很简单，把左上角的Androd视图切换为Project视图，如下：

这里写图片描述、

上图中红色笔圈出来的是不是就是我们创建的那两个文件夹呢。
然后我们在这两个文件夹下分别创建一个strings文件就ok了，建完之后如下图：

这里写图片描述

接下来就是这两个xml文件的编写工作：

这里写图片描述

这两个xml文件分别为手机页面上图标中的文字，一个为中文，一个为英文。

3.接下来是最重要的主页面了，在这个页面中我们需要将图标进行排版，整合大小，使这八个图标均匀分布在屏幕上。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/darker_gray"
    android:orientation="vertical"
    tools:context="com.example.shoujiyemian.MainActivity">
</LinearLayout>

上面代码设置了这个页面的基本属性，设置为线性布局，上面设置为垂直分布。

 <RelativeLayout style="@style/h_wrap_content"
        android:layout_marginTop="20dp">
        <TextView
            style="@style/tv_style"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="20dp"
            android:layout_height="110dp"
            android:layout_width="160dp"
            android:drawableTop="@drawable/clound"
            android:text="@string/_cloud" />
        <TextView
            style="@style/tv_style"
            android:layout_alignParentRight="true"
            android:layout_marginRight="20dp"
            android:layout_height="110dp"
            android:layout_width="160dp"
            android:drawableTop="@drawable/bluetooth"
            android:text="@string/_bluetooth" />
    </RelativeLayout>

在LinearLayout标签中加入上述四个RelativeLayout标签，每个RelativeLayout标签中加上两个TextView用来放两个图标图片，里面设置了图片的高和宽，引用了strings.xml中设置的string。

三.效果图

这里写图片描述

猜你喜欢