スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--/--/--(--) | スポンサー広告 | トラックバック(-) | コメント(-)

View Controller とアプリ画面の編集 【2】

View Controller とアプリ画面の編集 【1】】の続きです(*´ω`*)

さて、先ほどはアプリ画面の背景色を変更することに成功しましたが・・・
今をトキメク素敵アプリを作るためには、背景色を変えるだけじゃダメですよね。
大抵のアプリには画面を操作するためのボタンが幾つか設置されてます。
さっき作ったピンクの背景にボタンをつけて、
よりアプリらしい画面を作ってみたいと思います

【画面にボタンを設置する】

クリックで原寸大

背景色を変更したときと同じく、今回もユーティリティーエリアを使います。
しかし前回使った上半分の画面ではなく、今回は下半分、Objectの方の画面です。
なんだかよく分からないアイコンがたくさん並んでいるのが見えますね。
下の方まで続いてるみたいなので、試しにスクロールしていってみましょう・・・

クリックで原寸大

見覚えのあるパーツが色々出てきました。
iPhone上でよく使われてます、ボタンやスイッチです。
これらのパーツは、なんと簡単に画面上に設置することができちゃうんです。
早速ボタンを設置してみましょう。Round Rect Button を選択し、
ドラッグ&ドロップでView Controllerの上まで持ってきてみます・・・

クリックで原寸大

できた!画面上にボタンが表示されました。
まんま『Button』と書かれたボタンです。分かりやすいですね(笑)
設置する際にガイドとなるマス目が表示されるので、
位置も画面に合わせて綺麗に設置することができますъ( ゚ー^)
ちょうど左右の真ん中に来るように置いてみました。
シミュレータでテストして、iPhoneの画面でも確認してみましょうー。

vc10.png

うむ。いい感じでございますね。
ボタンの位置もちゃんと真ん中に配置されています。
このボタン、画面上に置いただけなのでまだ押しても何も起こりませんが、
シミュレータ上でポチポチする事はできます。ちゃんとカチカチなるんですよ(*゚v゚*)
何か楽しい~♪

クリックで原寸大

でーん★
折角なので、さっき見つけたボタン以外のモノも色々設置してみちゃいました
それぞれの用途はなんとなくしか分かってませんが・・・
設置するだけならただだし、いいでしょう(笑)

一番下のボタンも、ちょこっと弄ってみました。
先ほど背景の色を変更した時のように、
ユーティリティーエリアでボタンの外見を変える事ができます。
編集したい対象のボタンを選択し、例のホームベースボタンをクリック。
するとエリア上半分にボタン用の設定項目が現れ、好きに編集する事が可能です。

大きさも少し変えてみました。これはボタン自体を手動で拡大縮小できます。
マウスのカーソルをボタンの端に持って行って、クリックしたまま引っ張ればOK。
他で画像を操作するときと同じですね。
Shiftキーを押しながらだと、縦横比を維持しながら大きさの変更ができます。
ボタンのみならず、色んなパーツに応用できるみたいです。

えー・・・そんな訳で、なかなかの画面になっておりますが(笑)
もちろん、これもシミュレータでテストして確認してみました。

クリックで原寸大

・・・あ・・・あれ?

なんということでしょうー・・・(ビフォーアフター)

なんだこれ!・・・なんか凄いズレてる!
ONのスイッチが下のと重なって表示されてしまいました・・・
View Controllerで設置した位置関係と違う・・・
ココに来てまさかのの問題発生なのか・・・?(ゴクリ)

実は私、この現象の原因がまったく分からず・・・
チュートリアルでも見つけられなくて、色々と調べても分からなかったので
仕方なく、時々画面ずれを起こすままの状態でXcodeを弄ってたのですが・・・
つい先日、何気なく弄っていたら偶然にも解決方法を発見する事ができました!
灯台元暮らしとはまさにこの事で・・・ボタン一つで解決できてしまったよー

vc11.png

がそのボタンでございます。

この半透明のボタン達は、ViewControllerを拡大表示したり縮小表示したり、
ボタンやスイッチ等の設置物を画面に合わせて左揃えや右揃えにしてくれたりと
主に表示に関してのアレやコレやを担当してくれてるボタンたちのようです。

一番左が今回の救世主なワケですが、クリックすると
View Controllerが少し短くなったり長くなったりします。
短くなると、画面が狭くなり、その前に設置していた物は
ギュッとくっついて配置し直されてしまいます。
今回のデータでもView Controllerを短くしてみると、
画面ずれを起こしていた時と同じように
ONのスイッチが下のと重なった状態になってしまいました。

この、画面が強制的に縮小されて、
設置物がぐちゃっとなってしまったままの状態が
テストの時に表示されてしまっていたのですね。

それぞれの配置を修正し、いざ再びテスト起動をしてみます・・・

vc12.png

バッチリ。画面ずれはなく、全部きちんと表示されました。

うーん・・・なんとか画面の問題は解消することができましたが・・・
結局、この長い画面と短い画面って一体どう言う事なんだろう?
考えてみたんですが、これはiPhone5の画面が今までのiPhoneより
少し長い事と関係してるのではないでしょうか。
画面の長さを切り替える事でどちらの仕様にも合わせて
アプリを作る事が出来るよ、と言う事なのでしょう。多分ですが。

シミュレータの擬似iPhoneは自動的に短いほうの画面を元に
データのテストしていたみたいですね。
だから長めの画面で色々設置した私のデータは
テスト時にぐちゃっとなって表示されてしまったのでしょう。

うーん・・・よく分からないけど、でも、もしそうなのだとしたら・・・
異なるiPhone同士への対処はどうしたらいいのか、と言う問題が出てきますね。
両方のiPhoneで無理なく使えるアプリを作るためにはどうしたらいいのか・・・
これは大きな研究課題だ・・・早急に調べなくては~(*_*)=3



えー・・・そんな訳で。
最後なんだか余計な事をしたために課題が増えてしまいましたが(苦笑)
遅かれ早かれいずれぶつかる問題ですもんね。
早めに発見できてよかったのかも~。

しかあし!『初めてアプリ』のチュートリアルはまだまだ続いております故。
次回は本当に動かせるアプリ、噂の【HelloWorld】に挑戦していきますよー。
もちろん、課題の対処法も模索しつつ・・・ね。何かわかったら報告いたします~。

それでは。いつも長い長い記事のご観覧、ありがとう御座いました。゚(゚ノД`゚)゚。!

