web-dev-qa-db-ja.com

画像付きのカスタムUISwitch

プロジェクトにカスタムスイッチを実装する必要があります。現在、私が見つけたのは、下の画像に示すように、実装する方法でUISwitchを変更することはできないということです。投稿をフォローして、stackoverflowや他のブログをグーグルで検索しましたが、必要な解決策が見つかりませんでした。 1つの方法は、 this postのようにUISegmentedコントロールを使用することですが、それでも問題は解決しません。

enter image description here

助けてくれてありがとう

iphoneobjective-cuisegmentedcontroluiswitch
20
Arshad Parwez

独自のスイッチを作成するのが難しいのは何ですか？ UISwitchはコントロールであり、本質的には2つの状態を持つメッセージを送信するビューにすぎません。次のように設定できます。

  • コンテナービュー：角が丸い（ビューのレイヤーのcornerRadiusを設定）シンプルなビューと背景色

  • 左の画像：左側に表示する画像、つまり例のチェックマークを表示する画像ビュー

  • 右側の画像：右側に表示する画像、つまり例のXマークを表示する画像ビュー

  • スライダー：スイッチのスライダー部分を示す画像ビュー、他の2つの画像ビューの上に設定

ユーザーがコントロールをタップまたはスワイプしたら、Core Animationを使用してスライダーをスイッチの反対側に移動し、コントロールの状態を更新して、新しい状態の背景色にすばやくフェードします。コントロールのアクションをターゲットに送信します。

23
Caleb

Gasparuffが言うように、画像を設定するだけでUIButtonを使用することもできます：

[button setImage:[UIImage imageNamed:@"image_on"] forState:UIControlStateSelected];
[button setImage:[UIImage imageNamed:@"image_off"] forState:UIControlStateNormal];

タップされたら、選択したプロパティを切り替えるだけです。

- (void) buttonTap {
    button.selected = !button.selected;
}

画像は自動的に変更されます。

23
Odrakir

-[UISwitch setOnImage:]および-[UISwitch setOffImage:]、 正しい？また、-[UISwitch setTintColor]。私が見ることができる唯一の欠点については、スイッチ自体が標準のiOSスイッチ（丸いボタン）になるということですが、そうでなければ、これは最もiOSに似たソリューションになるでしょう。

独自のon/offImageを実装するときは、サイズの制限を忘れないでください。また、スイッチ側の画像の側面が凹面であることも忘れないでください。 tintColorを使用して、残りのスイッチにカラースキームを反映させることができます。 valueChangedイベントを追跡して、色合いの色を変更することができます。

質問に表示される正確な外観（正方形のスイッチボタン）が必要な場合は、おそらく@Calebが示唆したように、カスタムコントロールを使用する必要があります。

1
Olie

コントロールに有効と無効の2つの状態のみを持たせたいようです。

このための簡単な方法は、2つのpng画像を作成し、背景画像でカスタムUIButtonを使用し、ボタンがタップされるたびにそれらの2つの画像を単に置き換えることです。

これはあなたがやろうとしていることですか、私は何かを誤解しましたか？

1
gasparuff