[email protected]/pds/201207/03/94/2._building_apps-1.pdf · 2012-07-03 · seung-kwon...

1 of 100 Seung-kwon Kim, [email protected]

[email protected]


두 번째 만들 앱(App)은 무엇인가요?


GUI를 구성해 봅시다

이번에 만들 앱에서는 GUI 컴포넌트들을 화면에 구성하기 위해 TableLayout를 이용합니다


Step 1 : 프로젝트를 생성합니다

Project name : TipCalculator Build Target : Android 2.3.3 Application name : Tip Calculator Package name : com.company.tipcalculator Create Activity : TipCalculator

Step 2 : main.xml 파일을 지우고 tipcalculator.xml 이라는 이름으로 layout파일을 다시 만듭니다

tipcalcaultor.xml의 root element로는 TableLayout를 선택합니다


Step 3 : Visual Layout Editor의 설정을 확인하세요

Step 4 : TableLayout의 프로퍼티를 설정합니다

Background : #FFF id : @+id/tableLayout Padding : 5dp Stretch columns : 1,2,3 column 0에 포함된 엘리먼트 중 가장 넓은 폭으로 고정되고, 나머지 1,2,3으로

나머지 폭을 전부 차지하게 한다는 뜻입니다. (엘리먼트에 paddig 값이 붙여진다면 padding 만큼의 폭이 넓어집니다)


Step 5 : 테이블 레이아웃내에 먼저 TableRow를 추가합니다.

Step 6 : 각각의 TableRow에 TextView와 EditView를 디자인 설계에 맞게 추가합니다

tableRow0 : billTextView , billEditView tableRow1 : tenTextView, fifteenTextView, twentyTextView tableRow2 : tipTextView, tip10EditView, tip15EditView, tip20EditView tableRow3 : totalTextView, total10EditView, total15EditView, total20EditView tableRow4 : customTextView, customSeekBar, customTipTextView tableRow5 : tipCustomTextView, tipCustomEditView, totalCustomTextView, totalCustomEditView


Step 7: 의도한 디자인에 맞게 하나하나 설정합니다

tableRow1에 있는 세 개의 textView를 선택한 후 Gravity를 center로 설정합니다 tableRow2,3,5에 있는 모든 editView를 선택한 후 역시 Gravity를 center로, text size를 14sp로 정해 줍니다

TextView의 글자 색을 변경합니다 추가된 모든 textview를 선택한 뒤 Text color 프로퍼티를 #000으로 세팅해 줍니다

tableRow1의 세 개의 textView를 2,3,4번째 칼럼으로 이동시켜줘야 합니다 ->Properties 뷰에서는 이 값을 변경할 수가 없습니다. tipcalculator.xml 탭으로 변경한 후에 tenTextView의 속성에 android:layout_column=“1”을 추가합니다

billEditText의 XML 속성에 android:layout_span=“3”을 직접 입력하여 추가합니다 SeekBar의 XML 속성에도 android:layout_span=“2”을 직접 입력하여 추가합니다

첫 번째 칼럼에 있는 textview의 gravity를 조정하여 원하는 위치로 정렬합니다


Step 7: 의도한 디자인에 맞게 하나하나 설정합니다(2)

레이아웃의 모든 EditText를 선택해서 Focusable과 Long clickable, Cursor Visible를 모두 false로 세팅합니다

tableRow4에 있는 두 개의 textView의 Gravity를 center_vertical로 설정하고, Layout_height를 match_parent로 세팅해 줍니다

customSeekBar의 Progress 프로퍼티를 18로 설정하고, Padding left와 Padding right를 8dp, Padding bottom을 5dp로 세팅합니다. Focusable 프로퍼티를 false로 정해서 포커스가 billEditText에서 이동되지 않게 해줍니다

화면의 크기가 변하더라도 2,3,4번째 칼럼의 너비가 균일하게 확장될 수 있도록, 가장 왼쪽에 있는 칼럼을 제외한 나머지의 Layout weight를 1로 설정합니다.


App에 기능을 추가할 때입니다.

