teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問collectionViewCell上のボタンをタップした際のpopoverの表示場所をcellスクロールさせた場所に調整したい。

編集履歴

質問編集履歴

5

indexPathの取得方法を変更しとく

2018/09/14 02:56

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -332,11 +332,11 @@
332
332
 
333
333
 
334
334
 
335
- // タップされたcellのインデックスパスを取得する
335
+ // タップされたUIButtonからインデックスパスを取得する
336
+
336
-
337
+ let point = legendsCollectionView.convert(sender.center, from: sender)
338
+
337
- guard let indexPath = legendsCollectionView.indexPath(
339
+ guard let indexPath = legendsCollectionView.indexPathForItem(at: point) else { return }
338
-
339
- for: sender.superview!.superview as! UICollectionViewCell) else { return }
340
340
 
341
341
 
342
342
 

4

追記

2018/09/14 02:56

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -423,3 +423,7 @@
423
423
  }
424
424
 
425
425
  ```
426
+
427
+
428
+
429
+ ![イメージ説明](2c4dcff5d6465c00afca685f6435fd81.gif)

3

回答を受けての追記

2018/09/14 02:32

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -317,3 +317,109 @@
317
317
  }
318
318
 
319
319
  ```
320
+
321
+
322
+
323
+ ### 備忘録/回答でご指摘いただき直した部分
324
+
325
+
326
+
327
+ ```swift
328
+
329
+ // セル上のボタンがタップされた場合の処理
330
+
331
+ @IBAction func cellBtnTapped(_ sender: UIButton) {
332
+
333
+
334
+
335
+ // タップされたcellのインデックスパスを取得する
336
+
337
+ guard let indexPath = legendsCollectionView.indexPath(
338
+
339
+ for: sender.superview!.superview as! UICollectionViewCell) else { return }
340
+
341
+
342
+
343
+ // リロードするとおかしくなるので禁じ手
344
+
345
+ // legendsCollectionView.reloadData()
346
+
347
+
348
+
349
+ // リロードしない場合のセルの背景処理
350
+
351
+ // 以前に選択されたセルがある場合は背景を白にする
352
+
353
+ if let selectedCellIndex = selectedCellIndex {
354
+
355
+ let selectedCell = legendsCollectionView.cellForItem(at: selectedCellIndex)
356
+
357
+ selectedCell?.backgroundColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
358
+
359
+ }
360
+
361
+ // 選択されたセルの背景をグレーにする
362
+
363
+ let selectCell = legendsCollectionView.cellForItem(at: indexPath)
364
+
365
+ selectCell?.backgroundColor = #colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)
366
+
367
+
368
+
369
+ // 選択されたセルのindexPathを保存する
370
+
371
+ selectedCellIndex = indexPath
372
+
373
+
374
+
375
+ // prepare PopoverView
376
+
377
+ let popVC = self.storyboard?.instantiateViewController(withIdentifier: "popover") as! PopViewController
378
+
379
+
380
+
381
+ popVC.modalPresentationStyle = .popover
382
+
383
+ popVC.preferredContentSize = CGSize(width: 150, height: 70)
384
+
385
+
386
+
387
+ if let presentationController = popVC.popoverPresentationController {
388
+
389
+ presentationController.permittedArrowDirections = .up
390
+
391
+ presentationController.sourceView = sender
392
+
393
+ presentationController.sourceRect = sender.bounds
394
+
395
+ presentationController.delegate = self
396
+
397
+ }
398
+
399
+
400
+
401
+ UIView.animate(withDuration: 0.4, animations: {
402
+
403
+ self.moveCellCenter(animation: false)
404
+
405
+ }) { (finished) in
406
+
407
+ self.present(popVC, animated: true, completion: nil)
408
+
409
+ }
410
+
411
+ }
412
+
413
+
414
+
415
+ // 選択されたセルを中央に移動する
416
+
417
+ func moveCellCenter(animation: Bool) {
418
+
419
+ legendsCollectionView.selectItem(
420
+
421
+ at: selectedCellIndex, animated: animation, scrollPosition: .centeredHorizontally)
422
+
423
+ }
424
+
425
+ ```

