外柔內强

[10-D2][UI 설계] Style and Theme

[01] Style
        - 자주 사용되는 속성값의 집합에 대해 이름을 붙여 사용함으로써 각각의 View가 속성값이
          변경 되었을 때 일괄적으로 변경하기쉬운 기능을 제공.

1. 단위
    1) px: 화면 픽셀(권장되지 않음), 폰의 해상도에 영향을 많이 받음.
    2) pt: 물리적 포인트
    3) dp: 160-dpi 화면에 상대적인 밀도 독립 픽셀. (View 크기 권장)
    4) sp: dp와 기본 성질이 같으나 글꼴에 따라 크기가 변경됨.( 글꼴 권장, 16sp)

2. res/values/styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="main">
        <item name="android:textSize">16sp</item>
    </style>
    <style name="standard" parent="main">
        <item name="android:textColor">#FFFFFF</item>
    </style>
    <style name="title" parent="main">
        <item name="android:textColor">#00FF00</item>
    </style>
    <style name="btn_1" parent="@android:style/Widget.Button">
        <item name="android:textColor">#000000</item>
        <item name="android:textSize">16sp</item>
        <item name="android:gravity">center_vertical|center_horizontal</item>
    </style>
</resources>

3. 사용
    <TextView 
        android:layout_width="fill_parent" android:layout_height="wrap_content"
        style="@style/title"
        android:text="@string/title" />

[02] Theme
     - Style은 View 단위에 적용되며, Theme는 Activity단위에 제공된다.
     - http://developer.android.com/resources/samples/ApiDemos/res/values/styles.html

1. res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="CustomTheme">       
    <item name="android:windowNoTitle">true</item>
  </style>
</resources>

2. Custom theme 사용: AndroidManifest.xml에 선언
        <activity android:name=".Lesson"
                  android:theme="@style/CustomTheme"
                  android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

[03] 고사성어(TextView, Button, EditText, LinearLayout)

1. 프로젝트 생성
   - Project Type: Android Project
     Project name: Lesson_4
     Application name: Lesson_4
     Package name: android.lesson
     Create Activity(Activity name): Lesson
     Min SDK Version: 4

1) AndroidManifest.xml 설정

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="android.Lesson"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name" android:debuggable="true">
        <activity android:name=".Lesson"
                  android:theme="@style/CustomTheme"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
    <uses-sdk android:minSdkVersion="3" />

</manifest>

2. 문자열 리소스 정의

>>>>> res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="BasicTheme">       
    <item name="android:windowNoTitle">true</item>
  </style>
</resources>

>>>>> res/values/styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="main">
        <item name="android:textSize">16sp</item>
    </style>
    <style name="standard" parent="main">
        <item name="android:textColor">#FFFFFF</item>
    </style>
    <style name="title" parent="main">
        <item name="android:textColor">#00FF00</item>
    </style>
    <style name="btn_1" parent="@android:style/Widget.Button">
        <item name="android:textColor">#000000</item>
        <item name="android:textSize">16sp</item>
        <item name="android:gravity">center_vertical|center_horizontal</item>
    </style>
</resources>

>>>>> res/values/strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="title"> 오늘의 고사성어 </string>
    <string name="app_name"> Lesson </string>
    <string name="btnFirstLbl"> 처음 </string>
    <string name="btnPrevLbl"> ◁ </string>
    <string name="btnNextLbl"> ▷ </string>
    <string name="btnLastLbl"> 마지막 </string>
    <string name="strNo"> 번호: </string>
    <string name="strTitle"> 제목: </string>  
    <string name="strEndLbl"> 종료 </string>           
</resources>

3. View(콘트롤) 생성 및 배치

