So-net無料ブログ作成
検索選択
前の10件 | -

(UILabel)文字の表示は基本だけど大事!(再編集) [Xcode5]

Xcode5になって、いろいろ変わってきたので書き直していきます。

基本的なプログラムの流れを体感するため、まずは、文字を表示するだけのアプリを作りましょう。

 

(UILabel)文字を表示する為のパーツです。

 

Viewウインドウに 文字を表示する為のパーツを配置し 指定したテキストに切り替えて表示するようにします。

もちろん、パーツを配置して文字を書き込むだけでも立派な使い方です。変更が必要のない文に使っても便利です。 

 

最初に“新規のプロジェクト”を作ります。

 ファイルメニューの中から「新規プロジェクト」を選びましょう。(File>New>Project…)

 または『Welcome to Xcode』ウインドウを表示して、

 

n001.png

 

 新しいプロジェクトの作成画面に入ります。

 

n002.png

 

 ウインドウ左の iOSの中からApplicationを選び、右の大きなアイコン付きの項目の中から

 Single View Applicationを選んで 右下のNextをクリックし次へ進みます。

 

n003.png

 

 次にプロジェクト名などの情報を入力します。

 

n004.png

 

 Product Name(プロジェクト名)を英数文字で入力します。

  ※今回はtestで作ります。

 Organization Name(代表者)・Company Identifier(所属組織名)Class Prefix(所属分け頭文字)

 は適当にどうぞ。いずれアプリの公開時に必要になりますが いまはまだ…。

 Device(デバイス選択)iPhoneでもiPad等でもなんでも良いのです。

  ※今回はiPhoneでいきます。

 

 

n005.png

 

 最後にNextをクリックします。

 

n006.png

 保存先をきくダイアログが開きますので、場所を決定してください。

 

n007.png

 プロジェクトの新規作成ができて、色々と夢が広がるような難しい画面が開きますが

 この画面は今回は変更しません。

 

 つづいて、パーツの追加、配置をしましょう。

 左のメニューの中より『Main.storyboard』を選びましょう。

 

 選ぶとウインドウや配置するパーツの編集画面で開きます。

 

n008.png

 

 上のような画面に切り替わります。

 ちなみにウインドウ下の黒い部分をクリックすると

n010.png

 以前のバージョンでは、左側にあったやつですね。

n011.png

 それぞれこんな感じです。

 

 右のライブラリーメニューから、使用するパーツを設置していきます。

 

n012.png

 

 もし、右側のライブラリメニューが表示されていなければ

 プルダウンメニュー「View」から「UtilitiesObject Libraly」で開きます。

 他にウインドウ右上のViewの3つボタンの右側をクリックし、開いた右下の四角(サイコロ)の記号を

 クリックしても表示されます。

 

 右のオブジェクトライブラリーの中から『Label』のパーツを選び、画面の中の好きな部分に

 ドラック&ドロップして配置しましょう。

n013.png

 

 ※後々のため、配置した「Label」のパーツを少し広げておいてください。

n020.png

 

 文字だけならこのままでも表示されますが、コントロールをするという方向性なので

 文字の変更をするプログラムを作ります。

 

 次に左のメニューの中より『(Class prefix名)ViewController.h』を選びましょう。

 .hの拡張子のついたファイルは”ハッシュファイル(またはヘッダファイル)”と言い、storyboardや

 色々なオブジェクトとプログラムコードとの中継をする役割を担っています。

 

 (Class Prefix)ViewController.mMain.storyboardUILabelに反映させるための

 共通の変数の入れ物を作ります。

 ”(Class Prefix)ViewController.hにはすでに最小限のコードが入力されていますので、

 必要な追加のコードを入力します。

 

n016.png

 

#import <UIKit/UIKit.h>

@interface freeCoViewController : UIViewController {  

IBOutlet UILabel *myLabel;

@end

 

  ※解釈

   インターフェースビルダのアウトレットの項目の中の、

   ユーザーインターフェースラベルのパーツに使用する

   myLabelという名前を付けた変数の容器を用意しなさい。

 

  myLabel と言う部分は変数名ですので、自分の解りやすいように名前を変更できます。

  後ほど同じ名前がでてきますが、変数名の前() * の印がついている時、ついていない時が

  ありますが、名前は同じものですが使われ方が違いますので 注意して下さい。

