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

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

by -현's- 2015. 2. 22.
반응형











●안드로이드 레이아웃을 만들땐 3가지 방법이 있다.

1. 드래그 앤 드로그(잘 사용 안함)

2. xml 코드 편집(제일 많이 사용)

3. 순수 자바 코드로 작성- 디자인 외 작업에 주로 사용되며, 어떤 경우에 위젯을 커스터마이징 할 때 위력을 발휘한다. 단, 무조건 좋은게 아니라 디자인을 구현할때는 오히려 효율성 떨어진다.




● xml 파일 추가하기

 - res->layout폴더에 Android XML Layout File 을 추가한다.









●위젯 

- 위젯은 남을 포함할수 있는 위젯(그룹위젯), 포함 당하는 위젯 2가지가 있다.

다른 위젯을 포함(ViewGroup)하는 위젯은 단순포함인지 배치와 관련(레이아웃)되는 위젯인지로 나뉜다. 

레이아웃을 만들때 LinearLayout을 가장 많이 사용한다.





●위젯을 만들면 반드시 layout_width, layout_height 두가지를 선언해줘야한다. 





Fill_parent vs Match_parent

- Fill_parent와 Match_parent는 같은 것이다.

Match_parent가 최근에 나온 것으로 주로 Match_parent를 쓰면된다.





●ex1


<?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="5"

        android:background="#ff0000"

        android:orientation="horizontal" >

         <!-- 하늘색 레이아웃 -->

        <LinearLayout android:layout_width="0dp"

            android:layout_height="match_parent"

            android:layout_weight="1"

            android:background="#00D8FF">

        </LinearLayout>

         <!-- 녹색 레이아웃 -->

        <LinearLayout android:layout_width="0dp"

            android:layout_height="match_parent"

            android:layout_weight="1"

            android:background="#22741C">

        </LinearLayout>

        

    </LinearLayout>


    <!-- 노란 레이아웃 -->

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="5"

        android:background="#ffdd00" >

    </LinearLayout>


    <!-- 하얀 레이아웃 -->

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="5"

        android:background="#ffffff" >

    </LinearLayout>


</LinearLayout>






●ex2


<?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:gravity="center"

    android:orientation="vertical" >


    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="나 버튼" />


</LinearLayout>













●ex3


<?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" >

    

    <LinearLayout 

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="vertical"

        android:background="#66cc66"

        android:layout_margin="15dp">

        <!-- 아이디 입력라인 -->

        <LinearLayout 

            android:layout_width="match_parent"

            android:layout_height="0dp"

            android:layout_weight="1"

            android:orientation="horizontal"

            android:background="#ffcc99">

            <TextView 

                android:layout_width="0dp"

                android:layout_height="wrap_content"

                android:text="ID"

                android:textSize="25dp"

                android:layout_weight="2"

                android:background="#F361A6"/>

            <EditText android:layout_width="0dp"

                android:layout_height="wrap_content"

                android:text="아이디를 입력하세요"

                android:background="#ffffff"

                android:layout_weight="3"/>

            

        </LinearLayout>

        <!-- 비밀번호 입력라인 -->

        <LinearLayout 

            android:layout_width="match_parent"

            android:layout_height="0dp"

            android:layout_weight="1"

            android:orientation="horizontal"

            android:background="#747474">

            <TextView 

                android:layout_width="0dp"

                android:layout_height="wrap_content"

                android:text="비밀번호"

                android:textSize="25dp"

                android:layout_weight="2"

                android:background="#F361A6"/>

            <EditText android:layout_width="0dp"

                android:layout_height="wrap_content"

                android:text="비밀번호를 입력하세요"

                android:background="#ffffff"

                android:layout_weight="3"/>

            

        </LinearLayout>

        <!-- 버튼 라인 -->

        <LinearLayout 

            android:layout_width="match_parent"

            android:layout_height="0dp"

            android:layout_weight="1"

            android:orientation="horizontal"

            android:background="#22741C"

            android:gravity="right">


            <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>

</LinearLayout>














●자바코드로 레이아웃 위젯 만들기

package com.example.ex2;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.ViewGroup.LayoutParams;
import android.widget.Button;
import android.widget.LinearLayout;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //디자인에 사용할 xml을 명시한다.
        //setContentView(R.layout.activity_main);
        
        
        //안드로이드에서 디자인을 구현하는 방법은 총3가지가 있다.
        //1. 드래그앤 드래그
        //2. xml로 디자인
        //3. java코드로 디자인
        
        //ex2.xml의 디자인 코드를 순수 자바로 작성
        
        //1단계:리니어 레이아웃 객체를 메모리에 올리자(일반클래스이므로 new로 올리자)
        LinearLayout layout = null;
        //모든 위젯은 자신이 붙여질 액티비티를 알아야 하므로, 생성자의 인수로 넣어줘야 한다.
        layout = new LinearLayout(this);
        //vertical, horizontal 상수를 인수로 대입
        layout.setOrientation(LinearLayout.VERTICAL);
        //width, height 값 명시하기
        //레이아웃 파라미터 객체를 사용해야함
        //각종 속성을 지정할대 유용
        LayoutParams params = null;
        params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
        
        //리니어 레이아웃에 파라미터를 적용한다.
        layout.setLayoutParams(params);
        layout.setGravity(Gravity.CENTER);
        //버튼을 생성하여 리니어에 부착해보자
        Button btn;
        btn = new Button(this);
        btn.setText("자바로 만든 버튼");
        
        //버튼에 사용할 레이아웃 파람스객체 생성 및 적용
        LayoutParams params2 = null;
        params2 = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        
        btn.setLayoutParams(params2);
        
        //리니어 레이아웃에 버튼 부착
        layout.addView(btn);
        
        //xml로 디자인을 구성하지 않고, 코드중 LinearLayout을 부모로하여 디자인을 수정했기 때문에
        //setContentView메서드의 인수로 LinearLayout을 넣어주면 된다.
        
        setContentView(layout);
        
    }
}














●프로젝트 실행하기

- 상단 세모모양을 클릭한 후 Run Configurations를 선택한다.







- 상단 탭 중 Target을 클릭한 후 3번째 automatiscally pick~~을 선택 한 후 본인이 만든 AVD을 체크 한후 apply를 누르고 Run을 실행한다.











반응형

댓글