control inner positions of ui axes in app designer

I have a very specific question in using app designer. The picture below shows a snapshot of part of my app. Basically I want to show a signal in the top uiaxis while show a time-frequency representation of the signal in the bottom axis.

I'm struggling with the position control right now. Since the innerposition property is read-only, I didn't figure out a way to properly adjust the inner position so that the two x-axes could be aligned well. I've tried to play with the plotboxaspectratio property. It only worked when the two uiaxes were exactly with the same size. It failed if the sizes were different.

Answer 1

[Mischa Kim]

Hi Peng, with release 2020b you can keep plot axes aligned in App Designer. Do the following:

1. Align all plot axes in the App Designer in the Design View
2. In the Code View set the PositionConstraint property to innerposition, e.g.

app.UIAxes.PositionConstraint = 'innerposition';

Answer 2

[Benjamin Kraus]

Mischa Kim is correct that starting in R2020b you can set the InnerPosition property (or PositionConstraint property) on UIAxes to solve this problem. However, there are workarounds for MATLAB R2018b and newer, and even in R2020b that may not be the best option to align to axes like you want.

As long as you are running MATLAB R2018b or newer, you can use a regular axes within App Designer, and regular axes will allow you to set the InnerPosition property to align the axes. The limitation is that you have to create the regular axes programmatically (you cannot add it to the app in design mode).

My recommendation is to replace both your UIAxes with a panel that occupies the same region as both UIAxes, then in your startup function create two axes within that panel. You have three options for aligning the axes:

1. In R2019b or newer, use the tiledlayout and nexttile commands to create two axes aligned the way you like.
2. In R2018b or newer, you can disable the AutoResizeChildren property on the panel, then use subplot to create two axes within the panel.
3. In R2018b or newer, you can also just use the axes command and then manually position your two axes using the InnerPosition property to get them to align with one another.

Some example code, using the tiledlayout and nexttile commands, that will keep two axes aligned. This code can be run in your startup function. I'm assuming you've created a panel named Panel1 in your app, and you can create two properites in your app named Axes1 and Axes2 to store handles to your axes.

t = tiledlayout(app.Panel1, 2, 1);
app.Axes1 = nexttile(t);
app.Axes2 = nexttile(t);