🐥 we are EARLY-BUDDY-ANDROID

얼리버디 - 약속시간을 위한 나만의 대중교통 배차 알리미

SOPT 25기 Appjam '얼리버디'

프로젝트 기간 2019.12 ~ 진행중

김예진 김찬영 최예원 양시연

Workflow

적용 라이브러리

//리사이클러뷰 라이브러리
implementation 'androidx.recyclerview:recyclerview:1.1.0-alpha06'

//Retrofit 라이브러리 : https://github.com/square/retrofit
implementation 'com.squareup.retrofit2:retrofit:2.6.2'
//Retrofit 라이브러리 응답으로 가짜 객체를 만들기 위해
implementation 'com.squareup.retrofit2:retrofit-mock:2.6.2'

//객체 시리얼라이즈를 위한 Gson 라이브러리 : https://github.com/google/gson
implementation 'com.google.code.gson:gson:2.8.6'
//Retrofit 에서 Gson 을 사용하기 위한 라이브러리
implementation 'com.squareup.retrofit2:converter-gson:2.6.2'

//이미지 로드를 위해 glide 라이브러리 : https://github.com/bumptech/glide
implementation 'com.github.bumptech.glide:glide:4.10.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.10.0'

//constraint Layout 사용을 위한 라이브러리
implementation 'com.android.support.constraint:constraint-layout:1.1.3'

//Lottie Library
implementation 'com.airbnb.android:lottie:3.2.2'

//google map
implementation 'com.google.android.gms:play-services-maps:17.0.0'
implementation 'com.google.android.gms:play-services-location:17.0.0'

// fcm - firebase를 이용해 알림 구현 라이브러리
implementation 'com.google.firebase:firebase-core:16.0.6'	// 애널리틱스(기본)
implementation 'com.google.firebase:firebase-messaging:17.3.4'	// 클라우드 메시징

프로그램 구조

data,feature,network,util

1. data

calendar : 달력
db : sharedPreference
place : 주소
route : 경로
schedule : 일정
user : 회원

2. feature

calendar : 달력
home : 홈 화면
initial_join : 최초가입
intercepter : header 추가 intercepter
place : 장소
- search : 장소 검색
- select : 자주 가는 장소 선택
route : 세로 경로
schedule : 일정
user : 유저(로그인,회원가입)

3. network : 통신

4. util : 애니메이션

주요 기능 (현재까지 진행한 사항)

0. 스플래쉬

Lottie 애니메이션 적용

activity_splash.xml

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/act_splash_av"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="fitXY"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:lottie_autoPlay="true"
        app:lottie_fileName="splash.json"/>

1. 최초가입(로그인,회원가입,닉네임, 자주가는 장소 등록)

TextWatcher 사용해서 예외처리 및 버튼활성화. ex) 중복확인, 특정문자 제한, 글자수 제한, 활성화 비활성화 버튼색상 변경

PlaceSearchActivity.kt

 act_place_search_et_search.addTextChangedListener(object : TextWatcher {
        override fun afterTextChanged(p0: Editable?) {

        }

        override fun beforeTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {

        }

          override fun onTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
              //통신
              getPlaceSearch()
              Log.d("testtest", "onTextChanged")
          }
      })

회원가입

SignupActivity

private fun passwordCheck() {
      act_signup_et_pw.addTextChangedListener(object : TextWatcher {
          override fun afterTextChanged(p0: Editable?) {
              if ((p0!!.length < 6) || !(pwdPattern.matcher(act_signup_et_pw.text.toString()).matches())) {
                  act_signup_tv_pw_ment.showOrInvisible(true)
  
                  act_signup_cl_pw.setBackgroundResource(R.drawable.act_signup_round_rect_red)
                  act_signup_et_pw.setTextColor(
                      ContextCompat.getColor(
                          this@SignupActivity,
                          R.color.black
                      )
                  )
                  act_signup_cl_join.setBackgroundResource(R.drawable.act_place_round_rect_gray_full)
                  pwFlag = false
              } else {
                  act_signup_tv_pw_ment.showOrInvisible(false)
                  act_signup_cl_pw.setBackgroundResource(R.drawable.act_signup_round_rect_blue)
                  act_signup_et_pw.setTextColor(
                      ContextCompat.getColor(
                          this@SignupActivity,
                          R.color.black
                      )
                  )
  
                  if(!act_signup_et_pw.text.toString().equals(act_signup_et_pw_check.text.toString())) {
                      act_signup_tv_pw_check_ment.showOrInvisible(true)
                      act_signup_cl_pw_check.setBackgroundResource(R.drawable.act_signup_round_rect_red)
                      act_signup_cl_join.setBackgroundResource(R.drawable.act_place_round_rect_gray_full)
                      pwCheckFlag = false
                  }
                  pwFlag = true
              }
          }
  
          override fun beforeTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
  
          }
  
          override fun onTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
  
          }
      })
  }

