Android UI手机用户界面案例及UI概述

来源：互联网发布：类似sketch windows 编辑：程序博客网时间：2024/06/06 00:14

一、认识 Android UI

Android应用界面是由View和ViewGroup对象构建的。View类是Android系统平台上用户界面表示的基本单元，View的一些子类被统称为Widgets，他们提供了像输入框和按钮之类的UI对象的完整实现。
ViewGroup是View的一个扩展，可以容纳多个View，通过ViewGroup类可以创建有联系的子View组成的复合控件。多个视图组件可以存放在一个视图容器中，该容器可以与其他视图共同存放在另一个容器中。

创建布局文件，布局文件采用XML格式，每个应用程序默认包含一个主界面布局文件，该文件位于项目的res/layout目录中。Android中的布局分为6种，分别是相对布局、线性布局、表格布局、网格布局、帧布局、绝对布局。

1.相对布局

（1）.相对于容器（2）.相对于控件

<RelativeLayout></RelativeLayout>标签
2.线性布局：

（1）.水平线性布局：verical（2）垂直线性布局：horizontal（默认）由属性：android：orientation控制其垂直和水平取值。
<LinearLayout></LinearLayout>标签

3.表格布局：让控件以表格的形式来排列控件，只要将控件放在单元格种，控件就可以整齐的排列。
行数由TableRow对象控制，每个TableRow可放置多个控件，列数由最宽的单元格决定。

<TableLayout></TableLayout>标签

4.网格布局：用一组无限细的直线将绘图区分成行、列和单元，并指定空间的显示区域和控件在该区域的显示方式。
<GridLayout></GridLayout>标签
5.帧布局：只能在左上角显示一个控件，这些控件会按照顺序在屏幕的左上角重叠显示，且会透明显示之前的文本。
<FrameLayout></FrameLayout>标签

6.绝对布局；需要通过指定下x、y坐标来控制每一个控件的位置，放入该布局的控件需要通过android：layout_x和anroid:layout_y两个属性指定其准确的坐标值，并且显示在屏幕上。
<AbsoluteLayout></AbsoluteLayout>标签

以上是对布局的概述

二、Android UI手机用户界面案例

1.运行效果如图所示

2、实现效果图思路：

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

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

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

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

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

3、接下来就是案例实现

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

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

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    xmlns:tools="http://schemas.android.com/tools"    android:background="@android:color/darker_gray"<!--设置背景页面颜色-->    android:orientation="vertical"    tools:context=".MainActivity"    ><!--tools:context="activity name"这一句不会被打包进APK。只是ADT的Layout Editor在你当前的Layout文件

里面设置对应的渲染上下文，说明你当前的Layout所在的渲染上下文是activity name对应的那个activity，-->

<RelativeLayout style="@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"<!--引用drawable的图片-->

        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>

 <RelativeLayout style="@style/h_wrap_content"

        android:layout_marginTop="10dp">

  <TextView style="@style/tv_style"

       android:layout_alignParentLeft="true"

       android:layout_marginLeft="10dp"

       android:drawableTop="@drawable/gesture"

       android:text="@string/_gesture" />

  <TextView style="@style/tv_style"

      android:layout_alignParentRight="true"

      android:layout_marginRight="10dp"

      android:drawableTop="@drawable/gps"

      android:text="@string/_gps" />

</RelativeLayout>

<RelativeLayout style="@style/h_wrap_content"

    android:layout_marginTop="10dp">

   <TextView style="@style/tv_style"

      android:layout_alignParentLeft="true"

      android:layout_marginLeft="10dp"

      android:drawableTop="@drawable/info"

      android:text="@string/_system_info" />

  <TextView style="@style/tv_style"

        android:layout_alignParentRight="true"

        android:layout_marginRight="10dp"

        android:drawableTop="@drawable/internet"

        android:text="@string/_internet" />

 </RelativeLayout>

<RelativeLayout style="@style/h_wrap_content"

     android:layout_marginTop="10dp">

 <TextView style="@style/tv_style"

       android:layout_alignParentLeft="true"

       android:layout_marginLeft="10dp"

       android:drawableTop="@drawable/language"

       android:text="@string/_language" />

 <TextView

 style="@style/tv_style"

      android:layout_alignParentRight="true"

      android:layout_marginRight="10dp"

      android:drawableTop="@drawable/notifycation"

      android:text="@string/_set_notifycation" />

 </RelativeLayout>

</LinearLayout>

（2）抽取样式

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

<?xml version="1.0" encoding="utf-8"?><resources>    <style name="AppBaseTheme" parent="android:Theme.Light">    </style>    <style name="h_wrap_content">        <item name="android:layout_width">match_parent</item>

        <item name="android:layout_height">wrap_content</item>    </style>    <style name="tv_style">        <item name="android:layout_width">190dp</item><!--给标签设置样式，是style里的，是为了统一样式风格-->
   <item name="android:layout_height">138dp</item>

  <item name="android:gravity">center</item>

  <item name="android:paddingTop">8dp</item>

  <item name="android:paddingBottom">8dp</item>

  <item name="android:drawablePadding">5dp</item>

  <item name="android:background">@android:color/white</item>

  </style></resources>

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

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

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

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

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

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

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

接下来需要在MainActivity中编写与用户交互的逻辑代码，MainActivity对应的代码如下所示：(在project--app--src--main--java中）

public class MainActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.linearlayout);    }}

4、运行界面如下：

0 0