Android开发三：控制UI界面的4种方法

目录

• 一、使用XML布局文件控制UI界面
  • 1.1 修改主Activity文件
  • 1.2 修改 activity_main.xml 文件即布局文件
  • 1.3 修改 strings.xml 文件即字符串资源
  • 1.4 修改 styles.xml 文件即样式文件
  • 1.5 启动项目查看效果
  • 1.6 XML控制界面总结
• 二、使用代码控制UI界面
  • 2.1 创建布局管理器并添加组件
  • 2.2 启动查看效果
• 三、使用XML和Java代码混合控制UI界面
  • 3.1 使用XML创建布局
  • 3.2 使用代码添加组件
  • 3.3 启动查看效果
• 四、创建自定义的View

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

使用XML文件来进行界面布局，可以将布局文件控制UI界面的代码 和逻辑控制的Java代码分离开来。
总体步骤：

1. 在Android应用的res/layout目录下编写XML布局文件，创建后，R.java会自动收录该布局资源。
2. 在Activity中使用以下Java代码显示XML文件中布局的内容。

setContentView(R.layout.man);

1.1 修改主Activity文件

在创建时选择Empty Activity则不需要修改，保持代码如下默认即可。

package com.example.demo;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends Activity {

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

1.2 修改 activity_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/ic_launcher"
    >
    <!-- 添加提示文字 -->
    <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>

1.3 修改 strings.xml 文件即字符串资源

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">demo</string>
    <string name="hello_world">Hello world!</string>
    <string name="title">标题哦</string>
    <string name="start">单击开即游戏</string>

</resources>

1.4 修改 styles.xml 文件即样式文件

<resources>

    <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="android:Theme.Light">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    </style>
    
    <!-- 字体颜色 -->
    <style name="text">
        <item name="android:textSize">24dp</item>
        <item name="android:textColor">#112233</item>
    </style>

</resources>

1.5 启动项目查看效果

这里没有添加额外的图片，所以背景使用的是默认的应用icon,你可以在上面的代码中更改。

1.6 XML控制界面总结

1. 在MainActivity中调用xml布局文件setContentView(R.layout.main);
2. xml布局文件中如果引用了@string 字符串值，则需要在 res/values/strings.xml 中创建相应值。
3. xml布局文件中如果引用了@style 样式值，则需要在 res/values/styles.xml 中创建相应样式

注意：如果则创建的项目直接运行闪退，可能是没有自行生成 MainActivity和layout文件，自己创建即可。

二、使用代码控制UI界面

你Java Swing那样，所有的UI组件都可以通过new关键字创建出来，并添加到布局管理器中。
总体步骤：

1. 创建布局管理器，并设置其属性
2. 创建具体的组件，并设置其布局和属性
3. 将上一步创建的组件添加到布局管理器中。

2.1 创建布局管理器并添加组件

package com.example.demo;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.util.TypedValue;
import android.widget.FrameLayout;
import android.widget.TextView;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
//		setContentView(R.layout.activity_main);
		
		// 创建帧布局
		FrameLayout frameLayout = new FrameLayout(this);
		frameLayout.setBackgroundResource(R.drawable.ic_launcher);  // 使用应用图标作为背景
		setContentView(frameLayout);  // 启用布局
		
		// 创建一个TextView组件
		TextView title = new TextView(this);
		title.setText("使用代码控制布局");
		title.setTextSize(TypedValue.COMPLEX_UNIT_SP, 24);
		title.setTextColor(Color.rgb(200, 0, 70));
		frameLayout.addView(title);
	}
}

2.2 启动查看效果

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

3.1 使用XML创建布局

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

3.2 使用代码添加组件

package com.example.demo;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends Activity {

	private TextView[] textView = new TextView[4];  // 声明4个文字组件
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		LinearLayout layout = (LinearLayout)findViewById(R.id.layout);
		for (int i = 0; i < textView.length; i++) {
			textView[i] = new TextView(this);
			textView[i].setText("这是第\n" + i + "个组件\t\t");
			textView[i].setTextColor(Color.rgb(7, 0, 0));
			layout.addView(textView[i]);
		}
	}
}

3.3 启动查看效果

四、创建自定义的View

在Android中，所有的UI界面都是由View类和ViewGroup类及其子类组成的。
其中View类是所有UI组件的基类，
ViewGroup类是容纳这些UI组件的容器，其本身也是View类的子类。