mirror of
https://github.com/ppy/osu.git
synced 2024-12-14 10:12:54 +08:00
Add ExpandingBar UI element
This commit is contained in:
parent
0e8517ebae
commit
1d5b7cdec0
50
osu.Game.Tests/Visual/UserInterface/TestSceneExpandingBar.cs
Normal file
50
osu.Game.Tests/Visual/UserInterface/TestSceneExpandingBar.cs
Normal file
@ -0,0 +1,50 @@
|
||||
// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
|
||||
// See the LICENCE file in the repository root for full licence text.
|
||||
|
||||
using osu.Framework.Graphics;
|
||||
using osu.Framework.Graphics.Containers;
|
||||
using osu.Framework.Graphics.Shapes;
|
||||
using osu.Game.Graphics.UserInterface;
|
||||
using osuTK.Graphics;
|
||||
|
||||
namespace osu.Game.Tests.Visual.UserInterface
|
||||
{
|
||||
public class TestSceneExpandingBar : OsuTestScene
|
||||
{
|
||||
public TestSceneExpandingBar()
|
||||
{
|
||||
Container container;
|
||||
ExpandingBar expandingBar;
|
||||
|
||||
Add(container = new Container
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Children = new Drawable[]
|
||||
{
|
||||
new Box
|
||||
{
|
||||
Colour = Color4.Gray,
|
||||
Alpha = 0.5f,
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
},
|
||||
expandingBar = new ExpandingBar
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
ExpandedSize = 10,
|
||||
CollapsedSize = 2,
|
||||
Colour = Color4.DeepSkyBlue,
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
AddStep(@"Collapse", () => expandingBar.Collapse());
|
||||
AddStep(@"Uncollapse", () => expandingBar.Expand());
|
||||
AddSliderStep(@"Resize container", 1, 300, 150, value => container.ResizeTo(value));
|
||||
AddStep(@"Horizontal", () => expandingBar.RelativeSizeAxes = Axes.X);
|
||||
AddStep(@"Anchor top", () => expandingBar.Anchor = Anchor.TopCentre);
|
||||
AddStep(@"Vertical", () => expandingBar.RelativeSizeAxes = Axes.Y);
|
||||
AddStep(@"Anchor left", () => expandingBar.Anchor = Anchor.CentreLeft);
|
||||
}
|
||||
}
|
||||
}
|
101
osu.Game/Graphics/UserInterface/ExpandingBar.cs
Normal file
101
osu.Game/Graphics/UserInterface/ExpandingBar.cs
Normal file
@ -0,0 +1,101 @@
|
||||
// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
|
||||
// See the LICENCE file in the repository root for full licence text.
|
||||
|
||||
using osu.Framework.Graphics;
|
||||
using osu.Framework.Graphics.Shapes;
|
||||
using osuTK;
|
||||
|
||||
namespace osu.Game.Graphics.UserInterface
|
||||
{
|
||||
/// <summary>
|
||||
/// A rounded bar which can be expanded or collapsed.
|
||||
/// Generally used for tabs or breadcrumbs.
|
||||
/// </summary>
|
||||
public class ExpandingBar : Circle
|
||||
{
|
||||
private bool isCollapsed;
|
||||
|
||||
public bool IsCollapsed
|
||||
{
|
||||
get => isCollapsed;
|
||||
set
|
||||
{
|
||||
if (value == isCollapsed)
|
||||
return;
|
||||
|
||||
isCollapsed = value;
|
||||
updateState();
|
||||
}
|
||||
}
|
||||
|
||||
private float expandedSize = 4;
|
||||
|
||||
public float ExpandedSize
|
||||
{
|
||||
get => expandedSize;
|
||||
set
|
||||
{
|
||||
if (value == expandedSize)
|
||||
return;
|
||||
|
||||
expandedSize = value;
|
||||
updateState();
|
||||
}
|
||||
}
|
||||
|
||||
private float collapsedSize = 2;
|
||||
|
||||
public float CollapsedSize
|
||||
{
|
||||
get => collapsedSize;
|
||||
set
|
||||
{
|
||||
if (value == collapsedSize)
|
||||
return;
|
||||
|
||||
collapsedSize = value;
|
||||
updateState();
|
||||
}
|
||||
}
|
||||
|
||||
public override Axes RelativeSizeAxes
|
||||
{
|
||||
get => base.RelativeSizeAxes;
|
||||
set
|
||||
{
|
||||
base.RelativeSizeAxes = Axes.None;
|
||||
Size = Vector2.Zero;
|
||||
|
||||
base.RelativeSizeAxes = value;
|
||||
updateState();
|
||||
}
|
||||
}
|
||||
|
||||
public ExpandingBar()
|
||||
{
|
||||
RelativeSizeAxes = Axes.X;
|
||||
Origin = Anchor.Centre;
|
||||
}
|
||||
|
||||
protected override void LoadComplete()
|
||||
{
|
||||
base.LoadComplete();
|
||||
updateState();
|
||||
}
|
||||
|
||||
public void Collapse() => IsCollapsed = true;
|
||||
|
||||
public void Expand() => IsCollapsed = false;
|
||||
|
||||
private void updateState()
|
||||
{
|
||||
float newSize = IsCollapsed ? CollapsedSize : ExpandedSize;
|
||||
Easing easingType = IsCollapsed ? Easing.Out : Easing.OutElastic;
|
||||
|
||||
if (RelativeSizeAxes == Axes.X)
|
||||
this.ResizeHeightTo(newSize, 400, easingType);
|
||||
else
|
||||
this.ResizeWidthTo(newSize, 400, easingType);
|
||||
}
|
||||
}
|
||||
}
|
@ -67,7 +67,7 @@ namespace osu.Game.Overlays
|
||||
private class HeaderTabItem : TabItem<string>
|
||||
{
|
||||
private readonly OsuSpriteText text;
|
||||
private readonly Drawable bar;
|
||||
private readonly ExpandingBar bar;
|
||||
|
||||
private Color4 accentColour;
|
||||
|
||||
@ -92,7 +92,7 @@ namespace osu.Game.Overlays
|
||||
AutoSizeAxes = Axes.X;
|
||||
RelativeSizeAxes = Axes.Y;
|
||||
|
||||
Children = new[]
|
||||
Children = new Drawable[]
|
||||
{
|
||||
text = new OsuSpriteText
|
||||
{
|
||||
@ -102,12 +102,11 @@ namespace osu.Game.Overlays
|
||||
Text = value,
|
||||
Font = OsuFont.GetFont()
|
||||
},
|
||||
bar = new Circle
|
||||
bar = new ExpandingBar
|
||||
{
|
||||
RelativeSizeAxes = Axes.X,
|
||||
Height = 0,
|
||||
Origin = Anchor.CentreLeft,
|
||||
Anchor = Anchor.BottomLeft,
|
||||
Anchor = Anchor.BottomCentre,
|
||||
ExpandedSize = 7.5f,
|
||||
CollapsedSize = 0
|
||||
},
|
||||
new HoverClickSounds()
|
||||
};
|
||||
@ -138,7 +137,7 @@ namespace osu.Game.Overlays
|
||||
if (Active.Value || IsHovered)
|
||||
{
|
||||
text.FadeColour(Color4.White, 120, Easing.InQuad);
|
||||
bar.ResizeHeightTo(7.5f, 120, Easing.InQuad);
|
||||
bar.Expand();
|
||||
|
||||
if (Active.Value)
|
||||
text.Font = text.Font.With(weight: FontWeight.Bold);
|
||||
@ -146,7 +145,7 @@ namespace osu.Game.Overlays
|
||||
else
|
||||
{
|
||||
text.FadeColour(AccentColour, 120, Easing.InQuad);
|
||||
bar.ResizeHeightTo(0, 120, Easing.InQuad);
|
||||
bar.Collapse();
|
||||
text.Font = text.Font.With(weight: FontWeight.Medium);
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user