상반기 10

[Android Studio] Polyline

식물원을 투어하는 사용자들을 위한 추천코스 제공 기능을 위해 폴리라인을 구현하였다. 가장 먼저 import 문을 이용하여 MapPolyline을 가져온다. 다음으로 onCreate메소드 내부에 폴리라인을 생성하고, 값을 넣어주어야 한다. 먼저 폴리라인을 다음과 같이 선언하여 생성해준다. 다음처럼 변수명을 다르게 주면 여러개의 폴리라인을 생성하여 각각 다른 값을 저장할 수 있다. 폴리라인에 값을 넣고 저장하는 코드는 다음과 같다. (우리는 클릭이벤트도 적용하기 위해 onCreate > setOnClickListener에 넣어주었다.) 코드를 간략하게 설명하자면, 선언된 polyLine변수에 addPoint를 통해 값을 더하고 addPolyLine을 통해 저장한다. 폴리라인의 색은 setLineColor을 ..

[Firebase] 전체 식물 정보 리스트2

식물원의 전체 식물 정보를 볼 수 있는 ‘식물 정보’ 창을 구현하려고 한다. 전체 식물 정보를 보여줄 화면은 ListView를 사용하였고, 식물 검색 기능에 필요한 EditText와 돋보기 이미지를 넣은 ImageButton도 추가하였다. 식물의 데이터는 Firebase를 이용해서 불러온다. ListView에 Adapter를 적용시켜준다. 실행시켜보면 Firebase DB에 계절별 식물을 분리해 놓은 대로 데이터를 잘 불러온다. 그리고 리스트뷰에서 식물 이름을 클릭했을 때 프래그먼트 창을 띄워서 식물 정보를 제공하기 위해 먼저 식물마다 각각의 프래그먼트 창을 생성해놓았다. 프래그먼트 창 생성은 주제원 프래그먼트 창 생성과 방법이 동일하다. 그리고 AdapterView.OnItemClickListenner..

상반기/서버 2021.06.05

[Firebase] 전체 식물 정보 리스트

식물원의 전체 식물 정보를 볼 수 있는 ‘식물 정보’ 창을 구현하려고 한다. 전체 식물 정보를 보여줄 화면은 ListView를 사용하였고, 식물 검색 기능에 필요한 EditText와 돋보기 이미지를 넣은 ImageButton도 추가하였다. (왼쪽 사진) ListView에서 식물의 사진과 이름을 같이 보여주기 위해 plantlist.xml을 따로 생성해서 ImageView와 TextView를 추가하였다. (오른쪽 사진) Adapter를 생성하려면 getCount(), getItem(), getItemId(), getView() 이 4가지 메소드를 추가해야 한다. getCount()는 list에 있는 아이템의 총 개수 getItem()는 list 중 해당 위치 아이템 getItemId()는 해당 위치 pos..

상반기/서버 2021.06.05

[Firebase] 계절 코스 창 생성

계절별 코스 창을 만들기 위해 4개의 액티비티를 추가하였다. 스마트 투어 화면에서 해당 계절 코스를 누르면 코스 창으로 이동할 수 있는 버튼을 xml에 추가해 주었다. 스마트 투어.java에서 intent를 사용하여 코스 버튼을 누르면 코스 창으로 이동할 수 있게 먼저 연결해 주었다. 버튼을 눌러 코스 창으로 이동했다면 다시 스마트 투어 화면으로도 돌아갈 수 있는 뒤로가기(back) 버튼도 계절 코스 xml에 추가해서 연결해주었다. 코스 창에서 띄울 지도는 추후에 추가할 예정이다. 실행모습

상반기/서버 2021.06.05

[Firebase] 프래그먼트 창 추가 생성

먼저, 추가했던 부대시설 5군데의 프래그먼트 창을 만들기 위해 자바 클래스 파일을 추가했다. 프래그먼트 창을 만들기 위해 androidx.fragment.app.DialogFragment를 import해서 사용했다. onCreateView는 프래그먼트 창을 구성할 때 호출되는 메소드이며, 인자 값인 LayoutInflater은 XML과 연결하여 레이아웃 뷰를 호출한다. 프래그먼트 창에 필요한 사진을 띄울 이미지 뷰, 설명 글을 띄울 텍스트 뷰, Firebase의 Storage, DB 등 이 메소드 안에서 구성하면 된다. 만든 프래그먼트 창을 getInstance() 메소드를 이용해 값을 받아와서 마커와 연결시켜준다. 이제 추가한 부대시설을 클릭하면 그에 맞는 프래그먼트 창이 뜬다.

