안드로이드 스크롤뷰 ScrollView (가로/세로 )
▣ 안드로이드 스크롤뷰 ScrollView (가로/세로) |
● ScrollView는 프레임 레이아웃에 스크롤 기능을 추가해서 만들어진 형태 인데요. 스크롤뷰 하나에는 하나의 객체만 스크롤 할 수 있는게 기본입니다. 이번에 만들어볼 프로젝트 처럼 여러개의 사진을 넣을 경우에는 LinearLayout을 추가해서 그림을 넣어야 합니다. 또한 일반 ScrollView는 세로방향으로만 지원을 합니다. 가로 방향으로 적용하고 싶다면 HorizontalScrollView를 사용해야 합니다.
● 다음 그림과 같은 예제 프로젝트를 하나만들어 보겠습니다.
● 먼저 두 객체의 상속구조를 살펴보고 넘어가도록 할게요.
두개 모두 FrameLayout을 상속 받아서 만들어진걸 확인 할 수 있습니다.
● 프로젝트에 사용하기 위해서 몇장의 사진을 준비를 합니다.
● LinearLayout에 ScrollView를 배치하고 그 안에 다시 LinearLayout(세로)을 넣고, 텍스트뷰와 이미지 뷰를 넣었습니다. 마지막으로 가로로 스크롤 할 horizontalScrollView를 배치하고 그안에 가로로 LinearLayout을 배치한 모습입니다. 그리고 가로형 ScrollView는 배경을 라운드박스 형태로 따로 만들어서 설정합니다.
● 그리고 다음 그림과 같이 가로형 스크롤바의 색과 그 배경색을 빨강과 노랑의 "그라디에이션"을 사용해서 만들도록 하겠습니다.
● 먼저 위에서 가로형에 적용시킬 "라운드 박스"형 배경을 만들고, 다음으로 스크롤바의 스타일과 배경을 만들도록 하겠습니다. res/drawable 폴더에 그림과 같이 각각의 xml파일을 만들어서 넣습니다. 나중에 이것들을 배경으로 불러와서 사용하게 됩니다. 칼라와 코너 "radius" 부분은 맘에 드는 형태로 만들면 되겠습니다.
● 이제 위에서 배치했던 레이아웃들의 xml파일의 내용을 살펴보겠습니다.
전체적으로 레이아웃이 어떻게 배치가 되었는지 염두해두고 코드를 보면 이해가 빠를겁니다.
● 다음은 가로 스크롤 뷰 부분을 살펴보겠습니다.
가로형으로 배치를 하고 백그라운드를 위에서 만들어 놓은 라운드 박스형으로 해주고 있으며, "fadeScrollbars"를 "false"로 해주고 있는데요. 이렇게 하면 스크롤바가 화면에 항상 표시가 됩니다. 위쪽의 세로형에서는 이부분을 설정해 주지 않았습니다. 그렇개 때문에 평소에는 보이지 않다가 움직이면 "바"가 나타나게 될것입니다. 아무튼 가로형은 항상 보이게 하고 있는 상황이구요. "바 사이즈"를 "10dp"로 하고, 스타일을 "outsideInset" 형태로 해주고 있습니다. 그리고 스크롤바의 스타일과 배경을 위에서 만들어 놓은 그라디에이션 스타일을 적용하고 있습니다. 참고로 이부분에서 중요한 것이 소스에서 보는것과 같이 LinearLayout의 "orientation"을 가로(horizontal)로 설정을 해줘야 스크롤이 된다는 점입니다.
● 이제 기본 준비는 다 끝났으니 액티비티 파일에서 이미지들을 호출해서 ImageView에 출력되도록 코드를 작성하겠습니다.
activity_main.xml에서 배치했던 ImageView 객체들을 모두 "Id"로 찾아와서 각각의 객체들에담고, 각각의 이미지 최대 크기를 400x400으로 설정하고, 출력하도록 하고 있습니다.
준비한 사진들이 크기가 모두 다르기 때문에 최대 출력될 수 있는 사이즈를 설정해주면 그 범위를 넘어가지 않고 출력이 됩니다. 하지만 이렇게 자동으로 이미지 크기를 조절하기 위해서는 몇가지 조건이 있습니다. 먼저 이미지뷰의 객체의 크기를 "wrap_content"로 설정해야 하고, setAdjustViewBounds()를 "true"로 설정해야 합니다. 그리고 setMaxWidth와 setMaxHeight 에서 최대 크기를 설정해주면 됩니다.
이 예제에서 준비한 그림중에 400x400보다 작은 그림도 있어서 작게 나오는 그림이 있으니 참고하시구요. 직접 테스트를 해보시는 분이라면 모두 사이즈를 다르게 하여 큰 이미지를 준비해서 만들어 보세요.
● 이제 프로젝트를 실행 해보겠습니다.
세로 "바"가 보이지 않다가 움직이면 나타나게 됩니다. 가로 스크롤바의 배경과 스타일도 어떻게 적용이 되었는지 살펴보시기 바랍니다.