만화 사이트 안드로이드 어플 #2

on

일단 새프로젝트를 만듭시다. 저는 Android_Manga_Test로 했습니다.

일단 우리는 슬라이드메뉴를 넣을 예정이니

스크린샷 2015-12-16 오전 1.05.04.png여기서 밑에서 오른쪽 2번째에 있는 Navigation Drawer 을 클릭하시고 만들어 주시면 됩니다.  그러면 간단하게 슬라이드 바가 있는 메뉴를 만들게 됩니다. 사실 요즘 필요한 대부분의 뷰는 이 프로젝트 만드는 곳에서 쉽게 알수 있습니다. 예를 들어 탭을 생각해 보죠. 옛날에는 Tab을 만들려면 탭호스트라는 것을 쓰고 되게 불편하고 힘들게 만들었는데 요즘은 이 프로젝트화면에서 3번째 줄을 보면 탭이 있는데 그걸로 만들면 됩니다. 중요한건 더 코드가 간결해 지고 보기 쉽고 쉬워졌다는 거죠. 안드로이드는 워낙 업데이트 속도가 빠르기 때문에(물론 더빠른 것도 있지만) 2~3년전 자료는 이미 낡은 자료가 되죠. 이 슬라이드메뉴도 검색하시면 이상한 뭘 설치해서 그걸 import해서 어떻게 해야한다고 되어있는데 요즘은 쉬운방법이 많습니다. 혹시 검색하더라도 구글 검색기능을 이용하여 기간을 1년이내로 잡고 검색하는걸 추천드려요. 요즘은 왠만하며 다 쉬운 방법이 있습니다. 이야기가 길어졌네요.

대충 코드를 보면

스크린샷 2015-12-16 오전 1.18.17

처음은 이부분. 이 액티비티가 실행될때 실행되는 곳 입니다. 액티비티의 개념은 검색해 보시면 알겠지만 간단하게 프로그램이 실행되는 단위입니다. (검색하는 걸 추천드려요. 제 포스티은 기본 개념 설명은 잘 하지 않습니다. 하지만 기본 개념은 매우 중요하고 제가 쓴글 <<<<< 검색해서 나오는 좋은글들 이기 때문이지요.) 대충 보면 setContentView를 통해 이 액티비티의 뷰를 설정합니다. res의 layout 폴더의 activity_main을 보시면 나와 있습니다. 그리고 툴바를 설정합니다.(위의 헤더입니다) 그리고 그걸 actionBar로 설정. 그뒤 fab을 만들고 클릭시 어떤 일을 할지 onClick으로 설정. 그리고 DrawerLayout(사이드바)를 drawer에 할당. toggle을 만들어서 actionbar에 설정. 그뒤 drawer를 toggle과 연결.(toggle을 클릭시 사이드바가 나오는 걸) 그리고 NavigationView를 만들고 클릭시 리스너를 줌.

제가 써도 잘 모르겠네요. 소스코드 보는편이 더 쉬울거 같아요. 안드로이드 개발을 처음 시작하였다면 그냥 제가 코드를 쓰는것을 보고 따라하기만 하세요. 이게 무엇을 뜻하는 지는 적당히 하다보면 알게 됩니다. 그리고 이미 이름이 꽤 명확하기 때문에 처음봐도 이게 무엇을 뜻하는지 알것입니다(익숙해진다면). 처음이라면 그냥 그러려니 하세요. (Class의 기본개념(상속, Override 등)을 모르신다면 Java 와 class를 대충 공부하고 오시길 바랍니다. 아예 모르면 코드를 백날봐도 힘들 수 있어요)스크린샷 2015-12-16 오전 1.18.30

옵션버튼을 만드는 거죠.

스크린샷 2015-12-16 오전 1.18.25

