`
flyPig
  • 浏览: 139610 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

圆角高亮Button

阅读更多
    swing的JButton方方正正,看久了总觉得审美疲劳了,看了apple上的按钮,就舒服多了。借助java2D,要做类似那种按钮也不是不可能的。
    要做到这个效果,可以重写BasicButtonUI然后给调用JButton的setUI,也可以继承JButton重写部分方法。两者原理都一样,我这里用的是第二种。原理就是重新绘制Jbutton包括按钮,边框等,也就是重写paintComponent(Graphics g).
public class BasicButton extends JButton {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	public static final Color BUTTON_COLOR1 = new Color(125, 161, 237);
	public static final Color BUTTON_COLOR2 = new Color(91, 118, 173);
	public static final Color BUTTON_BAK_COLOR1_1 = new Color(108, 135, 210,
			179);
	public static final Color BUTTON_BAK_COLOR1_2 = new Color(108, 135, 210,
			255);
	public static final Color BUTTON_BAK_COLOR2_1 = new Color(180, 230, 250,
			179);
	public static final Color BUTTON_BAK_COLOR2_2 = new Color(180, 230, 250,
			255);
	public static final Color BUTTON_FOREGROUND_COLOR = Color.BLACK;
	private boolean hover;

	public BasicButton(String text) {
		super(text);
            //步骤1
		setBorderPainted(false);
		setFocusPainted(false);
		setContentAreaFilled(false);

		setForeground(BUTTON_FOREGROUND_COLOR);
		addMouseListener(new MouseAdapter() {
			@Override
			public void mouseEntered(MouseEvent e) {
				hover = true;
				repaint();
			}

			@Override
			public void mouseExited(MouseEvent e) {
				hover = false;
				repaint();
			}
		});
	}

	@Override
	protected void paintComponent(Graphics g) {
		Graphics2D g2d = (Graphics2D) g.create();
		int h = getHeight();
		int w = getWidth();
//		Color color2 = BUTTON_BAK_COLOR1_2;
//		Color color1 = BUTTON_BAK_COLOR2_2;
		float tran = 1F;
		if (!hover) {
			tran = 0.7F;
//			color2 = BUTTON_BAK_COLOR1_1;
//			color1 = BUTTON_BAK_COLOR2_1;
		}
            //步骤2
		g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
				RenderingHints.VALUE_ANTIALIAS_ON);
		GradientPaint p1;
		GradientPaint p2;
		if (getModel().isPressed()) {
			p1 = new GradientPaint(0, 0, new Color(0, 0, 0), 0, h - 1,
					new Color(100, 100, 100));
			p2 = new GradientPaint(0, 1, new Color(0, 0, 0, 50), 0, h - 3,
					new Color(255, 255, 255, 100));
		} else {
			p1 = new GradientPaint(0, 0, new Color(100, 100, 100), 0, h - 1,
					new Color(0, 0, 0));
			p2 = new GradientPaint(0, 1, new Color(255, 255, 255, 100), 0,
					h - 3, new Color(0, 0, 0, 50));
		}
//设置透明度

             g2d.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER,
				tran));
		Shape clip = g2d.getClip();
           //绘制整个按钮
		RoundRectangle2D.Float r2d = new RoundRectangle2D.Float(0, 0, w - 1,
				h - 1, h, h);
		g2d.clip(r2d);
		GradientPaint gp = new GradientPaint(0.0F, 0.0F, BUTTON_COLOR1, 0.0F,
				h, BUTTON_COLOR2, true);
		g2d.setPaint(gp);
		g2d.fillRect(0, 0, w, h);
                //鼠标移入就绘制立体效果
		if (hover) {
			RoundRectangle2D.Float r2d2 = new RoundRectangle2D.Float(5, 2,
					w - 10, h / 2 - 1, h / 2, h / 2);
			g2d.clip(r2d2);
			GradientPaint gp2 = new GradientPaint(0.0F, 0.0F, BUTTON_BAK_COLOR2_2, 0.0F,
					h / 2, BUTTON_BAK_COLOR1_2, true);
			g2d.setPaint(gp2);
			g2d.fillRect(5, 2, w - 10, h / 2);
		}
		g2d.setClip(clip);
                //绘制边框
		g2d.setPaint(p1);
		g2d.drawRoundRect(0, 0, w - 1, h - 1, h, h);
		g2d.setPaint(p2);
		g2d.drawRoundRect(1, 1, w - 3, h - 3, h - 2, h - 2);
		g2d.dispose();
		super.paintComponent(g);
	}
}


基本步骤就是:
1.先调用父类的方法,让父类不用绘制边框、不用绘制焦点、不用绘制内容,我们自己来完成这些东西。
2.调用抗锯齿的api,让我们paint出来的线条平滑,要不然会有相当难看的锯齿。
3.设置透明度。这个主要是为了做出鼠标移入、移出的效果。我这里是移入按钮,按钮颜色加深并且会有视觉效果上的“凸起”立体感;移出就颜色变浅,凸起感消失,恢复原样了。
4.绘制整个按钮。生成一个圆角矩形,并用由上到下的渐进色填充,这就是按钮的整体效果。
5.如果鼠标移入就绘制立体效果。在这里我是先生成一个高度为按钮一半的圆角矩形,然后从上到下用渐进色填充,最下面的颜色就是按钮本身在中间位置的颜色,这样看起来上面是白的,好像反光的立体效果。
6.绘制边框。用于点击效果的显示。
如果要真正想apple那样的效果,就还需要用另外的区域来模糊化下半个按钮部分,需要涉及到调整颜色之类的,我这就没做了,大概的效果图如下:
正常状态

鼠标移上去

鼠标按下去



  • 大小: 1.5 KB
  • 大小: 1.6 KB
  • 大小: 1.6 KB
分享到:
评论

相关推荐

    ios 代码写Button小结

    此外,还可以为按钮设置不同状态下的标题和图像,例如高亮、选中或禁用状态: ```objc [button setTitle:@"已点击" forState:UIControlStateSelected]; [button setTitleColor:[UIColor whiteColor] forState:...

    ios app的button的图片设置

    - 对于圆角按钮,可以使用`layer.cornerRadius`属性来设置圆角,并确保`clipToBounds`为`true`。 总结,为iOS App中的按钮设置图片涉及到多种方法和属性,通过合理使用这些工具,我们可以创建出美观且交互性强的...

    C#自绘之Button

    6. **添加动画效果**: 为了模拟QQ按钮的效果,可能需要添加一些动画,如按下时的下陷效果,鼠标悬停时的高亮效果等。这通常通过定时器(Timer)和重绘控件来实现。 7. **事件处理**: 自定义控件需要处理鼠标和键盘...

    纯css3鼠标悬停按钮变大高亮显示

    这里`transform: scale(1.1)`使得按钮在悬停时按比例扩大,`background-color`更改背景色以突出高亮,而`border-radius`则为按钮添加了圆角,使其看起来更柔和。 此外,`transition`属性在这里起到了关键作用,它...

    Office2007 样式Button控件

    例如,当鼠标悬停在Button上时,可以使用更亮的背景色和更突出的边框来表示高亮状态;而当Button被按下时,可能会改变其位置,产生一种下陷的视觉效果。 在绘制Button时,可以使用SolidBrush对象填充背景色,用Pen...

    (0078)-iOS/iPhone/iPAD/iPod源代码-按钮(Button)-Confirm Button

    2. **设置标题**:使用`setTitle(_:for:)`方法来设置按钮的文字内容,`for`参数可以指定不同状态下的标题,如正常、高亮、选中等。 3. **设置图片**:`setImage(_:for:)`方法用来设置按钮的图像,同样可以为不同...

    CBtnST.rar_BUTTON 字体_BUTTON字体_CBtnS_button_cbtn

    这些风格可能包括边框样式、阴影效果、圆角、高亮效果等。 文件列表中提到的"CBtnST类"可能包含了实现上述特性的源代码文件。在这个类中,我们可以期待找到处理按钮外观和行为的方法,如OnDraw()来绘制按钮,On_WM_...

    常用的css3 button彩色按钮样式代码

    /* 移除默认轮廓线,可以自定义其他高亮方式 */ } ``` 在提供的压缩包文件"texiao4030_1560680955"中,可能包含了一些示例代码或预设的彩色按钮样式,供开发者参考和使用。这些代码可能包括了各种颜色、形状和效果...

    button——ios

    - **按钮的类型** (第 8 页):描述了按钮的不同类型、它们的行为、高亮显示方式以及是否显示状态。 - **使用 Push Buttons** (第 11 页):介绍了如何使用 Push Buttons。 - **使用 Checkboxes** (第 12 页):介绍了...

    win10网格按钮悬停高亮CSS样式.zip

    例如,可能使用`background-color`属性来定义按钮的默认颜色,`border-radius`来设定圆角,`box-shadow`添加阴影效果,以及`transition`来实现平滑的悬停动画。 当用户将鼠标悬停在按钮上时,CSS会通过`:hover`伪类...

    自定义button

    `for`参数表示状态,如正常、高亮、选中等。 3. 自定义字体和颜色:可以使用`setTitleColor(_:for:)`来改变文字颜色,`setFont(_:for:)`来设置字体。例如`button.setTitleColor(.blue, for: .normal)`和`button....

    IOS应用源码之Button.rar

    UIButton有多种状态,如正常、高亮、选中、禁用等,可以通过不同的UIControlState参数来设置不同状态下的属性。 7. 触摸状态: 按钮提供了触摸下、触摸上、触摸取消等状态,可以为这些状态分别设置不同的图像或...

    各种Button 制作实例 (苹果风格,……)

    苹果风格的按钮通常具有鲜明的质感和阴影效果,这可以通过设置按钮的背景色、边框、圆角以及高亮状态来实现。例如,我们可以使用`UIButton`类的`backgroundColor`属性设置背景颜色,`layer.cornerRadius`设置圆角,`...

    MAC风格的半透明超酷WinForm Button控件源码

    2. **圆角边框**:MAC风格的按钮通常有圆润的边角,这可以通过设置控件的边框样式和圆角半径来实现。在C#代码中,可以使用GraphicsPath和Pen对象来绘制这样的形状。 3. **高亮和按下状态**:模仿MAC按钮,控件需要...

    微信小程序中button去除默认的边框实例代码

    以上代码展示了如何全面地定制button样式,包括位置、尺寸、内边距、文字样式、圆角以及点击高亮颜色等。当然,具体的样式应该根据实际项目需求进行调整。如果需要更复杂的自定义,可以通过添加额外的类选择器来实现...

    C# winForm 按钮的综合性美化

    例如,当鼠标进入按钮时,可以淡入一个高亮颜色,离开时恢复原色。同时,可以使用SolidBrush对象配合Color.FromArgb方法,实现颜色的透明度调整,为按钮添加玻璃感光效果。 对于按钮的禁用状态,我们可以在Is...

    Mac 风格的按钮源码.rar_CSharp 按钮_button_mac c# 调试_控件 csharp mobile

    在C#中实现这种风格,我们需要自定义控件,通过调整控件的边框、背景色、文字样式和高亮效果来达到目标效果。可以使用GDI+或.NET Framework提供的绘图类来实现这些自定义绘制功能。 接下来,我们讨论C#中的按钮控件...

    Android自定义拍照布局内容自己控制,中间高亮

    高亮框的形状可以通过`@drawable/highlight_shape`来定义,可以是一个圆角矩形或者其他自定义形状。 接下来,我们需要创建一个`CameraPreview`类,继承自`SurfaceView`的`SurfaceHolder.Callback`接口,用于处理...

    UIButton使用方法汇总

    按钮类型有6种,包括`UIButtonTypeCustom`(自定义风格)、`UIButtonTypeRoundedRect`(圆角矩形)、`UIButtonTypeDetailDisclosure`(详细披露按钮)、`UIButtonTypeInfoLight`(亮色感叹号)、`...

    ios学习笔记中用到的美化按钮的背景图

    使用`button.layer.borderWidth`和`button.layer.cornerRadius`属性可以改变按钮的边框宽度和圆角大小,进一步提升视觉效果。 6. **文字和图像的布局**: 默认情况下,按钮的文字位于图像的上方。通过调整`...

Global site tag (gtag.js) - Google Analytics