Android 입문 3주차

신지원·2024년 6월 25일
TIL

Android

목록 보기
3/4

안드로이드 UI

뷰 (View)

  • 안드로이드 앱의 UI를 구성하는 기본 단위는 뷰(View)임

뷰(View)의 구성

  1. 위젯(Widget)
    • View의 서브 클래스로서, 앱 화면을 구성하는 시각적인 모양을 지닌 UI요소
    • 예) 버튼,메뉴,리스트 등
  2. 레이아웃(Layout)
    • ViewGroup의 서브 클래스로서, 다른 뷰(위젯 혹은 레이아웃)를 포함하면서 이들을 정렬하는 기능을 지닌 UI요소

XML을 사용하여 UI설계

  • AndroidStudio의 Layout Editor이용
    • 드래그 앤 드롭 방식의 WYSIWYG(what you see is what you get) 에디터
    • 다양한 디바이스 / 안드로이드 버전에 대한 Preview
    • XML코드 자동 변환 및 동기화
  • Layout Editor

Palette

  • 레이아웃으로 드래그 할 수 있는 다양한 뷰 및 뷰 그룹을 포함

Component Tree

  • 레이아웃에서 구성요소의 계층 구조를 표시

툴바

  • 편집기에서 레이아웃 모양을 구성하고 레이아웃 속성을 변경하려면 이 버튼을 클릭

디자인 편집기

  • 디자인 뷰나 청사진 뷰 또는 두 뷰 모두에서 레이아웃을 수정

Attributes

  • 선택한 뷰의 속성을 제어할 수 있는 영역

뷰 모드

  • 레이아웃을 코드, 디자인, 분할 모드 중 하나로 표시
  • 분할 모드는 코드 창과 디자인 창을 동시에 표시

확대/축소 및 화면 이동 컨트롤

  • 편집기 내에서 미리보기의 크기와 위치를 제어

XML file을 직접 편집

  • 필요한 XML 태그나 속성을 잘 모를 경우 불편
  • Copy & paste를 이용한 편집이 효율적인 경우가 많음

위젯

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

View

  • 설명
    • View클래스는 모든 UI 컴포넌트들의 부모 클래스
    • View클래스의 속성은 모든 UI컴포넌트들에서 공통적으로 사용 할 수 있음
    • layout_width, layout_height
      • match_parent(혹은fill_parent) : 부모 UI컴포넌트의 크기에 맞춤
        • SDK2.2(프로요)부터는 match_parent로 변경 둘다 사용 가능
      • wrap_content : UI컴포넌트의 내용물 크기에 맞춤


    • 다양한 스마트폰 해상도 대응 방법
      • 안드로이드DP(Dip),PX,DPI의 개념
        • 1) 스크린의 실제 단위 → px
          • PX단위는 화면의 전체 화면 크기와 상관 없이 지정한 수치만큼 표시되는 절대적 표시 단위
        • 2) dp(Density-independentPixel)
          • 밀도 또는 독립 화소를 말하며, 디스플레이의 해상도(밀도)와 상관 없이 다룰 수 있는단위
        • 3) dpi(dotsperinch)
          • DPI는 DotPerInch로 1인치에 들어가는 픽셀을 나타내는 단위
          • 예를 들면 100DPI는 1인치 당 픽셀이 100개 포함 된다는 것을 말함
          • 개수가 많을수록 고밀도이며 안드로이드에서 주요DPI는 아래 참고



      • 다양한 스마트폰 해상도 대응 방법



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

실무에서의 버튼 디자인

  • 9-patch 이미지

ImageView

  • 앱 화면에 이미지를 표시하는 용도
  • ImageVIew기본 사용법
    • Layout리소스 XML파일에 ImageView를 추가
    • 화면에 표시 할 이미지를 Drawable리소스에 추가
    • 화면에 표시 할 이미지(Drawable)리소스 ID를 ImageView의"src"속성에 지정
  • Drawable리소스에 이미지 추가
    • 이미지 파일의 형식은 .jpg,.png가 가능하나 대부분.png를 사용함(투명도 때문)
    • 이미지 파일을 /res/drawable에 추가
    • 해상도에 따른 다른 크기의 이미지는 별도의 폴더를 생성하고 복사(drawable-xhdpi등..)
  • [주의]이미지 파일 명

  • Layout리소스 XML에 ImageView추가 및 이미지 표시
    • ImageView를 Layout리소스 XML파일에 추가
    • "src"속성에 이미지(Drawable)의 리소스ID를 지정
    • android : src-Image View에 표시 될 Drawable지정

  • Kotlin 소스에서 ImageView의 이미지 변경
    • ImageView의 id를 이용하여 참조를 획득한 다음, setImageResource()함수를 호출
      class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var imageView: ImageView = findViewById(R.id.imageView1)
        imageView.setImageResource(R.drawable.google_logo)
    }
}
  • ImageView의 영역과 이미지의 크기
    • ImageView영역과 이미지의 크기가 같은 경우

    • ImageView영역과 이미지의 크기가 작은 경우

    • ImageView영역보다 이미지의 크기가 큰 경우

  • 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 외의 부분은 출력되지 않음