2

訂正

2018/09/14 02:22

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -118,8 +118,14 @@
118
118
 
119
119
  presentationController.permittedArrowDirections = .up
120
120
 
121
+ // ↓ここで、座標を変換(collectionView系からviewController?)したUIButtonを渡す？
122
+
123
+ // CGRectなど座標だけならイメージできるが、変換した座標を含むViewをまるごと？渡す？
124
+
121
125
  presentationController.sourceView = sender
122
126
 
127
+ // ↑ presentationController.sourceView.frame = ほにゃららを受け付ける？？
128
+
123
129
  presentationController.sourceRect = sender.bounds
124
130
 
125
131
  presentationController.delegate = self

1

Storyboardを使用したpopover表示に変更。

2018/09/14 00:24

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
 
10
10
 
11
- ![イメージ説明](6b9a5dd1d5a24d384db9178778b21911.gif)
11
+ ![イメージ説明](843380efd15c932fd4020c5e09eb1e70.gif)
12
12
 
13
13
 
14
14
 
@@ -16,7 +16,19 @@
16
16
 
17
17
 
18
18
 
19
- ![イメージ説明](f02caec95a2ce994bd9d996825378abb.gif)
19
+ ![イメージ説明](0181225fa3c0b519b85184926c48b9b2.gif)
20
+
21
+
22
+
23
+ ストーリーボード
24
+
25
+
26
+
27
+ ![ストーリーボード](b4ce49689e7459ba3c4efe09d6b31a82.png)
28
+
29
+
30
+
31
+ コード全文記載しますが、関連処理をなるべく上の方に記載してあります。
20
32
 
21
33
 
22
34
 
@@ -24,7 +36,7 @@
24
36
 
25
37
  import UIKit
26
38
 
