新手在路上！ Android UI界面设计

    简单的Android UI布局

好丑的么~~捂脸捂脸

• 相对布局RelativeLayout
• 线性布局LinearLayout
• 中英文切换

---

• 简单的UI界面只涉及  java文件 布局文件(即XML文件)

• 顶图的实现 只需要 编码 红框圈注的五个文件

• 自上而下 让我一一道来

Android 程序 资源文件 都放在 res 目录下
其中 values 用以放置字符串信息
drawable系列文件夹可以用来放置图片资源

drawable 图标文件

首先将 八个图标拖入 drawable文件中
在布局文件中 就可以通过
android:drawableTop=”@drawable/clound”

使 clound图片显示到界面中

MainActivity

这个java文件 用以编写与用户交互的逻辑代码
咳咳 这里没实现交互功能 毕竟咱还是个小白
`
package cn.edu.bzu.phoneinfo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

activity_mian.xml–放大招了

UI界面是通过布局文件设定的
布局文件采用XML格式
每个应用程序默认一个主界面布局文件
默认名为activity_mian.xml

该文件位于项目的res/layout目录中
res 是 resource 的缩略形式 意为 资源
layout 意为 布局

观察界面文件 可以把布局看为 一个大型的垂直线性布局 包裹着4个相对布局

其中 RelativeLayout 样式 与 Text View 样式为避免重复代码 被我抽离写入到样式文件中

android:text=”@string/_cloud”
我理解为 _cloud 就是一标签
它链接了 英文 与中文的两种显示方式

android:background=”@android:color/darker_gray”
 //将背景设置为灰色
android:orientation=”vertical”
//线性布局设置为垂直方向

** android:orientation=”vertical”
<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"
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>


styles.xml

**布局文件中 相仿的控件 一般设置为相同的 样式
为避免大量重复的布局代码
将样式单独放在一个style.xml文件**

   *match_parent  强制性 使父元素 扩展至父元素大小
*wrap_content 指 当前元素宽高度 只要能刚好包含里面的内容
在这里  设置为wrap_content 就是将完整显示其内部的文本

`

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</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">170dp</item>
    <item name="android:layout_height">110dp</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>

`

values-en-rUS下的 strings.xml

• 为了提供不同语言版本 须在res文件下新建values文件夹
• values命名规则如下
• values-语言代码-r 国家或地区代码
  如果需要为不同国家或地区展示不同图片
  只需在res下新建drawable文件夹即可
  命名与 匹配规则都与values文件夹命名一致

在res目录下创建values-en-rUS文件夹，并在这个文件夹下创建strings.xml

吐槽··· 这个代码不识别  我的天呐

values-zh-rCN下的strings.xml

在res目录下创建values-zh-rCN
并在这个文件夹下创建strings.xml文件

新建values文件

在 Project视图下 app/src/res/values 左键新directory 新建 values-zh-rCN
再左键 戳 values resource file 新建strings.xml 文件