>>>>> res/layout/main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:padding = "10px">
    <TextView 
        android:layout_width="fill_parent" android:layout_height="wrap_content"
        style="@style/title"
        android:text="@string/title" />
   
    <LinearLayout android:id="@+id/LinearLayout01" android:orientation = "horizontal"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        >
        <TextView android:text="@string/strNo"
            android:id="@+id/txtNo"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            style="@style/standard" />
        <TextView android:text="@string/strTitle"
            android:id="@+id/txtTitle"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            style="@style/standard"  />   
    </LinearLayout>

    <LinearLayout android:id="@+id/LinearLayout04" android:orientation = "horizontal"
        android:layout_width="fill_parent" android:layout_height="60px"
        style="@style/standard" android:gravity="center_horizontal"
        android:padding = "0px">  
        <Button android:text="@string/btnFirstLbl"
            android:id="@+id/btnFirst"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            style="@style/btn_1"/>
        <Button android:text="@string/btnPrevLbl"
            android:id="@+id/btnPrev"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            style="@style/btn_1"/>
        <Button android:text="@string/btnNextLbl"
            android:id="@+id/btnNext"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            style="@style/btn_1"/>
        <Button android:text="@string/btnLastLbl"
            android:id="@+id/btnLast"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            style="@style/btn_1"/>
        <Button android:text="@string/strEndLbl"
            android:id="@+id/btnEnd"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            style="@style/btn_1"/>                     
    </LinearLayout>
       
    <!-- 내용  -->
    <LinearLayout android:id="@+id/LinearLayout03" android:orientation = "horizontal"
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:background="#98FB98" style="@style/standard"
        android:layout_marginTop="5px">
        <TextView android:text=""
            android:id="@+id/txtContent"
            android:layout_width="fill_parent" android:layout_height="wrap_content"
            style="@style/standard" android:textColor="#000000"/>
    </LinearLayout> 
          
</LinearLayout>

4. Class(이벤트) 작성
   - 이벤트 등록은 생성자에서 불가능.

>>>>> LessonVO.java
package android.lesson;

public class LessonVO {
    public int no;
    public String title;
    public String content;
    /**
     *
     */
    public LessonVO() {
        super();
        // TODO Auto-generated constructor stub
    }
    /**
     * @param no
     * @param title
     * @param content
     */
    public LessonVO(int no, String title, String content) {
        super();
        this.no = no;
        this.title = title;
        this.content = content;
    }   
   
}

>>>>> Lesson.java
package android.lesson;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;

public class Lesson extends Activity implements OnClickListener{
    /** Called when the activity is first created. */
   
    ArrayList<LessonVO> list = null;
    LessonVO vo = null;
    int point = 0;
   
    Button btnFirst;
    Button btnPrev;
    Button btnNext;
    Button btnLast;
    Button btnEnd;
   
    /**
     * 기본 생성자
     */
    public Lesson() {
        super();
        System.out.println("Lesson execute.");
       
        list = new ArrayList<LessonVO>();
        vo = new LessonVO(1, "각주구검", "시대의 변천도 모르고 낡은 생각만을 고집하여 이를 고치지않는 어리석음을 비유하여 이르는 말.");
        list.add(vo);
        vo = new LessonVO(2, "견문발검", "모기를 보고 칼을 뽑는다는 뜻으로, 사소한 일에 크게 성내어 덤빔을 이르는 말.");
        list.add(vo);       
        vo = new LessonVO(3, "견인불발", "굳게 참고 버티어 마음이 흔들리거나 마음을 빼앗기지 않음.");
        list.add(vo); 
        vo = new LessonVO(4, "경적필패", "적을 업신여기면 반드시 실패한다는 뜻으로, 적에 대하여 스스로 높이고 큰 체하지 말고 충분한 준비와 각성이 있어야 함을 이르는 말.");
        list.add(vo); 
        vo = new LessonVO(5, "계구우후", "큰 단체의 꼴찌보다는 작은 단체의 우두머리가 됨이 오히려 나음을 이르는 말.");
        list.add(vo); 
        vo = new LessonVO(6, "고진감래", "쓴 것이 다하면 단것이 온다는 뜻으로, 고생끝에 즐거움이 온다는 말.");
        list.add(vo);         
        vo = new LessonVO(7, "광음여수", "세월은 흐르는 물과 같아 한번 가면 되돌아오지 않음.");
        list.add(vo);
        vo = new LessonVO(8, "궁구막추", "궁지에 빠진 도둑이나 적을 모질게 건드리면 해를 입으니 건드리지 말라는 뜻.");
        list.add(vo);
        vo = new LessonVO(9, "낭중지추", "주머니 속의 송곳이라는 뜻으로, 재능이 뛰어난 사람은 숨어있어도 남의 눈에 띄게 됨을 이르는 말.");
        list.add(vo);
        vo = new LessonVO(10, "단기지계", "학문을 중도에서 그만두면 아무 쓸모 없이 된다고 경계함을 이르는 말.");
        list.add(vo);
               

    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        System.out.println("onCreate execute.");
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        this.point = 0;
        LessonVO _vo = (LessonVO)list.get(point);
        display(_vo);

        btnFirst = (Button)findViewById(R.id.btnFirst);
        btnFirst.setOnClickListener(this);
        btnPrev = (Button)findViewById(R.id.btnPrev);
        btnPrev.setOnClickListener(this);        
        btnNext = (Button)findViewById(R.id.btnNext);
        btnNext.setOnClickListener(this);
        btnLast = (Button)findViewById(R.id.btnLast);
        btnLast.setOnClickListener(this);
        btnEnd = (Button)findViewById(R.id.btnEnd);
        btnEnd.setOnClickListener(this); 
    }
   
