Android studio_ 0. 위젯 및 레이아웃 사용

1. 위젯(Widget)

• View(안드로이드 앱의 UI를 구성하는 기본 단위)의 서브 클래스로서, 앱 화면을 구성하는 시각적인 모양을 지닌 UI 요소
• View의 서브 클래스 중에서 화면에 보이는 것 ex) TextView, EditText ..

Button

• 클릭하였을 때 어떤 행동을 실행하게 하는 형태
• android: id = "@+id/btn_button" : 고유의 식별자를 지정하며, id가 중복될 수 없고 레이아웃에 있는 위젯을 코드에 가져다 쓰기 위해 필요
• Chain > Creat Vartical/Horizontal Chian : 여러 버튼을 체인으로 묶어 사용

• android: alpha = "0.5" : 버튼 전체 투명도. 0.5 (50%)
• android: background = "lmage" : 버튼의 배경 색이나 버튼 모양을 변경

변경이 되지 않을 때, rec > values > themes > parent="Theme.AppCompat.Light" 변경

• android: onClick = "doAction" : 버튼을 클릭하였을 때 실행할 구문을 엑티비티 클래스에 메소드 추가

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

   fun doAction(View){

      //버튼을 실행하였을 때 동작할 코드 작성

  }
}

//이벤트 처리 객체를 이용 가능 : OnClickListener

• 실무에서의 버튼은 ImageView를 사용하여 속성에 Clickable 옵션을 true로 설정하여 사용

1개의 버튼을 만들기 위해 15개의 버튼 이미지 필요

• 이미지 : normal(기본), pressed(동작할 때), disable(비활성화)
• 해상도 처리 : hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi

CheckBox

• 체크 박스 : 항목을 선택할 때 쓰이는 네모 칸

EditText

• 텍스트를 입력할 수 있는 필드
• android: hint = "아이디를 입력하세요" : 어떤 값을 입력해야 되는지 사용자에게 알려줌
• android: inputType = "number" : 입력 란의 타입에 따라 키페드 속성도 바뀜

키보드 타입 설정 값

• text : 일반적인 텍스트 키보드
• phone : 전화번호 입력 키보드
• textEmailAddress : @문자를 가진 텍스트 키보드

키보드 행위 설정 값

• textCapWords : 문장의 시작을 대문자로 변환
• textAutoCorrect : 입력된 단어와 유사한 단어를 제시하고 제시된 단어 선택 시, 입력된 단어를 대치
• textMultiLine : 여러 줄을 입력 받을 수 있음

ImageView

• 화면에 보여지는 이미지

• 다운로드 이미지 삽입 : 'image' Ctrl+C > res > drawable > Ctrl V 
• android: src = "@drawable/image" = drawable 리소스 지정하여 사용

이미지 파일 사용

• .jpg, .png 가능하나 투명도 이슈로 대부분 .png 사용

이미지 파일 명

• "아이콘.png" : 한글 사용 X
• "ABC.png" : 대문자 사용 X
• "2image.png" : 숫자로 시작 X
• "_image_2.png" : '_'로 시작 O
• "my_image_2.png" : 적합 O

• android: scaleType = "Center" : ImageView 영역과 이미지의 크기가 항상 같을 수 없기 때문에 ImageView의 영역에 맞게 이미지 확대 및 축소 

• Center : 이미지의 크기와 비율을 유지하며 이미지의 중앙을 ImageView의 중심에 맞춤 (이미지가 ImageView 보다 클 경우 잘릴 수 있음)
• centerCrop : 이미지의 비율을 유지하며 가로, 세로 중 짧은 쪽을 ImageView에 꽉 차게 출력
• centerInside : 이미지의 가로, 세로 중 긴 쪽을 ImageView의 레이아웃에 맞춰 출력
• fitCenter : centerInside 유사하나, 이미지의 크기가 ImageView보다 작다면 ImageView의 크기에 따라 달라짐
• fitStart : ImageView 안에서 가로, 세로 비율을 유지하며 fit하게 출력(왼쪽 상단 기준)
• fitEnd :  ImageView 안에서 가로, 세로 비율을 유지하며 fit하게 출력(오른쪽 상단 기준)
• fitXY : 가로, 세로 비율 상관없이 ImageView에 꽉 차게 출력 (이미지가 찌그러짐)
• matrix : 이미지의 크기, 비율을 유지하며 ImageView의 좌측상단을 기준을 정렬

ListView

•  리스트 형태

ProgressBar

• 프로그래스바 : 로딩이 진행 중일때, 진행된 정도와 남은 양을 바 형태로 보여주는 인디케이터

RadioGroup & RadioButton

