android 的ui设计安卓开发界面ui设计器

转载

网络小墨舞风 2023-11-23 09:53:13

文章标签 android 的ui设计 ui 移动开发控件界面设计 文章分类 Android 移动开发

一随便扯扯

用户界面设计是程序开发的一项重要内容。在界面设计的过程中，需要考虑如何制作出UI界面，怎么样控制UI界面两大块。

通过代码控制添加完成的。同时也发现：在特定的界面上控件必然有存在的原因，正如注册界面肯定有文本框和提交按钮，这肯定导致了代码大量的冗余，复杂了界面设计。在简化代码写作方面，很多框架都采用了xml文件进行界面定义，安卓肯定也采用了这一机制。

本文重点：

1>通过xml文件进行界面设计

2>通过代码控制进行界面设计

二通过xml文件进行界面设计

这一小节，我们将在Android Studio中通过xml完成界面设计。打开Android Studio，创建一个工程（自己动手创建，不要光看文章），在res/layout目录下面存放的是界面布局文件，我们的安卓界面xml文件就是存放在这儿的。双击你创建出来的文件，如下

android 的ui设计安卓开发界面ui设计器_移动开发

图中红色标记部分：左边是界面设计，右边对应了界面设计的xml文本。下面我们将通过操作，设计出一个界面

请跟我做：

1>在左边控件中，拖动一个button到右边的手机界面中，之后你点击上线画圈右边的text查看文本，发现安卓已经编写好了xml

2>切换到代码目录，打开你之前创建的MainActivity，在onCreate()方法中：

setContentView(R.layout.activity_main); //这行代码是将我们编写的界面显示到手机屏幕中

MainActivity添加两个私有数据成员：

private TextView tv;
    private Button bt;

onCreate()里面初始化tv和bt，并给bt添加监听事件

tv = (TextView)findViewById(R.id.textView);//控件初始化
        bt = (Button) findViewById(R.id.button);//控件初始化

        bt.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tv.setText("你点击了按钮!");
            }
        });//添加监听

运行程序，点击按钮>>>>你会发现原来的hello world！文本发生改变。在这里，两个控件都是通过xml文件定义的，我们在代码中实现了一个监听器，也就是界面的控制逻辑。下面一节我们将通过代码进行界面设计。

三通过代码进行界面设计

这一届，我们将上面的 setContentView(R.layout.activity_main);这一行代码删除，还有上一节的代码也都删除，activity_main.xml也可以不要了，因为不通过xml进行界面设计，将会和Swing一样通过代码实现。

先定义MainActivity的私有成员

private TextView tv;
    private Button bt;

之后重写onCreate()，在之前删除onCreate()方法的位置添加代码：通过new定义一个线性布局(如果不知道什么事线性布局，请自行百度)和Button按钮和文本框控件，控件加入到布局里面，给控件加上监听事件，代码如下

LinearLayout l = new LinearLayout(this);  //定义线性布局
        setContentView(l);                //线性布局加入屏幕

        tv = new TextView(this);          //定义控件
        bt = new Button(this);            //定义控件

        l.addView(bt);                   //加入布局
        l.addView(tv);                  //加入布局

        bt.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tv.setText("你点击了按钮!");
            }
        });         //监听事件

运行代码，点击按钮，将会出现"你点击了按钮!"的文本提示。