Swing界面优化进阶四

承接此贴：
http://www.iteye.com/topic/1137293
http://www.iteye.com/topic/1138101

在前三章进阶中，选择Jpanel来进行解说，是因为Jpanel基本上无处不在，任何一个窗体里面都有它的身影，大家弄明白了之后其他的组件就直接套用这个思路即可。

这一章我们来看一下滚动条，不知道大家对于Swing的滚动条有没有这种看法，个人认为前三章节中的漂亮界面如果加上滚动条之后将会变得无法直视。

优化滚动条，我们先来了解几个概念：滑道（Track）、把手（Thumb）、增加（Increase）、减少（Decrease）

相信大家从字面上已经看出来了，滑道就是滚动条后面的那道槽，把手就是我们鼠标拖着滑动的长条，至于增加和减少就是滑道上下或是左右的两个按钮，按钮点击和滚动鼠标可以达到相同的效果。接下来以纵向滚动态条给大家展示一下效果，这个弄明白了，横向滚动态条就很简单了

上图：
大家可能会感到疑惑，为什么向上的却是Decrease，向下的反而是Increase？这里是挺别扭，大家可以这么理解，Decrease英文意思是减少，这里你越向上滚动，你看到的东西将会变得越少，反之，Increase英文意思是增加，说明越往下滚动，看到的东西越多



这样看起来没感觉？那这个呢？



由于没有前端人员帮助，图片什么的是我自己切的，有些不太好看，大家不要介意。忽略颜色不计，从形状上来看，是不是比之前的默认风格好看多了？可能有朋友会说，花这么大力气来重绘，不如直接用第三方皮肤包，没错，这样是会快一些，而且还简单，但我们所要求的是自己要弄明白其中的原理，这样大家代码写起来也更加清晰

思路：继承BasicScrollBarUI，并实现里面对每个部位绘制的抽象方法，上面已经指出相应的4大部位，就不做过多描述

上代码，大家引用的时候只需要这样：scrollPane.getVerticalScrollBar().setUI(new DemoScrollBarUI());

package course;

import java.awt.AlphaComposite;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Rectangle;
import java.awt.RenderingHints;

import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JComponent;
import javax.swing.plaf.basic.BasicScrollBarUI;

/**
 * 自定义滚动条UI
 * @author SongFei
 * @date 2015年5月18日
 */
public class DemoScrollBarUI extends BasicScrollBarUI {

	@Override
	protected void configureScrollBarColors() {
		// 把手
//		thumbColor = Color.GRAY;
//		thumbHighlightColor = Color.BLUE;
//		thumbDarkShadowColor = Color.BLACK;
//		thumbLightShadowColor = Color.YELLOW;
		
		// 滑道
		trackColor = Color.WHITE;
//		trackHighlightColor = Color.GREEN;
	}

	@Override
	protected void paintTrack(Graphics g, JComponent c, Rectangle trackBounds) {
		super.paintTrack(g, c, trackBounds);
	}
	
	@Override
	protected void paintThumb(Graphics g, JComponent c, Rectangle thumbBounds) {
		// 这句一定要加上啊，不然拖动就失效了
		g.translate(thumbBounds.x, thumbBounds.y); 
		// 设置把手颜色
		g.setColor(Color.BLACK);
		// 画一个圆角矩形
		// 这里面前四个参数就不多讲了，坐标和宽高
		// 后两个参数需要注意一下，是用来控制角落的圆角弧度
		g.drawRoundRect(5, 0, 6, thumbBounds.height-1, 5, 5); 
		// 消除锯齿
		Graphics2D g2 = (Graphics2D) g;
		RenderingHints rh = new RenderingHints(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
		g2.addRenderingHints(rh);
		// 半透明
		g2.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.5f));
		// 设置填充颜色，这里设置了渐变，由下往上
		// g2.setPaint(new GradientPaint(c.getWidth() / 2, 1, Color.GRAY, c.getWidth() / 2, c.getHeight(), Color.GRAY));
		// 填充圆角矩形
		g2.fillRoundRect(5, 0, 6, thumbBounds.height-1, 5, 5);
	}
	
	@Override
	protected JButton createIncreaseButton(int orientation) {
		JButton button = new JButton(produceImage("down.png"));
		button.setBorder(null);
		return button;
	}
	
	@Override
	protected JButton createDecreaseButton(int orientation) {
		JButton button = new JButton(produceImage("up.png"));
		button.setBorder(null);
		return button;
	}
	
	/**
	 * 获取图片
	 * @param name 图片名称
	 * @return
	 */
	private ImageIcon produceImage(String name) {
		ImageIcon backImage = new ImageIcon(getClass().getClassLoader().getResource(name));
		return backImage;
	}
	
}