 ※以前のバージョンでは、 {   がすでに入力済みになっていましたが、いまは外れているようです。

  @interface~ 内の命令なので { } は忘れずに記入してください。

 

 (各ファイルは編集した後はすぐに保存を行なって下さい。自動保存はされてはいますが、タイミングで

 次での作業ができなくなる場合があります)

 

 変数が用意できたので 次はstoryboardLabelパーツとつないでみましょう。

 インターフェースビルダで(Class prefix)ViewController.storyboard』を開き、


 Viewウィンドウ下の『View Controller』を選択し

n017.png


 画面や左のリンク(『右向き矢印の丸』で表示)からパーツをつなぎます。

 

n018.png

 

 上の図のように、OutletsのmyLabelと storyboardLabelパーツをつなぎましょう。

 メニューのでマウス左ボタンをプレス(押したままに)してLabelパーツの上で指を離します。

 

 うまくつながると 下の写真のように二重丸になります。

 

n019.png

 

 関連付けが終わっている接続済みのものはメニュー右側が 二重丸で、

 未接続のものは、の中が空いている状態で表示されます。

 

 

 これで、myLabelという変数の中身を入れ替える命令をすれば、パーツの表示が変えられます。

 storyboardの編集画面は変わりませんが、エミュレート又は実機で反映されます。

 

 つぎに(Class Prefix)ViewController.m』を編集して、アプリが起動しViewが表示されたら

 Labelパーツの文字が入れ替わるコードを入力しましょう。

 『.m』の拡張子のついたファイルはメゾットファイルと言い 命令をするプログラムを受け持つファイル

 になります。パーツに対して「○○しなさい」と命令するコードを書き込みます。

 

n023.png

 

 開くと上の写真のような ちょっと滅入るくらいのコードがすでに入力されています。

 必要最低限のものを用意していてくれているので 使わなくてもそのままにしておき、ここに追加して

 いきましょう。

 

 今回はviewDidLoad(Viewが表示されたら呼び出す)項目を編集します。

 

n021.png

 

    myLabel.text = @"こんにちは";

 

  解釈

  (変数)myLabel をテキスト扱い(.text)をし、

  「こんにちは」という文章を

  @""(Unicodeテキストエンコード)テキストにしてを

  新しく覚えなさい(左辺 = 右辺)

 

  ※C言語などのプログラムでは、特殊な場合を除き、右辺で計算した結果左辺に渡すという流れが有ります。

  ※Xcode(Object C言語)では "~" のまえに@を付けるとこれは文章(Unicodeテキストエンコード

   テキスト)なんだぜと教えることになります。二重にテキストを宣言してるようですが、送る側と送られる側で

   同じ条件になっていないと『何が起きるか解らない』という事があります。

   その為、二重で宣言しているように見えるわけですね。

 

 文字を表示するだけだから、ここまで。

 では、エミュレーターで実行してみましょう。

 

 ウインドウ左上の右向きの三角が、翻訳・エラーチェック・アプリ構築(ビルド)をして エミュレータで実行する

 ビルド&RUNボタンになります。

 クリックしてみましょう。

 

n022.png

 

 文法間違い(入力間違い)や他のエラーが無ければ上のようなエミュレータで実行された画面が表示されます。

 (しかし表示がデカイな)

 

【release】メモリー領域の解放 [Xcode 4]


メモリーの解放と聞いて、ピンと来ない人はいますでしょうか?
私は割と解らないヒトの方です。
 これまでの記事で触れないどころか、一切記述もしておりませんでした。
実際のアプリを運営するにあたり、これは怖い事と知っておりましたが その扱いの難しさを初めから書いて行くと 混乱を招くような気もしていました。
 ということで、あえて別コーナーを作り 解る必要最低限の事を書いて行きたいと思います。

 


ではここから >>>


(AudioToolbox)音を鳴らそう [Xcode 4]

ボタンをタップしたり、何かのアクションが有った時に 音が出てほしいときがありますよね?

そんな時の短い音(効果音)を鳴らしてみましょう。

 09sounddate.png

とはいえ、音を鳴らすだけでもものすごいハードルが高かったです。

いろいろな事を試してみましたが、唯一簡単に音が出せた例でご紹介します。

 

 

1)ウインドーベースの新規プロジェクトを作成する。

  今回は Soundtest というプロジェクト名で作成しています。(解らない場合は以前のログ参照)

 

2)インターフェースビルダー(.xib)でウインドウ内にボタンを設置する。

01UIButton.png

