Android UI 手机信息页面（作业）

1.    设计思路（实现原理）

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

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

    3）在相对布局中添加相应的TextView

    4）在values文件下的style.xml文件中存放抽取出来的样式

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

2.    具体步骤

（1）创建“手机信息页面”程序

创建一个名为“手机信息页面”的程序，该程序用于展示手机设置页面的信息。程序界面对应布局文件activity_mian.xml如下所示：

xml version="1.0"encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="cn.edu.bzu.phonelnfo.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/darker_gray"
        android:orientation="vertical"
        tools:context=".MainActivity"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">
        <RelativeLayout style="@style/h_wrap_content"
            android:layout_marginTop="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <TextView
                style="@style/tv_style"
                android:drawableTop="@drawable/bluetooth"
                android:text="@string/_bluetooth"
                android:layout_alignParentTop="true"
                android:layout_toRightOf="@+id/textView"
                android:layout_toEndOf="@+id/textView"
                android:layout_marginLeft="43dp"
                android:layout_marginStart="43dp"
                android:id="@+id/textView2"/>

            <TextView
                style="@style/tv_style"
                android:layout_marginLeft="63dp"
                android:drawableTop="@drawable/clound"
                android:text="@string/_cloud"
                android:layout_marginStart="63dp"
                android:id="@+id/textView"
                android:layout_alignParentTop="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"/>
        RelativeLayout>

        <RelativeLayout style="@style/h_wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginTop="10dp"
>

            <TextView
                android:id="@+id/tv1"
                style="@style/tv_style"
                android:drawableTop="@drawable/gesture"
                android:text="@string/_gesture"
                android:layout_marginRight="42dp"
                android:layout_marginEnd="42dp"
                android:layout_alignParentTop="true"
                android:layout_toLeftOf="@+id/textView3"
                android:layout_toStartOf="@+id/textView3"/>

            <TextView
                style="@style/tv_style"
                android:layout_marginRight="45dp"
                android:drawableTop="@drawable/gps"
                android:text="@string/_gps"
                android:layout_marginEnd="45dp"
                android:id="@+id/textView3"
                android:layout_alignParentTop="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true"/>
        RelativeLayout>

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

            <TextView
                style="@style/tv_style"
                android:drawableTop="@drawable/info"
                android:text="@string/_system_info"
                android:id="@+id/textView4"
                android:layout_marginRight="43dp"
                android:layout_marginEnd="43dp"
                android:layout_alignParentTop="true"
                android:layout_toLeftOf="@+id/textView5"
                android:layout_toStartOf="@+id/textView5"/>

            <TextView
                style="@style/tv_style"
                android:layout_marginRight="46dp"
                android:drawableTop="@drawable/internet"
                android:text="@string/_internet"
                android:layout_marginEnd="46dp"
                android:id="@+id/textView5"
                android:layout_alignParentTop="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true"/>
        RelativeLayout>

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

            <TextView
                style="@style/tv_style"
                android:layout_marginRight="48dp"
                android:drawableTop="@drawable/notifycation"
                android:text="@string/_set_notifycation"
                android:id="@+id/textView6"
                android:layout_marginEnd="48dp"
                android:layout_alignParentTop="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true"/>

            <TextView
                style="@style/tv_style"
                android:drawableTop="@drawable/language"
                android:text="@string/_language"
                android:layout_marginRight="41dp"
                android:layout_marginEnd="41dp"
                android:id="@+id/textView7"
                android:layout_alignParentTop="true"
                android:layout_toLeftOf="@+id/textView6"
                android:layout_toStartOf="@+id/textView6"/>
        RelativeLayout>
    LinearLayout>

RelativeLayout>

 

（2）抽取样式

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

   

   

   

   

        match_parent

        wrap_content

   

    

   

 

（3）创建values-zh-rCN、values-en-rUS文件夹

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

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

    手机信息页面

    设置

    你好，世界!

    云通信

    蓝牙

    自定义手势

    定位

    系统信息

    网络

    语言设置

    通知栏设置

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

    phoneInfo

    Settings

    Hello world!

    Cloud

    Bluetooth

    Gesture

    Gps

    SystemInfo

    Internet

    Language

    Notifycation

（4）编写与界面交互的代码

接下来需要在MainActivity中编写与用户交互的逻辑代码，MainActivity对应的代码如下所示：

publicclass MainActivity extends Activity {

  @Override

  protected void onCreate(BundlesavedInstanceState) {

      super.onCreate(savedInstanceState);

      setContentView(R.layout.activity_main);

  }

}

在本次作业中，在布局方面遇到了一些问题，没有将信息控件做到和预想的那样，说明我对布局这方面的知识还不够完善，我会在学习中不断提高，我会慢慢改进，做出一个完美的手机信息页面。