iOS 앱 : 다중 구성 요소 선택기로 작업

철저한 통찰력을 얻으려면 다음을 읽으십시오. . 이것은 iOS 앱 시리즈의 두 번째 블로그입니다.

MultiComponent 선택기의 작동에 대해 궁금한 경험이있는 개발자라면 올바른 블로그를 방문한 것입니다. 이 블로그에서는 다중 구성 요소 선택기를 구현하여 더 많은 기능으로 변환 앱을 확장하는 방법과 경고를 사용하여 예외적 인 처리를 수행하는 방법에 대해 설명합니다.

자바에서 깊은 사본을 만드는 방법

에서마지막 블로그,우리는 그것을 보았다 텍스트 필드에 무언가를 입력하면 키보드가 나타납니다. 변환 할 값을 텍스트 필드에 입력하면 키보드가 사라지지 않습니다.

이 문제를 해결하려면 전체 뷰를 덮는 버튼을 추가해야합니다. 사용자가 배경의 아무 곳이나 터치하면 키보드가 사라집니다.

이제 계속해 보겠습니다. 버튼을 드래그하고 속성 관리자에서 버튼 유형을 사용자 정의로 설정하고 텍스트 색상을 명확한 색상으로 설정합니다.

편집기> 정렬> 맨 뒤로 보내기를 선택합니다.

전체보기에 맞도록 버튼의 크기를 조정합니다.

이제이 버튼은 키보드가 사라지도록 클릭하는 배경 보이지 않는 버튼 역할을합니다. 동일한 IBAction을 작성하고 어시스턴트 편집기 모드를 선택한 다음 Control + 드래그하여 ViewController.h로 이동합니다. Connection to Action 및 이름을 BackgroundButton으로 설정하고 연결을 클릭하십시오.

뷰 컨트롤러 코드는 이제 다음과 같습니다.

#import @interface ViewController : UIViewController @property (strong, nonatomic) IBOutlet UITextField * ValueTextField @property (strong, nonatomic) IBOutlet UIPickerView * picker2 @property (strong, nonatomic) NSArray * data @property (strong, nonatomic) IBOutlet UILabel * ResultLabel -(IBAction) Convert : (UIButton *) sender-(IBAction) backgroundButton : (id) sender @end

ViewController.m으로 전환 한 후 다음 코드를 작성하십시오.

-(IBAction) backgroundButton : (id) sender {[_ValueTextField resignFirstResponder] [_picker2 resignFirstResponder] [_ResultLabel resignFirstResponder]}

여기서 코드는 터치가 감지 될 때 첫 번째 응답자 상태를 산출하도록 다른 모든 개체에 지시합니다. 이제 앱을 실행하고 확인하십시오. 배경을 터치하면 키보드가 사라지는 것을 알 수 있습니다. 이제 입력을 마쳤을 때 키보드를 사용하려면 피커의 didselectRow () 메서드에서 backgroundButton 메서드를 호출합니다. 따라서 메서드 코드는 다음과 같습니다.

-(void) pickerView : (UIPickerView *) pickerView didSelectRow : (NSInteger) row inComponent : (NSInteger) component {selectedValue = _data [row] [self backgroundButton : 0]}

이제 배경을 추가하고 멋진 버튼 이미지를 제공하는 등 앱의 미화 부분에서 작업 할 수 있습니다. 그러나 내에서는 배경 이미지를 설정합니다.
그러려면 먼저 적절한 이미지를 찾으십시오. 그런 다음 Images.xcassets 폴더에 추가하고 범용 화면에서 이미지를 1x에서 2x로 변경합니다.

앱을 실행하고 제대로 작동하는지 확인하십시오.

장치를 iphone 5s로 변경하면.

그리고 앱을 실행하십시오.

여기에서 모든 것이 예상대로 잘 작동하는 것을 볼 수 있습니다. 이제 버튼에 배경을 추가하고 버튼처럼 보이게하려면 어떻게해야합니까? 이를 위해 먼저 변환 버튼에 대한 IBOutlet을 ViewController.h에 추가합니다.

@property (강력, 비 원자) IBOutlet UIButton * convert

