어쩌다 개발자

레이아웃이란?

ViewGroup의 파생 클래스로서, 포함 된 View를 정렬하는 기능

레이아웃의 종류

01. Linear Layout (*Orientation -> vertical or horizontal)

• 컨테이너에 포함 된 뷰들을 수평 또는 수직으로 일렬 배치하는 레이아웃
• 자식 뷰를 수평,수직으로 일렬 배치하는 레이아웃으로, 가장 단순하고 직관적이며 사용빈도가 높다.
• LinearLayout의 자식(Children)으로 배치되는 View위젯들은 오직 한 방향 (가로 또는세로)으로만 배치
• 위젯의 크기(높이 또는 너비)와 관계없이 한 줄로만 배열
• 아래 그림과 같이 가로 방향으로 배치 될 때는 가로로 한 줄(onlyonerow)
• 세로 방향으로 배치될 때는 세로로 한 줄(onlyonecolumn)로 표시
• LinearLayout의 자식들은 중첩(overrap)되지 않고,지정한 방향으로 쌓이는(stacked)형태로 표시
• LinearLayout은 자식(Children)들이 배치 될 때,전체 영역 대비 비율의개념으로지정할수있는Weight(가중치)를 설정
• 예) 전체 크기를 10으로 본다면, 첫 번째 View위젯은 3, 두 번째View위젯은7의영역을차지하도록 만듦

02. Relative Layout

• 뷰를 서로 간의 위치 관계나 컨테이너와의 위치 관계를 지정하여 배치하는 레이아웃
• RelativeLayout은 자식(Children)View위젯들이 서로 간의 상대적 배치 관계에 따라 화면에 표시 될 위치가 결정되도록 만들어주는Layout클래스
• 예)"A를 화면에 표시하고 B는A의 오른쪽에 표시”,"C를 첫번째 자식으로 두고 D가 C아래에 위치하도록 배치”
• View위젯들을 포함하는 Relative Layout(View위젯 입장에서는 부모(Parent))자체가 상대적 위치의 기준점으로 사용될수도있습니다.
• 만약 RelativeLayout의 자식(Children)들에 "상대적인"배치 기준을 지정하지 않는다면, RelativeLayout내부에서 중첩되어 표시된다

03. Table Layout

• 표 형식으로 차일드를 배치하는 레이아웃
• 자식(Children) View위젯들을 테이블(행과 열로 구성)로 나누어 표시하는 Layout클래스

• stretchColumns : 늘릴 열을 지정(인텍스는 0부터 시작 됨)

TableRow

• 정해진 규칙에 따라 크기가 결정되므로, layout_width/height를 지정할 필요가 없다.

04. Frame Layout

• 컨테이너에 포함된 뷰들을 전부 좌상단에 배치하는 레이아웃
• 하나의 자식 View위젯만 표시 할 때 사용하는 Layout클래스
• FrameLayout에 여러 View위젯을 자식으로 추가하면 겹쳐진 형태로 표시되며,가장 최근에 추가된 View위젯이 가장 상위(ontop)에 표시

• 모든 자식 View는 좌상단에 배치되며,여러 개의 자식View를 포함하는 경우나 열된순서대로 겹쳐져서 표시 됨

05. Constraint Layout

• 제약 조건을 사용해 화면을 구성하는 방법
• 복잡한 레이아웃을 단순한 계층구조를 이용해 표현 할 수 있는 ViewGroup
• 형제 View들과의 관계를 정의해서 레이아웃을 구성한다는 점은 RelativeLayout과 비슷하지만 보다 유연하고 다양한 기능을 제공함
• RelativeLayout에선 불가능했던 자식 뷰간의 상호 관계 정의 가능
• ex)두개의 View를 위아래로 붙여서 컨테이너 중앙에 배치하기
• LinearLayout을 써야만 했던 뷰비율 조절도 간단히 가능
• 뷰계층을 간단하게 할 수 있어 유지보수도 좋고 성능도 좋고!

