daisuke kubota's diary

ゆっくりすすめます

follow us in feedly

Pixateを使ってCSSでUIActionSheetの見た目をカスタマイズしてみた

Pixateを使ってUIActionSheetの見た目をカスタマイズしたのでメモ。

まずはCSSを設定します。

/** アクションシート */
action-sheet
{
    background-color: linear-gradient(#f4f5f5, #dfdddd);
    border-width: 4px;
    border-color: #fb9d23;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

/** アクションシートのタイトルラベル */
action-sheet > label
{
    color: black;
    font-weight: bold;
    background-color: #fb9d23;
    width: 320px;
    height: 30px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    top: 0px;
    left: 0px;
}

/** アクションシートのボタン */
action-sheet button
{
    background-color: linear-gradient(#ffc579, #fb9d23);
    border-radius: 7px;
    border-width: 1px;
    border-color: #ffad41;
    color: black;
}

/** アクションシートのボタン(押下時) */
action-sheet button:highlighted
{
    background-color: linear-gradient(#ffaf46, #e78404);
    border-radius: 7px;
    border-width: 1px;
    border-color: #ff9913;
    color: black;
}

/** アクションシートのキャンセルボタン */
action-sheet button:last-of-type
{
    background-color: linear-gradient(#f4f5f5, #dfdddd);
    border-radius: 7px;
    border-width: 1px;
    border-color: #d7dada;
    color: dimgray;
}

/** アクションシートのキャンセルボタン(押下時) */
action-sheet button:last-of-type:highlighted
{
    background-color: linear-gradient(#d9dddd, #c6c3c3);
    border-radius: 7px;
    border-width: 1px;
    border-color: #bfc4c4;
    color: dimgray;
}

設定後に普通にUIActionSheetを表示します。

UIActionSheet *actionSheet = [[UIActionSheet alloc] initWithTitle:@"アクションシートタイトル"
                                                         delegate:self
                                                cancelButtonTitle:@"キャンセル"
                                           destructiveButtonTitle:nil
                                                otherButtonTitles:@"アクション1", @"アクション2", @"アクション3", nil];
[actionSheet showInView:self.view];

するといつもとは違うアクションシートが表示!
f:id:daisuke_kubota:20130707230335p:plain

これの問題はキャンセルボタンが一番最後であるっていう前提とdestructiveButtonTitleの設定をしないっていう前提で成り立つんですよね。
そして最大の問題はタイトルのラベルに高さを設定しているのでタイトルに1行しか表示できないことなんですよね。
この問題を解決する方法がおいおい探したいと思います。