달력

3

« 2024/3 »

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
2012. 11. 27. 11:52

모바일 디스플레이 화면 변경 I.lib()/I.lib(Android)2012. 11. 27. 11:52

.. .. ..

[펌] : http://android.elex.pe.kr/dev-guide/android-web-app/mobile-web-page

 

 

모바일 장치의 화면은 데스크탑의 모니터보다 작습니다.또한 화면의 크기나 해상도도 다양하기 때문에 브라우저에게 적당한 화면 크기를 알려줘야 합니다.이를 위해 HTML문서의 <head>요소안에 다음과 같이 <meta>요소를 한 줄 추가해야 합니다.

<head>
<title>
모바일 </title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

<meta>요소의 name속성값은 “viewport”이며content속성 값은 다양하게 설정할 수 있습니다.

<meta name="viewport"
content="
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
" />

heightwidth는 문서 작성시에 가정한 픽셀 크기를 지정하거나device-height또는 device-width를 지정해서 장치의 전체 크기를 사용할 수 있습니다.

문서 작성시에 가로폭을 320px로 가정하고 작업했다면 다음과 같은 메타데이터를 사용할 수 있습니다.

<meta name="viewport" content="width=320" />

문서가 가변적인 너비로 작성되었다면 다음과 같은 메타데이터를 사용해서 장치의 크기에 맞는 폭을 갖도록 지정할 수 있습니다.

<meta name="viewport" content="width=device-width" />

initial-scale, minimum-scale, maximun-scale, user-scalable을 지정해서 화면의 줌(zoom)을 지정할 수 있습니다.initial-scale은 페이지 로딩시의 크기이고,minimum-scale은 최소 크기,maximun-scale은 최대 크기이며,각각의 값은 화면 크기의 비율을 부동소수값으로 지정합니다.user-scalableyes또는 no를 지정해서 사용자가 화면 크기를 확대/축소할 수 있는지를 지정합니다.

화면의 픽셀 밀도를 지정하려면 원하는 dpi값을 지정하거나 device-dpi, high-dpi, medium-dpi, low-dpi 등의 값을 지정하면 됩니다.

화면 픽셀 밀도에 따라 별도의CSS파일을 구성하려면 <link>media속성을 사용해서 다음과 같이 할 수 있습니다.

<link rel="stylesheet" 
media="screen and (-webkit-device-pixel-ratio: 1.5)"
href="hdpi.css" />
<link
rel="stylesheet"
media="screen and (-webkit-device-pixel-ratio: 1.0)"
href="mdpi.css" />
<link
rel="stylesheet"
media="screen and (-webkit-device-pixel-ratio: 0.75)"
href="ldpi.css" />

자바스크립트에서는 다음과 같은 방식으로 처리를 할 수 있습니다.

