4-K. 매직 볼 – 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-K. 매직 볼 – ImageView & 가속도 센서
    04 안드로이드 기초 2
    4-K. 매직 볼 – ImageView & 가속도 센서

     

    이번 시간에는 질문에 대답해주는 매직 볼 앱을 만들어 보겠습니다폰을 흔들면 답변 종류가 변경되는 기능도 구현해 보겠습니다.

    이번 단원 핵심 포인트 ]

    가속도 센서 사용방법

    센서 관리자 구하기

    ex) SensorManager mSensorMgr = (SensorManager)getSystemService(Context.SENSOR_SERVICE );

     

    가속도 센서 지정하기

    ex) mSensorMgr.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);

     

    - SensorEventListener sensorListener : 센서 이벤트 리스너

     

    - onSensorChanged(SensorEvent event) : 센서 이벤트 함수

     

     

    1) 레이아웃 파일에 위젯 추가

     

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

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

    btn_orange_n.png / magic_ball1.png / magic_ball2.png / magic_ball3.png / magic_ball4.png

    (2) 레이아웃 정보파일에 (/res/layout/activity_main.xml) 1개의 ImageView  1개의 Button 위젯을 추가해 보겠습니다레이아웃 파일에 아래와 같이 코드를 추가합니다.

     

    <RelativeLayout

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

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:background="#777">

     

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_marginTop="30dp"

            android:layout_centerHorizontal="true"

            android:textColor="#fff"

            android:textSize="25sp"

            android:text="Ask me anything!" />

     

        <ImageView

            android:id="@+id/imageBall"

            android:layout_width="250dp"

            android:layout_height="250dp"

            android:layout_centerHorizontal="true"

            android:layout_centerVertical="true"

            android:scaleType="fitCenter"

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

     

        <Button

            android:layout_width="160dp"

            android:layout_height="wrap_content"

            android:layout_centerHorizontal="true"

            android:layout_alignParentBottom="true"

            android:layout_marginBottom="20dp"

            android:onClick="onClick"

            android:background="@drawable/btn_orange_n"

            android:textColor="#fff"

            android:text="Shake Me~~"/>

     

    </RelativeLayout>

     

    TextView 를 화면 위쪽 중앙에 생성하였습니다.

    ImageView 를 화면 정중앙에 생성하였습니다.

    Button 을 화면 아래쪽 중앙에 생성하였습니다.

    2) 볼 이미지 변경

     

    (1) 위젯 변수 초기화

    ImageView 위젯 변수를 생성하겠습니다자바 소스파일 (MainActivity.java) 로 이동해서 아래와 같이 멤버변수를 추가합니다그리고 onCreate() 함수에서 초기화 해줍니다.

     

    public class MainActivity extends AppCompatActivity {

          ImageView imageBall;

     

        @Override

        protected void onCreate(Bundle savedInstanceState) {

            super.onCreate(savedInstanceState);

            setContentView(R.layout.activity_main);

              imageBall = findViewById(R.id.imageBall);

        }

     

     

    (2) 랜덤으로 볼 이미지 변경

    Button 을 누르면 랜덤으로 볼 이미지가 변경되는 기능을 구현해 보겠습니다소스 파일에 아래와 같이 2개의 함수를 생성합니다.

    void onClick(View v) {

            int[] imageId = {R.drawable.magic_ball1, R.drawable.magic_ball2

                    , R.drawable.magic_ball3, R.drawable.magic_ball4};

            int rand = getRandom(4, 0);

            imageBall.setImageResource( imageId[rand] );

        }

     

        int getRandom(int range, int min) {

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

        }

     

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

     

    아래는 4개의 볼 이미지 ID 를 정수형 배열에 저장하는 코드 입니다.

            int[] imageId = {R.drawable.magic_ball1, R.drawable.magic_ball2

                    , R.drawable.magic_ball3, R.drawable.magic_ball4};

     

    아래는 난수에 해당하는 이미지를 ImageView 에 표시하는 코드 입니다.

            imageBall.setImageResource( imageId[rand] );

     

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

     

    예제를 실행하고 Button 을 누르면 매직 볼 이미지가 변경됩니다.

    3) 폰을 흔들어서 볼 이미지 변경

     

    (1) 가속도 센서

    핸드폰을 흔들면 매직 볼 이미지가 변경되는 기능을 구현해 보겠습니다아래와 같이 새로운 멤버변수를 생성하고, onCreate() 함수에서 초기화 해줍니다.

     

    public class MainActivity extends AppCompatActivity {

          ImageView imageBall;

    SensorManager mSensorMgr = null;

     

      @Override

      protected void onCreate(Bundle savedInstanceState) {

          super.onCreate(savedInstanceState);

          setContentView(R.layout.activity_main);

          imageBall = findViewById(R.id.imageBall);

     

          mSensorMgr = (SensorManager)getSystemService(Context.SENSOR_SERVICE );

          Sensor sensorAcceler =

    mSensorMgr.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);

          if( sensorAcceler != null )

              mSensorMgr.registerListener(sensorListener, sensorAcceler,

    SensorManager.SENSOR_DELAY_UI);

     }

     

    SensorManager : 모든 센서를 관리하는 클래스이미 생성되어 있기 때문에 getsystemService() 함수로 가져오면 됩니다.

     

    SensorManager.getDefaultSensor() : 특정 센서 객체를 반환하는 함수. TYPE_ACCELEROMETER 를 파라미터로 전달하면 가속도 센서가 반환됩니다. null 이 반환되면 핸드폰에 가속도 센서가 없다는 의미입니다.

     

    SensorManager.registerListener() : 센서 이벤트를 수신하는 리스너를 지정하는 함수리스너 객체는 지금부터 만들어 보겠습니다.

     

    소스파일 내부에 아래와 같이 새로운 코드를 입력합니다센서 이벤트를 수신하는 리스너 객체를 생성하고 이벤트 함수를 정의하는 코드입니다.

     

        SensorEventListener sensorListener = new SensorEventListener() {

            public void onAccuracyChanged(Sensor sensor, int accuracy) {}

     

            public void onSensorChanged(SensorEvent event) {

                if (event.sensor.getType() == Sensor.TYPE_ACCELEROMETER) {

                    float v[] = event.values;

                    double sum = Math.abs(v[0]) + Math.abs(v[1]) + Math.abs(v[2]);

                    if( sum > 30 ) {

                        onClick(null);

                    }

                }

            }

        };

     

    SensorEventListener : 센서 이벤트를 수신하는 리스너리스너를 정의할 때는 가상 함수를 모두 생성해 주어야 합니다.

     

    onAccuracyChanged() : 센서 정확도가 변경될 때 실행되는 이벤트 함수이번 예제에서는 사용하지 않지만 헤더부분은 만들어 주어야 합니다.

     

    onSendorChanged() : 센서 값이 변경될 때 실행되는 이벤트 함수.

     

    SensorEvent : 센서 값을 저장하는 클래스.

     

    SensorEvent.sensor.getType() : 센서의 종류를 반환하는 함수. TYPE_ACCELEROMETER 이면 가속도 센서를 의미합니다.

     

    SensorEvent.values : X, Y, Z축 센서 값이 저장된 배열.

     

    Math.abs() : 음수를 양수로 변경해서 절대값을 반환하는 수학 함수.

     

    아래는 X, Y, Z축 가속도 값의 합계를 구하는 코드입니다중력이 존재하기 때문에 항상 기본값은 9.8 입니다약하게 흔들때의 가속도 합계는 20, 강하게 흔들때의 가속도 합계는 30 정도입니다사용자가 폰을 흔들면 버튼 클릭 이벤트 함수를 실행합니다.

     

                    double sum = Math.abs(v[0]) + Math.abs(v[1]) + Math.abs(v[2]);

                    if( sum > 30 ) {

                        onClick(null);

                    }

     

    예제를 핸드폰에 설치하고폰을 흔들어 봅시다. Button 을 누르지 않아도 매직 볼 이미지가 변경됩니다.

    매직 볼 예제가 완성되었습니다전체 소스코드는 다음과 같습니다.

    public class MainActivity extends AppCompatActivity {

        ImageView imageBall;

        SensorManager mSensorMgr = null;

     

        @Override

        protected void onCreate(Bundle savedInstanceState) {

            super.onCreate(savedInstanceState);

            setContentView(R.layout.activity_main);

            imageBall = findViewById(R.id.imageBall);

     

            mSensorMgr = (SensorManager)getSystemService( Context.SENSOR_SERVICE );

            Sensor sensorAcceler = mSensorMgr.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);

            if( sensorAcceler != null )

                mSensorMgr.registerListener(sensorListener, sensorAcceler,

    SensorManager.SENSOR_DELAY_UI);

        }

     

        SensorEventListener sensorListener = new SensorEventListener() {

            public void onAccuracyChanged(Sensor sensor, int accuracy) {}

     

            public void onSensorChanged(SensorEvent event) {

                if (event.sensor.getType() == Sensor.TYPE_ACCELEROMETER) {

                    float v[] = event.values;

                    double sum = Math.abs(v[0]) + Math.abs(v[1]) + Math.abs(v[2]);

                    if( sum > 30 ) {

                        onClick(null);

                    }

                }

            }

        };

     

        void onClick(View v) {

            int[] imageId = {R.drawable.magic_ball1

                    , R.drawable.magic_ball2

                    , R.drawable.magic_ball3

                    , R.drawable.magic_ball4};

            int rand = getRandom(4, 0);

            imageBall.setImageResource( imageId[rand] );

        }

     

        int getRandom(int range, int min) {

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

        }

    }

     

     

    [연습문제매직 볼 확률 변경

    매직 볼 예제에서 답변의 확률을 변경해 봅시다세게 흔들면 2번 중에서 1번 ‘YES’ 가 나오고약하게 흔들면 2번 중에서 1번 ‘NO’ 가 나오게 합니다.

    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)