初步认识UI开发---UI布局（页面交互及国际化）

运用UI布局实现一个手机信息页面

效果图

下面说明操作步骤

1.将准备好的八个图标复制到res/drawable文件夹下

2.创建一个垂直的线性布局，并在线性布局中创建4个相对布局

<LinearLayoutxmlns: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:background="@android:color/darker_gray"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <RelativeLayout></RelativeLayout> 

    <RelativeLayout></RelativeLayout>

    <RelativeLayout></RelativeLayout>

    <RelativeLayout></RelativeLayout>

</LinearLayout>

注：

①tools:context=".MainActivity" ：将这个 layout 文件和后面 的 MainActivity 进行关联，这样编辑器在展示布局效果的时候，就能针对MainActivity  的一些属性进行有针对性的处理。

②android:orientation="vertical"：让四个相对布局垂直放置

3.添加style属性

<RelativeLayoutstyle="@style/h_wrap_content"
    android:layout_marginTop="10dp">

注：

①RelativeLayout中的style="@style/h_wrap_content"引用的style.xml中的<style name="h_wrap_content">

样式  宽 match——parent  高  wrap_content

4.在每个相对布局中添加两个相应的TextView

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

注：

①android:drawableTop="@drawable/clound"：用来设置在TextView中图片在文字的上边

②android:layout_alignParentLeft="true"
   android:layout_alignParentRight="true"：显示跟父局部左右对齐

③TextView中
   style="@style/tv_style"引用的style.xml中的<style name="tv_style">样式   宽高都 match——parent

5.抽取样式由于编写布局文件时，相同控件之间的外边距和宽高都是固定的。因此会产生大量重复的布局代码，为了代码简洁和重复使用可以将相同代码抽取为样式单独放在一个style.xml文件中。<resources>
    <stylename="AppBaseTheme"parent="android:Theme.Light">
</style>
   <stylename="h_wrap_content">
<itemname="android:layout_width">match_parent</item>
<itemname="android:layout_height">wrap_content</item>
</style>
 <stylename="tv_style">
<itemname="android:layout_width">170dp</item>
<itemname="android:layout_height">120dp</item>
<itemname="android:gravity">center</item>
<itemname="android:paddingTop">8dp</item>
<itemname="android:paddingBottom">8dp</item>
<itemname="android:drawablePadding">5dp</item>
<itemname="android:background">@android:color/white</item>
</style>
    </resources>

6.创建values-zh-rCN、values-en-rUS文件夹，并在文件夹中创建strings.xml文件

values-en-rUS文件夹下的strings.xml文件如下所示：

<?xml version="1.0"encoding="utf-8"?>
<resources>
    <stringname="app_name">phoneInfo</string>
    <stringname="menu_settings">Settings</string>
    <stringname="hello_world">Hello world!</string>
    <stringname="_cloud">Cloud</string>
    <stringname="_bluetooth">Bluetooth</string>
    <stringname="_gesture">Gesture</string>
    <stringname="_gps">Gps</string>
    <stringname="_system_info">SystemInfo</string>
    <stringname="_internet">Internet</string>
    <stringname="_language">Language</string>
    <stringname="_set_notifycation">Notifycation</string>
</resources>

values-en-rCN文件夹下的strings.xml文件如下所示：

<?xml version="1.0"encoding="utf-8"?>
<resources>
    <stringname="app_name">手机信息页面</string>
    <stringname="menu_settings">设置</string>
    <stringname="hello_world">你好，世界!</string>
    <stringname="_cloud">云通信</string>
    <stringname="_bluetooth">蓝牙</string>
    <stringname="_gesture">自定义手势</string>
    <stringname="_gps">定位</string>
    <stringname="_system_info">系统信息</string>
    <stringname="_internet">网络</string>
    <stringname="_language">语言设置</string>
    <stringname="_set_notifycation">通知栏设置</string>
</resources>

注：①values-zh-rCN、values-en-rUS分别是中文语言环境和英文语言环境

7.编写与界面交互的代码

MainActivity对应的代码如下所示：

public classMainActivityextendsAppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.MainActivity);
    }
}

8.运行程序

则能看到图一所示界面。退出程序，打开系统设置（setting菜单），转换语言，设置好语言之后，重新进入程序能看到图二所示界面。

                   

                           图一                                                 图二

这是比较简单的一个UI布局，对于刚学习安卓的我来说还有很大的进步空间，希望得到你们的采纳。有什么问题或者建议可以随时联系我。