ハッシュファイル(.h)で、ボタンアクションの設定をしておいて下さい。(こちらも解らない場合は以前のログ参照)

 

3)音をコントロールできるようにする。

  ここからがようやく本題です。

 今までにでてこなかったことの重要な内容に関して学びましょう。

 

(続きを読む)


(NSArray) 複数を一つにする。配列 [Xcode 4]

そういえば、NSArrayのお話がまだでしたね。


前回ではアニメーションの為に複数のイメージ画像を扱わなければいけませんでした。

その複数あるデータを1つにして管理しようというのがNSArrayになります。


そのまえに変数に話しをしなければなりませんね。

変数とは、何か決まったデータ(定数)では無い、状況によって変化をするデータの入れ物のことを言います。

配列変数とは、その定数や変数を一つにまとめて管理する入れ物のことを言います。


アパートで言えば、

101号室(変数)には山田さん(データが住んでいる という関係です。

そして、101号室〜206号室までそれぞれに住む人達アパート「ココア荘」配列変数となります。

 

NSArray *|配列変数名| = [NSArray arrayWithObjects:

                       |データ1|, |データ2|, |データ3|, ・・・ |データn|,

                       nil];

 

という型で入力します。

黄色の部分はまずこのまま使う事が多いので暗記しても良いでしょう。


変数名の頭にくっついた*がありますよね?

この*の意味は変数に対してアドレスを取得しなさいと命令している部分です。

入れた箱(アパート)の番地はどこですかという感じでしょうか?

もっとも、特別な事が無い限り、この番地番号をユーザーが知る必要はありません。自動でどこかに配置されたんだなと漠然に考えていてかまいません。

作る事だけが大事なだけですから、後は機械に任せておきましょう

 

あと、最後に有るnilは気になりました?

ここで配列が終わりですよ。この先にはありませんよ。と宣言している部分になります。

単独では、「何も無い」「何にも属さない」という意味で、終点処理として使いますが、読み出す時には何も無いので形あるものとしては読み出しません(数もカウントしません)。

ですが、この命令を怠ると大変なことが起きるかもしれません。

場合によっては、その先のアドレスにあるデーターまで読み込もうとしてしまう可能性があります。必ず付けるように 癖を付けましょう。




(UIImageView)パラパラアニメを動かそう [Xcode 4]

UIImageViewで、1枚の写真を表示するだけじゃなく 連続した写真を次々と表示していくアニメーションを作っていきましょう。
パラパラマンガ、または自動的に切り替わるスライドショーのようなものだと思ってください。


1)新規プロジェクタを作る。(test_UIImageView_2 で作りました)
2)iPhone用のView WiodowにUIImageViewパーツを貼ります。(訳あって画面下側)
3)同じくView WindowにUIButtonパーツ(×2個)を貼ります。(画面上側)
4)入力用のUITextFieldパーツを貼ります。(必要に応じてUILabelで「回」という文字も貼り込みましょう)
5)必要な画像ファイルをSupporting Files にでもコピーしておきます。
UIImageViewAnime.png
6)それぞれのパーツに為のハッシュファイルを入力します。

 (.h)  

#import <UIKit/UIKit.h>

anime接続.png

@interface test_UIImageView_2ViewController : UIViewController {

    IBOutlet UITextField *myTextField; // 回数入力用

    IBOutlet UIImageView *myImageView; // イメージ表示用

}

-(IBAction)startButton; // 開始ボタン用 

-(IBAction)stopButton; // 停止ボタン用

@end


7) (.xib)  でパーツと変数、パーツとアクションをつなぎます。

8)それぞれのメゾットファイルを入力します。
 (.m)  
 #import "test_UIImageView_2ViewController.h"


@implementation test_UIImageView_2ViewController

 

-(IBAction)startButton{

    int repeatC; // 整数型の変数を一つ用意します

    repeatC = [myTextField.text intValue]; // 整数型変数の中にテキストフィールドの数を入れます

NSArray *imageArray = [NSArray arrayWithObjects// 画像を登録します

                       [UIImage imageNamed:@"b1.jpg"],

                       [UIImage imageNamed:@"b2.jpg"],

                       [UIImage imageNamed:@"b3.jpg"],

                       [UIImage imageNamed:@"b4.jpg"],

                       [UIImage imageNamed:@"b5.jpg"],

                       nil];

    myImageView.animationImages = imageArray; // 登録された画像をUIImageViewに反映します

    myImageView.animationDuration = 1.0; // 1コマの速度()

    myImageView.animationRepeatCount = repeatC; // 繰返す回数(0は永遠に...

    [myImageView startAnimating]; // 動作開始命令

}

 