• 라디오 버튼 : 옵션 선택 영역 내의 몇 가지 옵션에서 하나를 선택
• RadioGroup 안에서 RadioButton을 사용
• android:orientation="horizontal" : 정렬

RatingBar

• 등급을 평가하는 데 많이 쓰이는 형태
• android: numStars = "6" : 별 갯수 설정
• android: rating = "2.5" : 처음 값을 결정
• android: stepSizw = "0.1" : 값의 단위를 바꿔줌 

SeekBar

• 볼륨 조절 컨트롤러 및 음악 플레이로 많이 사용하는 형태
• android: max = "200" : 최대값 설정

ScrollView

• 화면이동 : 레이아웃이 쌓이면서 화면이 넘어갈 때 화면이동이 필요할 때 사용
• constraintStart_toStartOf + constraintEnd_toEndOf = "parent" 일 때, width 값을 0으로 하면 최대공간 만큼 차지한다는 뜻이기 때문에 구역을 나눠서 스크롤뷰를 지정할 때 사용하면 좋음

Switch

• 스위치 : 다른 하나로 전환하는 버튼

TextView

• 화면에 텍스트를 보여주는 라벨
• android: textColor = "#111111" : RGB 값 입력(좌측 색상 클릭 후 수정 가능) 또는 values > colors.xml 값 사용

• android: textSize = "12sp" : 사이즈 단위 'sp'
• android: Style = "bold" : 텍스트 스타일 (bold, normal, italic)
• android: typeface = "normal" : 텍스트 폰트 (sansm serif, monspace)
• style = "@style/스타일명" : values > styles.xml 활용 가능

텍스트 뷰를 30개 만든다고 가정할 때, 크기를 변경해야 하는 상황에서 30개의 크기를 하나씩 변경하는 것은 비효율적이기 때문에 스타일을 만들어 한꺼번에 수정 가능

• android: layout_width = "match_parent" : 부모(상위의 레이아웃)의 길이에 따름
• android: layout_height = "wrap_content" : 텍스트 크기에 따라서 길이가 결정
• app: layout_ constraintStart_toStartOf = "parent" : 선택영역의 왼 끝과 전체 영역의 왼 끝으로 연결하여 사용(End : 오, Top : 위, Bottom : 아래) 
• app: layout_contraintTop_toBottomOf="@id/iv_profile" : 선택영역의 위 끝과 지정ID 아래 끝으로 연결하여 사용

• andriod: layout_ marginStart = "50dp" : 위젯의 크기를 기준으로 (오,왼,위,아,전체)바깥의 공간을 띄우는 것

• px, in, mm : 스크린의 실제 단위는 pixel 방식이지만, px로 view의 크기를 설정하면 디스플레이 해상도에 따라 view의 크기가 달라 보일 수 있음
• dp : 밀도에 독립적인 단위로 해상도에 맞게 자동으로 늘어나 그에 맞게 크기가 배치 됨

• android: padding = "50dp" : 위젯의 크기를 기준으로 (오,왼,위,아,전체)안쪽의 공간을 띄우는 것
• android: gravity = "center_horizontal" : 해당 뷰 안의 내용물 위치에 대한 정렬방식 지정

• center : 부모 뷰의 중앙에 위치
• center_horizontal : 부모 뷰의 수평기준으로 중앙에 위치
• center_vertical : 부모 뷰의 수직기준으로 중앙에 위치
• end : 부모 뷰에서 텍스트 방향의 끝에 위치 (한,영 경우 오른쪽)
• left : 부모 뷰에서 왼쪽에 위치
• right : 부모 뷰에서 오른쪽으로 위치
• top : 부모 뷰에서 위쪽에 위
• bottom : 부모 뷰에서 아래 쪽에 위치

• android: layout_gravity = "center" : 위젯 위치에 대한 정렬방식 지정

• android: maxLength = "5" : 띄어쓰기를 포함하여 최대 보여지는 글자 수
• android: maxLines = "1" : 여러 줄 일때 보여지는 최대 줄 수 (minLines)
• android: singleLine = "true" : 여러 줄을 한 줄로 만듦
  • android: ellipsize = "end" : singleLine일 경우, 말 줄임 위치 (start, middle, none, marquee)
  • none : 내용이 길어도 잘려서 보임
  • **marquee : 화면상에서 좌우로 움직이며 내용을 전부 보여줌 

예시 원본

maxLength = "5"

maxLines = "1"

singleLine = "true"

ellipsize = "end"

ToggleButton

• 토글 버튼 : 손가락으로 직접 스위치를 이동시켜 on/off 상태를 변경 

---

 

2. 레이아웃(Layout)

• ViewGroup의 서브 클래스로서, 다른 뷰(위젯 혹은 레이아웃)를 정렬하는 기능을 지닌 UI 요소

ConstraintLayout

