계산기, Java 코드로 화면 구성 , 레이아웃

1) Java 코드로 화면 만들기

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        edt = new EditText(this);
        edt.setHint("여기에 입력하세요");
        baseLayout.addView(edt);

        btn = new Button(this);
        btn.setText("버튼입니다");
        btn.setBackgroundColor(Color.YELLOW);
        baseLayout.addView(btn);

        tview = new TextView(this);
        tview.setText("텍스트뷰입니다.");
        tview.setTextSize(20);
        tview.setTextColor(Color.MAGENTA);
        baseLayout.addView(tview);

        btn.setOnClickListener(new View.OnClickListener() {
            public void onClick(View arg0) {
                tview.setText(edt.getText().toString());
            }
        });
	}

 

1-1 ) 간단한 계산기 

 

public class MainActivity extends AppCompatActivity {
    EditText edit1, edit2;
    Button addbtn,subbtn,mulbtn,divbtn;
    TextView tview;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        edit1 = new EditText(this);
        edit1.setHint("여기에 입력하세요");
        baseLayout.addView(edit1);

        edit2 = new EditText(this);
        edit2.setHint("여기에 입력하세요");
        baseLayout.addView(edit2);

        addbtn = new Button(this);
        addbtn.setText("더하기 버튼입니다");
        addbtn.setBackgroundColor(Color.YELLOW);
        baseLayout.addView(addbtn);

        subbtn = new Button(this);
        subbtn.setText("빼기 버튼입니다");
        subbtn.setBackgroundColor(Color.RED);
        baseLayout.addView(subbtn);

        mulbtn = new Button(this);
        mulbtn.setText("곱셈 버튼입니다");
        mulbtn.setBackgroundColor(Color.GREEN);
        baseLayout.addView(mulbtn);

        divbtn = new Button(this);
        divbtn.setText("나눗셈 버튼입니다");
        divbtn.setBackgroundColor(Color.BLUE);
        baseLayout.addView(divbtn);

        tview = new TextView(this);
        tview.setText("텍스트뷰입니다.");
        tview.setTextSize(20);
        tview.setTextColor(Color.MAGENTA);
        baseLayout.addView(tview);

        addbtn.setOnClickListener(new View.OnClickListener() {
            public void onClick(View arg0) {
                int num1 = Integer.parseInt(edit1.getText().toString());
                int num2 = Integer.parseInt(edit2.getText().toString());

                tview.setText("두 수의 합 : " + (num1+num2));
            }
        });

        subbtn.setOnClickListener(new View.OnClickListener() {
            public void onClick(View arg0) {
                int num1 = Integer.parseInt(edit1.getText().toString());
                int num2 = Integer.parseInt(edit2.getText().toString());

                tview.setText("두 수의 차 : " + (num1-num2) );
            }
        });

        mulbtn.setOnClickListener(new View.OnClickListener() {
            public void onClick(View arg0) {
                int num1 = Integer.parseInt(edit1.getText().toString());
                int num2 = Integer.parseInt(edit2.getText().toString());

                tview.setText("두 수의 곱 : " + (num1*num2) );
            }
        });

        divbtn.setOnClickListener(new View.OnClickListener() {
            public void onClick(View arg0) {
                int num1 = Integer.parseInt(edit1.getText().toString());
                int num2 = Integer.parseInt(edit2.getText().toString());

                tview.setText("두 수의 나눗셈 : " + (num1/num2) );
            }
        });
    }

 

2) Relative Layout

: Relative Layout의 상하좌우에 배치 - 속성값은 true 또는 false로 지정

: Relative Layout의 다른 위젯에 상대 위치에 배치 - 다른 위젯의 id를 지정

- 예제