-(IBAction)stopButton{

    [myImageView stopAnimating]; // 停止命令

}


ここまで・・・

実行してみましょう。

じっけん1.png   入力 →  じっけん2.png

今回は、ここで書いた意外にも .xib でちょっといじってます。
いろいろ、調整してみて下さい。

あと、実行画面の2枚目(右)の入力テンキーが入力後消えないという事があります。
いろいろ調べると消し方がでているのですが…。(研究中)



パーツ置いておきます


(UIImageView) 画像を貼ってみよう! [Xcode 4]

さてさて、
画像を貼ろうということで ImageViewの登場です。
00UIImageView.png
写真を表示するためのパーツです。
※なんと、このパーツだけでアニメーションもできるという優れものですが この話は、また次回…。
 

何はともあれ、貼ってみましょう。
01パーツ.png
右のオブジェクトメニューの中から Image Viewのパーツを選びドラック&ドロップでウインドウに持っていきましょう。

02勝手に拡大.png
何かまごまごしていると、UIImageViewの大きさが変わっていくのが見えます。
なんと、自動的にウインドウの大きさにフィットするような大きさで広がります。
この大きさがいやだったら、配置した後で大きさを変えて下さい。

そして、そこに貼る画像を覚え込ませましょう。
もちろん、外部からの読み込みをさせて貼るというコントロールもありますが それもまた別のお話で…。
 (Finderにある)画像をプロジェクトの中にドラック&ドロップします。
できれば、あとでごちゃごちゃしないように一つ下のフォルダ“Supporting Files”に入れておくと 後々、解りやすいカモです。
今回使用しました写真は、フリー写真素材の「ゆんフリー写真素材集」様よりお借りしました。

03写真を読み込む.png

そうすると、下のようなダイアログが表示されます。
どんな扱いでいきますか?と聞いてくるのですが、まぁそのままで良いと色々なサイトで書かれています。
……が、私が思うところ1行目のDestinationのところのチェックは入れた方がよ言う思います。
ここにチェックを入れないと、プロジェクトの中にファイルがコピーされないのです。
画像ファイルを移動しないのであれば良いのですが、万が一移動してしまうと読み込めなくなる可能性が出てきてしまうのですね。

04ダイアログ.png
画像を読み込んだら、右の image にファイル名を入力(または三角マークを押してプルダウンメニューより選択)
動画を見てもらうと解るのですが、
その下の ▼View の Mode からAspect Fillを選びます。(今回はあえてね)

05貼るだけならこれで.png
うさぎさんがいい感じに貼られました。

写真だけを表示したいのであればここまでで保存をすればOKです。
実行してみましょう。
06実行例A.png
可愛い感じに表示されました。

あれれ、コントロールは?
とお感じでしょうか?
それでは次へ進みましょう。


続きを読む


(UITextField)これはどんなアクション? [Xcode 4]

ボタン(UIButton)の時もそうでしたが、
テキストフィールド(UITextField)で、いろいろなアクション条件のメニューがでてきてましたね。
01アクションメニュー.png

【UITextFieldアクションメニュー】
 Did End On Exit
  テキスト編集の終わりにEnter(Return)がタップされた時
 Editing Changed
 テキストフィールドで文字が変更されたその時
 Editing Did Begin
 テキスト入力が始まった最初の時
 Editing Did End
 テキスト入力が終わった時
 Touch Cancel
 テキスト入力動作がキャンセルされた時
 (アプリが切り替わりテキスト入力が中断してしまった時)
 Touch Down
 パーツ内に触れた時
 Touch Down Repeat
 パーツ内で2回以上触れた時
 (ダブルタップ又はそれ以上の回数)
 Touch Drag Enter
 パーツ内から外へドラックして再び戻ってきた時
 Touch Drag Exit
 パーツ内から外へドラックされた時
 Touch Drag Inside
 パーツ内でドラックが行なわれた時
 Touch Drag Outside
 パーツ内から外へドラックが行なわれた時
 Touch Up Inside
 タップされた時
 Touch Up Outside
 タップ動作でパーツの外で離された時
Value Changed
 使用者又はプログラム経由にかかわらずテキストが変更された時


