본문 바로가기
프로그래밍/안드로이드

안드로이드 레이아웃 만들기2

by -현's- 2015. 3. 5.
반응형



●그룹위젯인지 일반위젯인지 판단하는 방법


1. 위젯이 그룹인지 아닌지는 안드로이드 사이트의 api보고 판단한다. 안드로이드 개발자 사이트에 들어가서 위젯을 검색한다.

 ( http://developer.android.com/index.html )









2. Reference는 api문서이고 Guides는 사용하는 방법에 관한 페이지이다. Api를 확인하려면 Reference부분을 클릭한다.






3. 아래처럼 ViewGropu가 있으면 다른 위젯을 포함할수 있는 그룹위젯이고 ViewGroup가 없으면 일반 위젯이다.













●레이아웃의 종류

- Layout은 배치방법에 따라 LinearLayout, FrameLayout, GridLayout, RelativeLayout , TableLayout 등이 있다.

LinearLayout이 제일 많이 쓰이고,  LinearLayout,RelativeLayout  두가지를 적절히 활용하면 웬만한 화면은 구성할 수 있다.







●layout_gravity  vs  gravity (정렬)

- layout_gravity - 자식이 부모위젯의 어디에 정렬할지 결정(자식한테 씀)


- gravity - 자식을 어디에 정렬시킬지(부모한테 씀)





●레이아웃xml 루트 Element 지정하는 두가지 방법


1.xml만들때 Root Element를 선택한다.





2.이미 xml을 만든 이후 Root Element를 변경하고 싶을땐, Graphical Layout모드로 들어가서 우클릭후 Change Layout을 눌러 레이아웃을 변경한다.











●LinearLayout 예제


- 예제1

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >


    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="버튼1"

        android:layout_gravity="center_horizontal" />


    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="버튼2"

        android:layout_gravity="left" />


    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="버튼3"

        android:layout_gravity="right" />


</LinearLayout>







- 예제2

->포함하는게 없느면 굳이 LinearLayout 쓸필요없고  View쓰면 된다.

<?xml version="1.0" encoding="utf-8"?>

<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:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="1"

        android:orientation="horizontal" >

<!-- 왼쪽은 그냥 뷰 -->

        <View

            android:layout_width="0dp"

            android:layout_height="match_parent"

            android:layout_weight="1"

            android:background="#eeeedd" />

<!-- 우측은 LinearLayout -->

        <LinearLayout

            android:layout_width="0dp"

            android:layout_height="match_parent"

            android:layout_weight="1"

            android:orientation="vertical" >

            <View

                android:layout_width="match_parent"

                android:layout_height="0dp"

                android:layout_weight="1"

                android:background="#bbccee" />

            <View

                android:layout_width="match_parent"

                android:layout_height="0dp"

                android:layout_weight="1"

                android:background="#ffffff" />

        </LinearLayout>

    </LinearLayout>


    <View

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="1"

        android:background="#ff0000" >

    </View>


</LinearLayout>







- 예제3

<?xml version="1.0" encoding="utf-8"?>

<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:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_margin="20dp"

        android:background="#ffddff" >

        <LinearLayout

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:layout_margin="20dp"

            android:background="#ecef00" >

            <View

                android:layout_width="match_parent"

                android:layout_height="match_parent"

                android:layout_margin="20dp"

                android:background="#bbeecc" >

            </View>

        </LinearLayout>

    </LinearLayout>


</LinearLayout>









●FrameLayout예제


- 예제1

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/FrameLayout1"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    

    <Button android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="버튼1"

        android:background="#ffffff"/>

   

    <Button android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="버튼2"

        android:background="#edcf00"

        android:layout_marginLeft="40dp"

        android:layout_marginTop="30dp"/>

</FrameLayout>








●GridLayout예제

->이미지 확장자는 png를 많이 쓴다. 이유는 배경 투명이 가능하기 때문이다.gif도 투명배경 가능하지만 png가 화질이 더 좋다.

->res/drawalbe-hdpi,mdpi등 아무곳이나 넣어도 인식한다.


- 예제1

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >


    <TextView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_marginTop="30dp"

        android:gravity="center_horizontal"

        android:text="이미지목록"

        android:textSize="30dp" />


    <GridLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:columnCount="2"

        android:rowCount="1" >

<!-- rowCount 크게 의미없음 -->

        <ImageView

            android:layout_width="75dp"

            android:layout_height="75dp"

            android:src="@drawable/ic_launcher" />


        <ImageView

            android:layout_width="75dp"

            android:layout_height="75dp"

            android:src="@drawable/ic_launcher" />

        <ImageView

            android:layout_width="75dp"

            android:layout_height="75dp"

            android:src="@drawable/ic_launcher" />

        <ImageView

            android:layout_width="75dp"

            android:layout_height="75dp"

            android:src="@drawable/ic_launcher" />

        <ImageView

            android:layout_width="75dp"

            android:layout_height="75dp"

            android:src="@drawable/ic_launcher" />

        <ImageView

            android:layout_width="75dp"

            android:layout_height="75dp"

            android:src="@drawable/ic_launcher" />

        <ImageView

            android:layout_width="75dp"

            android:layout_height="75dp"

            android:src="@drawable/ic_launcher" />

        <ImageView

            android:layout_width="75dp"

            android:layout_height="75dp"

            android:src="@drawable/ic_launcher" />

        <ImageView

            android:layout_width="75dp"

            android:layout_height="75dp"

            android:src="@drawable/ic_launcher" />

        <ImageView

            android:layout_width="75dp"

            android:layout_height="75dp"

            android:src="@drawable/ic_launcher" />

        <ImageView

            android:layout_width="75dp"

            android:layout_height="75dp"

            android:src="@drawable/ic_launcher" />

        <ImageView

            android:layout_width="75dp"

            android:layout_height="75dp"

            android:src="@drawable/ic_launcher" />

        <ImageView

            android:layout_width="75dp"

            android:layout_height="75dp"

            android:src="@drawable/ic_launcher" />

        <ImageView

            android:layout_width="75dp"

            android:layout_height="75dp"

            android:src="@drawable/ic_launcher" />

        <ImageView

            android:layout_width="75dp"

            android:layout_height="75dp"

            android:src="@drawable/ic_launcher" />

        <ImageView

            android:layout_width="75dp"

            android:layout_height="75dp"

            android:src="@drawable/ic_launcher" />

        <ImageView

            android:layout_width="75dp"

            android:layout_height="75dp"

            android:src="@drawable/ic_launcher" />

    </GridLayout>


</LinearLayout>









●TableLayout예제


- 예제1

<?xml version="1.0" encoding="utf-8"?>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/TableLayout1"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    

    

    <!-- 행을 표현하는 위젯 -->

    <TableRow 

        android:layout_width="match_parent"

        android:layout_height="wrap_content">

    <Button 

       android:layout_width="0dp"

       android:layout_height="wrap_content"

       android:text="1"

       android:layout_weight="1"/>    

    <Button 

       android:layout_width="0dp"

       android:layout_height="wrap_content"

       android:text="2"

       android:layout_weight="1"/>    

    <Button 

       android:layout_width="0dp"

       android:layout_height="wrap_content"

       android:text="3"

       android:layout_weight="1"/>   

    </TableRow>

    <TableRow >

    <Button 

       android:layout_width="0dp"

       android:layout_height="wrap_content"

       android:text="4"

       android:layout_weight="1"/>    

    <Button 

       android:layout_width="0dp"

       android:layout_height="wrap_content"

       android:text="5"

       android:layout_weight="1"/>    

    <Button 

       android:layout_width="0dp"

       android:layout_height="wrap_content"

       android:text="6"

       android:layout_weight="1"/>   

    </TableRow>

    <TableRow >

    <Button 

       android:layout_width="0dp"

       android:layout_height="wrap_content"

       android:text="7"

       android:layout_weight="1"/>    

    <Button 

       android:layout_width="0dp"

       android:layout_height="wrap_content"

       android:text="8"

       android:layout_weight="1"/>    

    <Button 

       android:layout_width="0dp"

       android:layout_height="wrap_content"

       android:text="9"

       android:layout_weight="1"/>   

    </TableRow>

    

    

    

</TableLayout>









●RelativeLayout예제

->기준에 따라 두가지로 분류

1.부모위젯을 기준으로

2.형제위젯을 기준으로


- 예제1

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/RelativeLayout1"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

    

    <!-- 바깥쪽 위젯(부모)을 기준으로 하여 상대위치를 지정 -->

    

    <Button 

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="우측아래"

        android:layout_alignParentRight="true"

        android:layout_alignParentBottom="true"/>

    <Button 

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="중앙"

        android:layout_centerInParent="true"/>

    <Button 

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="좌측아래"

        android:layout_alignParentBottom="true"

        android:layout_alignParentLeft="true"/>

    <Button 

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="상단중앙"

        android:layout_alignParentTop="true"

        android:layout_centerHorizontal="true"/>

    

    

    

    

</RelativeLayout>










- 예제1

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    

    <!-- 특정 형제위젯을 기준으로 위치를 지정할 수 있는 상대 레이아웃 

   잘 알아두면 코드량이 현격이 줄어든다.(유용)-->

    

    

<Button 

   android:id="@+id/centerButton"

   android:layout_width="130dp"

   android:layout_height="100dp"

   android:text="중앙 버튼"

   android:layout_centerInParent="true"/>

<Button 

   android:layout_above="@id/centerButton"

   android:layout_alignLeft="@id/centerButton"

   android:layout_width="wrap_content"

   android:layout_height="wrap_content"

   android:text="버튼1"/>

<Button 

   android:layout_below="@id/centerButton"

   android:layout_alignRight="@id/centerButton"

   android:layout_width="wrap_content"

   android:layout_height="wrap_content"

   android:text="버튼2"/>

<Button 

   android:layout_alignTop="@id/centerButton"

   android:layout_toRightOf="@id/centerButton"

   android:layout_width="80dp"

   android:layout_height="wrap_content"

   android:text="버튼3"/>

</RelativeLayout>










●ScrollView예제

->ScrollView는 자식위젯을 하나만 둘수 있다.

->ScrollView는 세로방향만 된다. 가로ScrollView는 따로 있다.(HorizontalScrollView)


- 예제1

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    android:background="#ffdd00"

    android:gravity="center" >

    

    

    <Button 

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="닫기"/>

    <ScrollView  

        android:layout_width="match_parent"

        android:layout_height="match_parent">

        <LinearLayout 

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:orientation="vertical">

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   </LinearLayout>

    </ScrollView>

    

    


</LinearLayout>






●HorizontalScrollView예제


- 예제1

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    android:background="#ffdd00"

    android:gravity="center" >

    

    

    <Button 

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="닫기"/>

    <HorizontalScrollView  

        android:layout_width="match_parent"

        android:layout_height="match_parent">

        <LinearLayout 

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:orientation="horizontal">

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   <ImageView 

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:src="@drawable/ic_launcher"/>

   </LinearLayout>

    </HorizontalScrollView>

    

    


</LinearLayout>








●LinearLayout, EditText, Radio, ImageView 활용한 로그인 폼

->라디오 버튼은 라디오그룹으로 감싸야한다.


- 예제1

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" 

    android:padding="20dp">

    <!-- ID입력 -->

    <LinearLayout 

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal" 

        android:layout_marginTop="100dp">

        <TextView 

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:text="ID"

            android:layout_weight="1"/>

        <EditText 

            android:maxLength="8"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:background="#ffdd00"/>

    </LinearLayout>

    <!-- PW입력 -->

    <LinearLayout 

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal" 

        android:layout_marginTop="5dp">

        <TextView

           

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:text="비밀번호"

            android:layout_weight="1"/>

        <EditText 

            android:password="true"

            android:maxLength="8"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:background="#ffdd00"/>

    </LinearLayout>

    <!-- 성별선택 -->

    <LinearLayout 

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal" 

        android:layout_marginTop="5dp">

        <TextView 

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:text="성별"

            android:layout_weight="1"/>

        <RadioGroup 

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:orientation="horizontal"

            android:layout_weight="1">

       <RadioButton  

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:text="남성"/>

       <RadioButton  

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:text="여성"/>

        </RadioGroup>

    </LinearLayout>

    <!-- 사진입력 -->

    <LinearLayout 

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal" 

        android:layout_marginTop="5dp">

        <TextView 

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:text="사진"

            android:layout_weight="1"/>

        <ImageView  

            android:layout_width="100dp"

            android:layout_height="100dp"

            android:src="@drawable/ic_launcher"/>

    </LinearLayout>

    <!-- 버튼 -->

    <LinearLayout 

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal" 

        android:layout_marginTop="5dp"

        android:gravity="center_horizontal">

        <Button 

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="가입"/>

        <Button 

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="취소"/>

    </LinearLayout>

    

    

    

    

    


</LinearLayout>


















반응형

'프로그래밍 > 안드로이드' 카테고리의 다른 글

안드로이드 버튼 클릭, 화면 이동  (0) 2015.03.06
안드로이드 에러 View requires API level 14 (current min is 10): <GridLayout>  (1) 2015.03.05
안드로이드 스마트폰으로 테스트하면서 개발하기  (0) 2015.03.03
안드로이드 레이아웃 만들기1  (0) 2015.02.22
안드로이드 개발환경 세팅  (0) 2015.02.17

관련글

댓글

티스토리툴바