TIL 4일차 (둘만의 암호 - Kotlin | 팀원 소개 앱 개발 과정 정리)

코드카타

 

둘만의 암호

 

문제

 

 

정답

class Solution {
    fun solution(s: String, skip: String, index: Int): String {
        var result = ""
        val alp = "abcdefghijklmnopqrstuvwxyz"
        val remainAlp = alp.filter { it !in skip } // skip을 제외한 알파벳 리스트
		
        // 문자열 s를 순회하며 조건에 따라 res에 값추가
        for (sa in s) {
            if (sa in remainAlp) { // s의 요소가 reaminAlp에 존재하는지 확인
            
            	// 해당 문자에서 index값만큼 이동한 문자의 인덱스를 찾는다
                // 인덱스값은 remainAlp의 길이를 기준으로 반복되어야 하므로 % 연산자 사용
                val alpIdx = (remainAlp.indexOf(sa) + index) % remainAlp.length
                
                result += remainAlp[alpIdx] // 결정된 위치의 알파벳을 res에 추가
            }
        }

        return result // 결과 값 반환
    }
}

1. skip을 제외한 알파벳 리스트를 생성한다.

2. s의 요소가 그 알파벳 리스트에 존재하는 지 확인하고

3. 해당 문자에서 index만큼 뒤에 있는 알파벳을 추가한다.

 

---

 

프로젝트 진행

 

프로젝트 폴더 받아오기

 

 

레파지토리 주소를 복사한다.

 

 

 

git bash 열고 바탕화면에 프로젝트 폴더 생성해준다.

 

 

 

안드로이드 스튜디오에서 프로젝트 폴더를 열어준다.

열 수 있는 폴더는 좌측 아이콘이 안드로이드 모양에 해당한다.

 

 

 

폴더 구조 살펴보기

 

 

 해당 파일들은 Activity에 해당한다.

 

각자의 소개 페이지에 해당하는 Activity명은

팀원들의 중간이름으로 설정이 되었다.

 

 

 

이미지 파일을 drawable 폴더 내에 위치한다.

 

 

 

xml 파일에서 화면 레이아웃을 작성할 수 있다.

 

 

 

name 키값을 통해 갖다 쓸 수 있는 리소스 파일들이다.

각각 색상, 문자열, 위젯 속성, 테마가 정의되어 있다.

 

 

 

액티비티 파일 분석

 

메인화면

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        findViewById<Button>(R.id.joo).setOnClickListener {
            val intent=Intent(this,joo::class.java)
            startActivity(intent)
        }
        
        // 나머지 팀원 4명 라우팅 설정
    }
}

메인 화면에서 버튼을 누르면 각자의 소개페이지로 이동하도록 라우팅이 되어 있다. 

 

 

소개페이지

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_joo)

    val toolbar = findViewById<Toolbar>(R.id.jooToolbar) // ToolBar 뷰 변수에 할당
    setSupportActionBar(toolbar) // 툴 바를 해당 액티비티의 앱 바로 설정
    supportActionBar?.setDisplayHomeAsUpEnabled(true) // 앱 바에 뒤로가기 버튼 표시
    supportActionBar?.setDisplayShowTitleEnabled(false) // 앱 바 기본 제목 표시 비활성화
    supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_home) // 앱 바 아이콘 설정

    toolbar.title="송주영 소개페이지" // 툴 바 제목 설정
}

소개페이지를 생성할 때 액티비티를 생성하고 앱바를 설정한다.

 

액티비티를 생성하는 시점에서 앱바의 제목과 아이콘을 생성하기 때문에

레이아웃을 편집할 때 앱바를 확인하면 앱바 내에 아무것도 배치되지 않은 것을 볼 수 있다.

 

 

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    when(item!!.itemId){
        android.R.id.home -> finish()
    }

    return super.onOptionsItemSelected(item)
}

앱바의 아이콘을 눌렀을 때 현재 액티비티를 종료시켜

메인화면으로 이동하도록 정의한다.

 

 

 

