Android用户界面设计

Android用户界面设计

用户界面设计是Android应用开发的一项重要内容。在进行开发的过程中,我们需要了解UI元素如何呈现给用户,也就是如何控制UI界面。andorid提供了4种控制UI的方法。

一、控制UI布局

  1. 使用xml布局文件来控制UI
  2. 使用JAVA代码来控制UI
  3. 使用xml布局JAVA代码来控制UI
  4. 使用自定义View来控制UI

具体的东西我们需要简单讲解:

1.如何使用xml布局文件控制UI

该方法采用xml文件来进行界面布局与JAVA逻辑代码分离开来,使程序的结构更加清晰,明了。

(1)首先需要在res/layout创建你的xml布局文件。创建后R.java会自动收录该布局资源。

(2)在Activity(活动)onCreate()中,添加JAVA代码调用该布局文件,显示该布局内容。

@Override
protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
}

(3)查看activity_main.xml布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<ImageView
    android:id="@+id/custom_view_image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/ic_launcher" />

<TextView
    android:id="@+id/custom_view_text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/test_name"
    android:background="@color/colorAccent"//文本背景
    style="@style/testStyle" //样式
    android:textColor="@android:color/holo_red_dark" //字体的颜色  
/>
</FrameLayout>

(4)TextView用到了@string/test_name属性,我们要找到res/string.xml文件。

<resources>
<string name="app_name">Demo</string>
<string name="test_name">我是测试Demo</string>
</resources>

概述:string.xml文件用于定义程序中应用的字符串常量。常量名由name属性指定。使用该属性的优势,在后期开发的过程中会产生文本相同,如果统一使用方便后期管理使用,就没有必要去每一个xml布局文件去修改文本,直接找到string.xml相对应的属性名name修改文本,做到一处修改到处有效。

(5)TextView还用到了@style/testStyle属性,见名之意设置文本的样式。

<resources>
<style name="testStyle">
    <item name="android:textSize">20sp</item>
</style>
</resources>

//其实当**TextView**调用**style="@style/testStyle"**属性的时候,代码是这样的

<TextView
    android:id="@+id/custom_view_text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/test_name"
    android:background="@color/colorAccent"//文本背景
    android:textSize="20dp"
    android:textColor="@android:color/holo_red_dark" //字体的颜色  
/>

具体来讲,将某些TextView公用的属性给抽取出来,通过属性style来调用,自定义的样式。达到一处修改到处有效的效率。主要还是为了后期项目开发减少周期。

效果图


2.代码中控制UI界面

具体实现,通过JAVA代码的方式来控制UI界面。所有的UI界面通过**new**关键字创建出来,然后将这些UI组件添加到布局管理器中,从而实现用户界面。

具体的三个步骤:

  1. 创建布局管理器,常用的线性布局,相对布局,帧布局,表格布局,并设置布局属性
  2. 创建具体的组件,TextView,EditText,ImageView,Button等组件,并设置组件属性
  3. 将创建的具体组件,添加到布局管理器当中

直接看代码:

(1)创建布局管理器
  @Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    FrameLayout frameLayout = new FrameLayout(this);
    frameLayout.setBackgroundColor(getResources().getColor(R.color.colorAccent));
    setContentView(frameLayout);

(2)创建具体组件
    TextView textView = new TextView(this);
    textView.setText(R.string.test_name);
    textView.setTextColor(getResources().getColor(R.color.colorAccent));
    textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 20);//第一个参数是设置字体的单位px像素,
    textView.setBackgroundColor(getResources().getColor(R.color.colorPrimary));
    frameLayout.addView(textView);

}

具体的文字叙述就不在说了,直接动手测试

效果图:


3.java代码和xml混合控制UI界面

完全通过xml布局文件控制UI界面,实现比较方便,但是有失灵活;
然而完全通过JAVA代码控制UI界面,虽然比较灵活,但是开发过程比较繁琐。鉴于这两会中方法的优缺点。
我们使用xml和java代码混合控制UI界面。