27
- class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
39
+ class ViewController: UIViewController, UIPopoverPresentationControllerDelegate {
28
40
 
29
41
 
30
42
 
@@ -34,192 +46,202 @@
34
46
 
35
47
  var selectedCellIndex: IndexPath?
36
48
 
37
-
49
+
38
50
 
39
51
  // セル上のボタンがタップされた場合の処理
40
52
 
41
53
  @IBAction func cellBtnTapped(_ sender: UIButton) {
42
54
 
43
-
44
-
55
+
56
+
45
- // currentIndexPathItemにタップされたファイルのインデックスパスを代入する
57
+ // タップされたcellのインデックスパスを取得する
46
58
 
47
59
  guard let indexPath = legendsCollectionView.indexPath(
48
60
 
49
- for: sender.superview!.superview as! UICollectionViewCell) else {return}
61
+ for: sender.superview!.superview as! UICollectionViewCell) else { return }
62
+
63
+
64
+
50
-
65
+ // リロードしない場合のセルの背景処理
66
+
51
-
67
+ /*
52
-
68
+
53
- // セルの背景色を変更-collectionViewをリロードするとpopoverの表示場所がおかしくなるのでここで色を変更
69
+ // 以前に選択されたセルがある場合は背景を白にする
54
70
 
55
71
  if let selectedCellIndex = selectedCellIndex {
56
72
 
57
- let cell = legendsCollectionView.cellForItem(at: selectedCellIndex)
73
+ let selectedCell = legendsCollectionView.cellForItem(at: selectedCellIndex)
58
-
74
+
59
- cell?.backgroundColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
75
+ selectedCell?.backgroundColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
60
76
 
61
77
  }
62
78
 
79
+ // 選択されたセルの背景をグレーにする
80
+
81
+ let selectCell = legendsCollectionView.cellForItem(at: indexPath)
82
+
83
+ selectCell?.backgroundColor = #colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)
84
+
85
+ */
86
+
87
+
88
+
63
89
  selectedCellIndex = indexPath
64
90
 
91
+ legendsCollectionView.reloadData()
92
+
93
+ moveCellCenter()
94
+
95
+
96
+
97
+ /*
98
+
99
+ ここでcellタップされたセルの最新の情報を取得して、sourceView/sourceRectに渡す？
100
+
101
+ let targetCell = legendsCollectionView.cellForItem(at: selectedCellIndex!)?.frame
102
+
103
+ */
104
+
105
+
106
+
107
+ let popVC = self.storyboard?.instantiateViewController(withIdentifier: "popover") as! PopViewController
108
+
109
+
110
+
111
+ popVC.modalPresentationStyle = .popover
112
+
113
+ popVC.preferredContentSize = CGSize(width: 150, height: 70)
114
+
115
+
116
+
117
+ if let presentationController = popVC.popoverPresentationController {
118
+
119
+ presentationController.permittedArrowDirections = .up
120
+
121
+ presentationController.sourceView = sender
122
+
123
+ presentationController.sourceRect = sender.bounds
124
+
125
+ presentationController.delegate = self
126
+
127
+ }
128
+
129
+ present(popVC, animated: true, completion: nil)
130
+
131
+ }
132
+
133
+
134
+
135
+ func adaptivePresentationStyle(
136
+
137
+ for controller: UIPresentationController, traitCollection: UITraitCollection) -> UIModalPresentationStyle {
138
+
139
+ return .none
140
+
141
+ }
142
+
143
+
144
+
145
+ // 選択されたセルを中央に移動する
146
+
147
+ func moveCellCenter() {
148
+
149
+ legendsCollectionView.selectItem(
150
+
151
+ at: selectedCellIndex, animated: true, scrollPosition: .centeredHorizontally)
152
+
153
+ }
154
+
155
+
156
+
157
+ // unwindSegue時に実行
158
+
159
+ @IBAction func unwindBtn01Tapped(segue: UIStoryboardSegue) {
160
+
161
+ printCellLabel()
162
+
163
+ }
164
+
165
+
166
+
167
+ @IBAction func unwindBtn02Tapped(segue: UIStoryboardSegue) {
168
+
169
+ printCellLabel()
170
+
171
+ }
172
+
173
+
174
+
175
+ func printCellLabel() {
176
+
65
177
  if let index = selectedCellIndex {
66
178
 
67
- let cell = legendsCollectionView.cellForItem(at: index)
179
+ let labelText = legendsArray[index.row]
68
-
180
+
69
- cell?.backgroundColor = #colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)
181
+ print(labelText)
70
182
 
71
183
  }
72
184
 
73
-
185
+ }
186
+
74
-
187
+ }
188
+
189
+
190
+
191
+
192
+
193
+ extension ViewController: UICollectionViewDelegate, UICollectionViewDataSource {
194
+
195
+
196
+
197
+ // numOfCell
198
+
199
+ func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
200
+
201
+ return legendsArray.count
202
+
203
+ }
204
+
205
+ // generateCell
206
+
207
+ func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
208
+
209
+ let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! CCell
210
+
211
+
212
+
213
+ let nameStr = legendsArray[indexPath.item]
214
+
215
+
216
+
217
+ if selectedCellIndex == indexPath {
218
+
219
+ cell.backgroundColor = #colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)
220
+
221
+ } else {
222
+
223
+ cell.backgroundColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
224
+
225
+ }
226
+
227
+
228
+
229
+ cell.setCell(name: nameStr)
230
+
231
+ return cell
232
+
233
+ }
234
+
235
+ // selectCell
236
+
237
+ func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
238
+
239
+ selectedCellIndex = indexPath
240
+
75
- //legendsCollectionView.reloadData()
241
+ legendsCollectionView.reloadData()
76
-
77
-
78
-
79
- // セルをcollectionViewの中央に移動⇐これを実行するとずれる
80
242
 