https://school.programmers.co.kr/learn/courses/30/lessons/133499

문제를 어떻게 풀어야 할지 막막한 문제였다,,, 결국에 힌트를 보게 되었고 괜찮은 코드를 보았다.

class Solution {
    fun solution(babbling: Array<String>): Int {
    	var answer: Int = 0

        for (i in babbling.indices) {
            if (babbling[i].contains("ayaaya") ||
                babbling[i].contains("yeye") ||
                babbling[i].contains("woowoo") ||
                babbling[i].contains("mama"))
            {
                continue
            }
            babbling[i] = babbling[i].replace("aya", " ")
            babbling[i] = babbling[i].replace("ye", " ")
            babbling[i] = babbling[i].replace("woo", " ")
            babbling[i] = babbling[i].replace("ma", " ")
            babbling[i] = babbling[i].replace(" ", "")

            if (babbling[i].isEmpty()) answer++
        }
        return answer
    }
}

보다보니 호텔 예약 프로그램을 코딩할 때 문자열에 숫자를 포함시키지 않기 위해서 Regex라는 정규 표현식을 사용했던 기억이 났다. 그걸 적용해볼 수 있겠다. 생각이 들어 적용시켜보았다. but 역시 나만 그렇게 생각한게 아니였고 이미 획기적으로 코드량을 줄인 코드가 있었다. 한번 같이 보면서 regex 정규 표현식을 공부해보면 좋을 것 같다.

class Solution {
    fun solution(babbling: Array<String>): Int {
        var answer: Int = 0
        var regexA = "aya|ye|woo|ma".toRegex()
        var regexB = "ayaaya|yeye|woowoo|mama".toRegex()
        answer = babbling.map{it.replace(regexB,"x")}.map{it.replace(regexA,"")}.count{it.isEmpty()}
        return answer
    }
}

이렇게 바꾸니 속도도 이전 코드보다 약 20%가량 더 빨라진 것 같다.

정규 표현식(Regex)

-> Regular Expression의 약자로 특정한 규칙을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어

이해가 확 와닿지는 않는다,,, 쉽게 말하자면 주로 어떤 문자열에서 특정한 조건의 문자열을 찾고 싶을 때 쓴다.

예를 들어서 회원가입이나 로그인을 받을 때 아이디나 비밀번호에서 최소 10자리에 숫자, 문자, 특수문자 각각 몇개씩 포함해서 작성해라! 에 따른 유효성 검사를 할 때도 사용가능하고 위에 문제처럼 해당 문자를 찾아 원하는 처리를 하고 싶을 때 자주 사용된다.

정규 표현식의 내용을 정리하려 했으나 그것 보다는 이해를 위한 영상 추천과 잘 정리해둔 블로그를 남겨 놓는게 더 좋을 것 같다는 생각이 들어 밑에 남겨두겠다.

정규 표현식 완전 처음이라면 영상

https://youtu.be/t3M6toIflyQ?si=7C24u9qSMgDXZvpQ

알고 있지만 문법을 확인하고 싶다면 밑에 블로그

https://yoon-dailylife.tistory.com/113

What is View?

• View클래스는 모든 UI 컴포넌트들의 부모 클래스
• View클래스의 속성은 모든 UI컴포넌트들에서 공통적으로 사용 할 수 있다.

What is Widget?

• View의 서브 클래스 중에서 화면에 보이는 것들을 말함
• 대표적인 위젯은 TextView, EditText, Button등이 있습니다.

실제 자주 사용하는 위젯 속성

TextView

id, layout_width, layout_height, background etc

text : 출력할 문자열 지정

textSize : 폰트 크기

textStyle : 텍스트 스타일(normal, bold, italic)

typeface : 텍스트 폰트(normal, sans, serif, monspace)

textColor : 문자열 색상