그런 다음 viewDidLoad () 메서드에 다음 코드를 추가하십시오.

self.convert.backgroundColor = [UIColor colorWithRed : 0.4 green : 0.8 blue : 1.0 alpha : 1.0] [_convert setTitleColor : [UIColor whiteColor] forState : UIControlStateNormal]

앱을 실행하고 우리가 좋아하는 방식인지 확인해 보겠습니다.

큰 확인! 결과 레이블의 위치도 변경 한 것을 눈치 채 셨을 것입니다. 변경 이유는 나중에 설명하겠습니다.

우리는 앱이 섭씨에서 화씨로, 그 반대로 만 변환된다는 것을 알고 있습니다. 그렇다면 변환 할 기능이나 단위를 몇 개 더 추가하는 것은 어떻습니까? 이렇게하려면 선택기의 첫 번째 구성 요소에서 단위가 선택 될 때 적절한 선택을 제공하는 UIPickerView에 구성 요소를 하나 더 추가해야합니다.

선택기를 두 개의 구성 요소로 나누려면 두 번째 구성 요소에 대한 데이터를 저장할 새 NSArray data2를 추가해야합니다. 또한 두 구성 요소를 나타내는 두 개의 상수를 정의하십시오. 여기서는 프로그래밍의 단순화를 위해 왼쪽 구성 요소는 0으로 선언되고 오른쪽 구성 요소는 1로 선언됩니다.

ViewController.h 파일은 다음과 같습니다.

#import # define data1comp 0 # define data2comp 1 @interface ViewController : UIViewController @property (strong, nonatomic) IBOutlet UITextField * ValueTextField @property (strong, nonatomic) IBOutlet UIPickerView * picker2 @property (strong, nonatomic) NSArray * data1 @property ( strong, nonatomic) NSArray * data2 @property (strong, nonatomic) IBOutlet UILabel * ResultLabel @property (strong, nonatomic) IBOutlet UIButton * convert-(IBAction) Convert : (UIButton *) sender-(IBAction) backgroundButton : (id) sender @종료

이제 ViewDidLoad () 메서드에서 배열 data2를 정의합니다. 이제 두 데이터 소스가 모두 있으므로 선택 도구의 첫 번째 구성 요소에서 항목을 선택할 때 두 번째 구성 요소가 해당 값으로 자동으로 변경되는 방식으로 선택 도구에 대한 코드를 작성할 수 있어야합니다. 두 번째 구성 요소는 첫 번째 구성 요소의 선택에 따라 다릅니다.
이를 위해 키와 값을 저장할 사전을 정의해야합니다. 키에는 선택기의 첫 번째 구성 요소에 해당하는 데이터가 포함되고 값에는 선택기의 두 번째 구성 요소에 해당하는 데이터가 포함됩니다.

