Android技术知识Android开发经验谈Android开发

2.1.3 Android中的几种UI排布方法介绍

2018-05-29  本文已影响72人  常思行

一、使用XML布局文件控制UI界面

关于XML基本语法介绍和XML语法总结可以参考这里:XML基本语法介绍XML语法总结

在Android中,提供了一种非常简单、方便的方法用于控制UI界面。该方法采用XML文件来进行界面布局,从而将布局界面的代码和逻辑控制的Java代码分离开来,使用程序的结构更加清晰、明了,这种方法就是使用XML布局文件控制UI界面。

使用XML布局文件控制UI界面可以分为以下两个关键步骤

(1)在Android应用的res/layout目录下编写XML布局文件,可以是任何符合XML命名规则的文件名。创建后R.java会自动收录该布局资源。
(2)在Activity中使用以下Java代码显示XML文件中布局的内容,如:

setContentView(R.layout.<资源文件名字>);

在上面的代码中,<资源文件名字>是XML布局文件的文件名,通过这段代码步骤就可轻松实现布局并显示UI界面功能了。
当在布局文件中添加多个UI控件时,都可以为该UI组件指定android:id属性,该属性的值代表该组件的唯一标识。接下来如果希望在Java中访问指定的UI组件,则可以通过如下代码进行访问:

findViewById(R.id.<id名称>);

一旦在程序中获得指定UI组件之后,接下来就可以通过代码来控制各个UI组件的外观和行为了,包括UI控件绑定监听器等。

二、使用Java代码控制UI界面

虽然Android推荐使用XML布局文件来控制UI界面,但是如果你愿意,Android也允许我们使用Java动态进行布局,也就是可以根据业务的需求改变界面。

实际上就是用代码写出界面,虽然代码量比较大,而且维护起来相比之下更繁琐一些,特别是一些界面空间比较多的时候。但是它也有缺点,那就是没有静态布局那种无可比拟的灵活性,而且当我们通过自定义来创造属于我们自己独一无二的控件的时候,用的基本上都是动态布局,这也是开发者钟情它的原因。

下面给个简单的栗子:

public class CodeViewActivity extends Activity {
    // 当第一次创建该Activity时回调该方法
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 创建一个线性布局管理器
        LinearLayout layout = new LinearLayout(this);
        // 设置该Activity显示layout
        super.setContentView(layout);
        // 设置布局方向
        layout.setOrientation(LinearLayout.VERTICAL);
        // 创建一个TextView
        final TextView show = new TextView(this);
        // 创建一个按钮
        Button bn = new Button(this);
        // 设置按钮文字
        bn.setText(R.string.ok);
        // 设置按钮大小为“包裹内容”
        bn.setLayoutParams(new ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT));
        // 向layout容器中添加TextView
        layout.addView(show);
        // 向layout容器中添加按钮
        layout.addView(bn);
        // 为按钮绑定一个事件监听器
        bn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                show.setText(R.string.hello_world + "  " + new java.util.Date());
            }
        });
    }
}

其中,Button就是我们上篇说的View,LinearLayout则是ViewGroup。不难看出,无论创建那种控件都需要传入一个this参数,这是由于创建UI组件时都需要传入一个Context参数,它代表访问Android应用环境全局信息的API,让UI控件持有这么一个Context可以让它通过Context获取安卓应用环境的全局信息。

说到这儿,我想有必要和大家说一下什么是Context,因为这是我们在开发中经常用到的一个概念。

什么是context?

Context

大家有没有想过,一个Android程序和一个Java程序,他们最大的区别在哪里?划分界限又是什么呢?

可以看到,Context的继承结构还是稍微有点复杂的,不过在这里我们看到了几个所比较熟悉的面孔,Activity、Service、还有Application(这三个面孔后面的文章里会介绍到)。由此我们就可以得出结论:Context一共有三种类型,分别是Application、Activity和Service。这三个类虽然分别各种承担着不同的作用,但它们都属于Context的一种。

关于Context的其他的知识,比如:引用的保持、Context数量、使用Application的相关问题等等,我们会在后的相关文章文章中提到。

三、使用XML和Java混合控制UI界面

完全使用Java代码控制Ui界面的时候不仅繁琐,而且不利于解耦,但完全采用Xml方式虽然简单方便,但又有失灵活,因此有些时候,尤其是自定义控件的时候,我们需要用Xml和Java混合的方式来控制UI界面。

来个栗子:

<?xml version="1.0" encoding="utf-8"?>
<!-- 定义一个线性布局容器 -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity"
    android:id="@+id/root"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</LinearLayout>

上面这个文件简单定义了一个线性布局容器(ViewGroup),然后我们在Java中获取该线性布局,然后通过Java动态的添加组件。

public class MainActivity extends Activity {
    // 定义一个访问图片的数组
    int[] images = new int[] {
            R.drawable.Will1,
            R.drawable.Will2,
            R.drawable.Will3,
            R.drawable.Will4,
            R.drawable.Will5, };
    int nowImg = 0;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 获取LinearLayout布局容器
        LinearLayout main = (LinearLayout) findViewById(R.id.root);
        // 程序创建ImageView组件
        final ImageView image = new ImageView(this);
        // 将ImageView组件添加到LinearLayout布局容器中
        main.addView(image);
        // 初始化时显示第一张图片
        image.setImageResource(images[0]);
        image.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 改变ImageView里显示的图片
                image.setImageResource(images[++nowImg % images.length]);
            }
        });
    }
}

然后我们为ImageView绑定了点击事件,这样我们就可以通过点击图片进行几张图片的轮询显示了,这就完成了一个混合编程的简单示例。

当然,我们在开发中最常用到的还是用XML布局文件进行布局的编写与调试,而用Java代码这种编写布局的方式在自定义控件的时候里才会经常被用到,而关于自定义控件方面的内容,我们会在之后的文章中提到。

感谢优秀的你跋山涉水看到了这里,不如关注下让我们永远在一起!

上一篇下一篇

猜你喜欢

热点阅读