Android——控制UI界面

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

res\layout\activity_main.xml代码如下：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/FrameLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background">
<TextView 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
	android:text="@string/title"
	style="@style/text"
    >
</TextView>
<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"
    >
    
</TextView>
</FrameLayout>

一个TextView组件用于显示提示文字，一个在窗体正中间显示开始游戏按钮

其中res\values\styles.xml代码如下

<resources xmlns:android="http://schemas.android.com/apk/res/android">
	<style name="text">
	    <item name="android:textSize">24dp</item>
	    <item name="android:textColor">#111111</item>
	</style>
</resources>

用于指定应用的样式，指定文字的大小和颜色。

最后在主活动中也就是MainActivity中，应用一下代码指定应用的布局文件。

setContentView(R.layout.activity_main);

二、用代码来控制UI界面

package com.basil_lee.ui;

import android.os.Bundle;
import android.app.ActionBar.LayoutParams;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.graphics.Color;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.TextView;
import android.widget.Toast;

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.setBackgroundDrawable(this.getResources().getDrawable(R.drawable.background));//设置背景图片
		setContentView(frameLayout);//设置在Activity中显示frameLayout
		//创建一个TextView组件
		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);
		//创建另外一个TextView组件
		TextView text2=new TextView(this);
		text2.setText("单击进入游戏。。。。。。");
		text2.setTextSize(TypedValue.COMPLEX_UNIT_PX,50);//设置文字的大小，单位为像素
		text2.setTextColor(Color.rgb(1, 1, 1));
		LayoutParams params=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
				ViewGroup.LayoutParams.WRAP_CONTENT);//创建保存布局参数的对象
		params.gravity=Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL;
		text2.setLayoutParams(params);
		//为text2组件添加单击事件，并将组件添加到布局管理器中
		text2.setOnClickListener(new OnClickListener() {
			public void onClick(View arg0) {
				new AlertDialog.Builder(MainActivity.this).setTitle("系统提示")
					.setMessage("游戏有风险，进入需谨慎，真的要进入吗？")
					.setPositiveButton("确定", new DialogInterface.OnClickListener() {
						public void onClick(DialogInterface arg0, int arg1) {
							Toast.makeText(MainActivity.this, "进入游戏", Toast.LENGTH_LONG).show();
						}
					}).setNegativeButton("退出",new DialogInterface.OnClickListener() {
						public void onClick(DialogInterface arg0, int arg1) {
							Toast.makeText(MainActivity.this, "退出游戏", Toast.LENGTH_LONG).show();
							finish();
						}
					}).show();
			}
		});
		
	   frameLayout.addView(text2);
	}

}

三、虽然完全通过XML布局文件控制UI界面，实现起来比较方便快捷，但是有失灵活性；而完全通过Java代码控制UI界面，虽然比较灵活，但是开发过程比较繁琐。因此常常两者结合。

首先是界面布局代码：

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

</LinearLayout>

然后Java代码如下：

    setContentView(R.layout.test);
        LinearLayout linearLayout=(LinearLayout)findViewById(R.id.mylayout);
        for(int i=0;i<imgPath.length;i++){
            img[i]=new ImageView(this);//创建一个ImageView组件
            img[i].setImageResource(imgPath[i]);
            img[i].setPadding(5, 5, 5, 5);//设置ImageView组件的内边距
            LayoutParams params=new LayoutParams(153,148);//设置组件的宽度和高度
            img[i].setLayoutParams(params);//为ImageView组件设置布局参数
            linearLayout.addView(img[i]);//将ImageView组件添加到布局管理器中
        }

以上代码在窗体中横向并列的显示4张图片

四、除了以上三种我们还可以开发自定义的View

开发自定义的View组件大致分为以下三个步骤：

• 创建一个继承android.view.View类的View类，并且重写构造方法
• 根据需要重写相应的方法。
• 在项目中创建并实例化自定义的View类，并将其添加到布局管理器中。

下面是类似飞机大战中的一个例子：

class MyView extends View{
	
	public float bitMapX;
	public float bitMapY;
	public MyView(Context context) {
		super(context);
		bitMapX=750;
		bitMapY=750;
	}
	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.onDraw(canvas);
		Paint paint=new Paint();
		Bitmap bitmap=BitmapFactory.decodeResource(getResources(),R.drawable.air1);
		canvas.drawBitmap(bitmap, bitMapX,bitMapY,paint);
		if(bitmap.isRecycled()){
			bitmap.recycle();
		}
	}
}

　　

	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.test2);
		FrameLayout frameLayout=(FrameLayout)findViewById(R.id.mylayout);
		final MyView air=new MyView(getApplicationContext());
		air.setOnTouchListener(new OnTouchListener() {
			
			@Override
			public boolean onTouch(View arg0, MotionEvent arg1) {
				air.bitMapX=arg1.getX();
				air.bitMapY=arg1.getY();
				air.invalidate();
				return true;
			}
		});
		frameLayout.addView(air);

这样就可以使飞机那种图片跟随者手指去移动了。

以上就是三种UI的控制方法。