本当にどんなタイミングなんだろうと疑問に思ったのでアプリを実験用の作ってみた。

続きを読む


(UITextField)文字入力フィールドを使おう [Xcode 4]

00TextField.png

テキスト専門の文字入力を行なう為のパーツを紹介します。

いつものように、新しいプロジェクトを作りパーツを貼付けていきましょう。

 (.xib)  
01アイテム.png

ラック&ドロップでViewウインドウの上に配置し、
今回はその結果をUILabelに表示するように作っていきます。

02配置画面.png

こんな感じに適当に並べてみました。

 (.h)  

#import <UIKit/UIKit.h>

 

@interface test_textfieldViewController : UIViewController {

    IBOutlet UILabel *myLabel;

    IBOutlet UITextField *myTextfield;

}

- (IBAction)inputField;

@end


ハッシュファイルには3行追加してます。
その中で目新しいのは一つだけ。
  IBOutlet UITextField 〜;
テキストフィールド用の変数を宣言します。

あと、
目新しく見えませんが、
  - (IBAction)inputField;
あれれ?
ボタン(UIButton)を作成するときにも 見たことがありませんか?
アクションは、ハッシュファイルでどんな動作するものかを決めているのではなく、インターフェースビルダで関連付けをしたときに初めてどんな動作するか決めるので ユーザーが勝手なアクション名を決めておけるのです。
極端なことを言えば テキストフィールドのアクションなのに myButtonなんて名前をつけても良いわけです。
できれば判りやすいようなアクション名をつけるのがベストですね。

次にインターフェースビルダでつないでいきます。

myLabelはつなぐとこ判りますよね?
myTextfieldは?(…なんて、問いかけるまでもなく新しく使い始めたUITextFieldとわかりますね。)

その後に、先ほど説明しましたまだ何をするか決まっていないアクションを決めていきましょう。
入力するフィールドなのでinputFieldというアクション名を付けていましたが 下記のようにアクションとパーツをつなぎ 出てきたメニューの中からDid End On Exit(編集が終わったら実行)を選びます。
 (.xib)  
メニュー.png

接続状況パネル.png
上記のようになったらOKです。
(Did End On Exitの訳に違和感があるでしょうが、とりあえずそんなときに実行されるんだなぁと漠然と覚えて下さい)
 
接続も終わりました。メゾットファイルで、どんな働きをさせるかを入力しましょう。

 (.m)  

#import "test_textfieldViewController.h"


@implementation test_textfieldViewController


 - (void)viewDidLoad

 {

 [super viewDidLoad];

     myLabel.text = @"空白";

 }

 

- (IBAction)inputField{             

    myLabel.text = myTextfield.text;

}                                   

 

 

新しく入力したのは4行ですが、上の1行は前に説明をしたので省略。
下の3行はインターフェースでアクションが確認されたときに実行される部分になります。
テキストフィールドで入力が終わったら、テキストフィールドに入力されたテキストを、ラベルのmyLabelにテキストが渡されます。

入力はここまでです。エミュレータで実行してみましょう。

続きを読む


(UILabel)文字設定をする [Xcode 4]

UILabelで表示する文章をコントロールできるなら、色や大きさやフォントだってコントロールできます。

     ラベル名.text = @"表示したい文章";

     ラベル名.textAlignment = UITextAlignment配置;

     ラベル名.textColor = [UIColor ];

     ラベル名.font = [UIFont フォント:サイズ];

     ラベル名.adjustsFontSizeToFitWidth = (y/n);

     ラベル名.minimumFontSize = (pt);


最初から設定して変更が無いのであればインターフェースビルダであらかじめ設定をしておくのも手です。

パネル.png

続きを読む


(UI)複数使う時には [Xcode 4]

たとえば、幾つもの ボタン(UIButton)やラベル(UILabel)が有った時には、どう記述しますか?

 .h  

#import <UIKit/UIKit.h>


@interface test2ViewController : UIViewController {

    IBOutlet UILabel *myLabel01;

    IBOutlet UILabel *myLabel02;

    IBOutlet UILabel *myLabel03;

}

- (IBAction)tapBut01;

- (IBAction)tapBut02;

- (IBAction)tapBut03;

@end


 .m  

ー(省略)ー


 .xib  
いくつも.png


なにか、パーツがもっと増えたら嫌な予感がしますね。
ずらーっと・・・

どうしよう?


続きを読む


前の10件 | -

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。