Como alterar a altura UIPickerView

É possível alterar a altura do UIPickerView? Alguns aplicativos parecem ter PickerViews mais curtos, mas a configuração de um quadro menor não parece funcionar e o quadro está bloqueado no Interface Builder.

Parece óbvio que a Apple não convida particularmente a limpeza com a altura padrão do UIPickerView, mas descobri que você pode conseguir uma mudança na altura da visualização assumindo o controle total e passando um tamanho de quadro desejado no momento da criação, por exemplo:

smallerPicker = [[UIPickerView alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 120.0)];

Você descobrirá que, em várias alturas e larguras, existem falhas visuais. Obviamente, essas falhas precisariam ser contornadas de alguma forma ou escolher outro tamanho que não as exibisse.

Nenhuma das abordagens acima funciona no iOS 4.0

A altura do pickerView não é mais redimensionável. Há uma mensagem que é descarregada para o console se você tentar alterar o quadro de um seletor no 4.0:

-[UIPickerView setFrame:]: invalid height value 66.0 pinned to 162.0 

Acabei fazendo algo bastante radical para obter o efeito de um seletor menor que funciona tanto no OS 3.xx quanto no OS 4.0. Deixei o seletor com o tamanho que o SDK decidir que deveria ter e, em vez disso, criei uma janela transparente cortada em minha imagem de plano de fundo por meio da qual o seletor se torna visível. Em seguida, basta colocar o seletor atrás (na ordem Z) de meu plano de fundo UIImageView para que apenas uma parte do seletor seja visível, o que é ditado pela janela transparente em meu plano de fundo.

Existem apenas três alturas válidas para UIPickerView (162.0, 180.0 and 216.0).

Você pode usar as funções CGAffineTransformMakeTranslatione CGAffineTransformMakeScalepara ajustar o seletor de acordo com sua conveniência.

Exemplo:

CGAffineTransform t0 = CGAffineTransformMakeTranslation (0, pickerview.bounds.size.height/2);
CGAffineTransform s0 = CGAffineTransformMakeScale       (1.0, 0.5);
CGAffineTransform t1 = CGAffineTransformMakeTranslation (0, -pickerview.bounds.size.height/2);
pickerview.transform = CGAffineTransformConcat          (t0, CGAffineTransformConcat(s0, t1));

O código acima altera a altura da visualização do seletor para a metade e a reposiciona na posição exata (Left-x1, Top-y1) .

Experimentar:

pickerview.transform = CGAffineTransformMakeScale(.5, 0.5);

No iOS 4.2 e 4.3 funciona o seguinte:

UIDatePicker *datePicker = [[UIDatePicker alloc] init];
datePicker.frame = CGRectMake(0, 0, 320, 180);
[self addSubview:datePicker];

O seguinte não funciona:

UIDatePicker *datePicker = [[UIDatePicker alloc] initWithFrame:CGRectMake(0, 0, 320, 180)];
[self addSubview:datePicker];

Eu tenho um aplicativo que está na app store com um selecionador de data de 3 linhas. Achei que a alteração da altura pode ter sido evitada porque você vê o texto sob a borda do selecionador de data, mas isso também acontece com o selecionador de data de altura 216 normal.

Qual é o bug? Seu palpite é tão bom quanto o meu.

Além disso, existem 3 alturas válidas para UIDatePicker(e UIPickerView) 162,0, 180,0 e 216,0. Se você definir uma UIPickerViewaltura para qualquer outra coisa, verá o seguinte no console ao depurar em um dispositivo iOS.

2011-09-14 10:06:56.180 DebugHarness[1717:707] -[UIPickerView setFrame:]: invalid height value 300.0 pinned to 216.0

No iOS 9, você pode alterar livremente UIPickerViewa largura e a altura. Não há necessidade de usar os hacks de transformação mencionados acima.

Descobri que você pode editar o tamanho do UIPickerView - mas não com o construtor de interface. abra o arquivo .xib com um editor de texto e defina o tamanho da visualização do selecionador para o que quiser. O construtor de interface não redefine o tamanho e parece funcionar. Tenho certeza que a apple travou o tamanho por uma razão, então você terá que experimentar diferentes tamanhos para ver o que funciona.

Vantagens:

1. Faz com que setFrame UIPickerViewse comporte como deveria
2. Nenhum código de transformação em seu UIViewController
3. Trabalha viewWillLayoutSubviewsinternamente para redimensionar / posicionar oUIPickerView
4. Funciona no iPad sem UIPopover
5. A superclasse sempre recebe uma altura válida
6. Funciona com iOS 5

Desvantagens:

1. Requer que você subclasse UIPickerView
2. Requer o uso de pickerView viewForRowpara desfazer a transformação para as subViews
3. UIAnimations pode não funcionar

Solução:

Subclasse UIPickerView e substitua os dois métodos usando o código a seguir. Ele combina subclasses, altura fixa e abordagem de transformação.

#define FIXED_PICKER_HEIGHT 216.0f
- (void) setFrame:(CGRect)frame
{
    CGFloat targetHeight = frame.size.height;
    CGFloat scaleFactor = targetHeight / FIXED_PICKER_HEIGHT;
    frame.size.height = FIXED_PICKER_HEIGHT;//fake normal conditions for super
    self.transform = CGAffineTransformIdentity;//fake normal conditions for super
    [super setFrame:frame];
    frame.size.height = targetHeight;
    CGFloat dX=self.bounds.size.width/2, dY=self.bounds.size.height/2;
    self.transform = CGAffineTransformTranslate(CGAffineTransformScale(CGAffineTransformMakeTranslation(-dX, -dY), 1, scaleFactor), dX, dY);
}

- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
{
    //Your code goes here

    CGFloat inverseScaleFactor = FIXED_PICKER_HEIGHT/self.frame.size.height;
    CGAffineTransform scale = CGAffineTransformMakeScale(1, inverseScaleFactor);
    view.transform = scale;
    return view;
}

Uma maneira fácil de alterar a altura visível de uma visualização do seletor é incorporar o seletor em um UIView, ajustar a altura da visualização pai para a altura que você deseja ver do seletor e, em seguida, habilitar "Clip Subviews" no Interface Builder no UIView principal ou definido view.clipsToBounds = trueem código.

Não fui capaz de seguir nenhum dos conselhos acima.

Assisti a vários tutoriais e achei este o mais benéfico:

Eu adicionei o código a seguir para definir a nova altura dentro do método "viewDidLoad", que funcionou em meu aplicativo.

UIPickerView *picker = [[UIPickerView alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 120.0)]; 
[self.view addSubview:picker];
picker.delegate = self;
picker.dataSource = self;

Espero que tenha sido útil!

Isso mudou muito no iOS 9 (no iOS 8 é muito semelhante ao que estamos vendo aqui). Se você puder ter como alvo apenas o iOS 9, poderá redimensionar o UIPickerViewconforme achar necessário, definindo seu quadro. Boa!

Aqui está das notas de lançamento do iOS 9

UIPickerView e UIDatePicker agora são redimensionáveis ​​e adaptáveis ​​- anteriormente, essas visualizações impunham um tamanho padrão, mesmo se você tentasse redimensioná-las. Essas visualizações agora também têm uma largura padrão de 320 pontos em todos os dispositivos, em vez da largura do dispositivo no iPhone.

As interfaces que dependem da aplicação antiga do tamanho padrão provavelmente parecerão erradas quando compiladas para iOS 9. Quaisquer problemas encontrados podem ser resolvidos restringindo ou dimensionando totalmente as visualizações do seletor para o tamanho desejado em vez de depender do comportamento implícito.

Estou trabalhando com ios 7, Xcode 5. Consegui ajustar a altura do seletor de data indiretamente, incluindo-o em uma visualização. A altura das visualizações do contêiner pode ser ajustada.

Crie uma visualização em IB ou código. Adicione seu seletor como uma subvisão desta visualização. Redimensione a visualização. Isso é mais fácil de fazer no IB. Crie restrições da visualização para sua supervisão e do selecionador para esta nova visualização.

Como o Seletor se curva ao redor, ele se espalha pela parte superior e inferior da visualização. Você pode ver em IB quando você adiciona restrições superior e inferior do seletor à visualização, ele mostra um espaço padrão algo como 16 pontos acima e abaixo do contêiner de visualização. Defina a visualização para recortá-lo se você não quiser esse comportamento (aviso feio).

Aqui está o que parece com 96 pontos de altura em um iPhone 5. O seletor com o spillover tem cerca de 130 pontos de altura. Muito magro!

Estou usando isso em meu projeto para evitar que o seletor se espalhe a uma altura desnecessária. Essa técnica reduz e força um derramamento mais rígido. Na verdade, parece mais elegante ser um pouco mais compacto.

Aqui está uma imagem da vista mostrando o spillover.

Aqui estão as restrições IB que adicionei.

Mesmo que não esteja redimensionando, outro truque pode ajudar na situação em que o UIPicker está localizado na parte inferior da tela.

