4-H. 주사위 앱 & ImageView - 안드로이드 앱 개발로 배우는 자바 코딩 기초
안드로이드 앱 개발로 배우는 자바 코딩 기초
    • 01
      자바 기초 1
    • 1-A. 안드로이드 개발환경 구축
      1-B. 예제를 에뮬레이터로 실행
      1-C. HelloWorld 예제 – TextView 속성 변경
      1-D. 변수 사용방법
      1-E. 산술연산자 – 92% 가 못 푸는 문제
      1-F. Button 위젯 & 문자열 형변환
      1-G. EditText & 가감승제 연산 앱
      1-H. 체질량지수(BMI) 계산기 만들기
      1-I. if, else 조건문
      1-J. 숫자 3개 중에서 최대, 최소값 구하기
      1-K. 난수(Random) 생성 & boolean 변수
      1-L. 홀수 짝수 맞추기 게임
      1-M. Toast 메시지
      1-N. 구구단 게임
      1-O. switch case 조건문
      1-P. 숫자 업다운 게임
      1-Q. 가위바위보 게임 & 복합 연산자(&&)
      1-R. 스마트폰에 앱 설치하기
    • 02
      자바 기초 2
    • 2-A. 코드를 모아놓은 함수
      2-B. 1부터 100까지 더하기 - while 반복문
      2-C. for & do-while 반복문
      2-D. while 과 do-while 의 선택
      2-E. 구구단 표 만들기 & 다중 반복문
      2-F. continue, break
      2-G. 오리,돼지 숫자 구하기
      2-H. 탑 & 다이아몬드 출력 – 하드코딩
      2-I. 탑 & 다이아몬드 출력 – 반복문의 중요성
      2-J. 주민등록 검증기 - String 일부분 추출
      2-K. 무게 추 개수 계산 – 반복문 빠져나오기
      2-L. 1차원 배열
      2-M. 4지선다형 구구단 게임
      2-N. 2차원 배열
      2-O. 달팽이 배열
      2-P. 하노이 타워 - LinearLayout
    • 03
      안드로이드 기초 1
    • 3-A. TextView 위젯
      3-B. Button 위젯에 배경 이미지 지정
      3-C. 브로카 지수 계산기 – 산술 연산
      3-D. EditText 가이드 텍스트
      3-E. 이미지 뷰(ImageView) 위젯
      3-F. 섭씨 & 화씨 온도 변환기 – 산술 연산
      3-G. CheckBox 위젯
      3-H. 아들 낳을 때 까지 – do-while
      3-I. RadioButton 위젯
      3-J. RadioButton 위젯으로 메뉴 선택
      3-K. 마방진 만들기
      3-L. 프로그레스바(ProgressBar) 위젯
      3-M. 슬라이드바(SeekBar) 위젯
      3-N. ATM 기계 – 다중 반복문 빠져나오기
      3-O. RelativeLayout – 상대적 레이아웃
      3-P. OX 퀴즈 앱 – 1차원 배열
    • 04
      안드로이드 기초 2
    • 4-A. LinearLayout – 순차적 레이아웃
      4-B. gravity 속성으로 위젯의 위치 지정
      4-C. FrameLayout 으로 구현한 탭 화면
      4-D. LinearLayout & weight 속성으로 해상도 호환
      4-E. 로또 번호 생성기 – 1차원 배열 & 3중 반복문
      4-F. ListView 에 텍스트 항목 추가
      4-G. ListView 커스텀 아이템
      4-H. 주사위 앱 & ImageView
      4-I. 콤보박스와 유사한 Spinner 위젯
      4-J. RecyclerView 위젯으로 커스텀 리스트 만들기
      4-K. 매직 볼 – ImageView & 가속도 센서
      4-L. ScrollView 위젯으로 이미지 뷰어 만들기
      4-M. WebView 위젯으로 웹브라우저 만들기
      4-N. TableLayout & 계산기
    4-H. 주사위 앱 & ImageView
    04 안드로이드 기초 2
    4-H. 주사위 앱 & ImageView

     

    이번 시간에는 주사위 앱을 만들어 보겠습니다. Button 을 누르면 2개의 주사위 숫자가 변경됩니다. 2개의 ImageView 위젯에 이미지 파일을 표시하겠습니다. Button 위젯에도 배경 이미지를 지정해 보겠습니다.

    이번 단원 핵심 포인트 ]

    레이아웃 파일에서 ImageView 속성 변경 #

    android:src : 이미지 파일 지정

    Ex) android:src=”@drawable/stamp1”

     

    android:scaleType : 이미지 채우는 방식 지정

    Ex) android:scaleType=”fitStart” : 종횡비를 유지하여 스케일한다.

    android:scaleType=”centerInside” : 종횡비를 유지하여 스케일한다뷰의 크기 이하로 채운다.

    android:scaleType=”centerCrop” : 종횡비를 유지하여 스케일한다뷰의 크기 이상으로 채운다.

     

    소스코드로 ImageView 속성 변경 #

    ImageView.setImageResource(int) : Resource ID 로 이미지 지정

    Ex) mImageView.setImageResource(R.drawable.stamp2);

     

    ImageView.setImageDrawable(Bitmap) : Bitmap 으로 이미지 지정

    Ex) Resources res = getResources();

        BitmapDrawable bitmap = (BitmapDrawable) res.getDrawable(R.drawable.stamp2);

        mImageView.setImageDrawable(bitmap);

     

    ImageView.getLayoutParams() : 위젯의 크기 변경

    Ex) mImageView.getLayoutParams().width = 200;

    mImageView.getLayoutParams().height = 200;

     

     

    1) 레이아웃 파일에 위젯 추가 & 배경 이미지 적용

     

    (1) 새로운 소스 프로젝트를 생성하고 이름을 DoubleDice 라고 지정합니다소스 프로젝트를 생성하는 방법은 먼저번 시간에 했던것과 동일합니다.

    소스 프로젝트가 생성되면 이미지 파일을 소스 프로젝트로 복사하겠습니다. [ 부록 /Sample Image ] 폴더에서 아래 8개 파일을 소스 프로젝트 /res /drawable ] 폴더로 복사합니다.

    -      btn_orange_n.png / casino_back02.jpg / dice1.png / dice2.png / dice3.png / dice4.png / dice5.png / dice6.png

    (2) 화면에 위젯을 추가해 보겠습니다레이아웃 정보 파일(activity_main.xml)을 열고, Text 편집 모드로 이동한 다음아래 코드를 입력합니다.

     

    <RelativeLayout

        xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:background="@drawable/casino_back02">

     

        <RelativeLayout

            android:id="@+id/layoutCenter"

            android:layout_width="40dp"

            android:layout_height="100dp"

            android:layout_centerHorizontal="true"

            android:layout_centerVertical="true"/>

     

        <ImageView

            android:id="@+id/imageDice1"

            android:layout_width="100dp"

            android:layout_height="100dp"

            android:layout_centerVertical="true"

            android:layout_toLeftOf="@+id/layoutCenter"

            android:scaleType="fitCenter"

            android:src="@drawable/dice1"/>

     

        <ImageView

            android:id="@+id/imageDice2"

            android:layout_width="100dp"

            android:layout_height="100dp"

            android:layout_centerVertical="true"

            android:layout_toRightOf="@+id/layoutCenter"

            android:scaleType="fitCenter"

            android:src="@drawable/dice1"/>

     

        <Button

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_alignParentBottom="true"

            android:layout_marginBottom="60dp"

            android:layout_centerHorizontal="true"

            android:onClick="onClick"

            android:gravity="center"

            android:textSize="17sp"

            android:textColor="#fff"

            android:text="Run"

            android:background="@drawable/btn_orange_n"/>

     

    </RelativeLayout>

     

    ‘Design’ 편집 모드로 돌아오면 아래와 같은 화면이 보입니다. 2개의 주사위 이미지를 화면 중앙에 표시하였고 아래쪽에는 버튼을 생성하였습니다.

    아래는 메인 레이아웃에 배경 이미지를 지정하는 코드입니다.

        android:background="@drawable/casino_back02">

     

    -      android:gravity="center" : 캡션 텍스트의 위치를 중앙으로 지정.

    -      android:textSize="17sp" : 텍스트 크기를 17sp 로 지정.

    -      android:textColor="#fff" : 텍스트 컬러를 흰색으로 지정.

     

     

    2) 주사위 이미지 변경

    사용자가 Button 을 클릭하면 주사위의 이미지가 변경되는 기능을 구현해 보겠습니다자바 소스 파일 (MainActivity.java) 로 이동해서 아래와 같이 멤버변수를 추가합니다.

     

    public class MainActivity extends AppCompatActivity {

         ImageView imageDice1;

         ImageView imageDice2;

     

        @Override

        protected void onCreate(Bundle savedInstanceState) {

            super.onCreate(savedInstanceState);

            setContentView(R.layout.activity_main);

              imageDice1 = findViewById(R.id.imageDice1);

              imageDice2 = findViewById(R.id.imageDice2);

        }

     

    ImageView 2개를 멤버변수로 선언하였고, onCreate() 함수에서 초기화 하였습니다.

     

    Button 을 누르면 난수를 생성해서 ImageView 의 이미지를 변경하겠습니다소스 파일에 아래와 같이 새로운 함수 2개를 생성합니다.

        void onClick(View v) {

            int[] diceId = {R.drawable.dice1, R.drawable.dice2,

                    R.drawable.dice3, R.drawable.dice4,

                    R.drawable.dice5, R.drawable.dice6};

            int rand = getRandom(6, 0);

            imageDice1.setImageResource( diceId[rand] );

        }

     

        int getRandom(int range, int min) {

            return (int)(Math.random() * range) + min;

        }

     

    onClick() : Button 클릭 이벤트 함수.

     

    아래는 정수형 배열을 생성해서 주사위 이미지의 ID  6개를 저장하는 코드입니다.

    int[] diceId = {R.drawable.dice1, R.drawable.dice2,

                    R.drawable.dice3, R.drawable.dice4,

                    R.drawable.dice5, R.drawable.dice6};

     

    아래는 0 부터 5까지의 난수를 생성해서 1번째 ImageView 의 이미지를 변경하는 코드입니다.

            int rand = getRandom(6, 0);

            imageDice1.setImageResource( diceId[rand] );

     

    getRandom() : 난수를 생성하는 함수입니다.

     

    예제를 다시 실행하고 Button 을 클릭합시다. Button 을 클릭할 때 마다 1번째 주사위의 숫자가 변경됩니다.

    2번째 주사위의 이미지도 변경해 봅시다. onClick() 함수에 아래와 같이 새로운 코드를 추가합니다.

    void onClick(View v) {

            int[] diceId = {R.drawable.dice1, R.drawable.dice2,

                    R.drawable.dice3, R.drawable.dice4,

                    R.drawable.dice5, R.drawable.dice6};

            int rand = getRandom(6, 0);

            imageDice1.setImageResource( diceId[rand] );

              rand = getRandom(6, 0);

              imageDice2.setImageResource( diceId[rand] );

        }

     

    예제를 다시 실행하고 Button 을 클릭합시다. Button 을 클릭할 때 마다 양쪽 주사위의 숫자가 변경됩니다.

    주사위 앱 예제가 완성되었습니다전체 소스코드는 아래와 같습니다.

    public class MainActivity extends AppCompatActivity {

        ImageView imageDice1;

        ImageView imageDice2;

     

        @Override

        protected void onCreate(Bundle savedInstanceState) {

            super.onCreate(savedInstanceState);

            setContentView(R.layout.activity_main);

            imageDice1 = findViewById(R.id.imageDice1);

            imageDice2 = findViewById(R.id.imageDice2);

        }

     

        void onClick(View v) {

            int[] diceId = {R.drawable.dice1, R.drawable.dice2,

                    R.drawable.dice3, R.drawable.dice4,

                    R.drawable.dice5, R.drawable.dice6};

            int rand = getRandom(6, 0);

            imageDice1.setImageResource( diceId[rand] );

            rand = getRandom(6, 0);

            imageDice2.setImageResource( diceId[rand] );

        }

     

        int getRandom(int range, int min) {

            return (int)(Math.random() * range) + min;

        }

    }

     

     

    [연습문제주사위 앱 모니터 해상도 호환

    핸드폰의 화면이 커지면 주사위 앱의 주사위 이미지도 그에 따라서 커지도록 레이아웃 파일을 변경하시오.

     

     

    [연습문제주사위 개수 변경

    주사위 앱에 Button 을 하나 더 추가하시오추가된 Button 을 누르면 토글 모드로 주사위 개수를 1개 혹은 2개로 변경하시오.

    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!

    Registered Questions(0)