[과제]로또 번호 생성기_UI구현

XML

<?xml versoin = "1.0" encoding = "utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="#FFE900"/> 
    <size
        android:width="44dp"
        android:height="44dp"/>
</shape>

---

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="#D6EDEB"/>
    <stroke
        android:width="1dp"
        android:color="#000000"/>
</shape>

위 코드로 작성하면 다음 화면을 구성할 수 있다.

shape 모양 지정
oval 타원형 (android:shape="oval")
rectangle 사각형 (android:shape="rectangle")
line 선 (android:shape="line")

스타일
solid 단색으로 채워넣기
gradient 시작 color로부터 끝나는 color를 지정하여 그라디언트 효과 주기
stroke 테두리 그려넣기
corners 가장자리를 둥글게 처리
padding 패딩처리

---

이미지 뷰 넣기

BMI 계산기 레이아웃은 다자인 화면에서 끌어다 놓는 방식으로 진행했었는데, 이번에는 xml파일에 직접 작성했다. 나는 개인적으로 xml파일이 더 좋다. 약간 코딩 짱 잘하는거 같아서 ... 좋다 ...

<ImageView
	<!-- 가로, 새로 높이 및 사진 추가 -->
	android:layout_width="300dp"
	android:layout_height="100dp"
	android:src="@drawable/ic_lotto"
    <!-- 레이아웃 -->
	android:layout_marginTop="30dp"
	app:layout_constraintEnd_toEndOf="parent"
	app:layout_constraintStart_toStartOf="parent"
	app:layout_constraintTop_toTopOf="parent"
/>

위 코드로 작성하면 다음 화면을 구성할 수 있다.

---

색상

  <NumberPicker
        <!-- id 이름 정하기-->
        android:id="@+id/np_num"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="38dp"
        <!-- 중간 : 백그라운드 보라 색상-->
        android:background="@android:color/holo_purple"
        <!-- 위 아래 : 파랑 색상-->
        android:solidColor="#4cafff"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

위 코드로 작성하면 다음 화면을 구성할 수 있다.

---

공 추가하기

<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="80dp"
    <!-- Start is left -->
	android:layout_marginStart="16dp"
    <!-- Top는 위! -->
    android:layout_marginTop="32dp"
    <!-- End is right -->
	android:layout_marginEnd="16dp"
    <!-- 백그라운드로 drawable에 있는 bg로 준다. -->
	android:background="@drawable/bg"
	<!-- 가운데서부터 생성됨 -->
    android:gravity="center"
    android:orientation="horizontal"
	<!-- 레이아웃 -->
	app:layout_constraintEnd_toEndOf="parent"
	app:layout_constraintStart_toStartOf="parent"
	<!-- LinearLayout의 Top이 np_num의 바텀에 붙이기-->
	app:layout_constraintTop_toBottomOf="@+id/np_num"
        
		<TextView
            <!-- TextView형태의 공을 만들기 -->
            android:id="@+id/tv_num1"
			<!-- 공 사이즈를 지정해줬기 때문에 따로 하지 않아도된다. --> 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
			<!-- 전체 마진, 위아래왼쪽오른쪽 모두 5dp -->
            android:layout_margin="5dp"
			<!-- 블루 공 먼저 추가하기 -->
            android:background="@drawable/circle_blue"
			<!-- 테스트 관련 -->
            android:text="1"
            android:gravity="center"
            android:textColor="@color/white"
            android:textSize="18sp"
            android:textStyle="bold"
			<!-- 숨겨주기 -->
            android:visibility="gone"
            tools:visibility="gone" />
						.
						.
						.
 </LinearLayout>

LinearLayout

TextView - 공 숨기기 전