231114 (Android)

Constraint layout

• 앵커를 이용하여 상대적인 위치를 지정하는 레이아웃이다.

이미지 보이기

• android:src: 에 이미지를 지정해야 이미지가 보이게 된다.

안드로이드 싱크

• 코드와 빌드 도구가 별개로 오류가 나기 때문에 싱크를 해주어야 한다.

버튼에 이벤트 설정하기

• 자바 코드에 xml 요소를 가져올 때 R.id.설정한 이름으로 가져올 수 있다.
• 버튼 객체를 설정하고 xml의 요소를 findViewById에 R.id.이름으로 설정해준다.
• 버튼에 setOnClickListener를 설정하고 람다식을 이용하여 작동할 메소드를 작성한다.
• 토스트 창은 하단에 나오는 임시 팝업을 말한다.

Button btn = findViewById(R.id.btn);
        //람다식
        btn.setOnClickListener((v) -> {
            Toast.makeText(this, "토스트창", Toast.LENGTH_SHORT).show();
        });

혼자 구현해보기

<ImageView
        android:id="@+id/imageView"
        android:layout_width="184dp"
        android:layout_height="162dp"
        android:layout_marginTop="48dp"
        android:src="@drawable/ic_launcher_foreground"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.211"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="75dp"
        android:layout_height="20dp"
        android:layout_marginTop="120dp"
        android:text="안녕하세오"
        android:textSize="16sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.567"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="185dp"
        android:layout_height="42dp"
        android:layout_marginTop="12dp"
        android:text="이름: 박찬영"
        android:textColor="#683130"
        android:textSize="28sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.278"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

 

xmlns : xml 내부에 태그가 사용 중이라는 뜻

RelativeLayout

• 상대적 위치를 지정하여 정렬하는 레이아웃이다.
• 크게 6가지 기준이 있다.
• 좌우 위치
  • android:layout_centerHorizontal : 좌우 기준 중앙정렬
  • android:layout_alignParentLeft : 왼쪽 정렬
  • android:layout_alignParentRight : 오른쪽 정렬
• 상하 위치
  • android:layout_centerVertical : 상하 기준 중앙 정렬
  • android:layout_alignParentTop : 상단 정렬
  • android:layout_alignParentBottom : 하단 정렬
• 다른 view와의 상대 위치
  • android:layout_alignLeft : 해당 요소의 좌측 위치를 일치하게 만든다.
  • android:layout_alignBaseline : 해당 요소의 글자가 상대 요소의 글자 아래 위치하도록 정렬
  • android:layout_below : 해당 요소의 상단이 상대 요소의 하단 아래에 위치하도록 한다. 좌우는 신경 쓰지 않는다.
  • android:layout_toLeftOf : 해당 요소의 우측을 상대 요소의 좌측에 맞추도록 한다. 상하는 신경 쓰지 않는다.

RelativeLayout 테스트

<Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="버튼1"
        app:cornerRadius="15dp" />
    <Button
        android:id="@+id/btn2"
        android:text="버튼2"
        android:layout_below="@id/btn1"
        android:layout_alignLeft="@id/btn1"
        app:cornerRadius="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <Button
        android:id="@+id/btn3"
        android:text="버튼3"
        android:layout_toLeftOf="@id/btn2"
        android:layout_below="@id/btn2"
        app:cornerRadius="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <Button
        android:id="@+id/btn4"
        android:text="버튼4"
        android:layout_toRightOf="@id/btn2"
        android:layout_below="@id/btn2"
        app:cornerRadius="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

<TextView
        android:id="@+id/text1"
        android:text="Relativelayout"
        android:layout_centerHorizontal="true"
        android:layout_alignParentTop="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <ImageView
        android:src="@drawable/ic_launcher_foreground"
        android:layout_below="@+id/text1"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="버튼2"
        app:cornerRadius="15dp" />
    <Button
        android:id="@+id/btn1"
        android:text="버튼1"
        android:layout_above="@id/btn2"
        android:layout_alignLeft="@id/btn2"
        app:cornerRadius="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <Button
        android:id="@+id/btn3"
        android:text="버튼3"
        android:layout_below="@id/btn2"
        android:layout_alignLeft="@id/btn2"
        app:cornerRadius="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <Button
        android:id="@+id/btn4"
        android:text="버튼4"
        android:layout_above="@id/btn2"
        android:layout_toRightOf="@id/btn2"
        app:cornerRadius="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <Button
        android:id="@+id/btn5"
        android:text="버튼5"
        android:layout_alignTop="@id/btn2"
        android:layout_toRightOf="@id/btn2"
        app:cornerRadius="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <Button
        android:id="@+id/btn6"
        android:text="버튼6"
        android:layout_below="@id/btn2"
        android:layout_toRightOf="@id/btn2"
        app:cornerRadius="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <Button
        android:id="@+id/btn7"
        android:text="버튼7"
        android:layout_above="@id/btn2"
        android:layout_toLeftOf="@id/btn2"
        app:cornerRadius="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <Button
        android:id="@+id/btn8"
        android:text="버튼8"
        android:layout_alignTop="@id/btn2"
        android:layout_toLeftOf="@id/btn2"
        app:cornerRadius="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <Button
        android:id="@+id/btn9"
        android:text="버튼9"
        android:layout_below="@id/btn2"
        android:layout_toLeftOf="@id/btn2"
        app:cornerRadius="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

LinearLayout

• view 요소를 한 줄로 이어서 넣는 레이아웃이다.
• android:orientation : 가로, 세로 방향 중 쌓을 방향을 지정한다. horizental, vertical
• 정확한 비율로 화면을 나누는 방법
  • weight를 사용하여 linearlayout을 나열하여 비율을 결정할 수 있다.
  • 방향과 같은 속성은 0dp, 방향과 수직인 속성은 match_parent로 설정한다.

<LinearLayout
        android:background="#03A9F4"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </LinearLayout>
    <LinearLayout
        android:background="#FFEB3B"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </LinearLayout>
    <LinearLayout
        android:background="#8BC34A"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

분할하기 테스트

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    >
    <LinearLayout
        android:background="#163357"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent"/>
    <LinearLayout
        android:background="#64441F"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent"/>
</LinearLayout>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    <LinearLayout
        android:background="#183359"
        android:layout_weight="2"
        android:layout_width="match_parent"
        android:layout_height="0dp"/>
    <LinearLayout
        android:background="#B3B2B3"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp"/>
    <LinearLayout
        android:layout_weight="1"
        android:background="#183359"
        android:layout_width="match_parent"
        android:layout_height="0dp"/>
</LinearLayout>