singleLine : 속성값 true이면 텍스트가 위젯의 폭보다 길 때 강제로 한 줄에 출력

EditText

입력이 가능한 Text 창

• TextView의 모든 속성 상속(EditText는TextView의 서브클래스임)
• inputType: 입력 시 허용되는 키보드 타입 설정 및 키보드 행위를 설정 
  • 키보드 타입 설정 값
    • “text”:일반적인 텍스트 키보드
    • “phone”:전화번호 입력 키보드
    • “textEmailAddress”:@문자를 가진 텍스트 키보드
    키보드 행위 설정 값
    • “textCapWords” : 문장의 시작을 대문자로 변환
    • “textAutoCorrect” : 입력된 단어와 유사한 단어를 제시하고 제시된 단어 선택 시,입력된 단어를 대치
    • “textMultiLine”:여러 줄을 입력 받을 수 있음

Button

• Button클래스는 TextView의 서브클래스이므로, TextView의 모든 속성을 사용 할 수 있다.
  • singleLine: 텍스트가 위젯의 폭보다 길 때 강제로 한 줄에 출력
• 버튼 내에 텍스트,아이콘을 표시 할 수 있음
  • 버튼 전체를 이미지로 그리기 위해서는 ImageButton사용

ImageButton

대부분의 버튼은 ImageView를 사용

1. ImageView 속성에 Clickable 옵션을 true로 설정

2. 이미지는 normal(아무 상태가 아닐 때) , pressed(클릭되었을 때), disable(클릭불가할 때) 3가지 준비

3. 해상도 처리를 위해 dpi별 (mdpi, hdpi, xhdpi, xxhdpi,  xxxhdpi) 5개 이미지 준비

-> 1개의 버튼에 총 15개의 이미지 필요

9-patch 이미지

Image에서 늘어날 수 있는 영역과 원본 크기대로 표시되어야 할 영역을 구분하여, 이미지가 그려질 영역의 크기가 늘어나거나 줄어들더라도 원본이미지 형태를 유지하도록 만들어진 Image를 나인 패치(9-patch)이미지라고 한다.

ImageView

앱 화면에 이미지를 표시하는 용도

 기본 사용법

• Layout리소스 XML파일에 ImageView를 추가
• 화면에 표시 할 이미지를 Drawable리소스에 추가
• 화면에 표시 할 이미지(Drawable)리소스 ID를 ImageView의"src"속성에 지정

Drawable리소스에 이미지 추가

• • 이미지 파일의 형식은 .jpg,.png가 가능하나 대부분.png를 사용함(투명도 때문)
  • 이미지 파일을 /res/drawable에 추가한다.
  • 해상도에 따른 다른 크기의 이미지는 별도의 폴더를 생성하고 복사(drawable-xhdpi등..)

Layout리소스 XML과 Kotlin소스 두가지 코드 모두에서 이미지뷰 추가 및 변경 가능

ImageView의 영역에 맞게 이미지 확대 또는 축소하는 방법

scaleType 속성 > android:scaleType

1) android:scaleType = "Center"

이미지의 크기와 비율을 유지하며 이미지의 중앙을 ImageView의 중심에 맞춥니다. 이때, ImageView보다 이미지가 클 경우 이미지가 잘릴 수 있습니다.

2) android:scaleType = "centerCrop"

이미지의 비율을 유지하며 가로,세로 중 짧은 쪽을 ImageView에 꽉 차게 출력합니다. 이때도 마찬가지로 ImageView를 벗어나는 부분은 출력되지 않습니다.

3) android:scaleType = "centerInside"

이미지의 가로, 세로 중 긴 쪽을 ImageView의 레이아웃에 맞춰 출력합니다. 이미지의 비율은 유지되며 남는 공간은 background의 색으로 채워집니다. fitCenter와 달리 이미지가 ImageView보다 작을 경우 크기가 유지됩니다.

4) android:scaleType = "fitCenter"

