[android / xml] 안드로이드 홈스크린위젯 꾸미기 - 레이아웃

이렇게 무난 평범하게 생긴 홈스크린 위젯을 

 

 

이렇게 삐까번쩍하게(?) 바꿔주겠다.

사실 안예쁜거 안다. 

그래도 연습용으로 이것저것 다 해보기로하자.

 

제 1탄 레이아웃 잡기!!!

<LinearLayout
    android:id="@+id/widget_root"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="240dp"
    android:layout_height="110dp"
    android:background="#1f303d"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_prdcd_sell"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:padding="10dp"
        android:text="--"
        android:textColor="@android:color/white"
        android:textSize="14sp" />
    <TextView
        android:id="@+id/tv_prdcd_buy"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:padding="10dp"
        android:text="--"
        android:textColor="@android:color/white"
        android:textSize="14sp" />

    <Button
        android:id="@+id/bt_update"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="환율 업데이트"
        android:textColor="@android:color/holo_blue_dark"
        android:textSize="12sp" />
</LinearLayout>

기존의 코드이다.

 

LinearLayout 컨테이너 안에 TextView 두개와 Button 한개가 수직정렬 되어있다.

 

 

새로운 레이아웃을 분석하면 대략 이런 모양이다. 

 

 

레이아웃 뷰 및 뷰 그룹

 1. LinearLayout

- 내부에 있는 뷰들을(컴포넌트나 xml 덩어리라고 이해하면 된다) 수직 혹은 수평정렬 한다.

- 속성지정은 다음과같이 해준다.

android:orientation="horizontal"  //수평정렬
android:orientation="vertical"  //수직정렬

 

참고링크 

https://acredev.tistory.com/32#%E2%97%8F%C2%A0%20LinearLayout%20%EC%A0%95%EC%9D%98-1

[안드로이드 기초] 리니어 레이아웃 (LinearLayout) 개념과 사용법

 

2.FrameLayout

  - 뷰들을 중첩시키고 싶을 때 사용 한다.

  - 이번 경우에서는 이미지뷰와 텍스트뷰를 중첩시키고 싶어 사용하기로 한다.

  - 가장 마지막(아래)에 있는 뷰가 화면에서는 가장 앞쪽에 배치된다.

  - 속성은 visibility인데,  FrameLayout가 아니라 내부에 있는 뷰에 각각 적용해주어야 한다. 

 android:visibility="visible"   // 뷰가 보인다. 디폴트상태
 android:visibility="invisible" // 뷰의 영역은 존재하지만, 화면에 보이지는 않게 한다. css로 치면 opacity 0 과 같음.
 android:visibility="invisible" // 뷰의 영역 자체를 숨겨버린다. display: none과 같음

 

파란색으로 표시한 부분 처럼 이미지뷰와 텍스트 뷰를 겹쳐서 적용 할 수 있다.

 

** 적용 코드 **

<FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingRight="22dp"
                android:gravity="center">
                <ImageView
                    android:id="@+id/cart_big"
                    android:layout_width="80dp"
                    android:layout_height="90dp"
                    android:src="@drawable/cart_big"
                    android:layout_gravity="left" />
                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center" >
                    <TextView
                        android:id="@+id/tv_Prcd"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="--"
                        android:textColor="@android:color/white"
                        android:layout_gravity="center"
                        android:textSize="16sp" />
                    <TextView
                        android:id="@+id/tv_date"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="--"
                        android:textColor="@android:color/white"
                        android:textSize="12sp" />
                </LinearLayout>
</FrameLayout>

 

 

 

 

참고링크

https://ddioniii.tistory.com/3

[Android/Java] FrameLayout (프레임 레이아웃)

 

 

3.RelativeLayout

- 부모 뷰와 자식 뷰의 상대적인 위치에 따라 배치하는 방법이다.

- css에서 position: relative속성과 비슷하다고 보면 된다. 다만, 기준점을 부모 뿐만아니라 자식으로도 잡을 수 있다는 점이 특이함.

- 속성적용을 통해 기준점을 잡을 수 있다.

// 부모를 기준으로 잡은 위치정렬

android:layout_alignParentTop="true" 	// 부모의 상단에 객체를 배치
android:layout_alignParentBottom="true"	// 부모의 하단에 객체를 배치
android:layout_alignParentRight="true"	// 부모의 우측에 객체를 배치
android:layout_alignParentLeft="true"	// 부모의 좌측에 객체를 배치
android:layout_centerHorizontal="true"	// 부모의 가로축 중앙에 객체를 배치
android:layout_centerVertical="true"	// 부모의 세로축 중앙에 객체를 배치
android:layout_centerInParent="true"	// 부모의 가로, 세로 축 중앙에 객체를 배치