    @Override
    public void onClick(View v) {
       
        reset();
       
        if(v.getId() == R.id.btnFirst){
            point = 0;
            LessonVO _vo = (LessonVO)list.get(point);
            display(_vo);
        }else if(v.getId() == R.id.btnPrev){
            if (point > 0){
                point = point - 1;
            }
           
            LessonVO _vo = (LessonVO)list.get(point);
            display(_vo);
        }else if(v.getId() == R.id.btnNext){
            if (point < list.size()-1){
                point = point + 1;
            }
           
            LessonVO _vo = (LessonVO)list.get(point);
            display(_vo);
        }else if(v.getId() == R.id.btnLast){
            point = list.size()-1;

            LessonVO _vo = (LessonVO)list.get(point);
            display(_vo);
        }else if(v.getId() == R.id.btnEnd){
            System.exit(0);
        }
    }
   
    public void display(LessonVO _vo){
        TextView txtNo = (TextView)findViewById(R.id.txtNo);
        TextView txtTitle = (TextView)findViewById(R.id.txtTitle);
        TextView txtContent = (TextView)findViewById(R.id.txtContent);
       
        txtNo.setText("번호: " + _vo.no + "/" + list.size());
        txtTitle.setText("     제목: " + _vo.title);
        txtContent.setText(_vo.content);        
    }
   
    public void reset(){
        TextView txtNo = (TextView)findViewById(R.id.txtNo);
        TextView txtTitle = (TextView)findViewById(R.id.txtTitle);
        TextView txtContent = (TextView)findViewById(R.id.txtContent);

        txtNo.setText("");
        txtTitle.setText("");
        txtContent.setText("");       
    }
   
}

[09-D2][UI 설계] Widget Event, Widget(TextView(레이블), Button), LinearLayout

[01] Widget Event

1. Event Type 1: event를 현재 Activity가 구현한 경우, Activity가 규모가 커지면 로직과 이벤트 등록 및
    처리하는 모듈이 복잡하게 엉킬 수 있음. Activity가 간단할 경우 사용.

public class LinearLayoutTest extends Activity implements OnClickListener{
.....
        btnHor = (Button)findViewById(R.id.btnHor);
        btnHor.setOnClickListener(this); 
.....
    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        if(v.getId() == R.id.btnHor){
            lly.setOrientation(LinearLayout.HORIZONTAL);
        }else if(v.getId() == R.id.btnVer){
            lly.setOrientation(LinearLayout.VERTICAL);
        }else if(v.getId() == R.id.btnRight){
            lly.setGravity(Gravity.RIGHT);
        }
    }

2. Event Type 2: event를 내부 무명 클래스로 구현한 경우, 이벤트의 패턴이 다양해 switch문등으로 처리하기
    곤란한 경우.

    Listener  인터페이스는 View클래스의 inner interface로 선언되어 있음으로 View.Listener의 형태로 구현
        btnLeft = (Button)findViewById(R.id.btnLeft);
        btnLeft.setOnClickListener(new Button.OnClickListener(){
            public void onClick(View v){
                lly.setGravity(Gravity.LEFT);
            }
        });

3. Event Type 3: event를 내부 클래스로 구현한 경우, 이벤트의 타입이 비슷하던, 다양하던 사용가능한 형태,
    객체명을 주의해서 지정.

        btnRight = (Button)findViewById(R.id.btnRight);
        btnRight.setOnClickListener(clickLsn);

