1. 기본 View 만들기.

기본 View를 만들기 전에 Example 그림을 다시 한번 보면서 어떤 어떤 View들이 들어가있느지 부터 확인을 해 보겠습니다. 

Example

STATUS BAR, ACTION BAR, TextView, EditText, ImageView(혹은 ImageButton), Spinner, Button NAVIGATION BAR로
구성이 되어있네요. 

여기서 STATUS BAR, ACTION BAR는 API 4.0이상으로 빌드 타겟으로 프로젝트를 생성한다면 다른 레이아웃 수정없이 자동적으로 구성이 됩니다. 하지만 여기서 짚고 넘어가야할게 사실상 4.0 이상 버젼보다 2.2(프로요)와 2.3(진져브레드) 가 더 많지요.

(출처 : http://developer.android.com/about/dashboards/index.html)

물론 앱의 빌드 타겟 대상은 개발자 마음대로라 하시고 싶으신 대로 하면됩니만, 제 개인적인 판단으로는 4.0이상으로 해서 현재 약 65%되는 사용자들을 놓치는 것보단 2.2로 빌드하여 많은 사용자들이 이용 할 수 있도록 하는 주의 입니다. 

그럼 여기서 ACTION BAR가 2.2에선 사용 할 수 없는 문제가 발생합니다. 그냥 텍스트 뷰를 ACTION BAR의 크기처럼 만들어도 상관은 없겠지만,  ACTION BAR를 하위 버젼에서도 사용할 수 있는 Open source가 있습니다.

* android-actionbar Open source

URL : https://github.com/johannilsson/android-actionbar

이렇듯 오픈 소스로 이클립스에서 git 연동하여 자신의 프로젝트에 해당 소스를 첨부하여 사용가능한듯 한듯 하나 제가 아직 사용할 줄 몰라서 ㅜㅜ (차후에 공부를 해서;; 이클립스와 git 연동 관련해서 포스팅을 하도록 하겠습니다.ㅜㅜ)

그리하여 제가 한 방법은 소스파일을 다운로드해서 그냥 프로젝트에다 붙여넣기!! ㅎㅎㅎㅎㅎ
우선 AndroidUI 라는 프로젝트를 생성한 후에 다운로드 한 소스파일을 붙여넣는거죠. (프로젝트 생성은 다들 아실꺼라 믿고 그냥 넘어가겠습니다. ㅎㅎ)

76 commits 라고 되어있는 윗부분에 보시면 Downloads 라는 부분이있습니다. 해당 페이지로 가시면 zip 파일 또는 tar.gz 파일로 다운을 받을 수가 있는데, zip 파일을 다운 받은 후 압축풀어서 res에있는 레이아웃 파일이든, 이미지 파일이든 혹은 소스 파일이든 전부 그냥 복사해서 제 프로젝트에다가 추가하겠습니다.

압축을 푸시면 actionbar 폴더와 actionbarexample 폴더가 나옵니다. actionbar 폴더가 오픈 소스라고 보시면 되고, actionbarexample 폴더가 해당 오픈소스로 만든 프로젝트라고 보시면 됩니다. 

actionbar 폴더안에는 res 폴더,src 폴더 및 매니페스트 파일과 몇가지 파일이 나오는데요, 제가 필요한건 소스파일과 res안에있는 파일들이니 다른건 신경쓰고 붙여넣기 해야할 파일들만 보여드릴께요. (해당 파일들을 프로젝트의 같은 이름의 폴더에 넣으시면 됩니다.)

res\drawable

res\drawable-hdip

res\layout

res\values (strings.xml, styles.xml 두 파일은 기본프로젝트에 포함되어있어서 파일 복사가 아니라 내용 복사로 하였습니다.)

string.xml

Failed to open intent...

style.xml

src\com\markupartist\android\widget (소스는 com.markupartist.android.widget 패키지를 새로 만드신 후에 붙여 넣기 하시면 됩니다.)

자 드디어 android-actionbar 소스를 사용할 준비다 다되었군요. (진짜 드디어;;) 그럼 이제 다시 프로젝트로 넘어와서 메인레이아웃 소스를 만들어보도록 하겠습니다.

(코드하이라이터가 왜 이렇게 나타나는지 모르겟네요;; 이클립스에 붙여넣기 하신담에 Ctrl + Shift + F :: 소스 정리 단축키 누르셔야할듯;;)

그럼 몇가지 부분만 짚고 넘어가도록 하겠습니다. 

com.markupartist.android.widget.actionbar 라는 태그가 있는 이 태그는 현제 프로젝트의 특정 소스를 xml 파일에서 뷰로 만들어주는 커스텀 태그라고 보시면 됩니다. 해당 소스를 붙여넣기 할때 com.markupartist.android.widget라는 패키지를 만든후에 복사를 한다고 말씀을 드렸었는데요. 혹시나 다른 패키지의 이름으로 하신분이있다면 이부분을 변경해야하며, res\layout에 붙여넣은 xml파일 내용물에 들어가있는 패키지 명도 바꾸어 주어야 합니다. 

(2) view

(3) Navigation Bar

Navigation Bar는 기본 View와 리스트 View 둘다 완성이 된 이후에 또 오픈 소스를 사용하여 구성을 할 예정이라 단순하게 TextView를 만들어서 배치하여보았습니다. 그 외적인 다른 뷰들은 단순한 마진 값들만 준거라 찬찬히 살펴보시면 될 것이라 믿고, 소스부분으로 넘어가도록 하겠습니다.

(4)MainActivity.java

public class MainActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);	
        
        //ActionBar 객체 얻기
        final ActionBar actionBar = (ActionBar) findViewById(R.id.actionbar);
        actionBar.setTitle("Home"); //액션바에 타이틀 설정
        
        //공유 엑션 객체 생성
        final Action shareAction = new IntentAction(this, createShareIntent(), R.drawable.ic_title_share_default);
        actionBar.addAction(shareAction); //공유 엑션을 엑션바에 추가
        
        //새로운 엑션 추가
        //final Action otherAction = new IntentAction(this, new Intent(this, ListViewActivity.class), R.drawable.ic_title_export_default);
        //actionBar.addAction(otherAction);
        
        //Spinner 설정
        Spinner sp1 = (Spinner)findViewById(R.id.androidui_sp_1);
        Spinner sp2 = (Spinner)findViewById(R.id.androidui_sp_2);
        
        Vector data1 = new Vector();
        Vector data2 = new Vector();
        
        data1.add("2011-12-25");
        data2.add("8:00 am");
        
        ArrayAdapter adapter1 = new ArrayAdapter(
				this,
				android.R.layout.simple_spinner_item,
				data1);

        adapter1.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
		sp1.setAdapter(adapter1);
		
		ArrayAdapter adapter2 = new ArrayAdapter(
				this,
				android.R.layout.simple_spinner_item,
				data2);

		adapter2.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
		sp2.setAdapter(adapter2);
        
    }

    
    public static Intent createIntent(Context context) {
        Intent i = new Intent(context, MainActivity.class);
        i.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
        return i;
    }
    
    
    //공유 엑션 인텐트 만드는 메소드
    private Intent createShareIntent() {
        final Intent intent = new Intent(Intent.ACTION_SEND);	//묵시적 인텐트 선언
        intent.setType("text/plain");	//인텐트 타입지정
        intent.putExtra(Intent.EXTRA_TEXT, "Shared from the ActionBar widget.");	//인텐트 데이터 설정 
        return Intent.createChooser(intent, "Share");	//인텐트 리턴
    }
}