<Button
        android:id="@+id/baseBtn"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Main" />

    <Button
        android:id="@+id/btnSelf1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/baseBtn"
        android:layout_toLeftOf="@+id/baseBtn"
        android:text="1번" />

    <Button
        android:id="@+id/btnSelf2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/baseBtn"
        android:layout_toLeftOf="@+id/baseBtn"
        android:text="2번" />

    <Button
        android:id="@+id/btnSelf3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/baseBtn"
        android:layout_toLeftOf="@+id/baseBtn"
        android:text="3번" />

    <Button
        android:id="@+id/btnSelf4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/baseBtn"
        android:layout_alignLeft="@+id/baseBtn"
        android:text="4번" />

    <Button
        android:id="@+id/btnSelf5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/baseBtn"
        android:layout_below="@+id/baseBtn"
        android:text="5번" />

    <Button
        android:id="@+id/btnSelf6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/baseBtn"
        android:layout_toRightOf="@+id/baseBtn"
        android:text="6번" />

 

3) 테이블 레이아웃과 그리드 레이아웃을 이용하여 계산기 구현

구현 초기화면

-1) 테이블 레이아웃

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/tableLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <TableRow     //1행
        android:layout_weight="1">

        <EditText
            android:layout_weight = "1"
            android:id="@+id/Edit1"
            android:layout_span="5"
            android:hint="숫자1 입력" />
    </TableRow>

    <TableRow   //2행
        android:layout_weight="1">

        <EditText
            android:layout_weight = "1"
            android:id="@+id/Edit2"
            android:layout_span="5"
            android:hint="숫자2 입력" />
    </TableRow>

    <TableRow    //3행 –5개버튼(0..4)
        android:layout_weight="1">

        <Button
            android:layout_weight = "1"
            android:id="@+id/BtnNum0"
            android:text="0" />

        <Button
            android:layout_weight = "1"
            android:id="@+id/BtnNum1"
            android:text="1" />

        <Button
            android:layout_weight = "1"
            android:id="@+id/BtnNum2"
            android:text="2" />

        <Button
            android:layout_weight = "1"
            android:id="@+id/BtnNum3"
            android:text="3" />

        <Button
            android:layout_weight = "1"
            android:id="@+id/BtnNum4"
            android:text="4" />
    </TableRow>

    <TableRow      //4행 –5개버튼(5...9)
        android:layout_weight="1">

        <Button
            android:layout_weight = "1"
            android:id="@+id/BtnNum5"
            android:text="5" />

        <Button
            android:layout_weight = "1"
            android:id="@+id/BtnNum6"
            android:text="6" />

        <Button
            android:layout_weight = "1"
            android:id="@+id/BtnNum7"
            android:text="7" />

        <Button
            android:layout_weight = "1"
            android:id="@+id/BtnNum8"
            android:text="8" />

        <Button
            android:layout_weight = "1"
            android:id="@+id/BtnNum9"
            android:text="9" />
    </TableRow>

    <TableRow  //5행 - 더하기버튼
        android:layout_weight="1">

        <Button
            android:layout_weight = "1"
            android:id="@+id/BtnAdd"
            android:layout_margin="5dp"
            android:layout_span="5"
            android:text="더하기" />
    </TableRow>

    <TableRow      //6행 – 빼기 버튼
        android:layout_weight="1">

        <Button
            android:layout_weight = "1"
            android:id="@+id/BtnSub"
            android:layout_margin="5dp"
            android:layout_span="5"
            android:text="빼기" />
    </TableRow>

    <TableRow    //7행 - 곱하기버튼
        android:layout_weight="1">

        <Button
            android:layout_weight = "1"
            android:id="@+id/BtnMul"
            android:layout_margin="5dp"
            android:layout_span="5"
            android:text="곱하기" />
    </TableRow>

    <TableRow      //8행 - 나누기버튼
        android:layout_weight="1">

        <Button
            android:layout_weight = "1"
            android:id="@+id/BtnDiv"
            android:layout_margin="5dp"
            android:layout_span="5"
            android:text="나누기" />
    </TableRow>

    <TableRow
        android:layout_weight="1">

        <TextView
            android:id="@+id/TextResult"
            android:layout_margin="5dp"
            android:layout_span="5"
            android:text="계산 결과 : "
            android:textColor="#FF0000"
            android:textSize="20dp" />
    </TableRow>

</TableLayout>

-2) 그리드 레이아웃