具体的三个步骤:

  1. 使用xml布局文件,创建一个布局管理器
  2. 在Activity当中,声明imgimagePath两个成员变量,两个都是一维数组,后面放出代码
  3. 在Activity的onCreate(),获取xml布局文件中创建的布局管理器,通过for循环创建ImageView组件,然后将其添加到布局管理器当中

直接看代码:
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//设置内容视图
setContentView(R.layout.test_activity);

    //1.取到xml布局,实例化线性布局管理器
    LinearLayout linearLayout = (LinearLayout) findViewById(R.id.ll);

    //2.声明**img**和**imagePath**两个成员变量,两个都是一维数组
    ImageView[] img = new ImageView[3];
    int[] imagePath = new int[]{R.drawable.main_pager_1, R.drawable.main_pager_2,
            R.drawable.main_pager_3};

    //3.通过**for**循环创建ImageView组件,然后将其添加到布局管理器当中
    for (int i = 0; i < imagePath.length; i++) {
        img[i] = new ImageView(this);
        img[i].setImageResource(imagePath[i]);
        img[i].setPadding(5, 5, 5, 5);
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
                240, 240);
        img[i].setLayoutParams(layoutParams);
        linearLayout.addView(img[i]);
    }
}

效果图:


4.通过自定义View显示UI视图

在Android中,所有的UI界面都是由**View**类和**ViewGroup**类及其子类组合而成的。
其中,**View**类是所有UI组件的基类,而**ViewGroup**是容纳UI组件的容器,其本身也是View类的子类。
一般情况下,直接使用View和ViewGroup这两个类的**子类**。比如:ImageView,TextView等。

二、四大布局管理器

在开发中会常用的四大布局
  1. 线性布局 LinearLayout
  2. 相对布局 RelativeLayout
  3. 帧布局 FrameLayout
  4. 表格布局 TableLayout
  5. 绝对布局 AbsoluteLayout(再android1.6中已经被抛弃)

1.线性布局

线性布局就是将放入其中的组件按照垂直或水平方向来布局,也就是控制放入其中的组件横向或纵向排列。

属性 作用
android:orientation=”“ 设置组件的排列方式,两个属性horizontal(水平排列)和vertical(垂直排列),默认vertical
android:gravity=”“ 设置管理器内部组件的位置,常用的选值center_vertical,center_horizontal,center
android:background=”“ 设置属性的背景,可以是背景图片,或者背景颜色。

还是直接看代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="@color/colorAccent"
android:orientation="horizontal">

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/app_name" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/app_name" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/app_name" />
</LinearLayout>

使用 vertical属性的显示效果,可以明显看出使用的垂直排列

使用 horizontal属性的显示效果,可以明显看出使用的水平排列

使用 backgroundgravity属性,显示的效果

2.相对布局

相对布局是指按照组件之间但相对位置来进行布局,如A组件在B组建的左边,右边,上方或下方等。

属性 作用
android:layout_alignLeft,right,bottom,top 指定该组件位于某个组建的左边,右边,下边,上边对齐
android:layout_alignParentLeft,right,bottom,top 指定该组件位于布局管理器左边,右边,底部,顶部对齐
android:layout_centerHorizontal 指定该组件位于布局管理器水平居中的位置
android:layout_centerVertical 指定该组件位于布局管理器垂直谷中的位置
android:layout_centerInParent 指定该组件位于布局管理器的中央位置
android:layout_toRightOf,toLeftOf,above,below 指定该组件位于某个组件的右侧,左侧,上方,下方

使用相对布局实现,一个简单的登录界面 看代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical">

<TextView
    android:id="@+id/tv_username"
    android:layout_width="wrap_content"
    android:layout_height="50dp"
    android:gravity="center"
    android:text="账号:" />

<TextView
    android:id="@+id/tv_password"
    android:layout_width="wrap_content"
    android:layout_height="50dp"
    android:layout_below="@+id/tv_username"
    android:gravity="center"
    android:text="密码:" />