centerInside와 매우 유사합니다. 단, 이미지의 크기가 ImageView보다 작다면 ImageView의 크기에 따라 달라집니다.

5) android:scaleType = "fitStart"

ImageView 안에서 가로, 세로 비율을 유지하며 fit하게 출력됩니다. 단, fitCenter와 다르게 왼쪽 상단을 기준으로 정렬됩니다.

6) android:scaleType = "fitEnd"

감이 오시나요? fitStart와 마찬가지로 가로&세로 비율을 유지하며 fit하게 출력됩니다. 우측 하단을 기준으로 정렬됩니다.

7) android:scaleType = "fitXY"

가로, 세로 비율에 상관 없이 ImageView에 꽉 차게 보여집니다. 이미지가 찌그러진 상태로 보입니다.

8) android:scaleType = "matrix"

이미지의 크기, 비율을 유지하며 ImageView의 좌측상단을 기준으로 정렬됩니다. 이미지가 크다면 ImageView 외의 부분은 출력되지 않습니다.

안드로이드 스튜디오 왼쪽 하단에 보면 북마크 기능이 있다.

잘 활용하면 코드찾는 수고를 덜 수 있다.

Bookmarks -> crtl + shift + 지정 숫자

북마크를 원하는 코드줄로 가서

crtl + shift + 1 로 지정할 경우 아래와 같이 코드파일과 북마크에 1상자와 함께 생성된다. 

다른 코드를 보다가 북마크에 추가한 코드를 보고싶을 땐 crtl + 지정 숫자를 누르면 지정 숫자로 북마크에 추가한 코드줄로 이동하게 된다.

코드가 짧을 땐 별로 안쓰일 수 있지만 길 땐 정말 잘 활용될 것 같다.

+ 북마크 제거할때도 마찬가지로 crtl + shift +지정 숫자 로 제거 가능하고 북마크탭에서도 delete가능하다.

What is Android?

휴대 전화를 비롯한 휴대용 장치를 위한 운영 체제와 미들 웨어, 사용자 인터페이스 그리고 표준 응용 프로그램을 포함하고 있는 모바일 운영 체제이자 모바일 플랫폼이다.

구글이 2005년에 안드로이드 회사를 인수

안드로이드가 범용적으로 잘 쓰이는 이유?

1. 무료이다 (윈도우는 라이센스 필요하죠)

2. 포팅이 쉽다(임베디드 하드웨어에 운영체제를 이식하는게 쉽다)

3. UI 개발이 쉬워졌다.

안드로이드 OS 주요 특징

1. 오픈 소스이다.

2. 안드로이드 개발언어는 자바와 코틀린이다.

3. 구글에서는 코틀린을 밀고 있다.

살을 붙여나갈게요~

https://school.programmers.co.kr/learn/courses/30/lessons/77484?language=kotlin

class Solution {
    fun solution(lottos: IntArray, win_nums: IntArray): IntArray {
        var answer: IntArray = intArrayOf()
        var countA = 0
        var countB = 0
        var bestRank = 0
        var worstRank = 0
        lottos.map {
            if(win_nums.contains(it)) {
                countA++
            }
            if(it == 0) {
                countB++
            }
        }
        when(countA){
            6 -> worstRank = 1
            5 -> worstRank = 2
            4 -> worstRank = 3
            3 -> worstRank = 4
            2 -> worstRank = 5
            1 -> worstRank = 6
            0 -> worstRank = 6
        }
        when(countA  + countB){
            6 -> bestRank = 1
            5 -> bestRank = 2
            4 -> bestRank = 3
            3 -> bestRank = 4
            2 -> bestRank = 5
            1 -> bestRank = 6
            0 -> bestRank = 6
        }
        answer += bestRank
        answer += worstRank
        return answer
    }
}

크게 생각하지 않고 순수하게 적어봤다..

속도가 조금 아쉽다..