Design::Style > Typography (원본 : Android Developers)

Typography

Design::Style > Metrics and Grid (원본 : Android Developers)

Metrics and Grids

• 당신의 요소가 어떤 장치에 보여기게 되더라고 최소 권장 크기인 7mm보다 작아선 안됩니다.
• 당신은 전체적인 정보 요약과 UI 요소의 타겟팅을 적절히 공략하여야 합니다.

안녕하세요. 블로거 엡뽀라고 합니다.

Android 블로그의 첫번째 포스트!  게다가 Android 카테고리를 먼저 다 포스트 하고 차례 차례 iPhone, Web 도 포스트 할 예정이라, 프로그래밍 카테고리에서의 첫 포스트인데요. 첫 단추를 잘 끼워야 하는 것처럼 맨 첨 포스팅을 어떤 주제로 할까에 대한 고민을 많이 했습니다.

그러다 블로깅 포스트 하는 프로그래밍의 기준을 정하고, 그 기준의 시발점 부터 포스팅을 하면되겠구나 싶었습니다. 그 기준이란 Android에서 제공하는 기본 widget (Android 바탕화면에서 보이는 그 위젯이 아닙니다.) TextView, EditText, ListView 등등 기본 View를 사용가능한 정도를 말합니다.

그리하여 기본 View들을 사용하는 방법을 알았으니, 어떻게 하면 잘 꾸밀수 있을까 하는 점이 첫 시작점인것 같아 Android Developers  래퍼런트 싸이트에서 소개 하고있는 디자인 방법에 대한 번역을 올릴까 합니다.

래퍼런트 싸이트에선 많은 내용을 다루고 있지만 제가 번역할 정도면 다른 분들도 충분히 할 수있을 거라는 가정과 래퍼런트 싸이트에서 직적 보시는게 아무래도 더 좋을 것같아 제가 생각 했을때 중요한 것같은 몇 가지만 번역을 올릴까 합니다. 

Design::Style > Metrics and Grid

Design::Style > Typography

Design::Patterns > Gestures

이에 대한 상세 포스팅은 다음 포스팅으로 하도록 하겠습니다. (글 수를 늘려볼려는 얄팍한 수작)

P.S) 구글 번역기의 도움을 받아 발 번역한거라 무한 테클 환영합니다.