swift Array Filter 사용하기

swift 에서 key valeu를 저장 하는 Array를 TableView로 적잘한  cell에 UI 컴퍼넌트들과 연결 하여 데이터를 보여 주고 있다고 할 때

여러 리스트 중에 특정한 값 만을 표시 하는 경우가 있다.

예를 들어 결재 내역에서 point 라는 항목을 전체 표시
차감만 표시
적립만 표시

해야 하는 경우는

ex)

    var mileageData = [

        ["point":"save", "price":"7000", "datetime":"2016.01.08 16:50", "message":"관리자가 마일리지 부여"],

        ["point":"used", "price":"10000", "datetime":"2016.01.08 16:50", "message":"관리자가 마일리지 부여"],

    ]

여기서 point key의 save만 , used만을 필터 처리 하고 싶은 경우가 있다.

filter() 메소드를 이용하면 된다.

        if filterButtons[0].selected == true { //전체

            mileageData = mileageDataOrigin

            

        } else if filterButtons[1].selected == true { //적립

            mileageData = mileageDataOrigin.filter({

                $0["point"] == "save"

            })

        } else { //차감

            mileageData = mileageDataOrigin.filter({

                $0["point"] == "used"

            })

        }

        tableView.reloadData()

위 코드는 mileageDataOrigin 으로 부터 mileageData Array를 point 키의 값을 기준으로 

필터 처리를 하여 재구성 하는 코드이다.

tableView.relaodData()를 이용하여 테이블뷰의 데이터를 새로 갱신 하면 변경된 데이터가 표시 된다.

커스텀 스위치 버튼 만들기

UISwitch 가 있지만



커스텀한 스위치 버튼을 디자인 가이드에 있다면

백그라운드 이미지를 적용하고
버튼 이미지를 적용

select 되었을 때 버튼 이미지를 우측으로
unselect 되었을 때 버튼 이미지를 다시 좌측으로 이동 해야 한다.

어떻게 하나?


프로퍼티에서 inset을 변경 시켜야 한다.

default / selected에서 이값을 설정 해놓을 수는 없다.

나머지는 코드로 해결 해야 한다.

우측으로

            self.backgroundSyncButton.imageEdgeInsets = UIEdgeInsetsMake(0, 25, 0, 5)

좌측으로

            self.backgroundSyncButton.imageEdgeInsets = UIEdgeInsetsMake(0, 5, 0, 5)

그럼 스위치 버튼 만들기 끝

UIProgressView 트랙, 프로그래스 커스텀 이미지 적용 버그 해결 방법

지난번에
http://mtsparrow.blogspot.kr/2016/01/uiprogress-view-height.html


UIProgressView 컨트롤에 Height 문제도 있었지만

그 외에 도 문제가 있다.

커스텀한  프로그래스 이미지와 트랙이미지를 아무리  인터페이스 빌더에서
적용해 주어도 효과가 없다.

이에 대한 해결 방밥은

https://gist.github.com/JohnEstropia/9482567

여기에서 찾을수 있다.

JEProgressView라는 클래스 이름으로 UIProgressView를 상속 받아 문제를
해결 하였다.

이를 이용하여 Track 이미지 Progress 이미지를 설정 하면 제대로 된 결과를 얻을 수 있다.

네비게이션 바에 컬러 아이콘으로 버튼을 만들고 거기에 넘버링 까지 하려면

이러한 화면을 구성 하려면 어찌 합니까? 어떻게 할까요?

우선 네비게이션바에 바버튼 이미지는 단색으로 설정된다.

        let btImage = Helper.textToImage("1", inImage: UIImage(named: "bt_topmenu_bell_on")!, atPoint: CGPoint(x: 26, y: 21))

        

        

        let rightButton2: UIBarButtonItem = UIBarButtonItem(image: btImage.imageWithRenderingMode(.AlwaysOriginal), style: UIBarButtonItemStyle.Plain, target: self, action: "")

위 코드에서  btImage.imageWithRenderingMode(.AlwaysOriginal) 

이를 설정 해 줘야 네비게이션바에 바버튼 이미지를 원래 색상으로 처리 한다.

btImage 즉 벨 아이콘에 숫자 넘버링을 위한 코드는 helper 클래스를 만들어서 이용 하였다.

아무데서나 편하게 쓰기 위한 helper 클래스를 만들고 거기에 

text와 이미지, 그리고 포지션을 주면 이미지위에  text를 표시하는 함수를 작성 해서 이용한다.

// 이미지 위에 글 쓰기 (넘버링)

    static func textToImage(drawText: NSString, inImage: UIImage, atPoint:CGPoint)->UIImage{

        

        // Setup the font specific variables

        let textColor: UIColor = UIColor.whiteColor()

        let textFont: UIFont = UIFont(name: "Helvetica Bold", size: 9)!

        

        //Setup the image context using the passed image.

        UIGraphicsBeginImageContext(inImage.size)

        

        //Setups up the font attributes that will be later used to dictate how the text should be drawn

        let textFontAttributes = [

            NSFontAttributeName: textFont,

            NSForegroundColorAttributeName: textColor,

        ]

        

        //Put the image into a rectangle as large as the original image.

        inImage.drawInRect(CGRectMake(0, 0, inImage.size.width, inImage.size.height))

        

        // Creating a point within the space that is as bit as the image.

        let rect: CGRect = CGRectMake(atPoint.x, atPoint.y, inImage.size.width, inImage.size.height)

        

        //Now Draw the text into an image.

        drawText.drawInRect(rect, withAttributes: textFontAttributes)

        

        // Create a new image out of the images we have created

        let newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()

        

        // End the context now that we have the image we need

        UIGraphicsEndImageContext()

        

        //And pass it back up to the caller.

        return newImage

    }