Pode-se tentar movê-lo ligeiramente para baixo, mas a fileira central deve permanecer visível. Isso ajudará a revelar algum espaço acima do seletor, pois as linhas inferiores ficarão fora da tela.

Repito que esta não é a maneira de alterar a altura da visualização do UIPicker, mas uma ideia do que você pode fazer se todas as outras tentativas falharem.

Ok, depois de lutar por um longo tempo com a estúpida visualização de seleção no iOS 4, decidi mudar meu controle para uma tabela simples: aqui está o código:

ComboBoxView.m = which is actually looks more like pickerview.

//
//  ComboBoxView.m
//  iTrophy
//
//  Created by Gal Blank on 8/18/10.
//

#import "ComboBoxView.h"
#import "AwardsStruct.h"


@implementation ComboBoxView

@synthesize displayedObjects;

#pragma mark -
#pragma mark Initialization

/*
- (id)initWithStyle:(UITableViewStyle)style {
    // Override initWithStyle: if you create the controller programmatically and want to perform customization that is not appropriate for viewDidLoad.
    if ((self = [super initWithStyle:style])) {
    }
    return self;
}
*/


#pragma mark -
#pragma mark View lifecycle

/*
- (void)viewDidLoad {
    [super viewDidLoad];

    // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
    // self.navigationItem.rightBarButtonItem = self.editButtonItem;
}
*/

/*
- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
}
*/
/*
- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
}
*/
/*
- (void)viewWillDisappear:(BOOL)animated {
    [super viewWillDisappear:animated];
}
*/
/*
- (void)viewDidDisappear:(BOOL)animated {
    [super viewDidDisappear:animated];
}
*/
/*
// Override to allow orientations other than the default portrait orientation.
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
*/


#pragma mark -
#pragma mark Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    // Return the number of sections.
    return 1;
}


- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    // Return the number of rows in the section.
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
    return [[self displayedObjects] count];
}


// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {


    NSString *MyIdentifier = [NSString stringWithFormat:@"MyIdentifier %i", indexPath.row];

    UITableViewCell *cell = (UITableViewCell *)[tableView dequeueReusableCellWithIdentifier:MyIdentifier];

    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:MyIdentifier] autorelease];
        //cell.contentView.frame = CGRectMake(0, 0, 230.0,16);
        UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(0, 5, 230.0,19)] autorelease];
        VivatAwardsStruct *vType = [displayedObjects objectAtIndex:indexPath.row];
        NSString *section = [vType awardType]; 
        label.tag = 1;
        label.font = [UIFont systemFontOfSize:17.0];
        label.text = section;
        label.textAlignment = UITextAlignmentCenter;
        label.baselineAdjustment = UIBaselineAdjustmentAlignCenters;
        label.adjustsFontSizeToFitWidth=YES;
        label.textColor = [UIColor blackColor];
        //label.autoresizingMask = UIViewAutoresizingFlexibleHeight;
        [cell.contentView addSubview:label]; 
        //UIImage *image = nil;
        label.backgroundColor = [UIColor whiteColor];
        //image = [awards awardImage];
        //image = [image imageScaledToSize:CGSizeMake(32.0, 32.0)];

        //[cell setAccessoryType:UITableViewCellAccessoryDisclosureIndicator];
        //UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
        //cell.accessoryView = imageView;
        //[imageView release];
    }

    return cell;
}


/*
// Override to support conditional editing of the table view.
- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath {
    // Return NO if you do not want the specified item to be editable.
    return YES;
}
*/


/*
// Override to support editing the table view.
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath {

    if (editingStyle == UITableViewCellEditingStyleDelete) {
        // Delete the row from the data source
        [tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:YES];
    }   
    else if (editingStyle == UITableViewCellEditingStyleInsert) {
        // Create a new instance of the appropriate class, insert it into the array, and add a new row to the table view
    }   
}
*/


/*
// Override to support rearranging the table view.
- (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)fromIndexPath toIndexPath:(NSIndexPath *)toIndexPath {
}
*/


/*
// Override to support conditional rearranging of the table view.
- (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath {
    // Return NO if you do not want the item to be re-orderable.
    return YES;
}
*/


#pragma mark -
#pragma mark Table view delegate

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    // Navigation logic may go here. Create and push another view controller.
    /*
     <#DetailViewController#> *detailViewController = [[<#DetailViewController#> alloc] initWithNibName:@"<#Nib name#>" bundle:nil];
     // ...
     // Pass the selected object to the new view controller.
     [self.navigationController pushViewController:detailViewController animated:YES];
     [detailViewController release];
     */
}


#pragma mark -
#pragma mark Memory management