<EditText
    android:id="@+id/et_username"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_toRightOf="@+id/tv_username" />

<EditText
    android:id="@+id/et_password"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_below="@+id/tv_username"
    android:layout_toRightOf="@+id/tv_password" />

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/tv_password"
    android:layout_centerHorizontal="true">

    <Button
        android:id="@+id/btn_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="btn1" />

    <Button
        android:id="@+id/btn_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/btn_1"
        android:text="btn2" />

</RelativeLayout>
</RelativeLayout>

效果图:

这里写图片描述


3.帧布局

我所了解的帧布局就是多个组件层叠排序,后面的组件覆盖前面的组件。

属性 作用
android:foreground 设置该帧布局容器的前景图像
android:foregroundGravith 定义回执前景图像的gravity属性,即前景图像显示的位置

用帧布局实现的一个效果,看代码:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/fl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent"
android:foreground="@color/colorPrimary"
android:foregroundGravity="bottom|right">

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20dp"
    android:background="@color/colorPrimaryDark"
    android:text="text1"
    android:textColor="@android:color/white" />

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="60dp"
    android:background="@color/colorAccent"
    android:text="text2"
    android:textColor="@android:color/white" />

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="90dp"
    android:background="@android:color/white"
    android:text="text3" />

</FrameLayout>

效果图:


4.表格布局

android提供的表格布局,见名知意就是表格的形式,我们需要在表格里面去添加组件,以此来实现UI界面。

代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent"
android:orientation="horizontal">

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center">


        <Button
            android:id="@+id/btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1" />

        <Button
            android:id="@+id/btn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2" />

    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center">

        <Button
            android:id="@+id/btn3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="3" />

        <Button
            android:id="@+id/btn4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="4" />
    </TableRow>
</TableLayout>
</LinearLayout>

效果图:

总结,在开发的过程当中,经常会使用相对线性两类布局。然而,我们要想到的是需要对优化布局的结构有所了解。

  • 避免复杂的View层级。布局越复杂就越臃肿,就越容易出现性能问题,寻找最节省资源的方式去展示嵌套的内容;

  • 尽量避免在视图层级的顶层使用相对布局 RelativeLayout 。相对布局 RelativeLayout 比较耗资源,因为一个相对布局 RelativeLayout 需要两次度量来确保自己处理了所有的布局关系,而且这个问题会伴随着视图层级中的相对布局 RelativeLayout 的增多,而变得更严重;

  • 布局层级一样的情况建议使用线性布局 LinearLayout 代替相对布局 RelativeLayout,因为线性布局 LinearLayout 性能要更高一些;确实需要对分支进行相对布局 RelativeLayout 的时候,可以考虑更优化的网格布局 GridLayout ,它已经预处理了分支视图的关系,可以避免两次度量的问题;

  • 相对复杂的布局建议采用相对布局 RelativeLayout ,相对布局 RelativeLayout 可以简单实现线性布局 LinearLayout 嵌套才能实现的布局;

  • 不要使用绝对布局 AbsoluteLayout ;

  • 将可重复使用的组件抽取出来并用 标签进行重用。如果应用多个地方的 UI 用到某个布局,就将其写成一个布局部件,便于各个 UI 重用。官方详解 「 戳我 」

  • 使用 merge 标签减少布局的嵌套层次;

  • 去掉多余的不可见背景。有多层背景颜色的布局,只留最上层的对用户可见的颜色即可,其他用户不可见的底层颜色可以去掉,减少无效的绘制操作;

  • 尽量避免使用 layoutweight 属性。使用包含 layoutweight 属性的线性布局 LinearLayout 每一个子组件都需要被测量两次,会消耗过多的系统资源。在使用 ListView 标签与 GridView 标签的时候,这个问题显的尤其重要,因为子组件会重复被创建。平分布局可以使用相对布局 RelativeLayout 里一个 0dp 的 view 做分割线来搞定,如果不行,那就……;

  • 合理的界面的布局结构应是宽而浅,而不是窄而深;

相关内容推荐