[Android Studio] 식물 정보 Tab

좌 - 홈 화면 / 중 - 홈의 '식물정보' 클릭 / 우 - 봄 Tab에서 돌단풍 클릭

 

홈의 '식물정보'에서는 식물원에서의 사계절 식물정보를 얻을 수 있다.

 

 

좌 - 홈의 '식물정보' 클릭 / 우 - 식물정보 xml 디자인

 

먼저 식물정보.xml은 TabHost(TabWidget, FrameLayout)을 이용하였다.

FrameLayout 안에는 식물이미지(ImageView), 식물이름(TextView), 식물이 위치한 주제원(TextView)을 하나의 Layout으로 묶어 위의 사진처럼 화면을 구성하였다.

 

 

좌 - TabHost xml 기본 구성 코드 / 우 - TabHost java 코드

 

TabHost는 기본적으로 TabHost > TabWidget > FrameLayout으로 구성되어 있다.

TabWidget은 Tab 버튼을 표시한다.

FrameLayout은 선택된 탭의 페이지를 나타낸다.

그리고 TabHost는 두 요소들을 관리하는 역할을 한다.

 

 

좌 - storage 코드 / 우 - DB 코드

 

'식물정보'에서 보여주는 이미지와 글들은 Firebase의 storage와 DB를 이용하였다.

 

 

좌 - xml ImageView 코드 / 중 - Tab에서 식물 클릭 시 프래그먼트 호출 코드 / 우 - 프래그먼트.xml 디자인

 

ImageView를 클릭 가능한 요소로 만들려면 xml에서 ImageView 코드에 onClick 이벤트를 추가해야 한다.

그리고 java 파일에서 이벤트 메소드를 만들어준다.

 

 

아래 사진들은 완성한 계절별 식물정보 Tab들과 프래그먼트이다.

좌 - 봄 Tab / 우 - 봄 Tab에서 돌단풍 클릭

좌 - 여름 Tab / 우 - 여름 Tab에서 돌가시나무 클릭

좌 - 가을 Tab / 우 - 가을 Tab에서 가막살나무 클릭

좌 - 겨울 Tab / 우 - 겨울 Tab에서 애기동백나무 클릭