使用渐变绘画复制此组件需要做什么？
Wil*_*ner 6 java graphics swing gradient paintcomponent
我试图复制这个组件(在帖子的底部),但我似乎无法让它看起来很好看.
所以我想知道,我该如何复制这种渐变涂料？或者,如果它不是渐变涂料,我该怎么做才能得到类似的结果？
与此组件相比,我的尝试变得非常平坦.它还有JFrame选项(关闭,最小化等),它没有组件的"圆润"外观.我正在寻找能够改善我所拥有的东西并解释我哪里出错的人.我知道我可以简单地使用已经制作的外观,但我希望我的示例项目尽可能接近除了文本的图像中的BitDefender GUI.(如果需要,我可以提供代码)
另请注意,我跳过了Background和'Virus Shield','Auto Scan','My BitDefender'面板之间的面板.我这样做主要是因为我想让我的SSCCE尽可能小.
另外我想要注意的是gbc.insets = new Insets(2,10,2,10);,在3上设置insets TopPanels使它看起来更接近BitDefender GUI的间距.(我现在没有时间上传图片.所以我按原样保留了代码,但我确实知道它可以更新到上面的插图中.
编辑 - 更新了更多来源
这是我的代码/ SSCCE(它是3个单独的类,但我将它们合并为一个.java)
package testgui;
import java.awt.*;
import javax.swing.BorderFactory;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
public class TestGui {
public TestGui() {
JFrame frame = new JFrame();
MidPanel midPanel = new MidPanel();
TopPanel topPanel1 = new TopPanel();
TopPanel topPanel2 = new TopPanel();
TopPanel topPanel3 = new TopPanel();
JLabel appName = new JLabel("MyApplication");
JLabel verNum = new JLabel("version 1.0");
Font verFont = new Font("Tahoma", Font.BOLD, 11);
Font nameFont = new Font("Tahoma", Font.BOLD, 14);
GridBagConstraints gbc = new GridBagConstraints();
appName.setForeground(Color.WHITE);
appName.setFont(nameFont);
verNum.setForeground(Color.WHITE);
verNum.setFont(verFont);
//add program name and version number
gbc.gridx = 0;
gbc.gridy = 0;
gbc.anchor = GridBagConstraints.WEST;
gbc.insets = new Insets(5, 5, 5, 5);
midPanel.add(appName, gbc);
gbc.gridx = 0;
gbc.gridy = 1;
gbc.anchor = GridBagConstraints.WEST;
gbc.insets = new Insets(5, 5, 5, 5);
midPanel.add(verNum, gbc);
//add 3 example top panels to midpanel
gbc.gridx = 0;
gbc.gridy = 2;
gbc.anchor = GridBagConstraints.NORTHWEST;
gbc.insets = new Insets(1,2,1,2);
gbc.fill = GridBagConstraints.HORIZONTAL;
gbc.weightx = 1.0;
midPanel.add(topPanel1, gbc);
gbc.gridx = 0;
gbc.gridy = 3;
gbc.insets = new Insets(1,2,1,2);
gbc.anchor = GridBagConstraints.NORTHWEST;
gbc.fill = GridBagConstraints.HORIZONTAL;
gbc.weightx = 1.0;
midPanel.add(topPanel2, gbc);
gbc.gridx = 0;
gbc.gridy = 4;
gbc.anchor = GridBagConstraints.NORTHWEST;
gbc.insets = new Insets(1,2,1,2);
gbc.fill = GridBagConstraints.HORIZONTAL;
gbc.weightx = 1.0;
midPanel.add(topPanel3, gbc);
//add panel to push other panels to top
gbc.gridx = 0;
gbc.gridy = 5;
gbc.fill = GridBagConstraints.VERTICAL;
gbc.weighty = 1.0;
JPanel invisPanel = new JPanel();
invisPanel.setOpaque(false);
midPanel.add(invisPanel, gbc);
frame.getContentPane().add(midPanel);
frame.pack();
frame.setVisible(true);
}
//test it out
public static void main(String[] args) {
new TestGui();
}
//class for the top 3 panels
private class TopPanel extends JPanel {
private int maxLength;
private boolean cyclic;
public TopPanel() {
initComponents();
setOpaque(false);
cyclic = true;
maxLength = 0;
}
@Override
public void paintComponent(Graphics g) {
if(isOpaque()) {
super.paintComponent(g);
return;
}
int width = getWidth();
int height = getHeight();
GradientPaint paint = null;
Color top = new Color(50, 50, 50);
Color btm = new Color(19, 19, 19);
paint = new GradientPaint(width / 2, 0, top, width / 2, maxLength > 0 ? maxLength : height, btm, cyclic);
if(paint == null) {
throw new RuntimeException("Invalid direction specified in GamerTagPanel");
}
Graphics2D g2d = (Graphics2D) g;
Paint oldPaint = g2d.getPaint();
g2d.setPaint(paint);
g2d.fillRect(0, 0, width, height);
g2d.setPaint(oldPaint);
super.paintComponent(g);
}
@Override
public Dimension getPreferredSize() {
return new Dimension(300, 200);
}
private void initComponents() {
GridBagConstraints gbc;
JLabel jLabel1 = new JLabel();
JLabel jLabel2 = new JLabel();
setBorder(BorderFactory.createLineBorder(new Color(204,204,204)));
setLayout(new GridBagLayout());
jLabel1.setFont(new Font("Tahoma", Font.BOLD, 11));
jLabel1.setForeground(new Color(255, 255, 255));
jLabel1.setText("Scanning...");
gbc = new GridBagConstraints();
gbc.gridx = 0;
gbc.gridy = 0;
gbc.anchor = GridBagConstraints.NORTHWEST;
gbc.insets = new Insets(5, 5, 5, 5);
add(jLabel1, gbc);
jLabel2.setFont(new java.awt.Font("Tahoma", Font.BOLD, 11));
jLabel2.setForeground(new java.awt.Color(255, 255, 255));
jLabel2.setText("C:\\Directory\\Folder\\SubFolder\\SpecificFolder\\File.file");
gbc = new GridBagConstraints();
gbc.gridx = 0;
gbc.gridy = 1;
gbc.gridwidth = 2;
gbc.fill = GridBagConstraints.HORIZONTAL;
gbc.anchor = GridBagConstraints.NORTHWEST;
gbc.weightx = 1.0;
gbc.insets = new Insets(5, 5, 5, 5);
add(jLabel2, gbc);
}
}
public class MidPanel extends JPanel {
private int maxLength;
private boolean cyclic;
public MidPanel() {
setLayout(new GridBagLayout());
setOpaque(false);
maxLength = 0;
cyclic = false;
}
@Override
public void paintComponent(Graphics g) {
if(isOpaque()) {
super.paintComponent(g);
return;
}
int width = getWidth();
int height = getHeight();
GradientPaint paint = null;
Color top = new Color(75, 75, 75);
Color btm = new Color(19, 19, 19);
paint = new GradientPaint(width / 2, 0, top, width / 2, maxLength > 0 ? maxLength : height, btm, cyclic);
if(paint == null) {
throw new RuntimeException("Invalid direction specified in GamerTagPanel");
}
Graphics2D g2d = (Graphics2D) g;
Paint oldPaint = g2d.getPaint();
g2d.setPaint(paint);
g2d.fillRect(0, 0, width, height);
g2d.setPaint(oldPaint);
super.paintComponent(g);
}
@Override
public Dimension getPreferredSize() {
return new Dimension(300, 400);
}
}
}
感谢JoopEggen指出我在GradientPaint上的颜色问题.它帮了很多忙.我仍然在寻找一个人来组织一个更好/更近看的例子.这是我第一次以这种方式覆盖paintComponent.
让我们先做一些逆向工程。在此过程中可以简化几个步骤。此外，我想说也有可能增强该应用程序的外观，因为第一印象远非十分积极。
基本上，可以在该设计后面找到以下元素：
- 渐变色
- 正确选择的颜色
- 圆角
- 轮廓
请注意，圆角，轮廓很重要。顺便说一句，可以优化某些渐变以提供简洁的设计。请查看“平面设计与拟态之间的战斗”以获取其他动机。
您的示例已修改，如下所示（只是视觉效果）：
我使用了以下颜色：
码：
public class TestGui {
public TestGui() {
JFrame frame = new JFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
MidPanel midPanel = new MidPanel();
TopPanel topPanel1 = new TopPanel();
TopPanel topPanel2 = new TopPanel();
TopPanel topPanel3 = new TopPanel();
JLabel appName = new JLabel("MyApplication");
JLabel verNum = new JLabel("version 1.0");
Font verFont = new Font("Tahoma", Font.BOLD, 11);
Font nameFont = new Font("Tahoma", Font.BOLD, 14);
GridBagConstraints gbc = new GridBagConstraints();
appName.setForeground(Color.WHITE);
appName.setFont(nameFont);
verNum.setForeground(new Color(0xFF9f9f9f));
verNum.setFont(verFont);
//add program name and version number
gbc.gridx = 0;
gbc.gridy = 0;
gbc.anchor = GridBagConstraints.WEST;
gbc.insets = new Insets(5, 5, 5, 5);
midPanel.add(appName, gbc);
gbc.gridx = 0;
gbc.gridy = 1;
gbc.anchor = GridBagConstraints.WEST;
gbc.insets = new Insets(5, 5, 5, 5);
midPanel.add(verNum, gbc);
//add 3 example top panels to midpanel
gbc.gridx = 0;
gbc.gridy = 2;
gbc.anchor = GridBagConstraints.NORTHWEST;
gbc.insets = new Insets(1,2,1,2);
gbc.fill = GridBagConstraints.HORIZONTAL;
gbc.weightx = 1.0;
midPanel.add(topPanel1, gbc);
gbc.gridx = 0;
gbc.gridy = 3;
gbc.insets = new Insets(1,2,1,2);
gbc.anchor = GridBagConstraints.NORTHWEST;
gbc.fill = GridBagConstraints.HORIZONTAL;
gbc.weightx = 1.0;
midPanel.add(topPanel2, gbc);
gbc.gridx = 0;
gbc.gridy = 4;
gbc.anchor = GridBagConstraints.NORTHWEST;
gbc.insets = new Insets(1,2,1,2);
gbc.fill = GridBagConstraints.HORIZONTAL;
gbc.weightx = 1.0;
midPanel.add(topPanel3, gbc);
//add panel to push other panels to top
gbc.gridx = 0;
gbc.gridy = 5;
gbc.fill = GridBagConstraints.VERTICAL;
gbc.weighty = 1.0;
JPanel invisPanel = new JPanel();
invisPanel.setOpaque(false);
midPanel.add(invisPanel, gbc);
frame.getContentPane().add(midPanel);
frame.pack();
frame.setVisible(true);
}
//test it out
public static void main(String[] args) {
new TestGui();
}
//class for the top 3 panels
private class TopPanel extends JPanel {
private int maxLength;
private boolean cyclic;
public TopPanel() {
super(true);
initComponents();
setOpaque(false);
cyclic = true;
maxLength = 0;
}
@Override
public void paintComponent(Graphics g) {
if(isOpaque()) {
super.paintComponent(g);
return;
}
int width = getWidth();
int height = getHeight();
GradientPaint paint = null;
//Color top = new Color(50, 50, 50);
//Color btm = new Color(19, 19, 19);
Color top = new Color(0xFF222222);
Color btm = new Color(0xFF0c0c0c);
paint = new GradientPaint(width / 2, 0, top, width / 2, maxLength > 0 ? maxLength : height, btm, cyclic);
if(paint == null) {
throw new RuntimeException("Invalid direction specified in GamerTagPanel");
}
Graphics2D g2d = (Graphics2D) g;
Paint oldPaint = g2d.getPaint();
g2d.setPaint(paint);
g2d.fillRect(0, 0, width, height);
g2d.setPaint(oldPaint);
super.paintComponent(g);
}
@Override
public Dimension getPreferredSize() {
return new Dimension(300, 200);
}
@Override
public void paintBorder(Graphics g) {
Dimension d = getSize();
g.setColor(new Color(0xFF484848));
g.drawRoundRect(1, 1, d.width-3, d.height-3, 10, 10);
g.setColor(Color.BLACK);
g.drawRoundRect(0, 0, d.width-1, d.height-1, 10, 10);
}
private void initComponents() {
GridBagConstraints gbc;
JLabel jLabel1 = new JLabel();
JLabel jLabel2 = new JLabel();
setBorder(BorderFactory.createLineBorder(new Color(204,204,204)));
setLayout(new GridBagLayout());
jLabel1.setFont(new Font("Tahoma", Font.BOLD, 11));
jLabel1.setForeground(new Color(255, 255, 255));
jLabel1.setText("Scanning...");
gbc = new GridBagConstraints();
gbc.gridx = 0;
gbc.gridy = 0;
gbc.anchor = GridBagConstraints.NORTHWEST;
gbc.insets = new Insets(5, 5, 5, 5);
add(jLabel1, gbc);
jLabel2.setFont(new java.awt.Font("Tahoma", Font.BOLD, 11));
jLabel2.setForeground(new Color(0xFF9f9f9f));
jLabel2.setText("C:\\Directory\\Folder\\SubFolder\\SpecificFolder\\File.file");
gbc = new GridBagConstraints();
gbc.gridx = 0;
gbc.gridy = 1;
gbc.gridwidth = 2;
gbc.fill = GridBagConstraints.HORIZONTAL;
gbc.anchor = GridBagConstraints.NORTHWEST;
gbc.weightx = 1.0;
gbc.insets = new Insets(5, 5, 5, 5);
add(jLabel2, gbc);
}
}
public class MidPanel extends JPanel {
private int maxLength;
private boolean cyclic;
public MidPanel() {
setLayout(new GridBagLayout());
setOpaque(false);
maxLength = 0;
cyclic = false;
}
// public void paintBorder(Graphics g) {
// g.setColor(Color.RED);
// Rectangle bounds = getBounds();
// g.drawRoundRect(bounds.x, bounds.y, bounds.width, bounds.height, 10, 10);
// }
@Override
public void paintComponent(Graphics g) {
if(isOpaque()) {
super.paintComponent(g);
return;
}
int width = getWidth();
int height = getHeight();
GradientPaint paint = null;
Color top = new Color(0xFF282828);
Color btm = new Color(0xFF0e0e0e);
paint = new GradientPaint(width / 2, 0, top, width / 2, maxLength > 0 ? maxLength : height, btm, cyclic);
if(paint == null) {
throw new RuntimeException("Invalid direction specified in GamerTagPanel");
}
Graphics2D g2d = (Graphics2D) g;
Paint oldPaint = g2d.getPaint();
g2d.setPaint(paint);
g2d.fillRect(0, 0, width, height);
g2d.setPaint(oldPaint);
super.paintComponent(g);
}
@Override
public Dimension getPreferredSize() {
return new Dimension(300, 400);
}
}
}
实施此UI的最佳方法
我认为唯一正确的方法是实施新的Look＆Feel子集。看一下seaglass项目：
我用了什么
所有这些示例都是使用Inkscape（一个开放源代码矢量图形编辑器）准备的。您可以下载我的SVG源代码