• 제약 조건을 사용해 화면을 구성하는 방법
• 다른 레이아웃에서 불가능 했던 기능을 유연하고 다양하게 가능
• constraint 툴바 사용

• Autoconnect : 활성화 시, 위젯을 배치할 때 자동으로 이웃한 위젯과 관계를 맺어줌
• Default Margins : 위젯 간의 기본 마진 값을 지정
• Clear All Constraints : 모든 관계를 삭제
• Infer constraints : 레이아웃 내 배치된 모든 위젯을 현재 위치를 기반으로 관계를 맺어줌
• Guidelines : 수평, 수직 가이드라인을 만들 수 있고, 위젯을 이 가이드라인을 기준으로 정렬 가능

FrameLayout

• 배경 레이아웃 위에 이미지 레이아웃이 보일 수 있게 겹겹히 뒤집어 씌우는 화면을 구성하는 방법
• 여러 View 위젯을 자식으로 추가하면 겹쳐진 형태로 표시되며, 가장 최근에 추가한 것이 가장 상위에 표시

LinearLayout 

• 수평 또는 수직으로 일렬로 배치해 화면을 수정하는 방법
• andriod:orientation = "vartical" : 수평/수직 나열 방향 선택 (horizontal)

• 위젯의 크기에 상관없이 한 줄로만 배열되며, 중첩은 불가하고 지정한 방향으로 쌓이는 형태
• android: layout_weight = "1" : 전체 영역 대비 비율의 개념으로 지정할 수 있는 weight(가중치) 설정

RelativeLayout

• 서로 간의 상대적 배치 관계에 따라 화면에 표시 될 위치가 결정되도록 만드는 방법
• 상대적인 배치 기준을 정하지 않는다면, 내부에서 중첩되서 표시
• android: layout_alignParentTop = "true" : 컨테이너 (오,왼,위,아) 가장자리에 맞춤
• android: layout_centerVitical = "true" : (수평,수직) 방향으로 컨테이너의 가운데 배치

위젯끼리의 관계를 지칭 : id 지정

• layout_alignBaseline : 지정 id와 baseline을 맞춤
• layout_alignBottom : 지정 id와 아래쪽 가장자리를 맞춤
• layout_alignTop : 지정 id와 위쪽 가장자리를 맞춤
• layout_alignLeft : 지정 id와 왼쪽 가장자리를 맞춤
• layout_alignRight : 지정 id와 오른쪽 가장자리를 맞춤
• layout_Above : 지정 id의 위쪽에 배치
• layout_Below : 지정 id의 아래쪽애 배치
• layout_toLeft : 지정 id의 왼쪽에 배치
• layout_toRight : 지정 id의 오른쪽에 배치

TableLayout

• 표 형식(행과 열로 구성)으로 차일드를 배치하는 방법
• <TableRow></TableRow> : 정해진 규칙에 따라 크기가 결정되므로, layout_width/height 지정할 필요 없음

---

활용 예제

 

UI 레이아웃 구성

• LinearLayout내에 3개의 Layout을 추가하고 각각의 weight를 1로 사용
• Linear Layout
  • Button3개를 세로로 배치
  • Layout_gravity를 이용해 위치 조정
• Relative Layout
  • Layout margin : 10dp
  • Button5를 우측 상단에 고정
  • Button4를 Button5 왼쪽에 배치, 오른쪽margin20dp
  • Button6을 Button4 아래로 배치, 왼쪽margin10dp
• Constraint Layout
  • Button7을 레이아웃 중앙에 배치
  • Button8을 Button7 오른쪽 같은 높이에 배치, 왼쪽margin20dp
  • Button9를 Button7 아래로 배치

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F44336"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#9C27B0"
        android:orientation="vertical">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="BUTTON1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="BUTTON2" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:text="BUTTON3" />

    </LinearLayout>


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:background="#4CAF50">

        <Button
            android:id="@+id/btn_button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="20dp"
            android:layout_toLeftOf="@+id/btn_button5"
            android:text="BUTTON4" />

        <Button
            android:id="@+id/btn_button5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:text="BUTTON5" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/btn_button4"
            android:layout_marginLeft="10dp"
            android:text="BUTTON6" />

    </RelativeLayout>
    

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#FFEB3B">

        <Button
            android:id="@+id/btn_button7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="BUTTON7"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:text="BUTTON8"
            app:layout_constraintStart_toEndOf="@+id/btn_button7"
            app:layout_constraintTop_toTopOf="@+id/btn_button7" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="BUTTON9"
            app:layout_constraintStart_toStartOf="@+id/btn_button7"
            app:layout_constraintTop_toBottomOf="@+id/btn_button7" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</LinearLayout>

---

(최종 수정일 24.03.26)