안드로이드 스튜디오 기초(3) — 뉴스 앱 만들기 1

참고 : 유투브 — 센치한 개발자

<기본 설정 및 기초 이해하기>

[1. 라이브러리 다운]

• 뉴스 앱을 만들기 위해 List 라는 화면을 사용하기 위해서는 https://developer.android.com/guide/topics/ui/layout/recyclerview 에 접속하여 지원 라이브러리를 추가한다.
• line 33–35를 추가해주면 된다.
• 우측 상단의 Sync now 를 눌러 동기화를 해준다.

[2. RecyclerView 컴포넌트 붙이기]

• activity_news.xml 파일에 layout을 추가한다.
• 이곳에 뉴스 앱 화면을 보여줄 것이다.

[3. 액티비티 클래스에 내용 구현하기]

• NewsActivity.java : activity_news.xml 와 매칭 될 액티비티를 새로 만든다.

• https://developer.android.com/guide/topics/ui/layout/recyclerview/#java 에서 코드를 긁어와서 NewsActivity 클래스 안에 붙여넣기 한다.
• line 38 : setAdapter() — 어댑터를 연결한다 .
• 빨간 줄이 뜨는 곳에 alt+enter 로 class 를 import 해 준다.

[4. 리스트에 사용할 어댑터(리스트의 항목들 제어) 붙이기]

• MyAdapter.java 를 새로 작성한다. 어댑터를 구현하는 클래스이며 어떠한 리스트들을 보여줄지 상세한 내용을 담는다.

• 빨간줄이 뜨는 것에 대해 alt+Enter 로 class 를 import 해준다.
• line 37 의 빨간줄이 없어지지 않는 이유 : RecyclerView를 보여주는 액티비티 xml과 각 줄별로 내용을 보여주는 레이아웃 xml 이 필요한데, 아직 후자의 xml 파일이 없기 때문이다.

[5. row_news.xml 작성]

• 그림 2와 같이 만들어보자.

• 그림 2에 들어갈 레이아웃을 위해 row_news.xml 파일을 새로 만들어 코드를 작성한다.
• ImageView와 TextView 를 이용한다.
• line 27 : 색상값 총 8자리 중 맨 앞자리 2자리는 투명도(16진수) 값이다.
• line 43 : ellipsize는 텍스트 내용이 많아서 정해진 칸을 넘어갈 때 “…” 을 사용함으로써 내용이 더 있다는 것을 나타내고자 할때 쓴다.

• line 37 : 레이아웃을 연결해준다. 위와 같이 row_news 로 수정하면 오류가 사라진다.
• line33~40 : row 한 줄에 해당하는 파일(row_news.xml) 을 연결시켰다.
• line 17~24 : 그 한 row 에 들어가는 요소(Text,Image..) 를 정의하는 것이다.
• MyViewHolder 클래스에서 findViewById() (하위 컴포넌트를 연결하기 위해 찾아가는 함수) 를 통해 하위 컴포넌트를 연결한다.

정리 : row_news.xml 이라는 전체 파일은 line 33–40의 onCreateViewHolder() 에서, 한개의 row 안에 들어가는 텍스트와 이미지는 line 20의 MyViewHolder() 에서 정의한다.

• line 45 : row_news.xml 의 최상위 뷰가 LinearLayout 이므로 수정
• line 46 — inflate : 특정한 컴포넌트(여기서는 리사이클러 뷰)의 특정 항목의 레이아웃을 바꾼다. (여기서는 액티비티에서 갖고 오는 뷰가 아님)

• 한 row 안의 요소들을 다루기 위해 변수 선언.
• findViewById 앞에 v. 을 붙인 이유는? => 부모 xml 뷰가 누군지 알 수 없으므로 명확하게 row_news.xml이 부모라고 지정한 것이다.
• line 26 : 뷰홀더 클래스가 받는 값을 TextView 에서 View 로 수정해준다.

참고 : 나중에 발견한 사실인데, 파일 명에 저렇게 빨간줄이 많이 뜨는 이유는 위 화면의 line 12 때문이다. line 12를 지우면 오류가 해결된다.

참고 : 뷰홀더 클래스는 메모리 관리와 성능 향상을 위해 안드로이드가 제공하는 클래스이다. (재활용 가능)

• line 25,26 : 리사이클러 뷰를 액티비티에서 불러서 activity_news 라는 액티비티를 만들었다. 거기에 리사이클러뷰를 연결했다.
• line 30 : 하나의 row 사이즈를 맞췄다.
• line 33,34 : manager을 달아줌.
• line 37 오류 해결 방법 : 아래와 같이 line 21에 코드 한 줄을 추가 해준다.

• line 39,40 : 아래 화면의 생성자로 값을 넘겨주는 역할을 한다. NewsActivity.java 를 계속 참조하면 메모리를 낭비할 수도 있고 화면이 사라질 수도 있기 때문에 아예 값을 넘겨 받아 이런 위험을 방지한다.

MyAdapter.java 파일 안의 생성자

• MyViewHolder 클래스는 mDataset의 크기(mDataset.length)만큼 반복을 하는데, 매 반복마다 mDataset에서 값을 꺼내어 매칭을 시켜준다. (by v.findViewById())
• 반복한 홀더를 바인딩 즉, 데이터를 셋팅하는 곳이 위 화면의 line 54 이다.
• row_news.xml 에 표시되는 내용들은 어디서 가져와야 하는 것일까? => Adapter 를 처음 설정 할 때 mDataset 변수에 값을 넣어줘야 여기서 가져올 수 있다. (mDataset 변수 : 각 row 마다 보여줄 값을 들고 있는 원본 데이터 변수)

• 그 값들을 여기에 넣어주면 화면상으로는 row_news.xml 에 나타나게 된다.

[중간 점검]

• line 12를 MainActivity 에서 NewsActivity로 바꾼 후 실행해보자.
• Sample1 이 튕겨서 종료되는 오류가 발생한다.

• activity_news.xml 파일의 line 8을 위와 같이 수정한 후 빌드해보자.

• mDataset을 {“1”, “2”} 로 두 개를 넘겨줬는데 1만 뜨는 오류가 발생했다.

• row_news.xml 파일의 line 4를 match_parent 에서 wrap_content 로 변경해주면 정상적으로 실행됨을 확인할 수 있다.