내일배움캠프 18일차

스탠다드반 개인과제를 오전에 시작하였다.

• 다음과 같이 UI를 작성해보는 것이 스탠다드반 첫번째 과제였다.

• 가장 먼저 메인에 보이는 이미지뷰를 위해 xml파일로 이미지를 작성해주었다

  corners android:radius를 통해 모서리의 둥근 정도를 정해주었고

  약간의 테두리가 있어서 stroke를 살짝 주었다.

  size는 ImageView에서 크기를 조정해줄꺼라서 100dp로 그냥 맞춰놨다.

<ImageView
	android:id="@+id/img_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginStart="10dp"
    android:layout_marginTop="10dp"
    android:layout_marginEnd="10dp"
    android:layout_marginBottom="370dp"
    android:scaleType="fitXY"
    android:src="@drawable/img_radius_pink"
    app:layout_constraintBottom_toTopOf="@id/text_main1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

• scaleType을 fitXY로 설정해줘서 ImageView 크기에 맞게 채워놨고

• 아래 텍스트는 다음과 같이 입력했다.

<TextView
	android:id="@+id/text_main1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Discover Your \nOwn Dream House"
    android:textSize="32sp"
    android:textStyle="bold"
    android:gravity="center"
    android:layout_marginTop="20dp"
    app:layout_constraintTop_toBottomOf="@+id/img_main"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

<TextView
	android:id="@+id/text_main2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/string_main"
    android:gravity="center"
    android:layout_marginTop="25dp"
    android:textSize="13sp"
    android:textStyle="normal"
    app:layout_constraintTop_toBottomOf="@+id/text_main1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

• 너무 긴 string은 string.xml에 적어놓고 사용했다.
  

• 그 다음은 버튼 두개였는데 처음에 한쪽만 둥글게 하는 법을 몰라서 튜터님께 여쭤보고 적용했다.

<androidx.appcompat.widget.AppCompatButton
	android:id="@+id/btn_sign"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="70dp"
    android:layout_marginBottom="40dp"
    android:layout_marginStart="20dp"
    android:background="@drawable/btn_radius_pink"
    android:text="Sign in"
    android:textColor="@color/white"
    android:textStyle="bold"
    android:textSize="22sp"
    android:textAllCaps="false"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/btn_register"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/text_main2" />

<androidx.appcompat.widget.AppCompatButton
	android:id="@+id/btn_register"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="70dp"
    android:layout_marginBottom="40dp"
    android:layout_marginEnd="20dp"
    android:background="@drawable/btn_radius_white"
    android:text="Registre"
    android:textStyle="bold"
    android:textSize="22sp"
    android:textAllCaps="false"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/btn_sign"
    app:layout_constraintTop_toBottomOf="@+id/text_main2" />

• button 색을 바꾸려고 검색해보니 AppCompatButton을 사용하면 가능하다고 해서 사용했고

  버튼의 모양은 한쪽만 둥글게 새로 xml파일을 작성해서 background로 적용시켜 주었다.

  버튼이 자꾸 대문자로 나와서 textAllCaps="false"를 통해 바꿔주었고

  chain 기능에서 packed로 두 버튼을 묶어두었다.

• 왼쪽 버튼
  
• 오른쪽 버튼

• 첫번째 화면 완성본이다. (펭귄은 허전해서 넣어봤다...ㅎㅎ)

• 두번째 화면은 텍스트로 시작해서 TextView를 넣어준다음에 EditText를 넣어줬다.

<EditText
	android:id="@+id/edit1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="50dp"
    android:layout_marginEnd="35dp"
    android:background="@android:color/transparent"
    android:hint="@string/edit_sub"
    android:minHeight="48dp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/text_sub2" />

<EditText
	android:id="@+id/edit2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:layout_marginEnd="200dp"
    android:background="@android:color/transparent"
    android:hint="Password"
    android:minHeight="48dp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="@id/edit1"
    app:layout_constraintStart_toStartOf="@+id/edit1"
    app:layout_constraintTop_toBottomOf="@+id/edit1" />

• hint로 안내 텍스트를 넣어주고 background를 @android:color/transparent로 바꿔주면

  가이드라인이 안보인다고 해서 가이드라인을 없애주었다.

• 그리고 TextView와 버튼을 하나 더 만들었는데 이 버튼은 테두리가 없어서 xml파일을 하나 더 만들어 주었다.

색과 크기는 같지만 stroke만 지워줬다.

• 그리고 이 부분을 어떻게 구현할지 고민을 많이 했는데 중간에 TextView를 넣고 양쪽으로

  ImageView를 만들어서 꾸며주었다. (이 방법이 맞는지는 모르겠다.)

• TextView를 만들고 pink_bar라는 xml 파일을 left, right 두개 만들어서 넣어주었다.
  
  gradient를 줘서 끝으로 갈수록 연해지게 표현해주었고 결과적으로는 괜찮았던것 같다.

• 마지막으로 구글, 페이스북, 애플로 로그인하는 버튼이 있었는데 각 로고를 다운받고

  구현해줄때 자세히 보니 테두리가 조금씩있어서 테두리만 있는 xml을 만들어주었다.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size
        android:width="50dp"
        android:height="50dp" />
    <solid android:color="@android:color/transparent" />
    <corners
        android:radius="100dp"/>
    <stroke
        android:width="0.5dp"
        android:color="#939393" />

</shape>

stroke 색과 두께는 최대한 연하게 주었고 color를 transparent로 설정해서 투명으로 만들었다.

그리고 각 테두리를 일정한 간격으로 둬야해서 chain을 통해 spread로 묶어서 정렬해주었다.

• 처음에 chain 기능을 사용할때 중간을 기준으로 했더니 간격이 서로 달라져서 구글링을 해보니

  chain의 기준은 첫번째를 기준으로 한다고 해서 첫번째를 기준으로 했더니 잘 실행되었다.

<ImageView
	android:id="@+id/img_1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="40dp"
    android:layout_marginStart="80dp"
    android:src="@drawable/circle"
    app:layout_constraintEnd_toStartOf="@+id/img_2"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/text_sub4" />

<ImageView
    android:id="@+id/img_2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/circle"
    app:layout_constraintBottom_toBottomOf="@+id/img_1"
    app:layout_constraintEnd_toStartOf="@+id/img_3"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/img_1"
    app:layout_constraintTop_toTopOf="@+id/img_1" />

<ImageView
    android:id="@+id/img_3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/circle"
    android:layout_marginEnd="80dp"
    app:layout_constraintBottom_toBottomOf="@+id/img_2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/img_2"
    app:layout_constraintTop_toTopOf="@+id/img_2" />

img_1을 기준으로 constraint를 맞춰주었다!

안에 로고는 각 img_1,2,3에 맞춰서 constraint top, bottom, start, end를 parent로 맞춰서 넣어주었다.

완성!

• 중간에 체인때문에 시간을 좀 잡아먹어서 생각보다 오래걸렸다.

  그래도 생각보다는 좀 일찍 끝낸것 같아서 그리고 기능적으로는 모르겠지만 UI는 비슷하게 나와서

  만족스러운것 같다.

하루의 마무리

• 오늘은 TIL을 조금 일찍 작성해서 저녁먹고 이제 개인과제 README(드디어 적네 ㅠㅠ) 작성하고

  운동다녀와야겠다! 생각했던것 보다는 빠르게 마무리지어서 좋다 내일은 개인과제 시작해야겠다.