JFormDesigner / FlatLaf

FlatLaf - Swing Look and Feel (with Darcula/IntelliJ themes support)
https://www.formdev.com/flatlaf/
Apache License 2.0
3.34k stars 266 forks source link

JTabbedPane look and feel #541

Closed meeeee12 closed 2 years ago

meeeee12 commented 2 years ago

I am trying to create a JTabbedPane with a similar look to google chrome. like so:

image

I can get close by using tabbedPane.putClientProperty( "JTabbedPane.tabType", "card" );

image

I would also like to be able to round off the corners and remove the blue select bar. Is either option possible with flatlaf?

DevCharly commented 2 years ago

You can remove the blue selection bar with:

UIManager.put( "TabbedPane.cardTabSelectionHeight", 0 );
DevCharly commented 2 years ago

Regarding round edges: You can subclass FlatTabbedPaneUI and implement own painting.

grafik

public class MyFlatTabbedPaneUI
    extends FlatTabbedPaneUI
{
    public static ComponentUI createUI( JComponent c ) {
        return new MyFlatTabbedPaneUI();
    }

    @Override
    protected void paintCardTabBorder( Graphics g, int tabPlacement, int tabIndex, int x, int y, int w, int h ) {
        float lineWidth = UIScale.scale( 1f );
        float arc = UIScale.scale( 10 );

        Path2D path = new Path2D.Float( Path2D.WIND_EVEN_ODD );
        path.append( FlatUIUtils.createRoundRectanglePath( x, y, w, h, arc, arc, 0, 0 ), false );
        path.append( FlatUIUtils.createRoundRectanglePath( x + lineWidth, y + lineWidth, w - (lineWidth * 2), h - lineWidth,
            arc - lineWidth, arc - lineWidth, 0, 0 ), false );

        g.setColor( Color.red );
        ((Graphics2D)g).fill( path );
    }
}

Note: above code works only for "top" tab placement and needs some adjustments for other tab placements.

To use this for all tabbed panes, use:

UIManager.put( "TabbedPaneUI", MyFlatTabbedPaneUI.class.getName() );
UIManager.put( "TabbedPane.tabType", "card" );
UIManager.put( "TabbedPane.cardTabSelectionHeight", 0 );

Or for a single tabbed pane, use:

tabbedPane = new JTabbedPane() {
    @Override
    public void updateUI() {
        setUI( new MyFlatTabbedPaneUI() );
    }
};
tabbedPane.putClientProperty( "FlatLaf.style", "tabType: card; cardTabSelectionHeight: 0" );
meeeee12 commented 2 years ago

Thanks for your help, but my selected tab background is not the same color as the tab area and I can see the square corners protruding from the round corners.

image

DevCharly commented 2 years ago

Override paintTabBackground(): https://github.com/JFormDesigner/FlatLaf/blob/58dbccec2d5264cd2ce0317e49f83c766bd562b7/flatlaf-core/src/main/java/com/formdev/flatlaf/ui/FlatTabbedPaneUI.java#L1089-L1096

meeeee12 commented 2 years ago

That did it. Thank you.