控制UI界面

最新推荐文章于 2021-08-16 10:34:46 发布

IT瘾君

最新推荐文章于 2021-08-16 10:34:46 发布

阅读量757

点赞数

分类专栏： Android 文章标签： app android studio ui 程序设计

本文链接：https://blog.csdn.net/u012441595/article/details/105772085

版权

Android 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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

使用XML布局文件控制UI界面可以分为以下两个关键步骤。
（1）在Android应用的res\layout目录下编写XML布局文件，可以采用任何符合Java命名规则的文件名。创建后，R.java会自动收录该布局资源。
（2）在Activity中使用以下Java代码显示XML文件中布局的内容。
setContentView(R.layout.main );

在上面的代码中，main是XML布局文件的文件名。

Main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/abc_vector_test" >

    <!-- 添加提示文字 -->
    <TextView android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/title"
        style="@style/text" />

    <!-- 添加开始按钮 -->
    <TextView android:id="@+id/startButton"
        android:layout_gravity="center_vertical|center_horizontal"
        android:text="@string/start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/text" />

</FrameLayout>

Style.xml

添加

<style name="text">
    <item name="android:textSize">24px</item>
    <item name="android:textColor">#111111</item>
</style>

String.xml

<string name="app_name">MyFristApplication</string>
<string name="title">使用XML布局文件控制UI界面</string>
<string name="start">单单击击开开始始游游戏......</string>

在代码中控制UI界面可以分为以下3个关键步骤

（1）创建布局管理器，可以是帧布局管理器、表格布局管理器、线性布局管理器和相对布局管理器等，并且设置布局管理器的属性。例如，为布局管理器设置背景图片等。
（2）创建具体的组件，可以是TextView、ImageView、EditText和Button等任何Android提供的组件，并且设置组件的布局和各种属性。
（3）将创建的具体组件添加到布局管理器中。

下面通过一个具体的实例来演示如何使用Java代码控制UI界面。

（1）在新创建的项目中，打开src\com\mingrisoft目录下的MainActivity.java文件，然后将默认生成的下面这行代码删除。

（2）在MainActivity的onCreate()方法中，创建一个帧布局管理器，并为该布局管理器设置背景，关键代码如下：
（3）创建一个TextView组件text1，设置其文字大小和颜色，并将其添加到布局管理器中，具体代码如下：

package com.adou.myapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.app.AlertDialog;
import android.content.DialogInterface;
import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.FrameLayout;
import android.widget.TextView;

// 创建MainActivity类集成自AppCompatActivity（界面类）
public class MainActivity extends AppCompatActivity {
    // 重写AppCompatActivity的onCreate方法，将在页面创建时被调用

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // 设置内容视图（R.layout.activity_main）
//        setContentView(R.layout.activity_main);
//        setContentView(R.layout.main);

        FrameLayout frameLayout = new FrameLayout(this); //创建帧布局管理器
        frameLayout.setBackgroundDrawable(this.getResources().getDrawable( R.drawable.ic_launcher_background)); //设置背景

        TextView text1 = new TextView(this);
        text1.setText("在代码中控制UI界面"); //设置显示的文字
        text1.setTextSize(TypedValue.COMPLEX_UNIT_PX, 24); //设置文字大小，单位为像素
        text1.setTextColor(Color.rgb(1, 1, 1)); //设置文字的颜色
        frameLayout.addView(text1); //将text1添加到布局管理器中

        setContentView(frameLayout); //设置在Activity中显示frameLayout

    }
}

使用XML和Java代码混合控制UI界面

完全通过XML布局文件控制UI界面，实现比较方便快捷，但是有失灵活；而完全通过Java代码控制UI界面，虽然比较灵活，但是开发过程比较烦琐。鉴于这两种方法的优缺点，下面来看另一种控制UI界面的方法，即使用XML和Java代码混合控制UI界面。

通过XML和Java代码在窗体中横向并列显示4张图片。
（1）修改新建项目的res\layout目录下的布局文件main.xml，将默认创建的组件删除，然后将默认创建的线性布局的orientation属性值设置为horizontal（水平），并且为该线性布局设置背景以及id属性。修改后的代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/abc_vector_test"
    android:id="@+id/layout" >

</LinearLayout>