if (window.devicePixelRatio == 1.5) {
alert("
고밀도 화면입니다.");
} else if (window.devicePixelRatio == 0.75) {
alert("
저밀도 화면입니다.");
}

CSS를 통해 레이아웃의 크기를 지정할 때에는 가급적이면 절대적인 값(px)보다는 상대적인 값(%)을 사용하는 것이 좋습니다.다음과 같이 장치에 독립적인 메타 데이터를 사용하고 각각의 해상도에 따라 달라져야 하는 크기 문제는 CSS를 밀도 별로 구분하여 적용하는 것이 바람직합니다.

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
.
:
Posted by .07274.
.. .. ..

[펌] : http://mainia.tistory.com/576

개발환경 : JDK 1.5, eclipse-galileo, google API 7, window XP

 

이전 강좌에서도 보았지만 탭을 그대로 두기에는 어딘가 모르게 미흡하다.

색깔도 변경하고 원하는 아이콘을 넣어서 좀더 고급스럽게 만들고 싶을것이다.

 

(1) 탭에 색깔넣기

 

안드로이드에서 제공하는 기본색은 그림을 봐서 알겠지만 Grey 이며 클릭시 색깔이 바뀌었다가

놓으면 다시 원래색깔로 돌아온다.

이 색깔을 바꾸어 보는데 예제의 내용은 탭 호스트에 포함되어있는 자식 탭들을 모두 불러와

for 문을 돌면서 동일한 색깔로 바꾸는 것이다.

// TabHost 포함된 Tab 색깔을 모두 바꾼다

for(int i=0;i<tabHost.getTabWidget().getChildCount();i++){

tabHost.getTabWidget().getChildAt(i)

.setBackgroundColor(Color.parseColor("#734512"));

}


일괄적으로 적용했더니 구분이 가지 않는다. 개별적으로 바꾸고 싶다면 다음과 같이 쓰면 된다.

개발 탭을 알아내는 함수는 getChileAt(i) 이다. i 값은 제일 왼쪽 탭부터 0 으로 시작한다
1 /** TabHost 에 포함된 Tab의 색깔을 모두 바꾼다, 개별적용 */
2 tabHost.getTabWidget().getChildAt(0)
3        .setBackgroundColor(Color.parseColor("#734512"));
4 tabHost.getTabWidget().getChildAt(1)
5        .setBackgroundColor(Color.parseColor("#4E4E9C"));

 

(2) 아이콘 넣기

 

위의 예제에서 아이콘을 넣어 더 고급스럽게 만들어 보자.

아이콘은 drawable 폴더에 넣고 소스에서 getResources().getDrawable() 함수를 호출해

필요한 아이콘의 int 값을 넘겨준다.
1 firstTabSpec.setIndicator("First Tab Name", getResources().getDrawable(R.drawable.guitar));
2 firstTabSpec.setContent(new Intent(this,FirstTab.class));
3   
4 secondTabSpec.setIndicator("Second Tab Name", getResources().getDrawable(R.drawable.quicktime));
5 secondTabSpec.setContent(new Intent(this,SecondTab.class));

 

(3) 원하는 탭을 유지시키기

 

페이지가 로딩되었을때 특정 탭의 내용이 나타날수 있도록 해주고 싶을 때가 있다.

기본은 첫번째 탭인데 2번째 탭을 로딩시 보여주고 싶다면 setCurrentTab(i) 함수를

사용한다.  i 는 위에서 언급했듯이 왼쪽탭부터 0 으로 시작한다
1 /** 탭의 선택 */
2 tabHost.getTabWidget().setCurrentTab(1);

 

(4) 전체 소스  

 

FirstTab, SecondTab 은 기본 Activity 클래스를 만들어서 넣으면 됩니다.

그리고 AndroidManifest.xml 에 두 Activity 가 포함되어 있어야 됩니다.

<activity android:name=".widget.FirstTab" /> 

<activity android:name=".widget.SecondTab" />

01 import android.app.TabActivity;
02 import android.content.Intent;
03 import android.graphics.Color;
04 import android.os.Bundle;
05 import android.widget.TabHost;
06 import android.widget.TabHost.TabSpec;
07   
08 import com.sample.R;
09   
10 public class TabColor extends TabActivity {
11       
12     /** Called when the activity is first created. */
13     @Override
14     public void onCreate(Bundle savedInstanceState) {
15         super.onCreate(savedInstanceState);
16         setContentView(R.layout.tab_color);
17   
18         /** TabHost ID */
19         TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost);
20   
21         /** 새로운 탭을 추가하기 위한 TabSpect */
22         TabSpec firstTabSpec = tabHost.newTabSpec("tid1");
23         TabSpec secondTabSpec = tabHost.newTabSpec("tid1");
24   
25         firstTabSpec.setIndicator("First Tab Name", getResources().getDrawable(R.drawable.guitar));
26         firstTabSpec.setContent(new Intent(this,FirstTab.class));
27         secondTabSpec.setIndicator("Second Tab Name", getResources().getDrawable(R.drawable.quicktime));
28         secondTabSpec.setContent(new Intent(this,SecondTab.class));
29   
30         /** 탭을 TabHost 에 추가한다 */
31         tabHost.addTab(firstTabSpec);
32         tabHost.addTab(secondTabSpec);
33           
34         // TabHost 에 포함된 Tab의 색깔을 모두 바꾼다, 개별적용 
35         tabHost.getTabWidget().getChildAt(0).setBackgroundColor(Color.parseColor("#534512"));
36         tabHost.getTabWidget().getChildAt(1).setBackgroundColor(Color.parseColor("#4E4E9C"));
37           
38         // 탭의 선택
39         tabHost.getTabWidget().setCurrentTab(1);
40     }
41 }

tab_color.xml
01 <?xml version="1.0" encoding="utf-8"?>
02    
03 <TabHost android:layout_width="fill_parent"
04     android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"
05     android:id="@android:id/tabhost">
06     <LinearLayout android:id="@+id/LinearLayout01"
07         android:orientation="vertical" android:layout_height="fill_parent"
08         android:layout_width="fill_parent">
09         <TabWidget android:id="@android:id/tabs"
10             android:layout_height="wrap_content" android:layout_width="fill_parent"></TabWidget>
11         <FrameLayout android:id="@android:id/tabcontent"
12             android:layout_height="fill_parent" android:layout_width="fill_parent"></FrameLayout>
13     </LinearLayout>
14    
15 </TabHost>

'I.lib() > I.lib(Android)' 카테고리의 다른 글

모바일 디스플레이 화면 변경  (0) 2012.11.27
Android(안드로이드) 개발 스킨 변경  (1) 2011.08.16
.
:
Posted by .07274.
.. .. ..
[펌] : http://androidhuman.tistory.com/249

notice
1.스킨은 jpg 파일 하나가 아니다. (폴더구조안에 여러 파일이 존재)
2.AVD 생성시 스킨이 보이지 않는다면 Eclipse 를 재구동 한다. (이클립스 실행시 물고 올라가는듯)



이 게시물을 무단으로 사용하는 행위(비영리, 영리 포함)는 CCL 2.0 저작자 표시-비영리-변경금지 라이센스에 의거하여 금지되어 있습니다. 원본 글의 출처 및 저작자를 표시해 주신다면 글의 스크랩은 자유롭게 하실 수 있습니다. 단, 비영리 목적의 발표(스터디 등)에 위 글을 사용하고 싶으신 분은 제게 미리 메일로 문의 부탁드립니다.

저작권과 관련된 자세한 사항은 이곳을 참조해 주시기 바랍니다.


안드로이드 에뮬레이터의 기본 스킨은 왠지 삭막(...) 하기만 합니다.
특징도 없고.. 밋밋하고.... 가뜩이나 개발 할 때 피곤한데 기분전환이라도 되어야 할텐데 말이죠!!

그래서 기본 스킨에 질렸다!! 하시는 분들을 위해 스킨 변경 방법을 소개합니다.

우선, 스킨을 다운로드합니다.
스킨은 여러 가지들이 있지만... 마침 삼성 Galaxy 스킨이 있으니 그걸 사용해보죠.

다운로드는 여기에서 받으세요.

파일을 다운로드받으셨다면, 받은 스킨을 안드로이드 SDK폴더/platforms/[SDK버전]/skins 폴더에 풀어줍니다.


그 다음, AVD를 생성합니다.
AVD를 생성할 때, Skin에서 아까 우리가 받은 스킨 이름을 볼 수 있습니다.
선택하시고, AVD를 생성하시면 우리가 받은 스킨을 적용할 수 있습니다. :)



만약, AVD를 새로 만들지 않고 기존 AVD의 스킨을 바꾸시고싶으시다면,
C:\Documents and Settings\[계정이름]\.android\avd\[AVD이름].avd\config.ini 파일을 열어서 스킨 이름과 위치를 바꿔주시면 됩니다.



자, 어때요? 쉽죠? :)
이제 산뜻한 개발환경에서 개발을 계속 해보아요~~


.
:
Posted by .07274.