.....
    Button.OnClickListener clickLsn = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
           switch(v.getId()){
           case R.id.btnRight:
               lly.setGravity(Gravity.RIGHT);
               break;
              
           }
        }
    };

4. Event Type 4: event를 다른 클래스가  구현한 경우, Activity가 단순해지는 효과가 있으나 이벤트를 구현한 클래스 이름을 전부
다르게 지정해야함으로 이벤트가 많아지면 이름지정에 매우 어려움.

-- 이벤트의 구현
public class BtnClickEvent implements OnClickListener{

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        if(v.getId() == R.id.btnHor){
            lly.setOrientation(LinearLayout.HORIZONTAL);
        }else if(v.getId() == R.id.btnVer){
            lly.setOrientation(LinearLayout.VERTICAL);
        }else if(v.getId() == R.id.btnRight){
            lly.setGravity(Gravity.RIGHT);
        }
    }

-- Activity에서의 사용
        BtnClickEvent btnClickEvent = new btnClickEvent();
        btnHor = (Button)findViewById(R.id.btnHor);
        btnHor.setOnClickListener(btnClickEvent); 

[02] Widget(TextView(레이블), Button), LinearLayout

1. TextView(레이블)
   - import android.widget.TextView;
   - 레이블
   - View --> TextView
   - 단순한 문자열의 출력.
   - 출력 문자열은 변경할 수 없다.
   - width, height는 권장하지 않음.

2. Button
   - import android.widget.Button;
   - 버튼
   - View --> TextView --> Button
   - TextView를 상속받으며 사용자의 tab 이벤트를 주로 처리한다.

3. LinearLayout
   - 직선형의 배치 방식, View를 수평 또는 수직의 라인을 View를 배치,
     입력 양식에 많이 사용된다.
   android:orientation: 뷰가 출력될 방향을 지정한다.
   android:layout_width="fill_parent": 부모의 영역을 전부 사용
   android:layout_height="wrap_content": 필요한 만큼만 사용
   android:gravity: 현재 View안에서 View안의 내용을 어디에 배치할 것인지 지정.
   android:gravity = "center_vertical|right" 처럼 중첩 상용 가능.
   android:layout_gravity: 부모 View안에서 View의 내용을 어디에 배치할 것인지 지정.
   android:layout_weight: 부모 View안에서 View가 차지할 비중을 정의.
   android:baselineAligned: 수평으로 배치되는 View들을 아래쪽 라인을 맞춤.

[03] 실습

1. 프로젝트 생성
   - Project Type: Android Project
     Project name: LinearLayoutTest_4
     Application name: LinearLayoutTest_4
     Package name: test.linearLayoutTest
     Create Activity(Activity name): LinearLayoutTest
     Min SDK Version: 4
     Device Configurations: 1.6 -- ADP1, 2.1 -- Nexus One 으로 지정

2. 문자열 리소스 정의

>>>>> res/values/strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">LinearLayoutTest!</string>
    <string name="app_name">LinearLayout 테스트</string>
    <string name="btnHorStr"> 가로 </string>
    <string name="btnVerStr"> 세로 </string>
    <string name="btnLeftStr"> 왼쪽 </string>
    <string name="btnCenterStr"> 가운데 </string>
    <string name="btnRightStr"> 오른쪽 </string>
    <string name="lbl01"> 123 </string>
    <string name="lbl02"> ABC </string>
    <string name="lbl03"> 가나다라마바사 </string>
</resources>

3. View 생성 및 배치
   - Layout파일명은 영어 소문자 및 숫자, _만 가능함.
   - OutLine View의 사용

>>>>> res/layout/main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    />
<LinearLayout android:id="@+id/LinearLayout01"
              android:layout_width="wrap_content" android:layout_height="wrap_content">
    <Button android:id="@+id/btnHor"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="@string/btnHorStr"
            android:textSize="16dp"/>
    <Button android:id="@+id/btnVer"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="@string/btnVerStr"
            android:textSize="16dp"/>
    <Button android:id="@+id/btnLeft"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="@string/btnLeftStr"
            android:textSize="16dp"/>
    <Button android:id="@+id/btnCenter"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="@string/btnCenterStr"
            android:textSize="16dp"/>
    <Button android:id="@+id/btnRight"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="@string/btnRightStr"
            android:textSize="16dp"/>           
