오늘은 하루종일 커스텀 키보드의 토글 버튼 기능을 구현했다. 이 작업이 굉장히 복잡해서 하루종일 머리를 싸매면서 만들었다. 오늘 구현한 것은 토글 버튼에 색을 입히고, 코드 구성 변수에 따라 토글 버튼 상태를 조정하는 일이었다. 최종 결과는 아래 사진과 같다. 색이 굉장히 알록달록해졌다ㅎㅎ 기존 키보드 배경색이 너무 진한 것 같아서 버튼의 색을 강조하기 위해 색을 연하게 바꾸었다. 그리고 선택된 버튼들은 같은 종류끼리 같은색을 가지도록 하였다. (이게 제일 힘들었다.. 코드가 복잡해진 요인 1순위) 위 키보드가 나타내는 코드는 Cm7(#13)add4/G# 이라는 굉장히.. 이상한 코드이다 ㅋㅋ 이걸 구현할 때 제일 힘들었던 부분은 코드 타입을 정하는 부분이었다. 특히 저 '숫자'가 들어가는 부분이 구현하..

오늘은 하루종일 코드 줄넘김/줄넘김 취소 기능을 구현하고, 커스텀 키보드 디자인을 구상하고 구현하는데 집중했다. 아직 커스텀 키보드의 구현과 구상은 100% 완료되지 않았다. 오늘의 프로젝트 진행과정을 자세하게 정리해보고자 한다. 코드 줄넘김 / 줄넘김 취소 기능 구현 코드 줄넘김 / 줄넘김 취소 기능이라고만 하면 와닿지가 않을 것이다. 텍스트를 입력할 때 '엔터키'를 생각하면 된다. 이렇게 텍스트로 코드를 입력한 상태라고 생각해보자. 현재 커서는 사진에 보아는 대로 Em7 앞에 가있다. 이 상태에서 엔터키를 누르면 이렇게 코드가 한 줄 아래로 이동하며, 뒤따른 코드들이 모두 아래로 이동한다. 지금 이건 텍스트로 되어있기 때문에 알아서 편리하게 구현이 되지만 이걸 코드셀 객체에 대해서 구현해야한다. 스택..

이전 포스팅까지 작업한 결과로 새 악보를 만드는 화면을 띄우는 것까지 만들었다. 이제 새 악보를 만드는 화면에서 악보를 편집하는 기능을 추가하고자 한다. 앱 디자인 구상 및 '커스텀 탭 뷰' 적용 우선 악보추가 기능 만들기 (1) 포스팅에서 다뤘던 내용을 그대로 구현하되, 기능을 추가하기로 했다. 대부분의 노래는 verse와 chorus가 반복되는 구조이다. 보통 나오는 구조는 다음과 같다. verse1 - chorus1 - verse2 - chorus2 - bridge - chorus3 이때 보통 verse끼리, 그리고 chorus끼리는 코드가 겹치는 경우가 많지만, verse와 chorus의 코드가 겹치기도 한다. 만약 이런 구조의 코드 악보를 그린다면 똑같은 코드진행을 계속 반복해서 그려야만 한다...

지난 번엔 플러터로 내가 만든 서버와 앱을 연결하여 DB에서 테스트로 데이터를 하나만 가져와서 표기해보았다. 이번에는 테스트로 가져온 데이터 리스트를 ListView에 담아 보기 좋게 정렬하고, 핸드폰의 UI를 조작하여 새로운 악보를 DB에 원격으로 추가하도록 하였다. 이때 DB조작을 위해 사용한 코드가 기존코드와 달라서 조금 애를 먹었다. 백엔드에서 사용하는 코드도 조금 수정해야 했다. 우선 앱의 메인 코드는 다음과 같다. class _MainFrameState extends State { var _selectedIndex = 0; List _bodyWidgets = [ SearchSheet(), Text("1"), Text("2"), ]; List _appBarWidgets = [ AppBar( ti..

프로젝트를 플러터로 이전하기로 마음먹었다. 그 이유는 책을 보면서 안드로이드 네이티브개발을 하는데 많은 어려움을 느꼈기 때문이다. 1. intent, context 등 아직은 이해가 되지 않는 모호한 개념들 2. 내가 원하는대로 디자인이 되지 않는 뷰 UI 3. xml파일과 java 파일의 별도 관리의 복잡함 특히 2번이 제일 답답했다. 내가 원하는대로 디자인이 되지 않는 부분에서 제일 스트레스를 받았다. 색을 설정해도 색상이 입혀지지 않거나, 안드로이드 스튜디오에서 보는 모습과 실제로 나온 앱이 다르게 나오는 경우도 있었다. 그렇게 '악보 뷰어 페이지'를 만들다가 1학기가 개강하면서 안드로이드 공부도 손을 놓게 되었다. 2학년 1학기가 종강하고 집에 있던 flutter 책을 한번 읽어보기로 했다. 그리..

개인적으로 구상에 가장 많은 시간을 쏟았던 부분이다. 지난 포스팅이후로 지금 포스팅을 쓰는 시점까지 계속 구상만 했다.. 처음에 UI를 참고하려고 했던 어플리케이션은 Chordify 라는 앱이다. 박자칸을 나눠두고 각각의 칸에 코드를 적어둔다. 노래가 나오면 노래에 맞게 박자가 이동하며 코드가 적혀있는 칸의 배경이 바뀐다. 이 앱의 단점은 몇가지가 있다. 사실 지금 만드는 앱을 구상하게된 계기이기도 하다 1. 유튜브 음원으로부터 추출한 코드의 정확도가 떨어진다. 2. 코드가 단순하다. 3. 박자가 단순하다. 4. 코드와 박자를 수정할 수 없다. 그래서 맨 처음 생각한 것은 1. 음원에서 추출하지 말고 집단지성을 이용하자. 2. 더 복잡한 코드를 입력할 수 있게 하자. 3. 더 복잡한 박자에 맞게 입력할 ..

악보의 세부 내용을 입력받기 전에 간단하게 검색부터 후딱 구현해보았다. 우선 검색 버튼의 이벤트를 읽어올 리스너를 달아주고, 검색 이벤트가 발생했을 때 검색을 수행할 코드를 작성하였다. @Override public void onCreateOptionsMenu(@NonNull Menu menu, @NonNull MenuInflater inflater) { super.onCreateOptionsMenu(menu, inflater); inflater.inflate(R.menu.menu_tab_sheet, menu); mSearch = menu.findItem(R.id.tab_sheet_top_search); SearchView searchView = (SearchView)mSearch.getActionVie..

이제 본격적으로 악보를 추가하고, 현재 DB에 존재하는 악보를 조회하는 기능을 추가하고자 한다. 2번째 포스팅에서 테스트했던 내용을 실제 기능으로 옮기는 것으로 볼 수 있다. 우선 데이터를 추가하기 위해 상단 액션바에 검색버튼과 추가 버튼을 넣어주었다. 검색 아이콘과 추가 버튼 아이콘을 어떻게 가져올까 고민하다가 검색의 경우 안드로이드에서 기본으로 제공하는 기능을 쓰기로 했다. 팔레트에 이렇게 'Search Item' 이 있다. 이 아이템을 활용하면 검색 아이콘이 자동으로 만들어지고, 검색 아이콘을 클릭하면 상단바에 검색창이 생성된다. 검색창에 검색어를 입력하고 키보드의 돋보기 아이콘을 누르면 검색이 된다. 상단 액션바의 메뉴 리소스로 들어간 xml 코드이다. 아이콘의 경우 안드로이드에서 기본으로 제공하..

학교 수업이 끝나고 저녁을 먹고나서부터 5시간을 넘게 씨름한 끝에 첫번째 탭에 프래그먼트를 넣고, 프래그먼트에 리사이클러 뷰를 넣는 것을 성공했다. Do It 안드로이드 프로그래밍의 예제 코드를 거의 베끼다시피해서 만든 앱이지만, 익숙해지면 혼자서도 곧 만들 수 있을 것 같다. 리사이클러 뷰에는 카드뷰를 활용해 앨범아트, 노래제목, 가수 3가지의 정보를 저장하도록 하였다. 나중에는 노래의 원키를 같이 저장하는 것을 고려중이다. 첫번째 악보탭의 xml 코드는 다음과 같이 바뀌었다. 프레임 레이아웃을 틀로하여 프래그먼트를 동적으로 생성하여 넣도록 하였다. 이 코드는 첫번째 탭에 들어가는 리사이클러 뷰의 xml 코드이다. package com.everdu.chordshare; import androidx.an..

전에 샀던 Do It 안드로이드 프로그래밍 책 내용과 인터넷을 검색하면서 공부한 내용을 토대로 버텀 네비게이션을 추가하였다. activity_main.xml 파일 코드는 다음과 같이 하였고, 하단 탭은 단순하게 '악보, 그룹, 마이페이지' 3개로 나누었다. 악보 탭에서는 악보의 작성과 검색을 할 수 있도록 만들고 그룹 탭에서는 같은 악보집을 공유할 유저들의 그룹을 만들 수 있고 마이페에지 탭에서는 내 정보와 내가 담은 악보, 나만의 악보집을 관리할 수 있도록 할 예정이다. 그래서 res/menu 폴더에 들어있는 bottom_nav_menu.xml 파일의 코드는 다음과 같다. 아래는 현재까지의 코드를 적용했을 때의 실행결과이다. 하단 탭이 선택되지 않았을 때는 정보를 알 수 없다는 점, 하단 탭에 아이콘이..