FREELessons: 18Length: 2.1 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.3 Anchors

Anchors allow you to determine how an object will move and resize when its parent’s size is modified. This gives you a way to create pseudo-responsive functionality in your designs. Learn how to use Gravit’s anchors in this video.

4.3 Anchors

Hi, welcome back to Gravit Designer Quick Start. In this lesson, we're gonna be looking at the anchoring system of Gravit Designer that allows you to control how the position and size of an element respond depending on the size of its parent element. So just quickly knock together this very basic layout to show you what I'm talking about. This is a very rough version of something you might put together. This is a very rough version of something you might see in a video player UI. So we've just got a basic background to hold the video, a basic bar along the bottom to hold the controls, and a couple of controls here, a stop and play button. And typically, you're going to want a video to be responsive. You're gonna want it to be able to shrink or expand as it needs to. All right, now if I just grab the container for the video and I resize it, then our controls just completely get left behind. What I can do is start nesting these objects inside each other and then I can use these controls up here to determine how they respond when the container is changed, how an object will be positioned and sized vertically. And these ones control the horizontal positioning and size. So let's take a look at how this works. The first thing we're gonna do is take our black bar at the bottom here, nest it inside our container so that we can start applying these anchors and seeing how they operate. So if I just activate this anchor left option here, now, when I change the size of the parent, all that's gonna happen is this black bar is gonna stay the same distance from the left hand side of the parent as it currently is. So if I change, then you're not really gonna see a lot of difference other than it's just staying in that position on the left side. If we do it on the right side, Now, you're gonna see the bar follow to the right. If I activate only the center anchor, then it's going to remain centered. If I activate both of these outer anchors, now this is gonna stretch itself or squash itself to keep both its left and right edges where they are currently. So now, we have a bar that's always gonna stretch or squash itself to fill in our container. So now, we've got a bar stretching itself horizontally. What we also want is for it to stick itself to the bottom of this container when the vertical size changes as well. So for that, you can probably guess it from what we just went through, all I need to do is just anchor it to the bottom. So now when I change the parent size, that bar stays at the bottom and keeps its height, and it stretches its width to suit whatever size the parent is. Let's put that back to how it was. Now we want to control how our play and stop buttons behave. So as you can guess, we're gonna need to nest these inside the bar section so that we can keep them centered both horizontally and vertically in the bar. And this is a little trickier because we have two items here, and even though we want these two items to position themselves relative to the center of the parent, we don't want them to move themselves left and right. So right now, if we were to anchor these horizontally on the center, watch what will happen. As you shrink this down, they start to cross over each other because there is nothing telling them how far apart to space themselves. So in this case, rather than setting both of these items to be anchored in the center, what we're gonna do is group them. So you can group them by hitting the group button here or by pressing Ctrl+G. Now we have a singular item in our group here that we can anchor. So now we can anchor it in the center. And when we change the parent size, now our controls are keeping their distance apart from each other. But they're remaining in the center of the overall object. Now we just need to make sure that they don't get lost when the vertical size changes as well. So to do that, once again we select that group and we position it vertically. So now it's gonna be anchored to the center of our black bar. So when the black bar moves, the controls move along with it. This can be particularly useful in combination with symbols. So let's say we make a symbol out of our entire shape here, video player. And let's say we're working on a normal-sized website. Now if we want to try, Creating an example of how a video player would look on a smaller device like say, what do we have the small, go with a Nexus 5. We can drag our video player in, it's too big by default. So now we can grab our container, shrink the whole thing down, and we get a preview of how this is gonna look at a different size. So once again, that's another really helpful system, helps you speed up your processes, and especially in combination with symbols, allows you to enhance how reusable your assets are. So we now covered all of Gravit's major features. So in the next lesson, which is the last lesson of the course, we're just gonna cover a couple of tips and tricks that don't fit squarely under any of the topics that we've talked about so far. So we're gonna go after those shortcuts and little tricks in the next lesson. I'll see you there.

Back to the top