[iOS] AutoLayout : Graph _ Animated

📌 AutoLayout : Graph_Animated 

그래프를 표현하는 방법과 애니메이션

 

 

 

 

---

 

중앙에 보이는 막대형 Graph Layout을 만들어보는것이다.

 

 

View 안에 View를 추가하여 막대를 만들고

 

막대 하나를 우클릭하여 상위View의 'Equals Height' 설정하고

 

Structure에 보이듯이 상위 View ~ 막대 View 6개를 모두 선택하여 'Equal Height' 설정

 

 

6개 막대View만 선택하여 Equal Widths로 넓이를 같게 만들어준다.

 

 

하나하나의 막대 View의 높이는 

 

Equal Height to 의 Multiplier를 조절해준다.

 

---

하지만 여기까지는 Multiplier를 이용해서 구현한 것이지만, 

사용자한테 입력을 받거나 네트워크를 통해서 입력받은 값으로 표현하기위해선

 

이것을 코드로 구현해야 한다.

 

이러한 AutoLayout은 어떻게 구현해야 할까 ? 

 

 

각 막대View의 Height 속성을 Outlet으로 지정해준다.

( Outlet 명 : graph1~6Height )

 

 

보기와 같이 constant, priority 와 같은 속성은 코드에서 바로 입력받을 수 있지만,

비율인 Multiplier는 바로 입력받을 수 없다.

 

때문에 새로운 Constraint 자체를 만들어줘야한다.

 

 

이후 viewDidload() 에서 적용시켜주면 된다.

 

전체코드

 

 

현재까지 실행결과

 

---

이후, 버튼 클릭시 버튼마다 막대 그래프가 바뀌게 하고 싶다면 ? 

 

Button을 추가한 뒤에 코드를 조금만 추가해주면 된다.

 

 

첫번째로 changeConstraint 메소드의 마지막(70 Line)에 

 

return newConstraint 를 추가해준다.

 

이는 새로운 newConstraint값을 계속 반환시켜주기위함이다.

 

 

 

이후 스토리보드에 버튼 2개를 추가하여 IBAction을 만들고나서,

 

viewDidLoad()에 썻던 코드를 옮겨준다.

 

코드가 약간 바꼈는데, 

 

해당코드는 위에서 가장 최근에 사용했던 값은 deactive 하고 새로 active받아서

항상 새롭게 하여 충돌나지 않게 하는 것이다. ( 계속 return 받음 )

 

 

 

 

 

이후 그래프의 변화가 보이게 animation 효과를 주면 더 자연스럽게 바뀐다.

 

 

layout.IfNeeded()

withDuration 0.5 -> 0.5초동안 실시간으로 layout을 적용시켜라 라는것이다.

💡 layout.IfNeeded()

1. layoutIfNeeded()가 호출되면, UI를 업데이트 하라는 queue에 뒷쪽에 넣는것이 아니라, 맨 앞쪽에 넣어서 곧바로 UI가 변경되기를 기대할수있는 메소드
2. 해당 메소드가 호출되면 Update Cycle을 바로 실행하여 레이아웃이 즉각적으로 적용
3. layoutSubviews()는 내부 알고리즘에 의해 최적화되어 있기때문에 명시적으로 불리면 안되므로 애플에서는 layoutIfNeeds() 코드를 통해 layoutSubviews() 메소드가 간접적으로 빠르게 불리도록 설계

 

 

완성 결과