</LinearLayout>
<LinearLayout android:id="@+id/LinearLayout02"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:orientation = "horizontal">
    <TextView android:id="@+id/txv01"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="@string/lbl01" android:textColor="#FF0000"
              android:textSize="16dp"/>
    <TextView android:id="@+id/txv02"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="@string/lbl02" android:textColor="#00FF00"
              android:textSize="16dp"/>
    <TextView android:id="@+id/txv03"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="@string/lbl03" android:textColor="#0000FF"
              android:textSize="16dp"/>
        
</LinearLayout>
</LinearLayout>

4. Class(이벤트) 작성

>>>>> src/test.linearLayoutTest.LinearLayoutTest.java
package test.linearLayoutTest;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.LinearLayout;

public class LinearLayoutTest extends Activity implements OnClickListener{

    Button btnHor;
    Button btnVer;
    Button btnLeft;
    Button btnCenter;
    Button btnRight;

    LinearLayout lly;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main); // main.xml
       
        // Event Type 1
        // event를 현재 Activity가 구현한 경우
        btnHor = (Button)findViewById(R.id.btnHor);
        btnHor.setOnClickListener(this); // 이벤트 등록       
        btnVer = (Button)findViewById(R.id.btnVer);
        btnVer.setOnClickListener(this); // 이벤트 등록
       
        // Event Type 2
        // event를 내부 무명 클래스로 구현한 경우
        // Listener  인터페이스는 View클래스의 inner interface로 선언되어 있음으로
        // View.Listener의 형태로 구현
        btnLeft = (Button)findViewById(R.id.btnLeft);
        btnLeft.setOnClickListener(new Button.OnClickListener(){ // 이벤트 등록
            public void onClick(View v){
                lly.setGravity(Gravity.LEFT);
            }
        });
        btnCenter = (Button)findViewById(R.id.btnCenter);
        btnCenter.setOnClickListener(new Button.OnClickListener(){
            public void onClick(View v){
                lly.setGravity(Gravity.CENTER);
            }
        });
       
        // Event Type 3
        // event를 내부 클래스로 구현한 경우
        btnRight = (Button)findViewById(R.id.btnRight);
        btnRight.setOnClickListener(clickLsn);
       
        lly = (LinearLayout)findViewById(R.id.LinearLayout02);
       
    }
   
    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        if(v.getId() == R.id.btnHor){
            lly.setOrientation(LinearLayout.HORIZONTAL);  // 수평 정렬
        }else if(v.getId() == R.id.btnVer){
            lly.setOrientation(LinearLayout.VERTICAL);       // 수직 정렬
        }
    }
   
    Button.OnClickListener clickLsn = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
           switch(v.getId()){
           case R.id.btnRight:
               lly.setGravity(Gravity.RIGHT);
               break;
              
           }
        }
    };

}

[03]  Resource를 XML로 분리하지 않고 Application을 구현하는 방법
         - 안드로이드의 버그로 Widget과 Layout이 같이 출력이 되지 않음으로
           메인 레이아웃에 자식 레이아웃을 추가할시 이상 작동 발생할 수 있음.

1. 프로젝트 생성
   - Project Type: Android Project
     Project name: WidgetCreate_4
     Application name: WidgetCreate_4
     Package name: test.widgetcreate
     Create Activity(Activity name): WidgetCreate
     Min SDK Version: 4

2. WidgetCreate.java

package test.widgetcreate;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

public class WidgetCreate extends Activity implements OnClickListener{
    LinearLayout llyMain;  // 메인 레이아웃

    TextView txvSu1;   // 수 1
    EditText edtSu1;    // [     ]
    TextView txvOper;  // +
    TextView txvSu2;   // 수 2
    EditText edtSu2;    // [     ]
   
    Button btnAdd;        // 결과 
    EditText edtResult;  // [     ]
   
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
       
        llyMain = new LinearLayout(this);
        llyMain.setOrientation(LinearLayout.HORIZONTAL);
        setContentView(llyMain);