ReCyclerView로 장소 검색 통신 전 더미데이터
Custom dialog를 직접 구현하여 사용자가 선택한 사항을 뷰에 반영
ConstraintLayout안에 TextView, EditText 구현
kotlin extension을 이용하여 layout 파일의 객체의 참조 얻어오기
kotlin의 람다식을 사용한 click 이벤트 구현
하나라도 입력하지 않은 항목이 있을 경우 Toast 메시지 띄우기

2. 세로 경로

출발지에서 목적지로 가는 세로 경로를 보여주는 뷰 제작. 경유 정류장 표시하기 위해 리사이클러뷰 안에 리사이클러뷰 제작
지하철 경로(18개) 와 버스 경로(10개) 의 다양한 경우의 수로 인한 internal constructor 생성
internal constructor 로 인한 코드 줄임
세로 경로 뷰 서버와의 retroifit 라이브러리를 이용해 통신 완료
두개의 data class 를 받는 두개의 adapter,viewHolder 생성
when 을 통한 람다식 적용

when (holder.itemViewType) {
                    //지하철
                    1 -> {
                        holder.direction.text = String.format("%s 방면", routeList[position].way)
                        holder.startingText.text =
                            String.format("%s역", routeList[position].startName)
                        holder.endText.text = String.format("%s역", routeList[position].endName)

                    }
                    //버스
                    2 -> {
                        holder.ridingNumber.text =
                            String.format("%s", routeList[position].lane.busNo)
                        holder.startingText.text =
                            String.format("%s", routeList[position].startName)
                        holder.endText.text = String.format("%s", routeList[position].endName)
                        holder.direction.text = "방향을 주의하고 탑승하세요"
                    }
    
                }

with 람다식 사용

//경로데이터 넣기
    fun setRouteItem(newRouteList: ArrayList<SubPath>) {
        with(routeList) {
            clear()
            addAll(newRouteList)
        }
        notifyDataSetChanged()
    }

3. 가로경로

소요시간을 bar로 보여주는 가로경로 뷰 그리기

<타야하는 교통 수단의 갯수와 소요 시간에 따라 동적으로 달라지는 기능>

nine-patch를 이용해 경로 이미지에서 늘리고 싶은 부분만 선택하여 조절 가능
LinearLayout에 horizental로 경로 바를 배치하고 weight로 길이 조정
backgroundTint로 각 경로 바의 색깔을 해당 호선의 색깔로 변경
가로 경로 뷰 서버와의 retroifit 라이브러리를 이용해 통신 완료
- Item_list_place_search_route.xml

  <RelativeLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_marginTop="20dp">

          <RelativeLayout
              android:id="@+id/act_schedule_route_rl_gray"
              android:layout_width="match_parent"
              android:layout_height="wrap_content">
              <ImageView
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:background="@drawable/img_gray_line"/>
      
          </RelativeLayout>
      
          <LinearLayout
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_marginHorizontal="18dp"
              android:orientation="horizontal">
      
              <RelativeLayout
                  android:id="@+id/act_schedule_route_rl_walk_1"
                  android:layout_width="0dp"
                  android:layout_height="wrap_content"
                  android:layout_weight="3"
                  >
                  <ImageView
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"/>
              </RelativeLayout>
  						.
  						.
  						.
              <RelativeLayout
                  android:id="@+id/act_schedule_route_rl_walk_4"
                  android:layout_width="0dp"
                  android:layout_height="wrap_content"
                  android:layout_weight="2">
                  <ImageView
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"/>
              </RelativeLayout>
              
          </LinearLayout>
      </RelativeLayout>