（2）在MainActivity中，声明img和imagePath两个成员变量，其中，img是一个ImageView类型的一维数组，用于保存ImageView组件；imagePath是一个int型的一维数组，用于保存要访问的图片资源。关键代码如下：

private ImageView[] img=new ImageView[4]; //声明一个保存ImageView组件的数组
private int[] imagePath=new int[]{ R.drawable.img01,R.drawable.img02,R.drawable.img03,R.drawable.img04 }; //声明并初始化一个保存访问图片的数组

（3）在MainActivity的onCreate()方法中，首先获取在XML布局文件中创建的线性布局管理器，然后通过一个for循环创建4个显示图片的ImageView组件，并将其添加到布局管理器中。关键代码如下：

// 先加载页面
setContentView(R.layout.main);

LinearLayout layout=(LinearLayout)findViewById(R.id.layout); //获取XML文件中定义的线性布局管理器

for(int i=0;i<imagePath.length;i++){
    img[i]=new ImageView(this); //创建一个ImageView组件
    img[i].setImageResource(imagePath[i]); //为ImageView组件指定要显示的图片
    img[i].setPadding(5, 5, 5, 5); //设置ImageView组件的内边距
    WindowManager.LayoutParams params=new WindowManager.LayoutParams(253,148); //设置图片的宽度和高度
    img[i].setLayoutParams(params); //为ImageView组件设置布局参数
    layout.addView(img[i]); //将ImageView组件添加到布局管理器中
}

开发自定义的view

在Android中，所有的UI界面都是由View类和ViewGroup类及其子类组合而成的。其中，View类是所有UI组件的基类，而ViewGroup类是容纳这些UI组件的容器，其本身也是View类的子类。在ViewGroup类中，除了可以包含普通的View类外，还可以再次包含ViewGroup类。View类和ViewGroup类的层次结构如图。
在这里插入图片描述

一般情况下，开发Android应用程序的UI界面，都不直接使用View和ViewGroup类，而是使用这两个类的子类。例如，要显示一张图片，就可以使用View类的子类ImageView。虽然Android提供了很多继承了 View类的UI组件，但是在实际开发时，还会出现不足以满足程序需要的情况。这时，用户就可以通过继承View类来开发自已的组件。开发自定义的View组件大致分为以下3个步骤。

（1）创建一个继承android.view.View类的View类，并且重写构造方法。
（2）根据需要重写相应的方法。可以通过下面的方法找到可以被重写的方法。在代码中单击鼠标右键，在弹出的快捷菜单中选择“源代码”/“覆盖/实现方法”命令，在该窗口的列表框中显示出了可以被重写的方法。只需要选中要重写方法前面的复选框，并单击“确定”按钮。通常情况下，不需要重写全部方法。

（3）在项目的活动中，创建并实例化自定义View类，并将其添加到布局管理器中。

下面通过一个具体的实例来演示如何开发自定义的View类。

（1）修改新建项目的res\layout目录下的布局文件main.xml，将默认创建的和组件删除，然后添加一个帧布局管理器FrameLayout，并且设置其背景和id属性。修改后的代码如下：

<?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:background="@drawable/abc_vector_test"
    android:id="@+id/mylayout" >
</FrameLayout>

（2）创建一个名称为RabbitView的Java类，该类继承自android.view.View类，重写带一个参数Context的构造方法和onDraw()方法。其中，在构造方法中设置兔子的默认显示位置，在onDraw()方法中根据图片绘制小兔子。RabbitView类的关键代码如下：

（3）在主活动的onCreate()方法中，首先获取帧布局管理器并实例化小兔子对象rabbit，然后为rabbit添加触摸事件监听器，在重写的触摸事件中设置rabbit的显示位置并重绘rabbit组件，最后将rabbit添加到布局管理器中，关键代码如下：

setContentView(R.layout.main);
FrameLayout frameLayout=(FrameLayout)findViewById(R.id.mylayout); //获取帧布局管理器
final RabbitView rabbit=new RabbitView(MainActivity.this); //创建并实例化RabbitView类

// 为小兔子添加触摸事件监听器
rabbit.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        rabbit.bitmapX=event.getX(); //设置小兔子显示位置的X坐标
        rabbit.bitmapY=event.getY(); //设置小兔子显示位置的Y坐标
        rabbit.invalidate(); //重绘rabbit组件
        return true;
    }
 });
frameLayout.addView(rabbit)