- (void)didReceiveMemoryWarning {
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];

    // Relinquish ownership any cached data, images, etc that aren't in use.
}

- (void)viewDidUnload {
    // Relinquish ownership of anything that can be recreated in viewDidLoad or on demand.
    // For example: self.myOutlet = nil;
}


- (void)dealloc {
    [super dealloc];
}


@end

Aqui está o arquivo .h para isso:

//
//  ComboBoxView.h
//  iTrophy
//
//  Created by Gal Blank on 8/18/10.
//

#import <UIKit/UIKit.h>


@interface ComboBoxView : UITableViewController {
    NSMutableArray *displayedObjects;
}

@property (nonatomic, retain) NSMutableArray *displayedObjects;


@end

now, in the ViewController where I had Apple UIPickerView I replaced with my own ComboBox view and made it size what ever I wish.

ComboBoxView *mypickerholder = [[ComboBoxView alloc] init]; 
[mypickerholder.view setFrame:CGRectMake(50, 220, 230, 80)];
[mypickerholder setDisplayedObjects:awardTypesArray];

é isso, agora a única coisa que resta é criar uma variável de membro na visão combobox que manterá a seleção de linha atual, e estamos prontos.

Aproveite todos.

Geralmente você não pode fazer isso no xib ou definir o quadro programaticamente, mas se você abrir seu xib pai como fonte e alterar a altura a partir daí, então ele funciona. nessa tag, mude a altura lá e salve o arquivo.

<pickerView contentMode="scaleToFill" id="pai-pm-hjZ">
                                    <rect key="frame" x="0.0" y="41" width="320" height="100"/>
                                    <autoresizingMask key="autoresizingMask" widthSizable="YES" flexibleMaxY="YES"/>
                                    <connections>
                                        <outlet property="dataSource" destination="-1" id="Mo2-zp-Sl4"/>
                                        <outlet property="delegate" destination="-1" id="nfW-lU-tsU"/>
                                    </connections>
                                </pickerView>

Pelo que eu sei, é impossível reduzir o UIPickerView. Eu também não vi um menor usado em qualquer lugar. Meu palpite é que foi uma implementação customizada, se eles conseguiram reduzi-la.

Se você deseja criar seu seletor em IB, pode redimensioná-lo posteriormente para um tamanho menor. Verifique se ele ainda desenha corretamente, pois chega um ponto em que parece hediondo.

Swift : você precisa adicionar uma subvisualização com clipe aos limites

    var DateView = UIView(frame: CGRectMake(0, 0, view.frame.width, 100))
    DateView.layer.borderWidth=1
    DateView.clipsToBounds = true

    var myDatepicker = UIDatePicker(frame:CGRectMake(0,-20,view.frame.width,162));
    DateView.addSubview(myDatepicker);
    self.view.addSubview(DateView)

Isso deve adicionar um seletor de data de altura 100 cortado na parte superior do controlador de visualização.

Meu truque: usar a camada de máscara do datepicker para tornar o datePicker alguma parte visível. como você vê, assim como mudar a moldura do datepicke.

- (void)timeSelect:(UIButton *)timeButton {
UIDatePicker *timePicker = [[UIDatePicker alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, 550)];
timePicker.backgroundColor = [UIColor whiteColor];
timePicker.layer.mask = [self maskLayerWithDatePicker:timePicker];
timePicker.layer.masksToBounds = YES;
timePicker.datePickerMode = UIDatePickerModeTime;
[self.view addSubview:timePicker];
}

- (CALayer *)maskLayerWithDatePicker:(UIDatePicker *)datePicker {
CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, datePicker.width*0.8, datePicker.height*0.8) cornerRadius:10];
shapeLayer.path = path.CGPath;
return shapeLayer;
}

Eu uso uma camada de máscara para alterar o tamanho da tela

// swift 3.x
let layer = CALayer()
layer.frame = CGRect(x: 0,y:0, width: displayWidth, height: displayHeight)
layer.backgroundColor = UIColor.red.cgColor
pickerView.layer.mask = layer

Incorporar em uma exibição de pilha. O modo de exibição de pilha é um componente adicionado recentemente pela Apple em seu iOS SDK para refletir implementações baseadas em grade em bibliotecas de front-end baseadas em java script, como bootstrap.