81
243
  moveCellCenter()
82
244
 
83
-
84
-
85
- /*
86
-
87
- // リロード後、セルを取得してsenderとして渡してもずれる。
88
-
89
- guard let index = selectedCellIndex else { return }
90
-
91
-
92
-
93
- let latestCell = legendsCollectionView.cellForItem(at: index) as? CCell
94
-
95
- print("latestCell.nameLabel:", latestCell?.nameLabel)
96
-
97
- var btn = UIButton()
98
-
99
-
100
-
101
- for subView in (latestCell?.contentView.subviews)! {
102
-
103
- print(subView)
104
-
105
- if subView is CButton {
106
-
107
- btn = subView as! UIButton
108
-
109
- }
110
-
111
- }
112
-
113
- print("btn:", btn)
114
-
115
- */
116
-
117
-
118
-
119
- // popoverを表示する
120
-
121
- showPopover (sender: sender)
122
-
123
- }
124
-
125
-
126
-
127
- // popoverを表示する
128
-
129
- func showPopover (sender: UIButton) {
130
-
131
- let menu = PopoverMenuController()
132
-
133
-
134
-
135
- menu.prepare(at: sender)
136
-
137
- menu.viewSize = CGSize(width: 150, height: 80)
138
-
139
- self.present(menu, animated: true, completion: {
140
-
141
- var button = UIButton()
142
-
143
- button = menu.addItem(withTitle: "printA")
144
-
145
- button.addTarget(self, action: #selector(self.printA), for: .touchUpInside)
146
-
147
- button = menu.addItem(withTitle: "printB")
148
-
149
- button.addTarget(self, action: #selector(self.printB), for: .touchUpInside)
150
-
151
-
152
-
153
- })
154
-
155
- }
156
-
157
-
158
-
159
- @objc func printA() { print("A") }
160
-
161
- @objc func printB() { print("B") }
162
-
163
-
164
-
165
- // 選択されたセルを中央に移動する
166
-
167
- func moveCellCenter() {
168
-
169
- legendsCollectionView.selectItem(
170
-
171
- at: selectedCellIndex, animated: true, scrollPosition: .centeredHorizontally)
172
-
173
- }
174
-
175
- // numOfCell
176
-
177
- func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
178
-
179
- return legendsArray.count
180
-
181
- }
182
-
183
- // generateCell
184
-
185
- func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
186
-
187
- let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! CCell
188
-
189
-
190
-
191
- let nameStr = legendsArray[indexPath.item]
192
-
193
-
194
-
195
- if selectedCellIndex == indexPath {
196
-
197
- cell.backgroundColor = #colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)
198
-
199
- } else {
200
-
201
- cell.backgroundColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
202
-
203
- }
204
-
205
-
206
-
207
- cell.setCell(name: nameStr)
208
-
209
- return cell
210
-
211
- }
212
-
213
- // selectCell
214
-
215
- func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
216
-
217
- selectedCellIndex = indexPath
218
-
219
- legendsCollectionView.reloadData()
220
-
221
- moveCellCenter()
222
-
223
245
  }
224
246
 
225
247
 
@@ -246,73 +268,37 @@
246
268
 
247
269
  }
248
270
 
271
+
272
+
249
273
  ```
250
274
 
275
+
276
+
251
- 念の為popover部分も、
277
+ 念の為、popViewControllerも、
252
278
 
253
279
 
254
280
 
255
281
  ```swift
256
282
 
257
-
258
-
259
283
  import UIKit
260
284
 
261
285
 
262
286
 
