ios - 既存の要素の上にイナズマ線を表示

Question

タイトルが明確かどうかはわかりませんが、探しているものの正確な名前はわかりません。UIButtons (基本的にはシーケンサー) で構成されるグリッドがあります。この画像の縦線に似た線が必要です (各行の 8 番目と 9 番目のボタンの間:

したがって、基本的にグリッドが再生されているときは、進行状況を示したいと考えています。どうすればこれを行うことができますか？どのような要素を使用するかなど。

Answer 1

1 または 1.5 ピクセルの非常に狭い UIView を追加できます。背景色を白またはグラデーションに設定します。このビューをボタンと同じサブビューに追加します。

UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(100.0, 0.0, 1.5, 320.0)];
lineView.backgroundColor = [UIColor whiteColor];
[parentView addSubview:lineView];

進行状況を表示するには、完了までにどれだけ残っているかを知る必要があります。その値を 320 で割り、lineView の高さを取得します。

CGRect frame = CGRectMake(100.0, 0.0, 1.5, 0);
lineView.frame = frame; // 0% complete

frame = CGRectMake(100.0, 0.0, 1.5, 160.0);
lineView.frame = frame; // 50% complete

frame = CGRectMake(100.0, 0.0, 1.5, 320.0);
lineView.frame = frame; // 100% complete

それがアイデアです。この助けを願っています。

画面上を移動する縦棒の更新

UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 1.5, 320.0)];
lineView.backgroundColor = [UIColor whiteColor];
[parentView addSubview:lineView];

進展があり次第

- (void)progressWithValue(CGFloat)progress {
    CGRect frame = lineView.frame;
    frame.origin.x = progress;    // Change x position
    lineView.frame = frame;
}

Answer 2

UISlider を使用して、イベントまたはアクティビティの進行状況を表示し (コードはそれほど明確ではありません)、必要に応じてカスタマイズできます。Apple によるUICatalog サンプル コードを参照して、UISlider をカスタマイズするノウハウを得ることができます。他の要素またはUISlider チュートリアル