如何用java做一个支付宝余额界面

1,331 阅读4分钟

这是我参与11月更文挑战的第二十六天,活动详情查看:2021最后一次更文挑战

如何用java做一个支付宝余额界面

前言

最近在做一个支付宝余额页面的小程序,今天把做这个的思路给整理出来了。(只是一部分)

作图

我们要利用JavaFx(一个制作图形页面的软件),来做出一个想要的图形页面

这里是我做的一个支付宝的余额界面

image.png

大致把图形做成这样后,我们要给每个框框一个id,用以与java代码产生关联。

这里的id是这么加的:

image.png

选中需要改id的框框,再在右栏中的fx:id中输入其代号,最后别忘记保存哦。

IDEA篇

  1. 首先,将你做的页面文件复制到你的java项目中

  2. 然后就要开始构建我们的页面框架啦

    建立框架就得继承Application类

    public class MainFrame extends Application 
    
  3. 定义页面所需要的各个参数

    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);
    }
}

image.png

最后

还有一些校功能下次完善~