Conforme mencionado acima, UIPickerViewagora é redimensionável. Só quero acrescentar que, se você quiser alterar a altura do pickerView em uma célula tableView, não tive nenhum sucesso em definir a âncora de altura como uma constante. No entanto, o uso lessThanOrEqualToConstantparece funcionar.

 class PickerViewCell: UITableViewCell {

    let pickerView = UIPickerView()

    func setup() {

        // call this from however you initialize your cell

        self.contentView.addSubview(self.pickerView)
        self.pickerView.translatesAutoresizingMaskIntoConstraints = false

        let constraints: [NSLayoutConstraint] = [
            // pin the pickerView to the contentView's layoutMarginsGuide

            self.pickerView.leadingAnchor.constraint(equalTo: self.contentView.layoutMarginsGuide.leadingAnchor),
            self.pickerView.topAnchor.constraint(equalTo: self.contentView.layoutMarginsGuide.topAnchor),
            self.pickerView.trailingAnchor.constraint(equalTo: self.contentView.layoutMarginsGuide.trailingAnchor),
            self.pickerView.bottomAnchor.constraint(equalTo: self.contentView.layoutMarginsGuide.bottomAnchor),

            // set the height using lessThanOrEqualToConstant
            self.pickerView.heightAnchor.constraint(lessThanOrEqualToConstant: 100)
        ]

        NSLayoutConstraint.activate(constraints)
     }

 }

Depois de um longo dia coçando minha cabeça, descobri algo que funciona para mim. Os códigos abaixo recriarão o UIDatePicker toda vez que o usuário alterar a orientação do telefone. Isso removerá quaisquer falhas que o UIDatePicker tenha após uma mudança de orientação.

Como estamos recriando o UIDatePicker, precisamos de uma variável de instância que manterá o valor de data selecionado. Os códigos abaixo são testados no iOS 4.0.

    @interface AdvanceDateViewController : UIViewController<UIPickerViewDelegate> {
        UIDatePicker *datePicker;
        NSDate *date;
    }


    @property (nonatomic, retain) UIDatePicker *datePicker;
    @property (nonatomic, retain) NSDate *date;

    -(void)resizeViewWithOrientation:(UIInterfaceOrientation) orientation;

    @end

    @implementation AdvanceDateViewController
    @synthesize datePicker, date;

    - (void)viewDidLoad {
      [super viewDidLoad];
          [self resizeViewWithOrientation:self.interfaceOrientation];
    }


    -(void)viewWillAppear:(BOOL)animated{
         [super viewWillAppear:animated];
         [self resizeViewWithOrientation:self.interfaceOrientation];
     }

     - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
         return YES;
     }

     -(void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration{
      [super willRotateToInterfaceOrientation:toInterfaceOrientation duration:duration];
      [self resizeViewWithOrientation:toInterfaceOrientation];
      }

     -(void)resizeViewWithOrientation:(UIInterfaceOrientation) orientation{
          [self.datePicker removeFromSuperview];
          [self.datePicker removeTarget:self action:@selector(refreshPickupDate) forControlEvents:UIControlEventValueChanged];
          self.datePicker = nil;

          //(Re)initialize the datepicker, thanks to Apple's buggy UIDatePicker implementation
          UIDatePicker *dummyDatePicker = [[UIDatePicker alloc] init];
          self.datePicker = dummyDatePicker;
          [dummyDatePicker release];

          [self.datePicker setDate:self.date animated:YES];
          [self.datePicker addTarget:self action:@selector(refreshPickupDate) forControlEvents:UIControlEventValueChanged];

          if(UIInterfaceOrientationIsLandscape(orientation)){
                 self.datePicker.frame = CGRectMake(0, 118, 480, 162);    
           } else {
                 self.datePicker.frame = CGRectMake(0, 200, 320, 216);
           }

           [self.view addSubview:self.datePicker];
           [self.view setNeedsDisplay];
      }

      @end

stockPicker = [[UIPickerView alloc] init];
stockPicker.frame = CGRectMake(70.0,155, 180,100);

Se você deseja definir o tamanho de UiPickerView. O código acima certamente vai funcionar para você.

No iOS 5.0, fiz o seguinte funcionar:

UIDatePicker *picker = [[UIDatePicker alloc] init];
picker.frame = CGRectMake(0.0, 0.0, 320.0, 160.0);

Isso criou um selecionador de data como o que a Apple usa no aplicativo Agenda ao criar um novo evento no modo paisagem. (3 linhas de altura em vez de 5.) Isso não funcionou quando defini o quadro dentro do initWithFrame:método, mas até agora funcionou ao defini-lo usando um método separado.

para iOS 5:

se você der uma olhada rápida em UIPickerView Protocol Reference

você encontrará

– pickerView:rowHeightForComponent:
– pickerView:widthForComponent:

Eu acho que é o primeiro que você está procurando