TIL : 스파르타코딩 Android 과정 7기

주의점

• 매일 : TIL : today I learned 작성하기
• github에 issue 꼼꼼히 쓰기
• 주석 잘 적어 넣기

학습 목적 :

1. Android 입문 학습에 이어 드디어 숙련주차가 시작됩니다. 2주동안 Android 앱개발 입문 학습을 바탕으로 개인과제와 팀 프로젝트를 완료함으로써 우리는 이제 막 숙련 학습을 위한 첫 허들을 넘었습니다. 든든한 기초 체력을 이용해서 앱개발 숙련주차도 섭렵해보도록 합시다!
2. 앱개발 과정은 총 3가지(입문/숙련/심화)로 구성되어 있습니다. 그 중 우리는 이제 절반 왔습니다. 숙련 주차를 시작하게 되는 것이에요!
3. 앱개발 숙련 과정을 통해서는 Android의 뷰바인딩과 어댑터뷰, 프래그먼트 등에 대해 배우게 됩니다.
4. 숙련 과정에서 프래그먼트와 액티비티의 차이와 생명주기를 이해하고 다뤄보며 지식과 경험을 쌓습니다.

학습 목표 :

• 뷰바인딩에 대해 이해하고 findViewById와의 차이점을 설명할 수 있습니다.
• 어댑터 뷰의 기본 개념 및 종류를 이해하고 리스트 뷰와 그리드 뷰의 설정 방법을 이해한다.
• 커스텀 항목 뷰를 정의하는 방법을 이해하고 RecyclerView를 사용하는 방법을 이해한다.
• 프래그먼트의 기본개념 및 프래그먼트 생명주기를 이해한다.
• 태블릿용 및 스마트폰용 디바이스에서 프래그먼트를 재 사용할 수 있는 방법을 실습한다.
• 다이얼로그가 무엇인지 알고 구조에 대해 이해했습니다.
• 알림을 생성하고 중요도 순서를 이해했습니다

오늘 계획 :

• 오전

  • 09:00 ~ 09:40 : 오늘 계획 확인하기 + 팀 회의
    • 오늘 계획 (Task)
      • 팀 회의 : 데일리 스크럼
      • 알고리즘 문제 1개 풀기
      • 앱 개발 숙련 : 강의 듣기
      • 개인과제 작성하기
      • TIL 작성하기
      • 팀 회의 : 마무리 회고 진행
  • 09:40 ~ 10:00 : 알고리즘 문제 풀기
    • 문제 1 : 캐릭터의 좌표
  • 10:00 ~ 12:00 : 앱 개발 숙련 강의 듣기

• 집중 코딩

  • 13:00 ~ 18:00 : 앱 개발 숙련 개인 과제
    • 사과 마켓 만들기
      • 메인 페이지
        • 뒤로가기(BACK)버튼 클릭시 종료하시겠습니까? [확인][취소] 다이얼로그
        • 상품 이미지는 모서리를 라운드 처리
        • 상품 이름은 최대 두 줄이고, 그래도 넘어가면 뒷 부분에 …으로 처리
        • 상단 종모양 아이콘을 누르면 Notification을 생성
        • 상품 아이템들 사이에 회색 라인을 추가
      • 상세 페이지
        • 하단 가격표시 레이아웃을 제외하고 전체화면 스크롤
        • 상단 < 버튼을 누르면 상세 화면은 종료되고 메인화면 전환

• 저녁

  • 19:00 ~ 20:30 : TIL 작성하기 & 노션 정리하기
    • TIL 작성하기
  • 20:30 ~ 21:00 : 마무리 회고 진행
    • 팀 회의 : 마무리 회고 진행 : 코딩룰

사용 기능 :

//줄 수 제한
android:maxLines="2"
//말 줄임표
android:ellipsize="end"

//회색 구분선 추가
binding.recyclerViewMain.addItemDecoration(DividerItemDecoration(this, 1))

알고리즘 :

//캐릭터의 좌표
class Solution {
    fun solution(keyinput: Array<String>, board: IntArray): IntArray {
        var answer: IntArray = intArrayOf()

        var x = 0
        var y = 0

        for(i in keyinput){
            when(i){
                "right" -> if(x < board[0]/2)x++else x=board[0]/2
                "left" -> if(x > -board[0]/2)x--else x= -board[0]/2
                "up" -> if(y < board[1]/2)y++else y= board[1]/2
                "down" -> if(y > -board[1]/2)y-- else y=-board[1]/2
            }
        }
        answer = answer.plus(x)
        answer = answer.plus(y)
        return answer
    }
}

팀(or 개인) 프로젝트 :

앱 개발 숙련 : 개인 과제 : 사과 마켓 만들기