263
- class PopoverMenuController: UIViewController, UIPopoverPresentationControllerDelegate {
287
+ class PopViewController: UIViewController {
264
-
265
-
266
-
267
- private var stackView:UIStackView! = nil
288
+
268
-
269
- var viewSize: CGSize = CGSize()
289
+
270
-
271
- var axis: UILayoutConstraintAxis = .vertical
272
-
273
- var isVisible: Bool {
274
-
275
- get {
276
-
277
- return self.view.window != nil
278
-
279
- }
280
-
281
- }
282
-
283
- override var preferredContentSize: CGSize {
284
-
285
- get {
286
-
287
- return CGSize(width:self.viewSize.width, height:self.viewSize.height)
288
-
289
- }
290
-
291
- set {
292
-
293
- print("Cannot set preferredContentSize of this view controller.")
294
-
295
- }
296
-
297
- }
298
290
 
299
291
  override func viewDidLoad() {
300
292
 
301
293
  super.viewDidLoad()
302
294
 
303
- self.stackView = UIStackView(frame: CGRect(x: 0, y: 0, width: self.viewSize.width, height: self.viewSize.height))
295
+
304
-
305
- self.stackView.backgroundColor = #colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)
296
+
306
-
307
- self.stackView.spacing = 1
308
-
309
- self.stackView.axis = self.axis
310
-
311
- self.stackView.distribution = .fillEqually
297
+ // Do any additional setup after loading the view.
312
-
313
- self.view.addSubview(self.stackView)
298
+
314
-
315
- }
299
+ }
300
+
301
+
316
302
 
317
303
  override func didReceiveMemoryWarning() {
318
304
 
@@ -322,94 +308,6 @@
322
308
 
323
309
  }
324
310
 
325
- func adaptivePresentationStyle(for controller: UIPresentationController) -> UIModalPresentationStyle {
326
-
327
- return .none
328
-
329
- }
330
-
331
-
332
-
333
- func prepare(at sender: Any?) {
334
-
335
- self.modalPresentationStyle = .popover
336
-
337
- if let popover = self.popoverPresentationController {
338
-
339
- popover.permittedArrowDirections = .up
340
-
341
- popoverPresentationController?.backgroundColor = #colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)
342
-
343
- if let view = sender as? UIView {
344
-
345
- popover.sourceView = view
346
-
347
- popover.sourceRect = view.bounds
348
-
349
-
350
-
351
- } else if let recognizer = sender as? UIGestureRecognizer {
352
-
353
- if let view = recognizer.view {
354
-
355
- popover.sourceView = view
356
-
357
- popover.sourceRect = view.bounds
358
-
359
- }
360
-
361
- }
362
-
363
- popover.delegate = self
364
-
365
- }
366
-
367
- }
368
-
369
-
370
-
371
- func addItem(withTitle: String)->UIButton {
372
-
373
- let button = UIButton(frame: CGRect(x: 0, y: 0, width: 1, height: 1))
374
-
375
- button.setTitle(withTitle, for: .normal)
376
-
377
- button.setTitleColor(#colorLiteral(red: 0, green: 0.4784313725, blue: 1, alpha: 1), for: .normal)
378
-
379
- button.titleLabel?.font = UIFont.systemFont(ofSize: 15)
380
-
381
- button.backgroundColor = #colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)
382
-
383
- //button.setTitleColor(UIColor(red: 0, green: 122/255, blue: 1, alpha: 1.0), for: .normal)
384
-
385
- button.addTarget(self, action: #selector(dismissPopover), for: .touchUpInside)
386
-
387
- // 2 lines below are optional to highlight
388
-
389
- button.setTitleColor(UIColor.white, for: .highlighted)
390
-
391
- button.setBackgroundImage(#colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1).createImageFromColor(), for: .highlighted)
392
-
393
- //button.setBackgroundImage(UIColor(red: 0, green: 122 / 255, blue: 1, alpha: 1).createImageFromColor() , for: .highlighted)
394
-
395
- self.stackView.addArrangedSubview(button)
396
-
397
- return button
398
-
399
- }
400
-
401
- @objc func dismissPopover() {
402
-
403
- self.dismiss(animated: false)
404
-
405
- }
406
-
407
311
  }
408
312
 
409
-
410
-
411
-
412
-
413
-
414
-
415
313
  ```