[자료구조_스택] 스택을 이용한 핀터레스트
직접 핀터레스트를 구현해보았다.
나름 플러그인처럼 만든다고 클래스로 만들어봄.(물론 부족히긴 하다.)
핀터레스트가 뭔지를 모른다면,
위에참고.
첫번째로 만든건, 단순 원래 컨텐츠의 순서대로 위치만 정해주었다.
그 원리가 모냐면,
계산을 아래와 같이 하였다.
현재 컨텐츠들의 마크업순서를 유지한채, 화면상에도 자리를 잡아주는 단순한 로직이었다.
저런 로직으로 실제 구현을 하고 쓰는데 별 문제가 없었다.
하지만, 어떤 컨텐츠가 오느냐에 따라 화면이 달라졌다.
아래 파일을 열어보면 알겠지만,
이게 처음버전이므로, 화면을 줄이면서 보면 문제를 알수있을것이다.
핀터레스트처음버전.zip위에 파일에서 2열형태로 볼 경우, 맨아래 컨텐츠를 보면 알 수 있다.
맨 마지막 컨텐츠의 위치가 저 화살표가 가르키는 곳이어야 한다는것을....
하지만 내가 짠 코드대로라면 현재 있는 저 위치가 맞다.
-_-내가 로직을 잘못 생각한것.
어떻게 해야하나 고민하다가, 맞는 걸 생각하였다.
원리는 처음하나부터 열끝까지 1줄은 기존과 같은 방법으로 위치를 잡고,
그 다음 컨텐츠부터는 자신이 자리잡을 위치를 탐색한다.
그 위치는 열을 하나하나 검색해 열의 맨마지막 줄에 위치한 컨텐츠들의 높이를 비교하여
가장 짧은쪽을 선택해서 위치는 잡아가는거다.
아래와 같이 3열형태라 하면,
인덱스 3인 컨텐츠가 자리를 잡기 위해 0,1,2의 높이를 비교하여 가장짧은 쪽인 1번 아래에 오는게 맞다.
그 다음 인덱스4인 컨텐츠는 자신의 위치를 잡기위해 어떤어떤 컨텐츠를 봐야할까?
아래 그림과 같이 인덱스4인 컨텐츠는
열들의 가장 마지막 번째에 있는 컨텐츠들의 높이중 가장 짧은곳을 선택하면 된다.
높이 비교할 컨텐츠들의 번호는 0,3,2 를 비교하면 된다.
가장 짧은곳을 선택하기위해, 비교해야될 대상들은 항상.
열의 가장 마지막에 위치한 컨텐츠 이므로..
각각의 열마다, 컨텐츠들의 정보를 넣을 공간을 만들어야겠다고 생각한다.
위와같이 각 열마다 어떤 컨텐츠들이 있는지 담고있는 부분을 만들어야한다.
각 레이아웃들의 정보를 담고있는거다.
열마다 스택이 형성된다. 3열구조라면 스택은 3개 형성한다.
각각의 열에 컨텐츠가 추가될때 그 열에 해당하는 스택에 그 컨텐츠의 x축좌표, y축좌표, 인덱스 번호를 스택에 저장.
다음 컨텐츠가 위치를 잡을때 각 스택에 최근에 추가한 원소부터 꺼낼수 있으므로,
해당 스택들의 최근 정보를 가져와 sort함수로 y축위치를 비교,
소트하면 오름차순으로 작은것부터 정렬되므로. 소트한 첫번째 즉 0번인덱스에 있는 자료가 가장 짧은쪽이다.
그러면 추가할 컨텐츠는 그 0번인덱스의 x축과 y축의 위치정보를 가지고 자신의 컨텐츠를 그 아래에 위치하면 끝.
-_-
글로쓰니 설명이 어렵지만,
스택을 활용하면 맞는 로직을 구현할 수 있다.
스택을 이용한 수정버전을 아래에 첨부한다.
따로 스택을 이용한 핀터레스트 플러그인화 시킨것 :