        displayUI();   

    }
   
    public void displayUI(){
        // View 생성
        txvSu1 = new TextView(this);   // View 생성
        txvSu1.setText("수1: ");          // 문자열 지정
        txvSu1.setTextSize(16);          // 크기 지정
        txvSu1.setTextColor(Color.rgb(0, 255, 0));  // 색상 지정
        setLLParams(txvSu1);            // layout_height, layout_width 레이아웃 지정
        llyMain.addView(txvSu1);       // 부모 View에 추가
       
        edtSu1 = new EditText(this);
        edtSu1.setWidth(70);
        edtSu1.setTextSize(16);
        setLLParams(edtSu1);
        llyMain.addView(edtSu1);

        txvOper = new TextView(this);
        txvOper.setText(" + ");
        txvOper.setTextSize(16);
        txvOper.setTextColor(Color.rgb(0, 255, 0));
        setLLParams(txvOper);
        llyMain.addView(txvOper);
       
        txvSu2 = new TextView(this);
        txvSu2.setText("수2: ");
        txvSu2.setTextSize(16);
        txvSu2.setTextColor(Color.rgb(0, 255, 0));
        setLLParams(txvSu2);
        llyMain.addView(txvSu2);
       
        edtSu2 = new EditText(this);
        edtSu2.setWidth(70);
        edtSu2.setTextSize(16);       
        setLLParams(edtSu2);
        llyMain.addView(edtSu2);
       
        btnAdd = new Button(this);
        btnAdd.setText("결과");
        btnAdd.setOnClickListener(this);  // 이벤트 등록
        btnAdd.setTextSize(16);
        setLLParams(btnAdd);
        llyMain.addView(btnAdd);
       
       
        edtResult = new EditText(this);
        edtResult.setWidth(100);
        edtResult.setTextSize(16);       
        setLLParams(edtResult);
        llyMain.addView(edtResult);
       
    }
 
    @Override
    public void onClick(View v) {
        if (v == btnAdd){
            int su1 = Integer.parseInt(edtSu1.getText().toString());
            int su2 = Integer.parseInt(edtSu2.getText().toString());
            String str = String.valueOf(su1+su2);  // 문자열 변환
           
            // Toast.makeText(this, str, Toast.LENGTH_SHORT).show();  // 2초
            edtResult.setText(str);
       
        }
   }
   
    //리니어 레이아웃의 파라미터 지정
    private  void setLLParams(View view) {
        view.setLayoutParams(new LinearLayout.LayoutParams(
            LinearLayout.LayoutParams.WRAP_CONTENT,
            LinearLayout.LayoutParams.WRAP_CONTENT));
    }    
}

[08-D2][UI 설계] Widget, View, Layout 개론

[01] UI 설계(Widget, View, Layout) 개론

View ---+--- View(Widget): 안드로이드가 제공하는 콘트롤, TextView, EditText, Button....
            |
            +--- Custom View: 기존의 View 를 상속받아 변경하거나 새롭게 생성.
            |
            +--- ViewGroup --- Layout: View를 배치하고 그룹화 함, LinearLayout, RelativeLayout, TableLayout....
             

1. UI 설계 방법
   - 자바소스상에서 class상에 직접 지정하는 경우와 XML을 이용하는
     방법이 있으며 개발과 유지보수의 장점 때문에 XML이 많이 사용된다.
     XML을 UI 설계로 이용하는 대표적인 언어는 Flex등이 있다.

2. View
   - Widget은 View로 되어있으며 View는 트리구조(상속)를 이루고 있다.
   - 모든 안드로이드의 비주얼 콤포넌트는 View 클래스로부터 내려온다.
   - View는 Widget, Control이라고 부르기도 한다.
   - View --> ViewGroup --> Layout 의 관계를 갖는다.

3. Layout
   - ViewGroup class의 확장
   - View를 담는 컨테이너 역활을 함.

[02] View
      - 화면을 구성하는 UI를 제공한다.
      - API: http://developer.android.com/reference/android/view/View.html