뒤로가기 버튼을 눌렀을때 무슨일을 하는가. 여기서는 사이드바가 나와있을시에는 사이드바를 넣는것을 뒤로가기로 하였네요. 그리고 닫혀있을 경우에는 일반적인 백버튼으로 만듭니다. 스크린샷 2015-12-16 오전 1.18.34

옵션버튼을 눌럿을때 무슨 버튼인지 id에 할당. 그리고 비교. 지금은 아무 것도 의미 없지만 나중에 혹시 쓸일이 있을 수도 있습니다

스크린샷 2015-12-16 오전 1.18.39

그리고 옆에 사이드바 버튼을 클릭했을시 어떤일이 발생할지 입니다.

그러면 이 것들은 어디에 설정 되어 있느냐. 바로 res폴더입니다.

스크린샷 2015-12-16 오전 1.33.14.png

activity_main 을 보시면(밑의 design이 아니라 text로 설정하여서) drawerLayout 안에 일단 app_bar_main을 include 합니다. 그리고 그 뒤에 NavigationView를 넣습니다. 즉 app_bar_main이 우리가 일반적으로 보는 화면이고 거기에 NavigationView(사이드바)를 넣는거죠.( 역시 기본 템플릿은 모듈화가 잘 되어 있습니다.) 그리고 NavigationView를 잘 보시면 header는 nav_header_main에 menu는 @menu/activity_main_drawer 로 할당되어 있습니다. header를 보면 사이드 바의 헤더가 있고 menu폴더의 activity_main_drawer을 보시면 버튼등이 들어가 있는 것을 보실 수 있습니다.

처음이라면 이것저것 만지면서 무엇이 어떤 작용을 하는지 알아 보는게 편할 것 같습니다.

장시시 만화 메뉴부터 차근차근 만들도록 합시다. 기본은 사이트에 request를 주어서 값을 받은 뒤에 그것을 토대로 다시 파싱을 한뒤에 적당히 뷰에 뿌려주면 될 것 같습니다.

일단 만들기 전에 Fragment의 개념을 알고 넘어 가야 합니다. 좋은글 이 있지만 그래도 좀더 검색한뒤 Fragment와 Activity가 무엇이 다른지 알고 오시길 바랍니다. 우리는 별로 무거운 일도 안하고 좀 더 좋은 UI를 위해서 최대한 Activity의 사용을 줄이고 Fragment 을 이용하여 만들도록 하겠습니다. 그러면 mainActivity가 있는곳에 ZangListFragment 를 만들도록 합시다.(Fragment입니다)

왠만한건 다 지우고

스크린샷 2015-12-16 오전 1.52.34.png

이정도만 남겨 주기로 합시다. 일단 인터넷으로 통신을 하고 그 정보를 받아오는 게 가장 중요합니다. 그러기 위해서 우리는 volley 라는 것을 사용하도록 합니다. 기본적으로 안드로이드가 http 통신을 하기 위해서 사용하는 라이브러리는 이것저것 많지만 volley가 가장 나은 것 같습니다.(volley에 대해 무엇인지 검색해보세요)

volley 를 추가합시다. 간단합니다. gradle에 스크린샷 2015-12-17 오전 2.50.39.png

밑의 com.mcxiaoke.volley:library:1.0.19를 추가해주시면 됩니다. 그후 sync now를 해주시면 volley가 추가됩니다. gradle을 통해 여러가지 라이브러리를 import 하는것이 가능하고, 훨씬 알아보기 쉬우니 되도록이면 라이브러리는 gradle을 통해 관리합시다. 그후에 적당히스크린샷 2015-12-17 오전 2.52.33.png

이렇게 적으시면 됩니다.

스크린샷 2015-12-17 오전 2.55.24.png스크린샷 2015-12-17 오전 2.55.41.png

volley가 request를 큐로 저장하여 처리한다는것. 그래서 우리는 그 queue에 새로운 request를 넣는다는것. 지금은 stringRequest를 하였지만(html로 값을 받기때문에) 만약 요청하여 받는 값이 json이라면 JSONObjectRequest로 한뒤 Response.Listener<JSONObject>라고 하면 되겠지요.  일단 이런식으로 한다면 htmlSource에는 zangsisi.net의 html이 들어있게 됩니다. git 2-1 입니다.