Layout

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

Linear Layout

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


Relative Layout

뷰를 서로 간의 위치 관계나 컨테이너와의 위치 관계를 지정하여 배치하는 레이아웃

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


Table Layout

표 형식으로 차일드를 배치하는 레이아웃

  • Table Layout 설명
    • 자식(Children) View위젯들을 테이블(행과 열로 구성)로 나누어 표시하는 Layout클래스
  • 주요 속성
    • stretchColumns : 늘릴 열을 지정(인텍스는 0부터 시작 됨)
  • TableRow
    • 정해진 규칙에 따라 크기가 결정되므로, layout_width/height를 지정할 필요가 없음


Frame Layout

컨테이너에 포함된 뷰들을 전부 좌상단에 배치하는 레이아웃

  • Frame Layout 설명
    • 하나의 자식 View위젯만 표시 할 때 사용하는 Layout클래스
    • FrameLayout에 여러 View위젯을 자식으로 추가하면 겹쳐진 형태로 표시되며,가장 최근에 추가된 View위젯이 가장 상위(ontop)에 표시
    • 모든 자식 View는 좌상단에 배치되며,여러 개의 자식View를 포함하는 경우나 열된순서대로 겹쳐져서 표시 됨

Constraint Layout

제약 조건을 사용해 화면을 구성하는 방법

  • Constraint Layout 설명
    • 복잡한 레이아웃을 단순한 계층구조를 이용해 표현 할 수 있는 ViewGroup
    • 형제 View들과의 관계를 정의해서 레이아웃을 구성한다는 점은 RelativeLayout과 비슷하지만 보다 유연하고 다양한 기능을 제공함
    • 위젯의 크기 설정
      • 리사이즈 핸들(ResizeHandle) 이용하여 설정하기
        • 위젯을 클릭하면 네모서리에 사각형의 핸들이 생기며,이 부분을 마우스로 드래그해서 크기를 설정
        • 드래그해서 크기를 조절하면 오른쪽 속 성창의 Layout_width, layout_height를입력해서 설정 가능
      • 직접 값을 입력하여 설정하기
        • 위젯을 클릭하고 오른쪽의 속성 창에서 layout_width와 layout_height를 입력해서 크기를 설정 할 수 있음
        • 수치를 직접 입력하는 것 외에 사용 할 수 있는 값이 wrap_content와match_constraint가 있음
        • 위 이미지에서는 버튼이 좌우측 화면 경계와 연결되어있고, layout_width가match_constraint이 면 너비를 꽉 채우도록 늘어나고, wrap_content이면 내용에 딱 맞는 너비로 설정 되는것을 보여주고 있음
    • 위젯의 상대적인 정렬
      • 사이드핸들(SideHandle)을 이용하여 위젯이 다른 위젯 또는 화면의 경계에 대해서 어떻게 정렬 될 지를 지정 할 수 있음
      • 사이드 핸들은 아래 이미지에서처럼 위젯의 각 변의 가운데 있음

    • 위젯 내에 포함되어 있는 텍스트의 위치로 정렬기준을 설정하기
      • 베이스라인 핸들(BaselineHandle)

    • Constraint툴바 사용하기
        1. Autoconnect
        • 켜두면 위젯을 배치할때 자동으로 이웃한 위젯과 관계를 맺어줌
        1. Clear All Constraints
        • 모든 관계를 삭제함
        1. Infer constraints
        • 레이아웃내 배치된 모든 위젯을 현재 위치를 기반으로 관계를 맺어줌
        1. Default Margins
        • 위젯 간의 기본 마진 같을 지정함
        1. Guidelines
        • 수평,수직 가이드라인을 만들 수 있음
        • 위젯을 이 가이드라인을 기준으로 정렬 할 수 있음
    • 속성창
      • 속성창 상단의 위젯에 대한 기호에 대해서 알아봅니다.

