最近になってXDのスタックを覚えたので、スタック便利ーとなっています。
アップデートはきちんとチェックしておかないといけませんね…。
さて、これは要素を積み上げたよくあるレイアウトのダミーです。
こちらをスタックを使って動的なレイアウトにしようと思います。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2021/11/ee4d6ae31277ec1eed12677e668bb1e5.png)
目次
スタックを使った動的レイアウトの作成
STEP
起点となる要素をグループ化する
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2021/11/01-1024x619.png)
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2021/11/02-1-1024x619.png)
STEP
スタックにチェックを入れる
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2021/11/03-1024x619.png)
STEP
入れ子になったグループにもスタックを入れる
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2021/11/04-1024x619.png)
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2021/11/05-1024x619.png)
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2021/11/06-1-1024x619.png)
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2021/11/08-1024x619.png)
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2021/11/09-1024x619.png)
STEP
コンポーネントにする
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2021/11/11.png)
STEP
リピートグリッドにする
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2021/11/12-1024x492.png)
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2021/11/13-1024x619.png)
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2021/11/Repeat-Gid-Fitter.png)
ここで便利なプラグイン「Repeat Gid Fitter」を使用すれば、
リピートグリッドの緑の枠を要素ぴったりで作成してくれます。
しかも、半端な数を設定するとマスクして隠してくれる優れもの!
STEP
リピートグリッドで任意の数に増やす
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2021/11/14.png)
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2021/11/15.png)
STEP
リピートグリッドを解除する
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2021/11/16-959x1024.png)
STEP
インスタンスにスタックをかける
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2021/11/18-1024x619.png)
STEP
完成!
メインコンポーネントを変更してみる
メインコンポーネントに修正を加えてみましょう。
先ほどは説明を省いてしまいましたが、
リピートグリッドを解除した後、インスタンスをグループ化してスタックをかけた際に
例によって勝手に入れ子になったグループにはスタックがかかっていません。
ここにもスタックをかけておきます。
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2021/11/e02-1024x619.png)
![](https://tech-blog.tomono.jp/wp/wp-content/uploads/2021/11/19-1024x619.png)
まとめ
XDの基本操作がわかっている方向けの記事なので、分かりにくい個所があるかもしれません。
すみません。
どんどんスタックを活用して作業を効率化していきたいですね。