현재 퀵패널에서 SmartThings 패널 아이콘의 상하 여백은
객체가 기본적으로 가지는 여백을 기준으로 정렬되어있습니다
그래서 아이콘 기준에서 보았을 때에는 아이콘 자체가 가지는 상단 여백과
아이콘 윗단에 배열되는 설정 아이콘과 Smart View 아이콘이 가지는 하단 여백이 나열돼 두 번의 여백을 가지게 됩니다
반면 하단에는 다른 요소가 없기에 바로 퀵패널의 끝과 맞닿아 있습니다
사실 객체 자체가 여백을 가지고 있다면 다른 여백과 중앙을 정렬할 때
그 객체가 가진 여백을 포함해 계산하는 것이 틀린 것은 아니지만
시각적으로 사용자가 받아드리는 것은 보이지 않는 객체가 가진
여백이 아닌 객체 그 자체와 다른 객체 사이의 여백입니다
그래서 퀵패널의 SmartThings 패널을 보면 블루투스 디바이스 아이콘들을 기준으로 하단 여백이 더 좁아보이고 "SmartThings" 타이틀과 SmartView 아이콘 설정 아이콘이 있는 단 사이의 여백이 넓어보이기 마련입니다
이 문제를 해결하기 위해선 단순히 어느 공간에 대해 상하 중간 정렬을 할 때
객체 자체가 가지는 여백을 무시하고 정렬을 하면 눈에 보기 편한 정렬이 됩니다
위는 객체 가진 눈에 보이지 않는 여백을 무시하고
눈에 보이는 객체와 객체 사이만을 정렬해 수정한 모습입니다
타이틀과 설정아이콘이 있는 단 하단 끝에서 부터 퀵패널 끝 까지의
사이 공간에서 블루투스 디바이스 아이콘들을 상하 중앙 정렬하고
퀵패널 아이콘 하단 끝에서 SmartThings 패널 상단 끝 사이의 공간에서
분리선을 상하 중앙 정렬했습니다
눈에 보이는 것을 기준으로 정렬을 하는 것이 더 보기 편한 UI를 완성하는데에 도움이 될 것 같습니다
+
