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

[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("");       
    }
   
}