상반기/서버 2021.06.05

[Firebase] Storage&DB의 글&그림 수정

Storage 식물원 주제원들의 대표사진을 업로드 해놓았다. Glide 라이브러리를 이용해서 storage에서 사진을 불러왔다. Glide는 구글에서 만든 안드로이드 이미지 로딩 라이브러리 중 하나로, 사진뿐만 아니라 동영상, GIF 로딩 지원이 된다. Glide 라이브러리를 사용방법은 build.gradle(:app)의 dependencies에 추가해서 라이브러리를 불러오면 된다. Database 식물원 주제원들의 소개, 관람 포인트, 포토존, 등의 내용이 담긴 설명글을 추가해놓았다. DB에 저장되어 있는 해당 주제원의 설명글을 불러온다. 실행모습

상반기/서버 2021.06.05

[Firebase] Storage&DB 연동

안드로이드 앱 – Firebase 연결 안드로이드 스튜디오 앱과 Firebase를 연동하는 방법은 두 가지가 있으며, 두 가지 방법 중 홈페이지에서 권장하는 방법(Firebase Console 설정 워크플로 사용)으로 연동을 했다. Firebase 프로젝트 만들기 1. 안드로이드 앱에 연결할 Firebase 프로젝트를 만든다. 2. 프로젝트 이름을 지정하고, 약관에 동의한 뒤 다음 단계로 넘어간다. 3. 프로젝트에 대한 google 애널리틱스 솔루션과 약관에 동의한 뒤 프로젝트 생성을 완료한다. 프로젝트 만들기 완료! Firebase에 앱 등록 안드로이드 앱에서 Firebase를 사용하려면 Firebase 프로젝트에 앱을 등록(추가)해야한다. 프로젝트 개요 페이지 중앙에 있는 안드로이드 아이콘 또는 앱추..

상반기/서버 2021.06.05

[Android Studio] Web View

네비게이션 바 내부 이벤트 아이콘이 존재한다. 해당 아이콘을 눌렀을 때 식물원의 이벤트 웹 페이지로 이동할 수 있도록 하는 웹 뷰를 구현하였다. xml 창에는 다음과 같이 웹 뷰만 생성해주고, 나머지는 모두 java 창에서 구현한다. java 창에서 가장 먼저 웹뷰를 선언해주고, 이동할 url을 String에 담는다. private WebView webView; private String url = "https://www.sbg.or.kr/event/event.html?bun=4"; 아래 onCreate 메소드 안에 아래 코드를 추가해준다. 웹뷰를 띄울 수 있도록 설정해주는 코드이다. webView = (WeView) findViewById(R.idwebView); webView.getSettings()..

[Android Studio] Navigation View

봄 코스에 우측 상단에 꽃 아이콘을 추가하였다. 크기는 포토샵을 이용해서 50픽셀정도로 조정을 하였고, 그 이후 이미지 버튼과 연동하여 생성하였다. 아이콘을 눌렀을 때 네비게이션바가 나오도록 하였다. 네비게이션 바는 java파일 없이 xml파일로 추가를 하였고, 해당 xml파일은 기존 메인화면인 spring.java 파일과 연결을 해 주었다. spring.xml 파일 맨 아래쪽 추가를 해주었다. (flower_menu라는 네비게이션바 xml을 포함하겠다는 뜻이다.) 네비게이션바를 열고 닫는 것에 대한 내용은 자바 파일 onCreate 메소드 안에 구현하였다. 위 캡쳐 내용은 아래와 같다. flower_icon.setOnClickListener(new View.OnClickListener() { //flo..

[Android Studio] Custom Marker

마커는 onCreate메소드 내에 선언된다. 기존에는 안드로이드 스튜디오에서 기본 제공하는 블루핀과 레드핀을 사용하였다. 커스텀 마커를 생성하기 위해 사용될 이미지를 삽입해야한다. 사용할 아이콘의 png 파일을 먼저 저장후 복사한다. 다음 복사한 이미지를 안드로이드스튜디오 프로젝트 > res > drawable에 붙여넣는다. 이후 ~~drawable 클릭 후, 마지막으로 Refactor 버튼을 눌러준다. 다음과 같이 그림 파일이 drawable에 정상적으로 등록된 것을 확인할 수 있다. 두번째로는, 자바 코드부분을 작성해주어야한다. 기존 마커 타입을 기본제공 마커로 설정해두었는데, 다음과 같이 추가한 이미지를 불러와 마커로 사용할 수 있도록 변경한다. marker31.setMarkerType(MapPOI..