这是我参与11月更文挑战的第二十六天,活动详情查看:2021最后一次更文挑战
如何用java做一个支付宝余额界面
前言
最近在做一个支付宝余额页面的小程序,今天把做这个的思路给整理出来了。(只是一部分)
作图
我们要利用JavaFx(一个制作图形页面的软件),来做出一个想要的图形页面
这里是我做的一个支付宝的余额界面
大致把图形做成这样后,我们要给每个框框一个id,用以与java代码产生关联。
这里的id是这么加的:
选中需要改id的框框,再在右栏中的fx:id中输入其代号,最后别忘记保存哦。
IDEA篇
-
首先,将你做的页面文件复制到你的java项目中
-
然后就要开始构建我们的页面框架啦
建立框架就得继承Application类
public class MainFrame extends Application
-
定义页面所需要的各个参数
private ChoiceBox yunyingshang;
private ChoiceBox network;
private ChoiceBox time01;
private ChoiceBox time02;
private ChoiceBox time03;
private Slider dianliang;
private ChoiceBox signal;
private RadioButton show01;
private RadioButton show02;
private ChoiceBox status;
private RadioButton show03;
private RadioButton show04;
private Button building;
private ImageView iv;
private Button save;
private TextField money;
private TextField yuebao;
private TextField beiyongjin;
4.新建一个场景,用来获取页面大小
Scene scene = new Scene(pane,953,665) ;
primaryStage.setScene(scene);
primaryStage.show();
5.获得页面所需参数(传参)
@Override
public void start(Stage primaryStage) throws Exception {
Pane pane = (Pane) FXMLLoader.load(MainFrame.class.getClassLoader().getResource("Alipay.fxml"));
this.yunyingshang = (ChoiceBox)pane.lookup("#yunyingshang");
this.network = (ChoiceBox) pane.lookup("#network");
this.time01 = (ChoiceBox) pane.lookup("#time01");
this.time02 = (ChoiceBox) pane.lookup("#time02");
this.time03 = (ChoiceBox) pane.lookup("#time03");
this.dianliang = (Slider) pane.lookup("#dianliang");
this.signal = (ChoiceBox) pane.lookup("#signal");
this.show01 = (RadioButton) pane.lookup("#show01");
this.show02 = (RadioButton) pane.lookup("#show02");
this.status = (ChoiceBox)pane.lookup("#status");
this.show03 = (RadioButton) pane.lookup("#show03");
this.show04 = (RadioButton) pane.lookup("#show04");
this.building = (Button)pane.lookup("#building");
this.iv = (ImageView) pane.lookup("#iv");
this.save = (Button) pane.lookup("#save");
this.money = (TextField)pane.lookup("#money");
this.yuebao = (TextField)pane.lookup("#yuebao");
this.beiyongjin = (TextField)pane.lookup("#beiyongjin");
注:这里的参数根据自己做的页面来决定
6.初始化下拉框的数据并设置默认值
yunyingshang.getItems().add("中国移动");
yunyingshang.getItems().add("中国联通");
yunyingshang.getItems().add("中国电信");
signal.getItems().add("1格");
signal.getItems().add("2格");
signal.getItems().add("3格");
signal.getItems().add("4格");
signal.getItems().add("5格");
network.getItems().add("Wifi");
network.getItems().add("无");
network.getItems().add("G");
network.getItems().add("E");
network.getItems().add("3G");
network.getItems().add("4G");
time01.getItems().add("-");
time01.getItems().add("上午");
time01.getItems().add("下午");
status.getItems().add("正常");
status.getItems().add("充电中");
//设置一个默认值
yunyingshang.setValue("中国移动");
signal.setValue("5格");
network.setValue("Wifi");
time01.setValue("-");
show01.setSelected(true);//设置button的默认值 默认选中show01
status.setValue("正常");
show03.setSelected(true);//默认选中show03
yuebao.setText("已自动转1.00元");//设置TextField的默认值
beiyongjin.setText("500元用7天");
//添加手机时间
for(int i=0;i<=23;i++)
{
if(i<=9)
{
time02.getItems().add("0"+i);
}
else{
time02.getItems().add(i);
}
}
for(int j=0;j<=59;j++)
{
if(j<=9)
{
time03.getItems().add("0"+j);
}
else{
time03.getItems().add(j);
}
}
7.监听按钮的点击事件
building.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
//获取money的数据
String money_value = money.getText();
String yuebao_value = yuebao.getText();
String beiyongjin_value = beiyongjin.getText();
if(money_value.equals("")){
Alert alert = new Alert(Alert.AlertType.WARNING);
alert.setContentText("请输入金额!!");
alert.show();
} else{
//先获取到imageView
//BufferedImage 才有画笔
Image image = iv.getImage();
//工具类
BufferedImage bufferedImage = SwingFXUtils.fromFXImage(image,null);
Graphics graphics = bufferedImage.getGraphics();
graphics.setColor(Color.WHITE);//设置颜色为白色
graphics.setFont(new Font("微软雅黑",Font.PLAIN,116));//设置字体
graphics.drawString(money_value,30,350);//在图片上写钱的数目 以及写的位置
graphics.setColor(new Color(180,180,180));
graphics.setFont(new Font("微软雅黑",Font.PLAIN,24));
graphics.drawString(yuebao_value,521,715);
graphics.drawString(beiyongjin_value,561,898);
// graphics.drawImage(signal,5,0,null);
// graphics.drawImage(wifi,175,0,null);
// graphics.drawImage(logo,64,0,null);
// graphics.drawImage(dl,671,0,null);
// graphics.drawImage(js,600,0,null);
WritableImage writableImage = SwingFXUtils.toFXImage(bufferedImage,null);
iv.setImage(writableImage);
}
}
});
8.监听按钮的保存时事件
save.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
FileChooser fileChooser = new FileChooser();
fileChooser.setInitialDirectory(new File("e://"));//保存路径 (自定义)
File file = fileChooser.showSaveDialog(null);
if(file!=null){
Image image = iv.getImage();
BufferedImage bufferedImage = SwingFXUtils.fromFXImage(image, null);
try{
ImageIO.write(bufferedImage,"png",file);
} catch (IOException e){
e.printStackTrace();
}
}
}
});
9.最后的main函数就写发布出去啦
附上完整代码以及页面展示
package com.hbwl.frame;
import javafx.application.Application;
import javafx.embed.swing.SwingFXUtils;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.image.WritableImage;
import javafx.scene.layout.Pane;
import javafx.stage.FileChooser;
import javafx.stage.Stage;
import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
public class MainFrame extends Application {
private ChoiceBox yunyingshang;
private ChoiceBox network;
private ChoiceBox time01;
private ChoiceBox time02;
private ChoiceBox time03;
private Slider dianliang;
private ChoiceBox signal;
private RadioButton show01;
private RadioButton show02;
private ChoiceBox status;
private RadioButton show03;
private RadioButton show04;
private Button building;
//private TextField money;
private ImageView iv;
private Button save;
private TextField money;
private TextField yuebao;
private TextField beiyongjin;
@Override
public void start(Stage primaryStage) throws Exception {
Pane pane = (Pane) FXMLLoader.load(MainFrame.class.getClassLoader().getResource("Alipay.fxml"));
this.yunyingshang = (ChoiceBox)pane.lookup("#yunyingshang");
this.network = (ChoiceBox) pane.lookup("#network");
this.time01 = (ChoiceBox) pane.lookup("#time01");
this.time02 = (ChoiceBox) pane.lookup("#time02");
this.time03 = (ChoiceBox) pane.lookup("#time03");
this.dianliang = (Slider) pane.lookup("#dianliang");
this.signal = (ChoiceBox) pane.lookup("#signal");
this.show01 = (RadioButton) pane.lookup("#show01");
this.show02 = (RadioButton) pane.lookup("#show02");
this.status = (ChoiceBox)pane.lookup("#status");
this.show03 = (RadioButton) pane.lookup("#show03");
this.show04 = (RadioButton) pane.lookup("#show04");
this.building = (Button)pane.lookup("#building");
this.iv = (ImageView) pane.lookup("#iv");
this.save = (Button) pane.lookup("#save");
this.money = (TextField)pane.lookup("#money");
this.yuebao = (TextField)pane.lookup("#yuebao");
this.beiyongjin = (TextField)pane.lookup("#beiyongjin");
//添加下拉框的初始化数据
yunyingshang.getItems().add("中国移动");
yunyingshang.getItems().add("中国联通");
yunyingshang.getItems().add("中国电信");
signal.getItems().add("1格");
signal.getItems().add("2格");
signal.getItems().add("3格");
signal.getItems().add("4格");
signal.getItems().add("5格");
network.getItems().add("Wifi");
network.getItems().add("无");
network.getItems().add("G");
network.getItems().add("E");
network.getItems().add("3G");
network.getItems().add("4G");
time01.getItems().add("-");
time01.getItems().add("上午");
time01.getItems().add("下午");
status.getItems().add("正常");
status.getItems().add("充电中");
//设置一个默认值
yunyingshang.setValue("中国移动");
signal.setValue("5格");
network.setValue("Wifi");
time01.setValue("-");
show01.setSelected(true);//设置button的默认值 默认选中show01
status.setValue("正常");
show03.setSelected(true);//默认选中show03
yuebao.setText("已自动转1.00元");//设置TextField的默认值
beiyongjin.setText("500元用7天");
//添加手机时间
for(int i=0;i<=23;i++)
{
if(i<=9)
{
time02.getItems().add("0"+i);
}
else{
time02.getItems().add(i);
}
}
for(int j=0;j<=59;j++)
{
if(j<=9)
{
time03.getItems().add("0"+j);
}
else{
time03.getItems().add(j);
}
}
//监听按钮的点击事件
building.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
//获取money的数据
String money_value = money.getText();
String yuebao_value = yuebao.getText();
String beiyongjin_value = beiyongjin.getText();
//String wifi = logo.
if(money_value.equals("")){
Alert alert = new Alert(Alert.AlertType.WARNING);
alert.setContentText("穷屌丝,请输入金额!!");
alert.show();
} else{
//先获取到imageView
//BufferedImage 才有画笔
Image image = iv.getImage();
//工具类
BufferedImage bufferedImage = SwingFXUtils.fromFXImage(image,null);
Graphics graphics = bufferedImage.getGraphics();
graphics.setColor(Color.WHITE);
graphics.setFont(new Font("微软雅黑",Font.PLAIN,116));
graphics.drawString(money_value,30,350);
graphics.setColor(new Color(180,180,180));
graphics.setFont(new Font("微软雅黑",Font.PLAIN,24));
graphics.drawString(yuebao_value,521,715);
graphics.drawString(beiyongjin_value,561,898);
// graphics.drawImage(signal,5,0,null);
// graphics.drawImage(wifi,175,0,null);
// graphics.drawImage(logo,64,0,null);
// graphics.drawImage(dl,671,0,null);
// graphics.drawImage(js,600,0,null);
WritableImage writableImage = SwingFXUtils.toFXImage(bufferedImage,null);
iv.setImage(writableImage);
}
}
});
//监听保存的时间
save.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
FileChooser fileChooser = new FileChooser();
fileChooser.setInitialDirectory(new File("e://"));
File file = fileChooser.showSaveDialog(null);
if(file!=null){
Image image = iv.getImage();
BufferedImage bufferedImage = SwingFXUtils.fromFXImage(image, null);
try{
ImageIO.write(bufferedImage,"png",file);
} catch (IOException e){
e.printStackTrace();
}
}
}
});
//新建一个场景
Scene scene = new Scene(pane,953,665) ;
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
最后
还有一些校功能下次完善~