Add ExpandingBar UI element

This commit is contained in:
Dean Herbert 2019-05-22 16:44:47 +09:00
parent 0e8517ebae
commit 1d5b7cdec0
3 changed files with 159 additions and 9 deletions

View 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);
}
}
}

View 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);
}
}
}

View File

@ -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);
}
}