1. Margin

  • layout_width가 match_constraint이므로 좌우 여백 8만 있고 전체를 위젯이차지하고 있음
      1. Aspect Ratio
        • 클릭하면 위젯의 가로 세로비율을 지정 할 수 있음
      1. Wrap Content
        • 부등호 세계로 된 모양은 wrap_content로 지정되어 있음을 나타냄
      1. Any Size
        • 톱니모양은 최대한의 너비를 차지하게
        • match_constraint로 지정되어 있음
      1. 점선
        • 관계가 없음
      1. Horizontal Bias
        • 위젯의 좌우측 위치 비율을 지정함
        • 드래그해서 바꿀 수 있음
  • Constraint Layout 왜 사용 해야 할까?
    • RelativeLayout에선 불가능했던 자식 뷰간의 상호 관계 정의 가능
    • ex)두View를 위아래로 붙여서 컨테이너 중앙에 배치하기
    • LinearLayout을 써야만 했던 뷰비율 조절도 간단히 가능
    • 뷰계층을 간단하게 할 수 있어 유지보수도 좋고 성능도 좋고!

Margin / Padding / Gravity

Margin

  • 뷰와 다른 뷰(컨테이너)간의 간격임
  • layout_margin : 상하좌우로 동일한 마진 설정시에 사용되는 속성
  • layout_marginLeft, layout_marginRight, layout_marginTop, layout_marginBottom
    • 4방향의 마진을 각기 다르게 설정 할 때 사용되는 속성

Padding

  • 상하좌우로 동일한 패딩 설정 시에 사용되는 속성
  • paddingLeft, paddingRight, paddingTop, paddingBottom
    • 4방향의 마진을 각기 다르게 설정 할 때 사용되는 속성

Margin & Padding 모두 적용이 된다면?

Gravity

  • Gravity 속성
    • 해당 뷰안의 내용물 위치에 대한 정렬방식을 지정
  • layout_gravity 속성
    • 부모 뷰 안에서 해당 뷰의 정렬 방식 지정
  • 가능한 값들
    • 부모 뷰 안에서 해당 뷰의 정렬 방식 지정
      - BOTTOM : ­부모 뷰에서 아래 쪽에 위치시킴
      - CENTER ­: 부모 뷰의 중앙에 위치시킴
      - CENTER_HORIZONTAL : ­부모 뷰의 수평기준으로 중앙에 위치시킴
      - CENTER_VERTICAL : ­부모 뷰의 수직기준으로 중앙에 위치시킴
      - END­ : 부모 뷰에서 텍스트 방향의 끝(한글이나 영어의 경우는 오른쪽)에 위치시킴
      - LEFT : ­부모 뷰에서 왼쪽에 위치시킴
      - RIGHT : ­부모 뷰에서 오른쪽에 위치시킴
      - TOP : ­부모 뷰에서 위쪽에 위치시킴

Style / Theme

Style

  • View 또는 창의 모양과 형식을 지정하는 속성 모음
  • 높이, 패딩, 글꼴 색상, 글꼴크기, 배경색 등의 속성을 지정 할 수 있음
  • 레이아웃을 지정하는 XML과 별개인 XML리소스에 정의됨
  • Android의 스타일은 웹 디자인의 cascading스타일 시트와 유사한 철학을 공유함
  • 이를 통해 콘텐츠와 디자인을 구분 할 수 있음

Theme

  • 개별View가 아니라 전체 Activity 또는 애플리케이션에 적용되는 스타일
  • 스타일이 테마로 적용된 경우 액티비티 또는 애플리케이션에 포함된 모든 뷰가 자신이 지원하는 각 스타일 속성을 적용함
  • 예를 들어,액티비티의 테마와 동일한 CodeFont스타일을 적용 할 수 있으며 그러면 해당 액티비티에 포함된 모든 텍스트에 녹색의 고정 폭 글꼴이 적용됨
profile
신지원
제 블로그에 오신 여러분 반갑습니다. welcome to malgam world!
이전 포스트

Android 입문 2주차

다음 포스트

Android 입문 4주차

0개의 댓글