【Android】通过实例学习Android UI设计的语法

迷南。 2021-09-26 13:06 138阅读 0赞

## 前言：关于项目的目录结构 ##

![这里写图片描述][70]

*  **src目录**：包含App所需的全部程序代码文件，我们大多数时候都是在这里编写我们的Java代码的
 *  **gen目录**：只关注R.java文件，它是由ADT自动产生的，里面定义了一个R类，可以看作一个id(资源编号)的字典，包含了用户界面，图形，字符串等资源的id，而我们平时使用资源也是通过R文件来调用的，同时编译器也会看这个资源列表，没有用到的资源不会被编译进去，可以为App节省空间
 *  **assets目录**：存放资源，而且不会再R.java文件下生成资源id，需要使用AssetsManager类进行访问
 *  **libs目录**：存放一些jar包，比如v4,v7的兼容包，又或者是第三方的一些包
 *  **res资源目录**：存放资源的。  
    drawable：存放图片资源；  
    layout：存放界面的布局文件，都是XML文件；  
    values：包含使用XML格式的参数的描述文件，如string.xml字符串，color.xml颜色，style.xml风格样式等
 *  **AndroidManifest.xml配置文件**：系统的控制文件，用于告诉Android系统App所包含的一些基本信息，比如组件，资源，以及需要的权限，以及兼容的最低版本的SDK等

## 实例 ##

![这里写图片描述][70 1]

该界面用了RelativeLayout相对布局的方法，将界面整体分成了三块，再在这三块里分别使用LinearLayout（线性布局）和FrameLayout（帧布局）。

### 源码 ###

**/res/layout/main.xml：**

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    android:orientation="vertical" // 设置排列方向，vertical为垂直排列，horizontal为水平排列，默认为vertical
                    android:layout_width="fill_parent" // 设置界面宽度，fill_parent为填充父容器
                    android:layout_height="fill_parent"// 设置界面高度
                    android:background="@android:color/white"> // 设置界面背景颜色为白色
    
    <LinearLayout // 线性布局
                android:orientation="vertical"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" // wrap_content为适合当前视图的大小
                android:id="@+id/layout_top"> // 为当前组件(即LinearLayout)指定一个id，在Java代码中可以应用该id来引用该组件
    
            <ImageView // 图像视图，用于显示图片
                    android:layout_width="match_parent" // match_parent为填充父容器，在API8后代替fill_parent
                    android:layout_height="3dp"/> // 使用dp作为单位可随着不同屏幕而改变控件长度的像素数量
    
            <FrameLayout // 帧布局
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content">
    
                <TextView // 文本框，用于显示文本
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:padding="7dp" // 设置内边距
                        android:text="DEMO" // 显示的文本内容
                        android:textSize="24sp" // 显示的文本大小
                        android:textColor="#999999" // 显示的文本颜色
                        android:layout_gravity="center"/> // 设置在布局中的对齐方式，为正中心
    
            </FrameLayout>
    
            <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="5dp"
                    android:background="#ebebeb"/> // 设置图片的背景颜色
    
        </LinearLayout>
    
        <LinearLayout
                android:orientation="vertical"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_alignParentTop="true" // 将组件的上边缘和父控件的上边缘对齐
                android:layout_above="@+id/ignored_view" //将组件置于给定id代表的组件（即id为ignored_view的组件）之上
                android:gravity="center"> // 设置在布局内组件的对齐方式，为正中心
    
    
            <ImageView
                    android:layout_width="60dp"
                    android:layout_height="120dp"
                    android:scaleType="fitCenter" // 设置所显示的图片如何缩放或移动以适应ImageView的大小，fitCenter表示保持纵横比缩放图片且缩放后的图片放在ImageView的中央
                    android:id="@+id/imageView"
                    android:layout_gravity="center"
                    android:src="@drawable/gesture"/> // 设置显示的图片，所在地址是drawable文件夹下（命名为drawable-*的文件夹也属于drawable）的gesture.png
    
            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text=" 1. Swipe right/left to open menu"
                    android:id="@+id/textView"            
                    android:layout_gravity="center" 
                    android:clickable="false" // 设置为false则使用点击事件监听时，不起作用
                    android:textColor="#ffacacac" 
                    android:textSize="17sp" 
                    android:padding="5dp"/>
    
            <Button //普通按钮
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/button_selector" //设置按钮的背景（可以是图片或是纯颜色），此时关于背景的内容在drawable/button_selector.xml文件下
                    android:textColor="@android:color/white"
                    android:text="2. Click me to open"
                    android:textSize="17sp"
                    android:padding="12dp"
                    android:id="@+id/btn_open"
                    android:layout_gravity="center"
                    android:layout_marginTop="4dp"/> // 设置组件外边距
    
        </LinearLayout>
    
        <FrameLayout
                android:orientation="vertical"
                android:layout_width="fill_parent"
                android:layout_height="120dp"
                android:padding="10dp"
                android:layout_gravity="bottom"
                android:id="@+id/ignored_view"
                android:layout_alignParentBottom="true"> //使组件位于底部
    
            <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="fitXY" //fitXY为对图片横向、纵向独立缩放，使得该图片完全适应于ImageView
                    android:src="@drawable/frame"/>
    
            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="This is an ignored view，you can’t use gesture to operate menu here."
                    android:textSize="17sp"
                    android:textColor="#9a9a9a"
                    android:id="@+id/textView1"
                    android:gravity="center"
                    android:layout_gravity="center"
                    android:padding="5dp"/>
        </FrameLayout>
    
    </RelativeLayout>

Selector在Android中常用来作组件的背景，便于用代码控制实现组件在不同状态下不同的背景颜色或图片的变换。  
Selector有两种：  
\- color-selector 是颜色状态列表，可以跟color一样使用，颜色会随着组件的状态而改变。  
\- drawable-selector 是背景图状态列表，可以跟图片一样使用，背景会根据组件的状态变化而变化。  
（具体的selector使用请参考：[ Android中selector的使用][Android_selector]）

在main.xml的按钮的背景里我们就用到了selector。  
**/res/drawable/button\_selector：**

<?xml version="1.0" encoding="utf-8"?>
    
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="true" android:drawable="@drawable/button_on" /> // 当按钮被触摸时，显示button_on.png
        <item android:state_focused="true" android:drawable="@drawable/button" /> // 当按钮获得焦点时，显示button.png
        <item android:drawable="@drawable/button" /> // 默认情况下为button.png
    </selector>

如果在main.xml里提示failed to parse file:button\_selector的话，重启一下eclipse即可（笔者使用的是eclipse）

> 参考资料：  
> [使用Eclipse + ADT + SDK开发Android APP][Eclipse _ ADT _ SDK_Android APP]  
> Android从入门到精通

[70]: /images/20210923/abfc5a6554204d27b53c300caed3f2cc.png
[70 1]: /images/20210923/e2e6f62c9f0541988cd59cb9e53d6df7.png
[Android_selector]: http://blog.csdn.net/wenwen091100304/article/details/49667293
[Eclipse _ ADT _ SDK_Android APP]: http://www.runoob.com/w3cnote/android-tutorial-eclipse-adt-sdk-app.html