: rowCount (행 개수)

  columnCount (열 개수)

  orientation (수평방향과 수직방향 중 우선으로 할 방향 지정), 

  layout_row / layout_column (자신이 위치하 행/열 번호, 0번부터 시작)

  layout_rowSpan / layout_columnSpan(행/열을 지정된 수만큼 확장)

  layout_gravity (주로 fill, fill_vertical, fill_horizontal 등으로 지정하여 확장 시 셀에 꽉 채우는 효과)

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/gridLayoutCal"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:columnCount="5"
    android:rowCount="9">


    <EditText
        android:id="@+id/Edit1"
        android:layout_row="0"
        android:layout_column="0"
        android:layout_columnSpan="5"
        android:layout_gravity="fill_horizontal"
        android:hint="숫자1 입력" />

    <EditText
        android:id="@+id/Edit2"
        android:layout_row="1"
        android:layout_column="0"
        android:layout_columnSpan="5"
        android:layout_gravity="fill_horizontal"
        android:hint="숫자2 입력" />

    <Button
        android:id="@+id/BtnNum0"
        android:layout_row="2"
        android:layout_column="0"
        android:layout_width="80dp"
        android:layout_marginLeft="5dp"
        android:text="0" />

    <Button
        android:id="@+id/BtnNum1"
        android:layout_row="2"
        android:layout_column="1"
        android:layout_width="80dp"
        android:text="1" />

    <Button
        android:id="@+id/BtnNum2"
        android:layout_row="2"
        android:layout_column="2"
        android:layout_width="80dp"
        android:text="2" />

    <Button
        android:id="@+id/BtnNum3"
        android:layout_row="2"
        android:layout_column="3"
        android:layout_width="80dp"
        android:text="3" />

    <Button
        android:id="@+id/BtnNum4"
        android:layout_row="2"
        android:layout_column="4"
        android:layout_width="80dp"
        android:text="4" />

    <Button
        android:id="@+id/BtnNum5"
        android:layout_row="3"
        android:layout_column="0"
        android:layout_width="80dp"
        android:layout_marginLeft="5dp"
        android:text="5" />

    <Button
        android:id="@+id/BtnNum6"
        android:layout_row="3"
        android:layout_column="1"
        android:layout_width="80dp"
        android:text="6" />

    <Button
        android:id="@+id/BtnNum7"
        android:layout_row="3"
        android:layout_column="2"
        android:layout_width="80dp"
        android:text="7" />

    <Button
        android:id="@+id/BtnNum8"
        android:layout_row="3"
        android:layout_column="3"
        android:layout_width="80dp"
        android:text="8" />

    <Button
        android:id="@+id/BtnNum9"
        android:layout_row="3"
        android:layout_column="4"
        android:layout_width="80dp"
        android:text="9" />

    <Button
        android:id="@+id/BtnAdd"
        android:layout_row="4"
        android:layout_column="0"
        android:layout_columnSpan="5"
        android:layout_gravity="fill_horizontal"
        android:layout_margin="5dp"
        android:layout_width="400dp"
        android:text="더하기" />

    <Button
        android:id="@+id/BtnSub"
        android:layout_row="5"
        android:layout_column="0"
        android:layout_columnSpan="5"
        android:layout_gravity="fill_horizontal"
        android:layout_margin="5dp"
        android:text="빼기" />

    <Button
        android:id="@+id/BtnMul"
        android:layout_row="6"
        android:layout_column="0"
        android:layout_columnSpan="5"
        android:layout_gravity="fill_horizontal"
        android:layout_margin="5dp"
        android:text="곱하기" />

    <Button
        android:id="@+id/BtnDiv"
        android:layout_row="7"
        android:layout_column="0"
        android:layout_columnSpan="5"
        android:layout_gravity="fill_horizontal"
        android:layout_margin="5dp"
        android:text="나누기" />

    <TextView
        android:id="@+id/TextResult"
        android:layout_row="8"
        android:layout_column="0"
        android:layout_columnSpan="5"
        android:layout_gravity="fill_horizontal"
        android:layout_margin="5dp"
        android:text="계산 결과 : "
        android:textColor="#FF0000"
        android:textSize="20dp" />


</GridLayout>

 

4) 프레임 레이아웃 (FrameLayout)

: 왼쪽 상단부터 겹쳐서 출력

: 탭 위젯 등과 혼용해서 사용할 때 유용