private static final String BILL_TOTAL = "BILL_TOTAL"; private static final String CUSTOM_PERCENT = "CUSTOM_PERCENT"; private double currentBillTotal; private int currentCustomPercent; private EditText tip10EditText; private EditText total10EditText; private EditText tip15EditText; private EditText total15EditText; private EditText tip20EditText; private EditText total20EditText; private EditText billEditText; private TextView customTipTextView; private EditText tipCustomEditText; private EditText totalCustomEditText;



@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.tipcalculator); if(savedInstanceState==null){ currentBillTotal = 0.0; currentCustomPercent = 18; }else{ currentBillTotal = savedInstanceState.getDouble(BILL_TOTAL); currentCustomPercent = savedInstanceState.getInt(CUSTOM_PERCENT); }



tip10EditText = (EditText)findViewById(R.id.tip10EditText); total10EditText = (EditText)findViewById(R.id.total10EditText); tip15EditText = (EditText)findViewById(R.id.tip15EditText); total15EditText = (EditText)findViewById(R.id.total15EditText); tip20EditText = (EditText)findViewById(R.id.tip20EditText); total20EditText = (EditText)findViewById(R.id.total20EditText); customTipTextView = (TextView)findViewById(R.id.customTipTextView); tipCustomEditText = (EditText)findViewById(R.id.tipCustomEditText); totalCustomEditText = (EditText)findViewById(R.id.totalCustomEditText); billEditText = (EditText)findViewById(R.id.billEditText); billEditText.addTextChangedListener(billEditTextWatcher); SeekBar customSeekBar = (SeekBar)findViewById(R.id.customSeekbar); customSeekBar.setOnSeekBarChangeListener(customSeekBarListener); }



private void updateStandard(){ double tenPercentTip = currentBillTotal * 0.1; double tenPercentTotal = currentBillTotal + tenPercentTip; tip10EditText.setText(String.format("%.02f", tenPercentTip)); total10EditText.setText(String.format("%.02f", tenPercentTotal)); double fifteenPercentTip = currentBillTotal * 0.15; double fifteenPercentTotal = currentBillTotal + fifteenPercentTip; tip15EditText.setText(String.format("%.02f", fifteenPercentTip)); total15EditText.setText(String.format("%.02f", fifteenPercentTotal)); double twentyPercentTip = currentBillTotal * 0.2; double twentyPercentToal = currentBillTotal + twentyPercentTip; tip20EditText.setText(String.format("%.02f", twentyPercentTip)); total20EditText.setText(String.format("%.02f", twentyPercentToal)); }



private void updateCustom(){ customTipTextView.setText(currentCustomPercent + "%"); double customTipAmount = currentBillTotal * currentCustomPercent*0.01; double customTotalAmount = currentBillTotal + customTipAmount; tipCustomEditText.setText(String.format("%.02f", customTipAmount)); totalCustomEditText.setText(String.format("%.02f", customTotalAmount)); }



private TextWatcher billEditTextWatcher = new TextWatcher(){

public void afterTextChanged(Editable s) {} public void beforeTextChanged(CharSequence s, int start, int count, int after) {} public void onTextChanged(CharSequence s, int start, int before, int count) {

try{ currentBillTotal = Double.parseDouble(s.toString()); }catch(NumberFormatException e){ currentBillTotal = 0.0; } updateStandard(); updateCustom();

} };



private OnSeekBarChangeListener customSeekBarListener = new OnSeekBarChangeListener() {

public void onStopTrackingTouch(SeekBar seekBar) {}

public void onStartTrackingTouch(SeekBar seekBar) {} public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { currentCustomPercent = seekBar.getProgress(); updateCustom(); }

};



@Override protected void onSaveInstanceState(Bundle outState) { super.onSaveInstanceState(outState); outState.putDouble(BILL_TOTAL, currentBillTotal); outState.putInt(CUSTOM_PERCENT, currentCustomPercent); }

[email protected]/pds/201207/03/94/2._building_apps-1.pdf · 2012-07-03 · seung-kwon...

Documents