1. 공통 XML 속성
    - View는 많은 공통 속성과 메소드를 가지고 있는데 TextView의 속성이 대부분의 View에
     그대로 적용된다.

   android:id            : View의 아이디  
   android:layout_width  : 부모뷰를 기준으로 한 폭의 의 크기
   android:layout_height : 부모뷰를 높이로한 뷰의 높이
   android:padding       : 외곽선과 뷰안의 내용과의 간격
   android:visibility    : 초기화면 표시 여부
   android:background    : Widget의 배경색을 #RGB, #ARGB, #RRGGBB, #AARRGGBB로 지정
   android:clickable     : 클릭 가능 여부
   android:longClickable : 롱 클릭 가능 여부
   android:focusable     : 키보드 포커스의 가능 여부

2. 공통 메소드
   setEnabled()  : Widget의 사용 가능 여부 지정
   isEnabled()   : Widget이 사용 가능 상태인지 확인
   requestFocus(): 해당 Widget으로 입력 포커스 이동
   isFocused()   : Widget이 현재 포커스를 가지고 있는지 확인
   setFocus()    : Widget에 focus를 지정
   getParent()   : 상위 위젯이나 컨테이너 추출
   findViewById(): 지정한 id에 대한 위젯 추출
   getRootView() : 최상위 컨테이너 추출

3. 레이블
   - import android.widget.TextView;
   - View --> TextView
   - 단순한 문자열의 출력.
   - 출력 문자열은 변경할 수 없다.

3. 버튼
   - import android.widget.Button;
   - 터치 및 클릭 이벤트를 처리한다.
   - View --> TextView --> Button
   - TextView를 상속받으며 사용자의 tab(터치) 이벤트를 주로 처리한다.

4. 이미지
   - import android.widget.ImageView;
   - View --> ImageView: 이미지를 넣을 수 있는 View Class
   - View --> ImageView --> ImageButton: 이미지를 넣을 수 있는 버튼 클래스
  

5. 입력 필드
   - import android.widget.EditText;
   - View --> TextView --> EditText
   - 문자를 입력 받을 수 있는 기능 제공
  
   1) XML 속성
      android:autoText   : 자동 철자 교정
      android:capitalize : 첫 글자를 대문자로 변환
      android:digits     : 특정 숫자만 입력
      android:singleLine : 여러줄을 입력받을 것인지 지정
      android:numeric    : 숫자만 입력 가능
      android:password   : 패스워드 입력 형태 지정
      android:phoneNumber: 전화번호 입력
      android:inputMethod: 특정 형식의 입력 지정

6. 체크 박스
   - import android.widget.CheckBox;
   - View --> TextView --> Button --> CompoundButton
     --> RadioButton --> CheckBox
   - 취미같은 다중 선택 가능

7. 라디오 버튼
   - import android.widget.RadioButton;
   - View --> TextView --> Button --> CompoundButton --> RadioButton
   - 성별같은 단일 선택만 가능
   - RadioGroup에 의해 RadioButton의 그룹화 가능
  

[03] Layout
     - android.view.ViewGroup class 상속 받음.

1. 공통 특성
   android:layout_height      : 부모 뷰 기준, 자식 뷰에 적용, 뷰의 높이.
   android:layout_width       : 부모 뷰 기준, 자식 뷰에 적용, 뷰의 너비, 자식뷰의 경우 필수임.
   android:layout_margin      : 부모 뷰 기준, 뷰의 상하 좌우의 여백 공간.
   android:layout_marginTop   : 부모 뷰 기준, 뷰의 위쪽 여백 공간.
   android:layout_marginBottom: 부모 뷰 기준, 뷰의 아래쪽 여백 공간.
   android:layout_marginRight : 부모 뷰 기준, 뷰의 오른쪽 여백 공간 .
   android:layout_marginLeft  : 부모 뷰 기준, 뷰의 왼쪽 여백 공간.
   android:gravity            : 자식 뷰 기준, View로 부터의 위치.
   android:layout_gravity     : 부모 뷰 기준, 현재 View의 위치.

2. AbsoluteLayout: View가 x,y좌표에 의해서 배치, 레이아웃이 깨질 수 있고 화면의
   구성요소가 서로 잘 맞아 떨어저야함으로 잘 사용되지 않는다.
   안드로이드 SDK 1.5 R1부터 폐기 대상으로 분류되어 더이상 사용되지 않는다.

3. FrameLayout: View를 좌측 상단에 배치, 여러개의 View가 있는 경우 겹쳐서 보임으로
   Layout의 효과는 떨어짐, 사용 빈도는 적음.