package course;

import java.awt.BorderLayout;

import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTree;
import javax.swing.tree.DefaultMutableTreeNode;

/**
 * JScrollPane优化示例
 * 
 * @author SongFei
 * @date 2015年5月17日
 */
public class Demo2 extends JFrame {

	private JPanel content;
	private JTree tree;
	private JScrollPane scrollPane;

	public Demo2() {
		setSize(300, 400);
		setTitle("course");
		setDefaultCloseOperation(EXIT_ON_CLOSE);
		
		tree = new JTree(getRootNode());
		
		content = new JPanel();
		content.setLayout(new BorderLayout());
		
		scrollPane = new JScrollPane();
		scrollPane.setViewportView(tree);
		scrollPane.getVerticalScrollBar().setUI(new DemoScrollBarUI());
		content.add(scrollPane, BorderLayout.CENTER);
		
		getContentPane().add(content);
	}

	/**
	 * 创建root节点
	 * @return
	 */
	private DefaultMutableTreeNode getRootNode() {
		DefaultMutableTreeNode root = new DefaultMutableTreeNode("root");
		root.add(new DefaultMutableTreeNode("node1"));
		root.add(new DefaultMutableTreeNode("node2"));
		root.add(new DefaultMutableTreeNode("node3"));
		root.add(new DefaultMutableTreeNode("node4"));
		root.add(new DefaultMutableTreeNode("node5"));
		root.add(new DefaultMutableTreeNode("node6"));
		root.add(new DefaultMutableTreeNode("node7"));
		root.add(new DefaultMutableTreeNode("node8"));
		root.add(new DefaultMutableTreeNode("node9"));
		root.add(new DefaultMutableTreeNode("node10"));
		root.add(new DefaultMutableTreeNode("node11"));
		root.add(new DefaultMutableTreeNode("node12"));
		root.add(new DefaultMutableTreeNode("node13"));
		root.add(new DefaultMutableTreeNode("node14"));
		root.add(new DefaultMutableTreeNode("node15"));
		root.add(new DefaultMutableTreeNode("node16"));
		root.add(new DefaultMutableTreeNode("node17"));
		root.add(new DefaultMutableTreeNode("node18"));
		root.add(new DefaultMutableTreeNode("node19"));
		root.add(new DefaultMutableTreeNode("node20"));
		return root;
	}

	/**
	 * 获取图片
	 * @param name 图片名称
	 * @return
	 */
	private ImageIcon produceImage(String name) {
		ImageIcon backImage = new ImageIcon(getClass().getClassLoader().getResource(name));
		return backImage;
	}
	
	public static void main(String[] args) {
		Demo2 demo1 = new Demo2();
		demo1.setVisible(true);
		demo1.setLocationRelativeTo(null);
	}

}

工程还是之前那个course，这次只是新增了两个类，就不再重新打包上传了，只把图片上传上来（up.png、down.png），大家下载下来放到相应目录就可以了，当然，大家如果有更好的图片就不用再要我这个了，实在是有些不太好看/(ㄒoㄒ)/~~

不错，  有收获。。    让我知道怎么开发Swing皮肤了。  值得一说的是 JDK 1.6 新增的皮肤不错

jdk自带了吗，我竟然还没看到