web-dev-qa-db-ja.com

UIAppearanceを使用したカスタムiOSUIDatepicker

ユニクロの新しいアラームアプリ カスタムUIDatePickerがあります：

custom

そして、独自のカスタムUIDatePickerを作成したいと思います。

DatePickerの外観を変更しようとしましたが、UIDatePickerでUI_APPEARANCE_SELECTORを検索すると、nothingが返されます。

ドキュメントによると、値を変更することはできません。

外観のカスタマイズをサポートするには、クラスがUIAppearanceContainerプロトコルに準拠し、関連するアクセサーメソッドがUI_APPEARANCE_SELECTORでマークされている必要があります。

UIDatePickerの外観をどのように変更できますか？

iphoneiosios5uidatepickeruiappearance
9
daidai

APIはこれを行う方法を提供していません。 UIDatePickerを使用するのではなく、UIPickerViewを使用して、かなり説得力のあるレプリカを自分で作成できます。

UIDatePickerまたはUIPickerViewにはUI_APPEARANCE_SELECTORがなく、UIControlとしてUIDatePickerコンテンツの外観を変更できず、デリゲートがないため、ネイティブの外観になりますが、UIPickerViewの場合は、次のようにコンテンツの外観を変更できます。 UITableViewで。

#pragma mark -
#pragma mark UIPicker Delegate & DataSource

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
    return 2;
}

// returns the # of rows in each component..
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
    return 100;
}
//- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:  (NSInteger)component {
     //    return [NSString stringWithFormat:@"%d",row];
//}
- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view {

      UILabel *label= [[[UILabel alloc] initWithFrame:CGRectMake(30.0, 0.0, 50.0, 50.0)] autorelease];
      [label setBackgroundColor:[UIColor clearColor]];
      [label setTextColor:[UIColor blueColor]];
      [label setFont:[UIFont boldSystemFontOfSize:40.0]];
      [label setText:[NSString stringWithFormat:@"%d",row]];

      return label;
}

enter image description here

これをチェックしてください。

26
Kuldeep

このメソッドを実装ファイルに追加します

-(UIView *)pickerViews{

    return ([datePicker.subviews objectAtIndex:0]);
}

-(void)viewDidLoad{

    [super viewDidLoad];

    [[self pickerViews].subviews enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
        NSLog(@"%@ --- > %i",obj, idx);
    }];
}

アプリを実行すると、コンソールにdatePickerのすべてのサブビューが表示されます。インデックスを選択して、1つずつ変更するだけです。

viewDidLoadを変更し、このコードを挿入します

UIView *background = (UIView *)[[self pickerViews].subviews objectAtIndex:0];
background.backgroundColor = [UIColor clearColor];

UIView *wheel2 = (UIView *)[[self pickerViews].subviews objectAtIndex:4];
wheel2.backgroundColor = [UIColor redColor];

UIView *wheel3 = (UIView *)[[self pickerViews].subviews objectAtIndex:11];
wheel3.backgroundColor = [UIColor redColor];

この場合、インデックス「0」、「4」、「11」の背景色を変更します

4
Roger

IOS 5では、 IAppearance プロトコルが導入されました。これにより、いくつかのUI要素をカスタマイズできます。 UIDatePickerはたまたまこのプロトコルに準拠しているため、おそらくこれが最も簡単な方法です。つまり、iOS5ユーザーのみをサポートする場合です。 Matthewのオプションはおそらく次善の策であり、古いiOSバージョンでも機能するはずです。

3
Scott Berrevoets

UIDatePickerの表示方法を変更するのは非常に難しいようです。

私の意見では、あなたが提供した例は、2つの列とおそらくシミュレートされた無限スクロールを備えた単純なUIPickerViewの洗練されたカスタマイズです（Appleは日付ピッカーで行い、実現するのは非常に簡単です）。

この例に示すように、UIDatePickerプロキシを介してUIAppearanceをほとんど変更できません。

UIDatePicker *picker = [UIDatePicker appearance];
picker.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:0.3];

UIView *view;
view = [UIView appearanceWhenContainedIn:[UITableView class], [UIDatePicker class], nil];
view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.5];

UILabel *label = [UILabel appearanceWhenContainedIn:[UITableView class], [UIDatePicker class], nil];
label.font = [UIFont systemFontOfSize:[UIFont systemFontSize]];
label.textColor = [UIColor blueColor];

アプリケーションの開始時にこのコードを使用すると（試してみてください）、日付ピッカーのいくつかの主要コンポーネントのアスペクトのみを変更できます。

ラベルは不可能カスタマイズする（そしてこのテストコードはそれを証明する）;カスタムのUITableViewコントローラー内に配置されるため、列を回転するたびにアスペクトが変更されるようです。

これらの外観を完全に変更するには、おそらくAppleのプライベートAPIを使用する必要があります。これにより、最終的にアプリが拒否になります。

（スクリーンショットに示されているように）カスタムの時間分ピッカーが必要な場合は、UIPickerViewクラスを拡張するか、適切なデリゲートをUIPickerViewインスタンスに割り当てるだけで、外観を完全にカスタマイズできます。

を通って

- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view;

デリゲートのメソッドを使用すると、ピッカービューの単一の要素を希望どおりに表示できます。次に、データソースを適切に処理して、ピッカーの2つのコンポーネントを実質的に無限にする必要があります。

3
marzapower

1つは時間用、もう1つは分用の2つのUIScrollViewを使用して、自分で実装できます。移動が停止したときの各スクロールビューのcontentOffsetを把握する必要があります。これは、頭のてっぺんから次のようになります。

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
  if (!decelerate) {
    // get the offset here
  }
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
  // also get the offset here
}

コンテンツオフセットの値を取得し、それを時間値と分値に変換します。おそらく、コンテンツオフセットのy位置をそれぞれ24または60で除算します。カスタムアートワークを自分で作成する必要があります。

0
Matthew Gillingham

日付ピッカーの色を変更するには：

[datePickerView setValue:self.pickerLabelColor forKey:@"textColor"];

そして、フォントを変更する唯一の方法は次のとおりです。

カテゴリを作成するUIFont+Systemそしてこのコードを中に配置します

#pragma clang diagnostic Push
#pragma clang diagnostic ignored "-Wobjc-protocol-method-implementation"
    + (UIFont *)systemFontOfSize:(CGFloat)fontSize
    {
        return [UIFont fontWithName:fontName size:fontSize];
    }
#pragma clang diagnostic pop

これにより、アプリの別の場所にフォントも設定されます（システムフォントをフォントに置き換えます）。

0
Oleh Kudinov