4. 애니메이션

숫자 올라가는 애니메이션 kotlin extension 을 이용하여 생성

private fun TextView.setAnimInt(value: Int) {
        startAnimation(TextViewIntAnimation(this, to = value))
    }

시간이 줄어드는 애니메이션 kotlin extension 을 이용하여 생성

   private fun TextView.start(token: Int) { //타이머 스타트
        var a = this
        if (token == 0) {
            timerTask = timer(period = 10) {
                // period = 10 0.01초 , period = 1000 면 1초
                time--

                val min = (time / 6000) % 60 // 1분
                runOnUiThread {
                    // Ui 를 갱신 시킴.
    
                    if (min < 10) { // 분
                        minmin = "$min"
                    } else {
                        minmin = "$min"
                    }
    
                    a.text = String.format("%s", minmin)
                    if (Integer.valueOf(minmin) <= 3) {
                        act_home_tv_minute_number.visibility = View.INVISIBLE
                        act_home_tv_before_minute.visibility = View.INVISIBLE
                        act_home_tv_soon.visibility = View.VISIBLE
                    }
                }
            }
        }
    }

5. 일정표

커스텀 달력을 통한 일정 조회 및 등록
오늘 날짜에 파란 마커 디폴트
커스텀 달력 -> 뷰페이저와 리사이클러뷰 이용

6. 맵 띄우기

google map api 적용
경도 위도 좌표를 받아 구글맵에 16F zoom 으로 화면 표시

7. 홈 화면

가장 최근에 있는 일정에 맞춰 화면 적용
일정에 대한 대중교통 알림이 시작되면 1대,2대,3대 이동중 에 따라 화면 변환
대중교통 도착이 임박(3분 이내)가 되면 곧 도착 이라는 문구 표시
다음 도착 대중교통 정보가 없으면 그 정보를 지우고 밑으로 붙여야하는데 여기서 ConstraintLayout의 서로 연결되는 속성을 사용해서 잘 해결함.

 var bottomParams = act_home_cl_middle_bar.layoutParams  as? ConstraintLayout.LayoutParams
                            bottomParams?.topMargin = 90
                            act_home_cl_middle_bar.layoutParams = bottomParams
viewGone()

private fun viewGone() {
        act_home_tv_bus_number.visibility = View.GONE
        act_home_tv_bus_current_location.visibility = View.GONE
        act_home_tv_next_bus.visibility = View.GONE
        act_home_tv_next_bus_var.visibility = View.GONE
        act_homme_iv_reboot.visibility = View.GONE
    }

8. 일정 등록

datePicker와 timePicker로 날짜와 시간 선택

act_schedule_tv_date_click.setOnClickListener {
            DatePickerDialog(this@ScheduleActivity, R.style.MyDatePickerDialogTheme,
                DatePickerDialog.OnDateSetListener{ datePicker, year, monthOfYear, dayOfMonth ->
                    cal.set(Calendar.YEAR, year)
                    cal.set(Calendar.MONTH, monthOfYear)
                    cal.set(Calendar.DAY_OF_MONTH, dayOfMonth)
                    act_schedule_tv_date_click.text = SimpleDateFormat("yyyy.MM.dd").format(cal.time)

                },cal.get(Calendar.YEAR), cal.get(Calendar.MONTH), cal.get(Calendar.DAY_OF_MONTH)).show()
        }
    }

장소 검색을 통해 받은 출발지와 도착지 좌표로 가로경로 표시

ImSejin/early-buddy-android

🐥 we are EARLY-BUDDY-ANDROID

얼리버디 - 약속시간을 위한 나만의 대중교통 배차 알리미

Workflow

적용 라이브러리

프로그램 구조

1. data

2. feature

3. network : 통신

4. util : 애니메이션

주요 기능 (현재까지 진행한 사항)

0. 스플래쉬

1. 최초가입(로그인,회원가입,닉네임, 자주가는 장소 등록)

2. 세로 경로

3. 가로경로

소요시간을 bar로 보여주는 가로경로 뷰 그리기

4. 애니메이션

5. 일정표

6. 맵 띄우기

7. 홈 화면

8. 일정 등록