4. LinearLayout: 직선형의 배치 방식, View를 수평 또는 수직의 라인을 View를 배치,
   입력 양식에 많이 사용된다.
   android:orientation: 뷰가 출력될 방향을 지정한다.

5. RelativeLayout: 다른 콘트롤에 비례해서 콘트롤의 위치 지정.
   - 뷰를 위치를 설정하기위해 여러번 선언 가능.

   - 부모뷰를 기준으로
     android:layout_marginRight="20px"      : 뷰를 부모의 오른쪽에서 일정 간격 떨어짐
     android:layout_marginTop="60px"        : 뷰를 부모의 위쪽에서 일정 간격 떨어짐
     android:layout_alignParentTop="true"   : 뷰를 부모에서 상단에 배치
     android:layout_centerHorizontal="true" : 뷰를 부모에서 수평 중앙에 배치
     android:layout_alignParentRight="true" : 뷰를 부모에서 오른쪽에 배치
     android:layout_alignParentLeft="true"  : 뷰를 부모에서 왼쪽에 배치
     android:layout_centerVertical="true"   : 뷰를 부모에서 수직 중앙에 배치
     android:layout_centerInParent="true"   : 뷰를 수직, 수평의 중앙에 배치
     android:layout_alignParentBottom="true": 뷰를 부모에서 하단에 배치

   - 주변에 배치된 뷰를 기준으로
     android:layout_toRightOf="@id/idname"    : 주변 특정 뷰의 오른쪽에 배치
     android:layout_toLeftOf="@id/idname"     : 주변 특정 뷰의 외쪽에 배치
     android:layout_alignBaseline="@id/idname": 주변 특정 뷰와 같은 라인에 배치
     android:layout_below="@id/idname"        : 주변 특정 뷰의 아래에 배치
     android:layout_above="@id/idname"        : 주변 특정 뷰의 위에 배치
     android:layout_alignRight="@id/idname"   : 주변 특정 뷰의 오른쪽에 배치
     android:layout_alignLeft="@id/idname"    : 주변 특정 뷰의 왼쪽에 배치
     android:layout_alignTop="@id/idname"     : 주변 특정 뷰의 위쪽에 배치

   - 예) [TEL][SMS]의 경우
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btnSms"
        android:layout_marginLeft="1px"
        android:text="SMS"
        android:textSize="16px"
        android:layout_alignParentRight="true"
    />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btnTel"
        android:layout_marginLeft="6px"
        android:text="TEL"
        android:textSize="16px"
        android:layout_toLeftOf="@id/btnSms"
        />

6. TableLayout: 행과 열의 격자를 이용해 View의 배치.
   - 아래의 레이아웃 특성을 조합하여 사용

     android:stretchColumns="1"             : 두번째 컴럼의 크기를 남는 공간으로 늘림(확장).
     android:stretchColumns=" 늘리려는 column 번호(0~), *"
     android:shrinkColumns=" 필요한 공간만 사용하고 줄이고자 하는 column 번호(0~), *"

     android:stretchColumns="1" android:shrinkColumns="*": 모든 컬럼의 값을 전부
     필요한 만큼만 사용하고 1번째 컬럼을 남은 공간으로 전부 확대

     android:collapseColumns=" 숨기고자 하는 column 번호(0~), *"

     android:layout_span=" 차지하려는 Column 수", 셀 합치기
     android:layout_span="2": 컬럼 2개를 합침.

 
 
     이름:[   ]의 경우 2번째 입력란을 확대함.
     android:layout_marginTop="60px"        : 뷰를 부모의 위쪽에서 일정 간격 떨어짐
     android:layout_alignParentTop="true"   : 뷰를 부모에서 상단에 배치
     android:layout_centerHorizontal="true" : 뷰를 부모에서 수평 중앙에 배치
     android:layout_alignParentRight="true" : 뷰를 부모에서 오른쪽에 배치
     android:layout_alignParentLeft="true"  : 뷰를 부모에서 왼쪽에 배치
     android:layout_centerVertical="true"   : 뷰를 부모에서 수직 중앙에 배치
     android:layout_centerInParent="true"   : 뷰를 수직, 수평의 중앙에 배치
     android:layout_alignParentBottom="true": 뷰를 부모에서 하단에 배치