메인 페이지 만들기

• 디자인 및 화면 구성을 최대한 동일하게 해주세요. (사이즈 및 여백도 최대한 맞춰주세요.) ✨
• 상품 데이터는 아래 dummy data 를 사용합니다. (더미 데이터는 자유롭게 추가 및 수정 가능)
• 데미데이터 : 이미지 링크, 상품 리스트 링크
• RecyclerViewer를 이용해 리스트 화면을 만들어주세요.
• 상단 툴바를 제거하고 풀스크린 화면으로 세팅해주세요. (statusbar는 남기고)
• 상품 이미지는 모서리를 라운드 처리해주세요.
• 상품 이름은 최대 두 줄이고, 그래도 넘어가면 뒷 부분에 …으로 처리해주세요.
• 뒤로가기(BACK)버튼 클릭시 종료하시겠습니까? [확인][취소] 다이얼로그를 띄워주세요. (예시 비디오 참고)
• 상단 종모양 아이콘을 누르면 Notification을 생성해 주세요. (예시 비디오 참고)
• 상품 가격은 1000단위로 콤마(,) 처리해주세요.
• 상품 아이템들 사이에 회색 라인을 추가해서 구분해주세요.
• 상품 선택시 아래 상품 상세 페이지로 이동합니다.
• 상품 상세페이지 이동시 intent로 객체를 전달합니다. (Parcelize 사용)

상세 페이지 만들기

• 디자인 및 화면 구성을 최대한 동일하게 해주세요. (사이즈 및 여백도 최대한 맞춰주세요.) ✨
• 메인화면에서 전달받은 데이터로 판매자, 주소, 아이템, 글내용, 가격등을 화면에 표시합니다.
• 하단 가격표시 레이아웃을 제외하고 전체화면은 스크롤이 되어야합니다. (예시 비디오 참고)
• 상단 < 버튼을 누르면 상세 화면은 종료되고 메인화면으로 돌아갑니다.

선택 과제

1. 스크롤 상단 이동!

• 스크롤을 최상단으로 이동시키는 플로팅 버튼 기능 추가
• 플로팅 버튼은 스크롤을 아래로 내릴 때 나타나며, 스크롤이 최상단일때 사라집니다.
• 플로팅 버튼을 누르면 스크롤을 최상단으로 이동시킵니다.
• 플로팅 버튼은 나타나고 사라질때 fade 효과가 있습니다.
• 플로팅 버튼을 클릭하면(pressed) 아이콘 색이 변경됩니다.

2. 상품 삭제하기!

• 상품을 롱클릭 했을때 삭제 여부를 묻는 다이얼로그를 띄우고
• 확인을 선택시 해당 항목을 삭제하고 리스트를 업데이트한다.
• 해당 상품이 삭제되었는지 확인!!

3. [찐도전과제] 좋아요 처리!! ← 많은 고민이 필요합니다.*

• 상품 상세 화면에서 좋아요 선택시 아이콘 변경 및 Snackbar 메세지 표시
• 메인 화면으로 돌아오면 해당 상품에 좋아요 표시 및 좋아요 카운트 +1
• 상세 화면에서 좋아요 해제시 이전 상태로 되돌림

후발대 과제 :

목표: 두 개의 Fragment를 사용하여 간단한 뉴스 리더 앱을 만들기

기간 : 9월 7일 오전 10시까지

1. TitleFragment: 여러 뉴스 기사의 제목을 표시하는 리스트를 포함하고 있습니다.
2. DetailFragment: 사용자가 TitleFragment에서 기사 제목을 클릭하면 해당 기사의 내용을 표시합니다.

세부 사항:

1. MainActivity에는 두 개의 Fragment를 호스팅하는 레이아웃이 포함되어야 합니다.
   • 화면이 세로 방향일 때는 TitleFragment만 표시되며, 기사 제목을 클릭하면 DetailFragment로 교체되어야 합니다.
     • 추가 선택과제
       • 화면이 가로 방향일 때는 TitleFragment와 DetailFragment가 동시에 표시되어야 합니다.
2. TitleFragment:
   • RecyclerView를 사용하여 기사 제목을 표시하세요.
   • 기사 제목을 클릭하면 해당 기사의 세부 내용을 DetailFragment에서 표시해야 합니다.
     • 추가 선택
       • Bundle을 통해 DetailFragment 에 기사 데이터 전달
3. DetailFragment:
   • 전달받은 기사의 세부 내용을 TextView에 표시하세요.
4. 기사의 제목 및 내용은 임의로 설정하거나, 더미 데이터를 사용하세요.

아쉬운 점 or 앞으로의 계획 :

개인과제 마무리