how to make a bar that works like the navigation bar like chrome.

Hi everyone! what i want is to make a chat bar that works like the navigation bar in chrome. There are a few fixed buttons at the right side that do not scale or move. Tabs get added and they come in from the left filling the bar. When they reach the buttons at the right they respect them and start to scale all of the Tabs to fit.

I've spent a couple hours playing around with layouts and layout elements in various formats but i'm having trouble figuring out how i can achieve the desired behavior. I figured i would post and ask about it before writing any code as i feel like this can be accomplished just the built in UI tools.

Thanks!

 

Well, the main problem you have is about having the ability to add more tabs to the tabs zone. Otherwise, it can be done by making uses of panels that adjust themselves based on the allocated zone width of their parent panel.

It would be a lot easier to :

Step 1 :
- Put the tabs (and new tabs) inside a ScrollView (SV) content that act as the tabs zone.
- Ensure the SV size is set so that it only cover the remaining space left if you add the buttons on the right.
If you got 4 buttons (in width) that each are 50x50 pixels, that means you got to make sure you keep 200 pixel on the right. You can set the SV to be stretched with the anchor on top and then add a top padding of X pixel (varying the what you want above the tabs zone) and 200 pixels on the right.

Step 2 :
- Add a button at the end of the tabs zone that access the SV scroll bar. Whenever this is pressed, the scrollbar will move toward the right side.
- Add another button at the beginning of the tabs zone. Same as the other one, but will move the scrollbar toward the left side whenever possible.

Step 3 :
- Script a function that will instantiate a new panel (as a tab) as the children of the SV content.
- Make sure the number of tab is counted. This will make it easy to calculate each new tab initial position. (Like a simple : Rect.Position.X = TabsCount * tabs_width)
- Script a function the destroy existing panel (tabs). You will have to make sure it not only destroy the panel, but also adjust the TabsCount and the position of the remaining tabs.
If you wish, you could actually built a list (in parallel) of panels which make it easy to add or remove them.
- Make it so that whenever (TabsCount * tabs_width > Screen.width - 200pixels) (or change the 200 pixels for whatever width the remaining stuff takes), the 2 buttons in Step 2 appears. When it's not the case, those 2 button disapear or turn inactive. (your choice)

Step 4 :
- Complete the add tab and remove tab functions so that it also include the chat windows (a separate panel).
- Each tabs (as previously mentioned) are buttons. When one is pressed, it switch the active panel (chat window). You can make it so that the tab is invisible, but I suggest putting it (and keeping it) outside of the camera view so that you can make each tab update even when they are not visually active. Otherwise, you will have to make a separate system that store the information and an additional update_chat_windows function that gets called whenever a tab is pressed (which is a lot more complex if you consider that each tabs must also have their own content and IDs)

That's a simplified explanation about how I would do it by myself.

 

Thanks for the reply! Super insightful.