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

### バージョン 1.0.0
[![Simulator Screen Shot 2020.05.13 0.47.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80600/9214125d-f0ff-dc36-c2ea-955f5ad12dae.png)](https://twitter.com/sunstripe2011/status/1260140455733243904)

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

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

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

### バージョン 1.0.1
![Simulator Screen Shot 2020.05.13 13.28.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80600/8f5e9e74-5980-2782-5a11-19d4e5c1d89a.png)

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

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

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

Rows and Columns

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

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

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

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

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

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

~~~ObjectiveC:round
float f = 3.14159265359
// 小数点第２を指定する場合
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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80600/038a87bc-9117-5ab9-c8ec-5811a0cd721b.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](https://twitter.com/sunstripe2011/status/1260236292182269952)
・画面起動時に迫り上がる
・タッチパネルにより処理が行われる
・タッチパネルを長押しするとタッチパネルが非表示
・タッチパネルがない状態で、下から上にスワイプをすると表示する

[バージョン 1.0.1](https://twitter.com/sunstripe2011/status/1260430931648745474)
・タッチパネルの画面の行と列の計算式を作成
・計算によってタッチパネルを表示

今日は、ここまでかな！

[バージョン 1.1.0](https://twitter.com/sunstripe2011/status/1260879283070722048)
・パネル複数
・タッチパネルの行と列のアクションを設定
・それぞれのアクションを画面に反映

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

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

# 履歴
・[画面の下からせり上がってくるタッチパネルの作り方](https://qiita.com/sunstripe2011/items/3e269ae4fb5c39395a98)

---

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

---

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

[![sunstripe_logo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80600/322f2d60-f19d-af9e-2b6f-7290ca546848.png)](http://sunstripe.main.jp/)
http://sunstripe.main.jp/

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

緩募


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

### ゼロからはじめる演劇ワークショップ
多様化の時代に向けて他者理解を鍛える

https://workshop.themedia.jp/

### プログラミングワークショップ・ウェブ塾の開講！！！
様々なテーマでプログラミングに囚われずに取り組んでいきます。
詳しくはこちら　↓　↓　↓　↓　↓　↓　↓　↓
[プログラミングサロン 月１だけのプログラミング学習塾](https://workshop.themedia.jp/posts/7057553?fbclid=IwAR32CfRQ7RvDOhvuogoSwqxDLMOU7Jvuzljlnx-TMc27qBPX1BnWsfLcBR8
)

### 協力応援 / 支援者の集い
## チーム：サンストライプ
https://twitter.com/sunstripe2011

#### プログラミングラボ
https://twitter.com/PLab2020

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

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

#### トラストヒューマン
http://trusthuman.co.jp/
私たちは何よりも信頼､人と考えてます｡

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

### キャリア教育事業

#### 青空プログラミング
[![青空プログラミング100px.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80600/603d53ab-828b-645e-a415-1b6f158d7356.png)](https://actcoin.jp/project/detail.php?id=600)

[![ダウンロード (9).jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80600/9bde9318-28c2-ce74-d4c5-326168061bcc.jpeg)](https://www.youtube.com/hashtag/%E9%9D%92%E7%A9%BA%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)

#### 広域学習支援プラットフォーム『のびのび日和』
https://slc-lab.amebaownd.com/

#スポンサー募集

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

## ビヨンドXプロジェクト

[ビヨンドXプロジェクト全体会議](https://www.youtube.com/playlist?list=PLaR6-YWiGWkYhEHWnt8f1z-JC0g3nwwC9)