statusbar 에 Text 및 아이콘의 컬러를 white로 변경 하기

ViewController나, NavigationBar의 배경색을 변경 하면 Statusbar의 배경색은 동일 하게 바뀐다.
문제는 어둡게 변경되었을 경우 Black의 폰트는 시인성이 떨어진다.

그럼 이렇게 어두운 배경톤을 사용하는 앱에서 statusbar의 text 색상을 어떻게 바꾸나



info.plist에 View controller-based status bar appearance 이항 목을 추가 하고 값을 NO로 설정 하한다.


AppDelegate.swift 파일에서 didFinishLaunchingWithOptions 함수에 다음 코드를 추가 한다.

                UIApplication.sharedApplication().setStatusBarStyle(UIStatusBarStyle.LightContent, animated: false)

그러면 원하는 대로 어두운 배경색의 statusbar에서 white 색상에 폰트와 text를 얻을 수 있다.

XCode의 code snippets, key binding, font and color them을 dropbox를 이용하여 동기화 하기

주 작업 머신은 2012 MAC MINI i7 쿼드 모델 이다.

하지만 외부에 나가거나 가끔 2013 mbpr을 이용하기도 한다.

XCode를 자신에 입 맞에 맞추어 설정을 하면 서로 동기화가 필요 할 때가 있다.

특히 나 작은 코드블럭인 snippets을 설정해서 사용하고 있는데 이게 머신 마다.
다르면 좀 그렇다.

그리고 최근 안구건조증인지 눈이 많이 뻑뻑해서 Dracula 테마도 다운 받았는데
매번 이 테마 파일을 다른 머신에 복사 하기도 문제가 될 거 같다.

아직 이 드라큘라 테마가 맘에 완전 드는지 아닌지는 며칠 써보고 다른 테마를 추가 할지도 모를 일이다.

해서 다음과 같은 작업을 해보고 snippet이 동기화 됨을 확인 하였다.

1번 주 머신
dorpbox에 xcode 폴더를 생성

$ ln -s ~/Library/Developer/Xcode/UserData/CodeSnippets ~/Dropbox/xcode/CodeSnippets

$ ln -s ~/Library/Developer/Xcode/UserData/KeyBindings/ ~/Dropbox/xcode/KeyBindings

$ ln -s ~/Library/Developer/Xcode/UserData/FontAndColorThemes/ ~/Dropbox/xcode/FontAndColorThemes

mbpr 머신에서 Dropbox에 의해 동기화가 이루어 졌다.

mbpr 머신에서는 dropbox에서 ~/Library/Developer/Xcode/UserData 로 모두 링크를 걸어 준다.

KeyBindings  폴더는 있었기 때문에 기존 폴더를 과감 하게 삭제 하고 링크를 걸어 준다.

칼라 테마는 http://zenorocha.github.io/dracula-theme/xcode/ 에서 설치를 진행 하였고 

그래서 최초로 FontAndColorThemes가 생성 되었다.

CodeSnippets의 경우도 주로 사용하지 않던 mbpr에는 없던 폴더이다.

하지만  KeyBindings는 존재 했기 때문에 mbpr에서 링크를 걸기 전에 삭제 했다.

코드 스니핏으로 테스트 해보니 Xcode를 다시 열면 코드 스니핏이 추가 됨을 확인 하였다.

네비게이션바의 버튼 위치 조정 하기

to



어찌 합니까? 어떻게 할까요?

디자인 가이드를 맞추기가 어렵다.

    //left 슬라이드 메뉴

    public func addLeftBarButtonWithImage(buttonImage: UIImage) {

        let leftButton: UIBarButtonItem = UIBarButtonItem(image: buttonImage, style: UIBarButtonItemStyle.Plain, target: self, action: "toggleLeft")

        navigationItem.leftBarButtonItem = leftButton;

    }

네비게이션바에 버튼을 추가 하면 첫번째 화면 처럼 된다.

이걸 하단 처럼 하려면

UIButton을 생성 하고 frame을 조정, contentEdgeInset을 조정 하고

UIBarButtonItem을 customView로 버튼을 지정 하는 방법을 시도 했다.

삽질이었다.

결국 간단한 방법을 찾았다.

UIBarButtonItem 중에는 가운데 스페이스 등을 지정 하는 스페이스 아이템을 버튼과 버튼 사이에 넣을수 있다.

왼쪽 left, 오른쪽 right의 그러한 스페이스를 추가 하고 음수 값을 정해서

왼쪽 버튼을 더 왼쪽으로 , 오른쪽 버튼을 더 오른쪽으로 붙일 수  있다.

그래서 다음과 같은 코드가 위 두번째 화면 과 같은 결과를 보여 준다.

    //left 슬라이드 메뉴

    public func addLeftBarButtonWithImage(buttonImage: UIImage) {

        let leftButton: UIBarButtonItem = UIBarButtonItem(image: buttonImage, style: UIBarButtonItemStyle.Plain, target: self, action: "toggleLeft")

        

        let negativeSpacer = UIBarButtonItem(barButtonSystemItem: .FixedSpace,

            target: nil, action: nil)

        

        negativeSpacer.width = -16

        

        navigationItem.setLeftBarButtonItems([negativeSpacer, leftButton], animated: false)

    }