내 소개페이지 레이아웃 구현

 

프로젝트에 svg 추가

 

피그마에서 svg에 해당하는 그룹을 선택한다.

 

 

 

선택한 아이콘을 svg로 Export해준다.

 

이미지 파일을 svg로 추출하게 되면 사진이 제데로 나오지

않게 되니 벡터 이미지만을 svg로 추출해야 한다.

 

 

 

파일 탐색기 열어서 다운로드 탭에 다운받은 SVG 확인

해당 파일 선택한 다음 ctrl+shift+c 눌러서 파일 경로 복사

 

 

 

File > New > Vertor Asset 선택

 

 

 

복사한 경로의 큰따옴표 지운다음 OK 버튼 눌러서 

svg경로 설정해주고 Next 버튼눌러서 xml파일 생성해준다.

 

 

 

이런식으로 벡터 이미지가 생성이 된다.

레이아웃 설정에서 이미지뷰로 불러오면 된다.

 

 

테이블 레이아웃 생성

 

해당 테이블 레이아웃 위젯을 구현할 것이다.

 

 

<TableLayout
    android:id="@+id/joo_table"
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="32dp"
    android:background="#E7D5B4"
    android:padding="2dp"
    android:paddingBottom="10dp"
    android:stretchColumns="*"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView2">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="2dp"
        android:background="#E7D5B4">

        <TextView
            android:layout_width="77dp"
            android:layout_height="44dp"
            android:background="#FCF8F2"
            android:gravity="center"
            android:text="@string/joo_info1"
            android:textColor="#7B5D44"
            android:textSize="20sp" />

        <TextView
            android:layout_width="217dp"
            android:layout_height="44dp"
            android:layout_marginLeft="2dp"
            android:background="#FCF8F2"
            android:gravity="center"
            android:text="@string/joo_age"
            android:textColor="#7B5D44"
            android:textSize="20sp" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="2dp"
        android:background="#E7D5B4">

        <TextView
            android:layout_height="44dp"
            android:background="#FCF8F2"
            android:gravity="center"
            android:text="@string/joo_info2"
            android:textColor="#7B5D44"
            android:textSize="20sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="44dp"
            android:layout_marginLeft="2dp"
            android:background="#FCF8F2"
            android:gravity="center"
            android:text="@string/joo_mbti"
            android:textColor="#7B5D44"
            android:textSize="20sp" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#E7D5B4">

        <TextView
            android:layout_height="44dp"
            android:background="#FCF8F2"
            android:gravity="center"
            android:text="@string/joo_info3"
            android:textColor="#7B5D44"
            android:textSize="20sp" />

        <TextView
            android:layout_height="44dp"
            android:layout_marginLeft="2dp"
            android:background="#FCF8F2"
            android:gravity="center"
            android:text="@string/joo_like"
            android:textColor="#7B5D44"
            android:textSize="20sp" />
    </TableRow>
</TableLayout>

TableRow의 개수는 테이블의 행, TextView의 개수는 테이블의 열에 해당한다.

 

TableLayout에서 테두리를 지정하는 속성은 따로 없어서 

테이블 구성요소의 여백, 색상, 너비를 조정하는 것으로 테두리를 구현해줘야한다.

 

TableLayout과 TableRow의 배경색을 테두리색으로 지정하고

TextView의 배경색을 화면의 배경색으로 지정한다.

 

TableLayout에 전체 패딩을 2dp 준다. 이는 바깥 테두리에 해당한다.

마지막 TableRow 위젯을 제외하고 하단 마진값을 2dp로 준다.

 

테이블 레이아웃의 너비를 300dp로 설정했기 때문에

텍스트뷰의 총 넓이는 294dp(레이아웃 너비 - 테두리 너비 *3) 에 해당한다.

 

좌측 텍스트뷰 너비는 80dp, 우측 텍스트뷰 너비는 220dp로 주는데

각각의 너비에서 3dp((300dp - 294dp)/2)씩 뺴서 줘야한다.

 

하이고 복잡하다 진짜...

 

 

 

