java软件交互 java交互界面

第四章 界面操作

使用了多年计算机，对于界面我们再熟悉不过了。一个框、一些输入框、一些按钮，就能够让我们轻松的不是使用命令的方式而是使用界面的点击方式，完成我们需要做的事情。现在我们便用Java实现界面尝试一下。Java本身提供了构造界面的一些工具，所以不用太恐慌，动手做起来吧！

文章目录

• 第四章 界面操作

• 编写页面程序的思路介绍

• 对界面的简单介绍
• 控件

• 界面
• 流式布局器
• 文本和图片
• 输入框
• 按钮

• 监听器
• 口诀和总结

• 几个实例的效果展现

• 简单的登录界面
• 画图界面

• 关于编程的建议和心得
• 代码

• 用户登录
• 画图

• 我犯过的错误

编写页面程序的思路介绍

在编写程序的时候，最重要的就是需要明白自己编写的程序在解决问题的时候的逻辑。如果不知道这个逻辑的话，就很容易大幅度增加自己编写程序的时间。简单来说，如果一开始不知道界面的组成和能够work的原理的话，很可能自己编写了一系列的对象，结果不是顺序有问题，就是对象创建的重复了，debug了很久，就是不知道哪里错误了。所以，先来简单的介绍一下界面，知道这个逻辑之后，再来编程，就会简单很多。

对界面的简单介绍

每天打开电脑登录QQ，输入用户名，输入密码，你有没有思考过这个界面里面是怎么操作的让我们可以实现登录的这个功能？为什么能够知道我们输入的是什么，又能在点击的时候检验给我们相应的反馈？

在界面中，存在两类主要的东西，一个是各种控件，一个是监视器。我们平时所能看见界面上的输入框，按钮都属于控件，另外界面上面还存在一些用来提醒使用的文本，这个我们模糊的处理到控件里面讲（你可以理解为就是你能够看到的界面上的东西）；另外一个是监听器，这个监听器可以监听不同的我们和电脑交互的活动，我们点击屏幕，我们敲打键盘，正是因为有这个监听器，才让电脑明白了我们的指令，也正是因为它们所谓的界面才拥有了生命，而不是一个光光的壳子而已。

因此，我们要做的步骤就很清楚啦~首先需要编写一个界面类，用来创建界面，并且在创建界面的时候，把相应的控件、文本和监听器加入到上面，这些东西都是对象，存在着不同的逻辑关系。如何创建对象，对象关系如何建立，建立的先后是什么，成为我们最应该思考的问题。

控件

界面

这里我们直接利用继承完成，在其中构造初始化方法，执行主程序时候，调用初始化方法，完成窗体的构建。

利用add()方法把控件加入，控件会按照add()的顺序加入

最后等界面上面能够看见的东西都设置好了之后，我们还需要对界面进行显示，需要使用setVisible(true)来对界面进行显示

public class 类名 extends JFrame{
	//初始化方法，调用即可创立对应的界面
	public void 方法名{
	this.setSize(400,300);
	this.setTitle("my world~");
	加入控件、文本和图片的操作
	this.setVisible(true);
	Graphics g = this.getGraphics(); 
	//只有在得到界面之后才能够得到画布,有时候需要把画布传入到鼠标监听器里面进行绘画
}
}

流式布局器

因为直接加入控件的话，会直接显示到整个界面上面，因此可以加入流式布局器对加入的文本和控件进行布局。（流式布局器的逻辑就是如果一行放的下的话，就会一直把东西加到一行）

FlowLayout 对象名 = new FlowLayout();
界面对象名字.setLayout(对象名);

文本和图片

简单的图片和文本上面没有额外的信息，就没有特殊的难度，语法如下：

//label
JLabel 标签对象名 = new Jlabel("想要呈现的字符串");
界面对象名.add(标签对象名);

输入框

有时候我们要对输入的内容进行判断，就需要获得输入框的内容，这个时候需要利用输入框的.getText()的功能

JTextField 输入框对象名 = new JTextField();
界面对象名.add(输入框对象名);
字符串对象 = 输入框对象名.getText(); // 获取输入框输入的内容

按钮

因为很多行为都是在点击按钮之后触发的，因此我们需要对按钮进行监听，当按钮被点击的时候，触发事件，当其他地方被点击的时候，不触发事件，所以一般动作监听器都是装在按钮上面。

JButton 按钮对象名 = new JButton();
界面对象名.add(按钮对象名);
接口类名 接口对象名 = new 接口类名();
JButton.addActionListener(接口类名); // 实现在点击按钮的时候,实现接口类的事件触发的函数

监听器

在Java中以及写好了很多接口的类型，对于想要让监听器实现特定的功能呢，我们只用重写接口类就可以。注意哦，一个监听器类可以写多个接口，接口就是一些方法和属性的集合哦。