이제 이 zangListFragment를 실행하고 싶지만 우리는 아직 mainActivity에서 Fragment로 넘어가는 것을 하지 않았습니다. 그려면 적당히 처음 실행할때 zangListFragment를 실행하도록 만들겠습니다.

스크린샷 2015-12-18 오후 4.47.25.png

일단 app_bar_main.xml 에 있는 layoutt/contentmain이 있는 부분을

스크린샷 2015-12-18 오후 4.50.26.png

이렇게 바꿉니다. 이로써 우리는 저 부분을 include(정적) 이 아니라 변수(동적)으로 넣을 수 있습니다. 이제 저 FrameLayout의 ID(contents)를 통해 fragment_zang_list.xml 를 저 부분에 넣어 보겠습니다.

스크린샷 2015-12-18 오후 4.59.24.png

일단 onCreate 위에 Fragment와 FragmentTransaction을 전역으로 선언. 그 뒤에 fragement에 이미 무언가가 있을 경우에는(나중에 fragement들을 사이를 전환할 경우 필요) 그대로  만약 fragmetn가 null(즉 지금 fragment가 설정된게 없다(처음 시작했다)) 의 경우에는 fragment에 우리가 만든 ZangListFragment를 설정한뒤, fragmentTranscation을 통해 프래그먼트를 이동시킴. 지금은 봐도 잘 모를 수 있지만 저런식으로 프래그먼트들을 이동시킨다 라고 생각하면 됩니다. 만약 이걸 실행하면 ZangListFragment가 MainActiviy에 의해 실행이 되고 ZangListFragment 안에 있는 CreateView를 통해 설정된 return값이 FrameLayout에 보여지게 됩니다.

스크린샷 2015-12-18 오후 5.04.49.png

여기서는 view를 return하고 view는 위에서 설정한 fragment_zang_list.xml(inflate 를 통해 가져온다고 생각하면 됩니다)에 입니다.  한번 실행해보시면 어떤느낌인지 알게 될 것입니다. 여기까지가 git 2-2입니다.

지금 실행하면 아마 실행이 안될것 입니다. 이유는 아직 우리는 어플에 인터넷접속 권한을 주지 않았기 때문이죠. 안드로이드 어플은 각각의 권한에 대해서 따로 명시를 해줘어야만이 기능을 사용할 수 있습니다. 우리가 현재 인터넷에 연결하는 권한이 필요하니 그 기능을 추가합니다.

일단 폴더트리에서 manifests 를 들어갑니다. 그후에

스크린샷 2015-12-19 오후 8.03.21.png

인터넷 권한을 추가하여 줍니다.

스크린샷 2015-12-19 오후 8.04.05.png

혹시 나중에 다른 권한이 필요하다면 여기서 추가하면 됩니다. 하지만 지금 실행해도 되는지 안되는지 잘 모를실겁니다. 그래서 일단 fragment_zang_list.xml에 있는 TextView에 ID를 추가

스크린샷 2015-12-19 오후 8.05.01.png

저는 textZang을 추가하였습니다. 그뒤에

스크린샷 2015-12-19 오후 8.05.53.png

TextView를 선언

스크린샷 2015-12-19 오후 8.06.14.png

view안에서 id가 textZang인 TextView를 찾아서 할당.

그뒤에 스크린샷 2015-12-19 오후 8.06.47.png

우리가 저장한 htmlSource를 TextView에 set한뒤 실행을 하면 zangsisi.net의 html소스를 볼 수 있을 것 입니다. 이제 #3에서는 이 html를 파싱하여서 클래스를 만들어서 저장한뒤 그것을 예쁘게 보여주는 것을 하도록 하겠습니다.

Advertisements

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중