// 자식을 기준으로 잡은 위치정렬

android:layout_above="@id/tv02"		// id값 tv02라는 자식 객체의 상단에 배치
android:layout_below="@id/tv02"		// id값 tv02라는 자식 객체의 하단에 배치
android:layout_toRightOf="@id/tv02"	// id값 tv02라는 자식 객체의 우측에 배치
android:layout_toLeftOf="@id/tv02"	// id값 tv02라는 자식 객체의 좌측에 배치


// 특정객체의 라인을 기준으로 잡은 위치정렬

android:layout_alignTop="@id/tv01"    // id값 tv01이라는 객체의 상단 라인을 기준으로 정렬
android:layout_alignBottom="@id/tv01" // id값 tv01이라는 객체의 하단 라인을 기준으로 정렬
android:layout_alignLeft="@id/tv01"   // id값 tv01이라는 객체의 좌측 라인을 기준으로 정렬
android:layout_alignRight="@id/tv01"  // id값 tv01이라는 객체의 우측 라인을 기준으로 정렬

 

참고링크

https://codechacha.com/ko/relativelayout/

안드로이드 - RelativeLayout으로 레이아웃을 구성하는 방법

 

 

4. ConstraintLayout

- 복잡한 레이아웃을 만들 때 유용하며, 복잡하게 relativeLayout 쓰지 않고 constraintLayout을 쓰는 추세라고 한다.

- 단, 홈스크린 위젯에는 적용불가함.

 

 

 

** 전체 코드 **

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/widget_root"
    android:layout_width="280dp"
    android:layout_height="180dp"
    android:orientation="vertical"
    android:background="#1f303d">

    <!--  헤더부분  -->
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:textColor="@android:color/holo_blue_dark"
        android:paddingLeft="18dp"
        android:paddingRight="18dp"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:background="@drawable/new_shape">

        <ImageView
            android:layout_width="18dp"
            android:layout_height="18dp"
            android:id="@+id/cartSmall"
            android:src="@drawable/cart_small"/>
        <TextView
            android:id="@+id/tv_counter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="12dp"
            android:text="--"
            android:layout_weight="1"
            android:textSize="16sp" />
        <Button
            android:id="@+id/bt_update"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:drawablePadding="8dp"
            android:background="@drawable/refresh"/>

    </LinearLayout>
    <!--  헤더부분 end -->
    <!--  하단 컨텐츠 부분 start  -->
    <LinearLayout
        android:background="#1f303d"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="18dp"
        android:paddingBottom="18dp"
        android:paddingRight="18dp">

        <!--    하단 왼쪽 컨텐츠 start    -->
        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingRight="22dp"
            android:gravity="center">
            <ImageView
                android:id="@+id/cart_big"
                android:layout_width="80dp"
                android:layout_height="90dp"
                android:src="@drawable/cart_big"
                android:layout_gravity="left" />
            <LinearLayout
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center" >
                <TextView
                    android:id="@+id/tv_Prcd"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="--"
                    android:textColor="@android:color/white"
                    android:layout_gravity="center"
                    android:textSize="16sp" />
                <TextView
                    android:id="@+id/tv_date"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="--"
                    android:textColor="@android:color/white"
                    android:textSize="12sp" />
            </LinearLayout>
        </FrameLayout>
        <!--    하단 왼쪽 컨텐츠 end    -->
        <!--    하단 오른쪽 컨텐츠 start    -->
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="center_vertical" >
            <!--    살때 + 가격 start    -->
            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp">
                <TextView
                    android:id="@+id/tv_prdcd_sell"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="8dp"
                    android:text="--"
                    android:textColor="#79ceff"
                    android:textSize="18sp" />
                <TextView
                    android:id="@+id/tv_cost_sell"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="--"
                    android:textColor="@android:color/white"
                    android:textSize="20sp" />
            </LinearLayout>
            <!--    살때 + 가격 end    -->
            <!--    팔때 + 가격 start    -->
            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
                <TextView
                    android:id="@+id/tv_prdcd_buy"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="8dp"
                    android:text="--"
                    android:textColor="#ff1e1e"
                    android:textSize="18sp" />
                <TextView
                    android:id="@+id/tv_cost_buy"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="--"
                    android:textColor="@android:color/white"
                    android:textSize="20sp" />
            </LinearLayout>
            <!--    팔때 + 가격 end    -->
        </LinearLayout>
        <!--    하단 오른쪽 컨텐츠 end    -->
    </LinearLayout>
    <!--  하단 컨텐츠 부분 end  -->
</LinearLayout>