0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【iOS】(touchPanel)画面の下からせり上がってくるタッチパネルの作り方

Last updated at Posted at 2020-05-12

バージョン 1.0.0

Simulator Screen Shot 2020.05.13 0.47.51.png

上記のようなパネルに表題を作っていこうと思います。

まずは、こんな目的(オブジェクト)を設定していきます。

今回の課題は、「LINE などにせり上がってくるタッチパネルの表示」
(1)画面起動時に迫り上がる
(2)タッチパネルにより処理が行われる
(3)タッチパネルを長押しするとタッチパネルが非表示
(4)タッチパネルがない状態で、下から上にスワイプをすると表示する

バージョン 1.0.1

Simulator Screen Shot 2020.05.13 13.28.52.png

今回の課題は、「せり上がってくるタッチパネルの行と列の指定」

(5)タッチパネルの画面の行と列の計算式を作成
計算式は様々だけども

Panel.m
- (void)setupPanelList:(NSArray *)list {
 const int panelColm = 4; 
 const int panelRows = ceil( (list.count) / panelColm * 1.0));
}

Rows and Columns

横の列が決まれば、行が決まるとして、
例としては、listの数が3個入っているとして、列を4に指定した場合
3 / 4 = 0.75
ceilを付けないと 0になってしまうので、0.75を切り上げると 1になります。

ここでお勉強
実数を任意の小数点で切り捨てる場合

floor
float f = 3.14159265359
// 小数点第2を指定する場合
f = f * 100
f = floor(f) // 切り捨て
f = f / 100
NSLog(@"f = %f",f); // f = 3.140000

実数を任意の小数点で切り上げる場合

ceil
float f = 3.14159265359
// 小数点第2を指定する場合
f = f * 100
f = ceil(f) // 切り上げ
f = f / 100
NSLog(@"f = %f",f); // f = 3.150000

実数を任意の小数点で四捨五入をする場合

round
float f = 3.14159265359
// 小数点第2を指定する場合
f = f * 100
f = round(f) // 四捨五入
f = f / 100
NSLog(@"f = %f",f); // f = 3.140000

となります

🕯課題
list が指定する数より少ない場合などは
条件をつけなきゃな^^

(6)計算によってタッチパネルを表示

バージョン 1.1.0

Simulator Screen Shot 2020.05.14 19.18.24.png

(7)パネル複数
(8)タッチパネルの行と列のアクションを設定
(9)それぞれのアクションを画面に反映

以下のように 値を入れることでパネルが作成できるようにしていくことにします。

panelInfo

key 型名 説明 -- -- --
title String タイトル -- -- --
detail String 詳細説明 -- -- --
img String イメージのファイル名 -- -- --
rows Int 列の数 -- -- --
colms Int 行の数 -- -- --

panelItems

key 型名 説明 -- -- --
items Array -- -- -- --
-- -- -- key 型名 説明
-- -- -- title String タイトル
-- -- -- detail String 詳細説明
-- -- -- img String イメージのファイル名
-- -- -- URL String https://qiita.com/sunstripe2011
-- -- -- actions Array アクションリスト
-- -- -- or
-- -- -- actionItem Dictionary アクションアイテム

actions

key 型名 説明 -- -- --
actions Array アクションリスト -- -- --
-- -- -- key 型名 説明
-- -- -- title String タイトル
-- -- -- detail String 詳細説明
-- -- -- img String イメージのファイル名
-- -- -- action Dictionary アクションアイテム

action/actionItem

key 型名 説明 -- -- --
title String タイトル -- -- --
detail String 詳細説明 -- -- --
img String イメージのファイル名 -- -- --
name String アクション名 -- -- --

今後はこちらの記事を完成させていきます。

[現状]


これまでの課題

LINE などにせり上がってくるタッチパネルの表示
バージョン 1.0.0
・画面起動時に迫り上がる
・タッチパネルにより処理が行われる
・タッチパネルを長押しするとタッチパネルが非表示
・タッチパネルがない状態で、下から上にスワイプをすると表示する

バージョン 1.0.1
・タッチパネルの画面の行と列の計算式を作成
・計算によってタッチパネルを表示

今日は、ここまでかな!

バージョン 1.1.0
・パネル複数
・タッチパネルの行と列のアクションを設定
・それぞれのアクションを画面に反映

今日は、ひとまずやりたいことはやれたかな!!

今後の課題を分解していきましょう!!

履歴

画面の下からせり上がってくるタッチパネルの作り方


【About】(http://qiita.com/sunstripe) - サンストライプ


制作チーム:サンストライプ

sunstripe_logo.png
http://sunstripe.main.jp/

(月1 WEBコンテンツをリリースして便利な世の中を作っていくぞ!!ボランティアプログラマー/デザイナー/イラストレーター/その他クリエイター声優募集中!!)

緩募

地域情報 THEメディア

THE メディア 地域活性化をテーマに様々なリリース情報も含め、記事をお届けしてます!!
https://the.themedia.jp/

ゼロからはじめる演劇ワークショップ

多様化の時代に向けて他者理解を鍛える

プログラミングワークショップ・ウェブ塾の開講!!!

様々なテーマでプログラミングに囚われずに取り組んでいきます。
詳しくはこちら ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
プログラミングサロン 月1だけのプログラミング学習塾

協力応援 / 支援者の集い

チーム:サンストライプ

プログラミングラボ

一緒にポートフォリオを作りませんか?現場の体験やそれぞれの立場から年齢関係なく作品を作りたい方々と一緒にチームを作って、作品を作っています。現場に行きたい人には、職場紹介や職場の体験や悩み相談なども受けております。
様々な職種からプログラミングの知識を得たい、デザインの知識を得たい、データーベースの知識を得たいという人が集まっております。
週1のミーティングにそれぞれの近況と作業報告して、たまにリモート飲み会などをしております!!

興味がある方は、DMに話しかけてみてください。

トラストヒューマン

http://trusthuman.co.jp/
私たちは何よりも信頼、人と考えてます。

「コンサルティング」と「クリエイティブ」の両角度から「人材戦略パートナー」としてトータル的にサポートします!!

キャリア教育事業

青空プログラミング

青空プログラミング100px.png

ダウンロード (9).jpeg

広域学習支援プラットフォーム『のびのび日和』

#スポンサー募集

ネリム

https://nerim.co.jp/
配信事業などを映像コンテンツなどの制作しております

ビヨンドXプロジェクト

ビヨンドXプロジェクト全体会議

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?