작성한 위젯에 마우스를 갖다대면 구분선이 생겨서 구조를 확인할 수 있다.

 

테이블 레이아웃 구현하는게 많이 복잡해서 원래는

이 테이블을 svg이미지로 붙여넣었는데 나중에 테이블 같은 거 

만들 일이 생길 수도 있을 거 같아 연습삼아 한 번 만들어보았다.

 

 

박스 이미지 생성

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#D1EF93" />
    <corners android:radius="10dp" />
</shape>

자기소개 글을 작성할 박스 이미지를 drawble에 생성해준다.

 

 

android:background="@drawable/joo_introduce_box"

이 이미지를 LinearLayout의 background로 설정해주면 된다.

 

 

박스 내 글자 중앙정렬

android:gravity="center"

LinearLayout의 정렬속성을 center로 설정한다.

 

 

문자열 리소스 불러오기

<resources>
    <!-- 송주영 문자열 리소스 -->
    <string name="joo_name">송주영 (팀장)</string>
    <string name="joo_info1">AGE</string>
    <string name="joo_age">18세</string>
    <string name="joo_info2">MBTI</string>
    <string name="joo_mbti">INTJ</string>
    <string name="joo_info3">LIKE</string>
    <string name="joo_like">햄스터, 초밥</string>
    <string name="joo_introduce">
        가독성 있고 이해하기 쉬운 코드를 작성하고자 하는\n개발자 송주영입니다. 간단한 로직을 구현하더라도 그\n동작과정과 원리를 제데로 이해하는 것이 중요하다고\n생각합니다. 꾸준한 노력을 통해 유의미한 성장을 해나\n가고 싶습니다. 앱개발자로써 취직을 하여 개발자 커리\n어를 쌓아나가는 것이 지금 제 목표입니다.
    </string>
</resources>

value > stirng.xml에 들어가서 문자열 리소스를 생성할 수 있다.

문자열 사이 '\n'을 넣어 개행이 포함된 문자열을 작성할 수 있다.

 

 

android:text="@string/joo_introduce"

텍스트뷰에서 생성한 문자열 리소스를 불러온다.

 

 

작성한 레이아웃

 

위젯 간의 constraint 속성을 설정해 배치를 마무리한다.

위젯을 화면에 중앙정렬하려면 좌우 Constarits값을 0으로 주면 된다.

 

 

 

프로젝트 빌드시키기

 

애뮬레이터 생성

 

File > Setting > SDK 검색 > Android Emulator 다운

 

 

 

해당 이미지 보고 순서대로 따라한다.

 

 

 

우리팀은 애뮬레이의 기종은 Pixel 2, API 레벨은 34로 설정하기로 했다.

 

 

애뮬레이터 빌드 세팅

 

만약 애뮬레이터를 실행할 수 없다면

File > Sync Project with Gradle Files를 누른다.

 

 

커밋 & 푸시하기

 

 

Settings > Github탭에 들어가서 본인 깃허브 계정을 연동한다.

 

 

 

좌측 커밋 탭에 들어가서 푸시할 파일을 선택하고 커밋메시지를 작성한다.

Commit and Push를 눌러 연결되어있는 레파지토리에 푸시를 진행한다.

 

 

 

pull 받아오기

 

 

프로젝트에서 UI나 기능을 구현하기 전에 항상 pull을 받아와야 하는 습관을 가지도록 하자.

프로젝트에 변경사항이 생기면 pull을 할 수 없게 된다.

 

 

 

만약 변경사항을 커밋한 상태라면

 

git stash > git pull origin 브랜치 > git stash apply를 순서대로 입력한다음

변경사항을 커밋&푸시하면 된다.

 

git stash < 변경사항을 임시저장하고 변경 전의 프로젝트 상태로 되돌린다.

git stash apply < 임시저장한 변경사항을 불러온다.

 

git stash를 통해 pull을 가능하게 만들고 

git stash apply를 하여 불러온 버전에서 현재 변경사항을 덮어쓴다.