public 接口类名 implements ActionListener,MouseListener(){
	//直接就出现了接口规定的方法哦！
	//其中ActionListener和MouseListener对应的特定的方法比较明显，这里就不详细解释了
	@Override 
	public void actionPerformed(ActionEvent e) {}

	@Override
	public void mouseClicked(MouseEvent e) {
		// TODO Auto-generated method stub
	}
	
	@Override
	public void mousePressed(MouseEvent e) {
		// TODO Auto-generated method stub
	}

	@Override
	public void mouseReleased(MouseEvent e) {
}

一般这些监听器需要安装到不同的位置上

按钮对象名.addActionListener(接口类对象名);
//这样按钮就拥有了Actionlistener的方法，这个方法是事件驱动的
界面对象名.addMouseListener(接口类对象名);
//这样就可以监视到界面上面的鼠标活动了，可以用来画图

口诀和总结

还是用图片的方式来总结一下这些东西的用法吧~

几个实例的效果展现

简单的登录界面

做出来的简陋的登录界面：

输入密码错误的时候

输入正确的时候：弹出了新的窗口并且显示成功登录

画图界面

画布样子

选择图形和颜色后我的作画

关于编程的建议和心得

• 先弄清楚逻辑关系再进行编程，否则会debug到怀疑人生。
• 请弄清楚基本的语法和规则（比如字符串想要比较内容用equals(),而不是用==的方法），否则会debug到怀疑人生，甚至怀疑自己的逻辑有问题，失去对于写代码的热情。这一步的基本方式是认真把基础敲一遍，多敲多用就记住了。
• 不要背代码！对于一些基础语法，多敲几遍就熟悉下来了。代码是什么不重要，记住最重要。简单的程序要能够做到随时(比较轻松的)复盘,就是随时要你写，你能写出来。
• 代码复盘很重要哦~

代码

最后还是放一下代码，有助于自己以后的回忆（想要运行试一下的里面有一个照片的地方需要修改，修改下路径和名称就可以）

用户登录

package com.cjx1006;

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JFrame;
import javax.swing.JTextField;

// 校验用户输入类的监听器
public class LoginAction1 implements ActionListener{
	private JTextField jtf1;
	private JTextField jtf2;
	
	// 获得所需两个输入框的信息
	public void LoginAction(JTextField jtf1,JTextField jtf2) {
		this.jtf1 = jtf1;
		this.jtf2 = jtf2;
	}
	
	@Override
	public void actionPerformed(ActionEvent e) {
		// TODO Auto-generated method stub
		//点击时，获得页面相应的信息
		String s1 = jtf1.getText();
		String s2 = jtf2.getText();
		System.out.println("用户名是："+s1);
		System.out.println("检验密码是否正确中...");
		if(s1.equals("cjx")&s2.equals("doge")) {
			System.out.println("成功登录");
		JFrame jf = new JFrame();
		System.out.println("密码正确！");
		jf.setTitle("new field~");
		jf.setSize(300,400);
		jf.setVisible(true);
		}
		else if(s1.equals("cjx")){
			System.out.println("密码输入错误！请重新输入");
		}
		else{
			System.out.println("用户名输入错误！");
			
		}}}

package com.cjx1006;
import javax.swing.JFrame;


import java.awt.FlowLayout;
import java.awt.Graphics;

import javax.swing.*;

public class LoginUI extends JFrame{
	// 编写一个初始化方法
	public void initUI() {
		this.setSize(600,400);
		this.setTitle("your world:where you can create everthing yourself~");
		//加上流式布局器
		FlowLayout fl=new FlowLayout();
		this.setLayout(fl);
		
		//创立输入框、按钮和图片
		JLabel label1 = new JLabel("用户名:");
		JTextField jtf1 = new JTextField(15);
		JLabel label2 = new JLabel("密码:");
		JTextField jtf2 = new JTextField(15);
		JButton bu = new JButton("login in");
		ImageIcon icon = new ImageIcon("imgs/loginicon.jpg");
		JLabel label= new JLabel(icon);
		//加上输入框、按钮对象和图片
		this.add(label1);
		this.add(jtf1);
		this.add(label2);
		this.add(jtf2);
		this.add(bu);
		this.add(label);
		
		// 再创立一个监听器对象，把这个对象加给输入框
		LoginAction1 lo = new LoginAction1();
		lo.LoginAction(jtf1, jtf2);
		bu.addActionListener(lo);
		this.setVisible(true);
		
		Graphics g = this.getGraphics();
	}
	
	//主函数
	public static void main(String[] args) {
		LoginUI db= new LoginUI();
		// 调用这个方法，显示界面
		db.initUI();
		
	}
}

画图

package com.cjx1007v2;

import java.awt.Color;
import java.awt.FlowLayout;
import java.awt.Graphics;
import java.awt.event.MouseListener;
import java.util.ArrayList;

import javax.swing.JButton;
import javax.swing.JFrame;

public class Graph extends JFrame {
	public void initGraph(){
		this.setSize(600,400);
		this.setTitle("your world:where you can create everthing yourself~");
		//加上流式布局器
		FlowLayout fl=new FlowLayout();
		this.setLayout(fl);
		
		//加上几个形状和颜色的按钮,并且加入到画布上面，
		//并且在它们的每一个上面都加上监听器
		JButton bu1 = new JButton("圆");
		this.add(bu1);
		JButton bu2 = new JButton("直线");
		this.add(bu2);
		
		//尝试使用列表和循环来生成颜色按钮对象
		ArrayList<Color> colormap = new ArrayList<>();
		colormap.add(Color.red);
		colormap.add(Color.orange);
		colormap.add(Color.yellow);
		colormap.add(Color.green);
		colormap.add(Color.cyan);
		colormap.add(Color.blue);
		colormap.add(Color.pink);
		System.out.println(colormap);
		SettingFunction shape1 = new SettingFunction();
		// 因为变量名不能直接这样生成，但是可以每一次直接加进去
		for(int i=0;i<colormap.size();i++) {
			JButton color = new JButton();
			color.addActionListener(shape1);
			color.setBackground(colormap.get(i));
			this.add(color);
//			color.addActionListener(null);
		}
			
//			
//		JButton color1 = new JButton();
//		color1.setBackground(Color.red);
//		this.add(color1);
//		JButton color2 = new JButton();
//		color2.setBackground(Color.orange);
//		this.add(color2);
//		JButton color3 = new JButton();
//		color3.setBackground(Color.yellow);
//		this.add(color3);
//		JButton color4 = new JButton();
//		color4.setBackground(Color.green);
//		this.add(color4);
//		JButton color5 = new JButton();
//		color5.setBackground(Color.cyan);
//		this.add(color5);
//		JButton color6 = new JButton();
//		color6.setBackground(Color.blue);
//		this.add(color6);
//		JButton color7 = new JButton();
//		color7.setBackground(Color.pink);
//		this.add(color7);
//		
		
		this.setVisible(true);
		
		Graphics g = this.getGraphics(); //最后需要把graphics给监听器
		
		// 设置好画布之后，把各类监听器加上去
//		SettingFunction shape1 = new SettingFunction();
		shape1.g = g;
		this.addMouseListener(shape1);
		bu1.addActionListener(shape1);
		bu2.addActionListener(shape1); 
//		color1.addActionListener(shape1);	
//		color2.addActionListener(shape1);	
//		color3.addActionListener(shape1);	
//		color4.addActionListener(shape1);	
//		color5.addActionListener(shape1);	
//		color6.addActionListener(shape1);	
//		color7.addActionListener(shape1);	
		
	}

public static void main(String[] args) {
	Graph Line = new Graph();
	Line.initGraph();
}
	

}

package com.cjx1007v2;

import java.awt.Color;
import java.awt.Graphics;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;

import javax.swing.JButton;

// 可以对于点击反应，来判断现在应该使用的颜色
public class SettingFunction implements ActionListener,MouseListener{
	public Graphics g;
	public int[] location = new int[4];
	public String type;
	
	@Override //这里获得的形状信息存储在内部的一个变量里面，颜色信息直接设置到画布上面
	public void actionPerformed(ActionEvent e) {
		// TODO Auto-generated method stub
		String type0 = e.getActionCommand();
		if(type0.equals("")) {
			JButton btn = (JButton)e.getSource();
			Color color = btn.getBackground();
			g.setColor(color);
		}
		else {
			this.type = type0;
			System.out.println("type"+type);
		}
	}

	@Override
	public void mouseClicked(MouseEvent e) {
		// TODO Auto-generated method stub

	}

	@Override
	public void mousePressed(MouseEvent e) {
		// TODO Auto-generated method stub
		int x1 = e.getX();
		int y1 = e.getY();
		this.location[0]=x1;
		this.location[1]=y1;
	}

	@Override
	public void mouseReleased(MouseEvent e) {
		// TODO Auto-generated method stub
		int x2 = e.getX();
		int y2 = e.getY();
		System.out.println("放开的时候的横坐标:"+x2);
		System.out.println("放开的时候的纵坐标："+y2);
		this.location[2]=x2;
		this.location[3]=y2;
		if(this.type.equals("圆")) {
			System.out.print("圆");
			g.drawOval(x2, y2, 50, 50); //先默认一个长和宽
		}
		else {
			int x1 = location[0];
			int y1 = location[1];
			this.g.drawLine(x1, y1, x2, y2);
		}
	}

	@Override
	public void mouseEntered(MouseEvent e) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public void mouseExited(MouseEvent e) {
		// TODO Auto-generated method stub
		
	}

}

我犯过的错误

• 在界面的setVisible(true)之前去获取这个界面的画布，或者在东西没加完的时候，就去setVisibel(true)导致的出错。这个的原因是对于逻辑的没有思考，程序的先后顺序不熟悉。
• 建立了多个行为监听器和多个鼠标监听器，后果就是经常被报错。记住建立一个就可以了，让那一个具有相应的功能，内部判断按钮类型来不同执行，记得每一个对应的想要拥有监听器的对象，都要用相应的接口方法去获得。这个的原因是因为思维停留在现实的层面，而不是对象的层面。
• 还有很多都是顺序上的，原因都是对对象使用的不熟练和逻辑不清晰