2013/09/11(水) | Xcode | トラックバック(0) | コメント(2)

«  |  HOME  |  »

kaden1000

『No title』

ちっち♀さん、こんばんは!
いつもお世話になっております(^^)


アプリ制作がどんどん進んでるんですね~!

ドラッグでアプリの部品が配置できるのは知りませんでした。

ボタンなどのデザインができてくるとわくわくしますね~
背景のピンクが絶妙でイイ感じです。


私は先日やっとiPhoneを購入したところです・・

ちっち♀さんのアプリが公開されたら、ぜひモニターさせてください!(^^)

私のブログにもサイドバーにちっち♀さんブログのリンクをはらせて頂きました。
今後ともよろしくお願いいたします!

2013/09/14(土) 23:16:49 | URL | [ 編集]

ちっち♀

『こんにちは!』

>kaden1000さん
お世話になっております(*^^*)
iPhoneご購入されたのですね!おめでとうございます!

Xcode、面白いですよね。
本当に初心者にも親切に出来ていて
極力簡単に操作できるようになってるんです(*゚o゚*)
ピンク背景はお勉強用なのでアレですが(笑)
早くもっと色々出来るようになって、
公開できるアプリを作りたいです(^^)

アプリのモニター、して頂けるんですか!
わぁ、すっごく嬉しいです///でも何だか恥ずかしいな(*゚ー゚)>
こりゃちゃんとしたアプリ作らなくっちゃ~(笑)

リンクの相互、感激致しております(*゚o゚*)有難うございました!
こちらこそ、ぜひとも宜しくお願いいたしますm(_ _)m

それでは、ご訪問ご観覧、有難うございました!

2013/09/16(月) 18:46:41 | URL | [ 編集]

コメントの投稿














管理者にだけ表示を許可する

トラックバック

トラックバックURL
http://iphonedenaishoku.blog.fc2.com/tb.php/10-30abc1ee
 |  HOME  | 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。