-(void) viewDidLoad {[super viewDidLoad] // 일반적으로 nib에서 뷰를로드 한 후 추가 설정을 수행합니다. _data1 = [NSArray arrayWithObjects : @ 'Celsius', @ 'Fahrenheit', @ 'Meter', @ 'Centimeter', nil] data2 = [NSArray arrayWithObjects : @ 'Centimeter', @ 'Meter', @ 'Fahrenheit', @ 'Celsius', nil] dictionary = [NSDictionary dictionaryWithObjectsAndKeys : @ 'Celcius', @ 'Farenheit', @ 'Farenheit', @ 'Celcius', @ 'Meter', @ 'Centimeter', @ 'Centimeter', @ 'Meter ', nil] self.view.backgroundColor = [UIColor colorWithPatternImage : [UIImage imageNamed : (@'bg2.png ')]]}

이제 현재 선택기의 데이터 소스 및 위임 메서드를 다음과 같이 변경하여 두 구성 요소에 데이터가 채워지도록해야합니다.

-(NSInteger) numberOfComponentsInPickerView : (UIPickerView *) pickerView {return 2}-(NSInteger) pickerView : (UIPickerView *) pickerView numberOfRowsInComponent : (NSInteger) component {if (component == data1comp) {return [self.data1 count]} return [self.data2 count]}-(NSString *) pickerView : (UIPickerView *) pickerView titleForRow : (NSInteger) row forComponent : (NSInteger) component {if (component == data1comp) {return [self.data1 objectAtIndex : row]} return [self.data2 objectAtIndex : row]}-(void) pickerView : (UIPickerView *) pickerView didSelectRow : (NSInteger) row inComponent : (NSInteger) component {[self backgroundButton : 0] if (component == data1comp) {NSString * data11 = [_ data1 objectAtIndex : row] NSArray * a = [dictionary objectForKey : data11] secondrow = [self.data2 indexOfObject : a] [_picker2 selectRow : secondrow inComponent : data2comp animated : YES] [_picker2 reloadComponent : data2comp] selectedValue = data11 selectedRow = 행}}

여기 didSelectRow () 메서드에서 첫 번째 구성 요소의 선택된 값을 가져온 다음 사전의 objectForKey () 메서드에 인수로 전달하고 키에 해당하는 값을 가져옵니다. 두 번째 배열, 즉 data2의 값에 해당하는 위치를 찾기 위해 배열의 indexOfObject () 메서드를 사용하고 결과를 정수 값에 저장합니다.
그런 다음이 정수 값을 선택기 메서드 selectRow : row inComponent : component () 메서드에 전달합니다. 그리고 reloadComponent ()를 사용하여 선택기의 구성 요소를 다시로드합니다.
이 작업을 마치면 첫 번째 구성 요소에서 하나의 항목을 선택하면 해당 항목이 선택기의 두 번째 구성 요소에서 선택됩니다.

didSelectRow ()의 코드

자바 스크립트에서 배열 길이를 찾는 방법

-(void) pickerView : (UIPickerView *) pickerView didSelectRow : (NSInteger) row inComponent : (NSInteger) component {[self backgroundButton : 0] if (component == data1comp) {NSString * data11 = [_ data1 objectAtIndex : row] NSArray * a = [dictionary objectForKey : data11] secondrow = [self.data2 indexOfObject : a] [_picker2 selectRow : secondrow inComponent : data2comp animated : YES] [_picker2 reloadComponent : data2comp] selectedValue = data11 selectedRow = row}}

이제 앱을 실행하고 선택기가 예상대로 작동하는지 확인합니다.

짜잔! 효과가있다!

그럼 계속해서 변환 버튼을 코딩 해 보겠습니다. 이전 선택기에는 섭씨와 화씨와 일치하는 두 개의 값만 있었고 결과가 계산되었습니다. 하지만 이제 섭씨, 화씨, 미터 및 센티미터의 네 가지 값이 있습니다. 그래서 저는 선택된 행 변수를 기반으로 값을 계산하는 switch 문을 사용했습니다.

-(IBAction) Convert : (UIButton *) sender {float val = [_ ValueTextField.text floatValue] NSLog (@ 'value % f', val) switch (selectedRow) {case 0 : // 섭씨에서 화씨로 res = (val * 1.8) + 32break 케이스 1 : // 화씨에서 섭씨로 res = (val-32) /1.8break 케이스 2 : // 미터에서 센티미터로 res = val * 100 break 케이스 3 : // 센티미터에서 미터로 res = val * 0.01 break 기본값 : res = 0.0} NSString * final = [NSString stringWithFormat : @ '%. 02f', res] _ResultLabel.text = final}

앱을 실행하면 모든 것이 잘 작동 함을 알 수 있습니다.

이제 앱에서 발생할 수있는 예외를 확인할 수 있습니다. 예를 들어, 텍스트 상자에 값이 없습니다. 또는 섭씨에서 미터 또는 센티미터로 변환하려고합니다. 실제로는 불가능합니다. 이러한 유형의 상황을 예외라고하며 이러한 오류를 처리하는 코드를 작성하여이를 피해야합니다.

응용 프로그램을 실행할 때 발생할 수있는 첫 번째 종류의 오류를 해결하겠습니다. 즉, 텍스트 필드에 변환 할 값을 작성하지 못했습니다. 이 시나리오의 경우 사용자에게 값을 입력하도록 경고 한 다음 계속해야합니다.

이를 위해 UIAlertView를 사용할 수 있습니다. showAlertWithMessage (NSString *) 메시지라는 메서드를 작성할 수 있습니다. 이 메서드에서 alertView를 선언 한 다음 마지막으로 show () 메서드를 사용하여 표시 할 수 있습니다. 메서드의 코드는 다음과 같습니다.

-(void) showAlertWithMessage : (NSString *) 메시지 {UIAlertView * alertView = [[UIAlertView alloc] initWithTitle : @ 'Error'message : message delegate : self cancelButtonTitle : nil otherButtonTitles : @ 'Okay', nil] alertView.tag = 100 _ResultLabel.text = @ '결과 없음'[alertView 표시]}

이제 사용자가 변환 버튼을 클릭 할 때이 메서드를 변환으로 호출해야합니다. 값을 입력하지 않고 변환하면 안됩니다. 따라서 변환을위한 메소드 정의에서 텍스트 필드의 길이가 0보다 크거나 같은지 확인해야합니다. 그렇다면 변환을 수행하고 그렇지 않으면 경고를 표시하십시오. 따라서 변환 버튼 코드는 다음과 같습니다.

-(IBAction) Convert : (UIButton *) sender {if ([_ ValueTextField.text length]<= 0) { [self showAlertWithMessage:@' Please enter the value'] } else { float res=0.0 float val=[_ValueTextField.text floatValue] NSLog(@'value %f',val) switch(selectedRow) { case 0:// Celsius to Fahrenheit res=(val*1.8)+32break case 1: // Fahrenheit to Celsius res=(val-32)/1.8break case 2: // meter to centimeter res= val*100 break case 3://centimeter to meter res=val*0.01 break default: res=0.0 } NSString *final= [NSString stringWithFormat:@'%.02f',res] _ResultLabel.text = final } }

이제 앱을 실행하고 텍스트 필드에 값을 입력하지 않고 변환 버튼을 클릭하십시오.

두 번째로 발생할 수있는 예외 유형은 첫 번째 구성 요소의 값이 UIPickerView의 두 번째 구성 요소의 값과 일치하지 않는 경우입니다. 이를 위해 두 번째 컴포넌트의 현재 선택된 컴포넌트 행 값이 메소드의 didSelectRow () 델리게이트가 반환 한 행 값과 같은지 확인합니다. 조건이 일치하지 않으면 변환이 불가능하고 값이 일치하면 변환을 수행 할 수 있습니다.

이 로직을 다음과 같이 구현할 수 있습니다.

-(IBAction) Convert : (UIButton *) sender {if ([_ ValueTextField.text length]<= 0) { [self showAlertWithMessage:@' Please enter the value'] } else { _ResultLabel.textColor= [UIColor blackColor] float res=0.0 NSInteger n =[_picker2 selectedRowInComponent:data2comp] if(n==secondrow) { float val=[_ValueTextField.text floatValue] NSLog(@'value %f',val) switch(selectedRow) { case 0:// Celsius to Fahrenheit res=(val*1.8)+32break case 1: // Fahrenheit to Celsius res=(val-32)/1.8break case 2: // meter to centimeter res= val*100 break case 3://centimeter to meter res=val*0.01 break default: res=0.0 } NSString *final= [NSString stringWithFormat:@'%.02f',res] _ResultLabel.text = final } else { // code for displaying error. _ResultLabel.textColor= [UIColor redColor] _ResultLabel.text = @'Result cannot be calculated' } }

이제 앱을 실행하고 첫 번째 구성 요소에서 선택한 후 두 번째 구성 요소의 값을 변경하여 확인합니다.

결과를 계산할 수 없다는 오류 메시지를 볼 수 있습니다. 오류 메시지가 동일한 결과 레이블에 인쇄되었으며 메시지가 길다는 것을 알 수 있습니다. 이것이 라벨이 이전 방향에서 아래로 이동 한 이유입니다.

이제 변환 앱이 완성되었습니다. 선택에 따라 앱에 더 많은 기능을 추가하고 창의성에 따라 더 아름답게 만들 수 있습니다.

질문이 있으십니까? 댓글 섹션에 언급하시면 다시 연락 드리겠습니다.

관련 게시물: