为了检测这几天的学习成果,综合知识点,老师给我们出了一个练习题,将国际化、样式和主题、布局结合起来,从而达到以下成果。

android12 来电去电界面布局文件_布局

看到这个图片,首先想到的是,怎么才能在中英文中互换,这就要考虑到国际化的问题。

第一步:先把用到的图片导入到drawable中,方便使用。

第二步:在strings.xml文件夹中建立两个xml文件,来实现国际化的效果,并在其中进行命名分配,将图片一一对应起来。

android12 来电去电界面布局文件_android_02


中文版:

android12 来电去电界面布局文件_android_03


英文版:

android12 来电去电界面布局文件_布局_04

第三步:由于这个布局方式呢,每个控件之间的距离,宽高都是固定的,为了使主显示区简单化,我们可以新建一个style.xml文件来单独存放所需要的样式,避免重复,用到时可以直接引用。

android12 来电去电界面布局文件_权重_05

第四步:最重要的一步,就是我们的主界面的编写,有两种方法,一个是 线性布局中引用相对布局,一种是表格布局中引用网格布局,因为我看这个界面就像一个四行两列的表格,个人表示要比线性布局简单很多。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/darker_gray">

    <GridLayout
        style="@style/lml_wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        android:columnCount="2">

        <TextView
            style="@style/lml_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:layout_columnWeight="1"
            android:layout_marginLeft="10dp"
            android:layout_rowWeight="1"
            android:drawableTop="@drawable/cloud"
            android:text="@string/_cloud"

            />

        <TextView
            style="@style/lml_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:layout_columnWeight="1"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_rowWeight="1"
            android:drawableTop="@drawable/bluetooth"
            android:text="@string/_bluetooth"

            />

        <TextView
            style="@style/lml_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:layout_rowWeight="1"
            android:drawableTop="@drawable/gesture"
            android:text="@string/_gesture"

            />

        <TextView
            style="@style/lml_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:layout_columnWeight="1"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:layout_rowWeight="1"
            android:drawableTop="@drawable/gps"
            android:text="@string/_gps"

            />

        <TextView
            style="@style/lml_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:layout_columnWeight="1"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:layout_rowWeight="1"
            android:drawableTop="@drawable/info"
            android:text="@string/_system_info"

            />

        <TextView
            style="@style/lml_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:layout_columnWeight="1"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:layout_rowWeight="1"
            android:drawableTop="@drawable/internet"
            android:text="@string/_internet"

            />

        <TextView
            style="@style/lml_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:layout_columnWeight="1"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:layout_rowWeight="1"
            android:drawableTop="@drawable/language"
            android:text="@string/_language"

            />

        <TextView
            style="@style/lml_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:layout_columnWeight="1"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:layout_rowWeight="1"
            android:drawableTop="@drawable/notifycation"
            android:text="@string/_set_notifycation"

            />
    </GridLayout>


</TableLayout>

下面我就简单介绍一下这个主界面思路…
首先建立一个表格布局,配置好背景,在表格布局中插入网格布局,长宽高都引用之前建立的style.xml,而整体看界面,控件距离最上边和最下边都是有一定距离的,因此,先控制好整体距离,并将表格设置为两列。
之后便加入两个TextView控件,为第一排,下面三排就可以复制第一排再稍作修改即可。
注意的问题:
1.两个控件均分这一整行,四个控件均分这一整列,而网格布局和相对布局不一样的是,网格布局中权重分为行权重(columnWeight)和列权重(rowWeight),因此两个权重分别设为1。
2.控件与控件之间有一定的距离,要考虑每个控件的上下左右之间距离。


这样就任务完成了!有错误我会随时改正。