[개발일지] 아두이노를 이용한 온습도계/불쾌지수 측정기 만들기 - 2(레이아웃 구성)

---

오늘의 할 일

1. 레이아웃 구성

2. Intent를 이용하여 Activity 연결

3. 이미지뷰를 활용하여 formula.xml 레이아웃 제작

4. 타이틀 없애기

5. 최종 수정

---

1. 레이아웃 구성

 

 

저번에 아두이노를 구매한 이후로, 배송이 오기전까지는 할 수 있는게 레이아웃 구성 뿐이네요.

기본적으로 메인 메뉴와, 온습도를 측정하는 레이아웃, 불쾌지수 공식을 나타내는 레이아웃, DB에 저장한 값을 불러오는 레이아웃 총 4개의 레이아웃을 제작하기로 했습니다.

일단은 MainActivity에 다음과 같이 버튼을 4개 만들어 봤습니다

 

버튼 색깔이나 바탕 색깔까지 이쁘게 꾸미고 싶지만 일단은 기능구현을 목표로 프로토타입을 만들 예정이기 때문에

세세한 디자인은 차후로 넘기기로 했습니다.

폰트는 배달의민족 주아체를 사용했고, 무료로 공개된 폰트이니 누구나 사용해도 괜찮아요

http://font.woowahan.com/jua/

배달의민족 폰트 주아체 다운로드

 

(***폰트 적용 방법은 차후에 포스팅하도록 하겠습니다)

---

2. Intent를 이용하여 Activity 연결

 

이렇게 각각 4개씩 xml파일과 Java Class를 만들어 줬습니다.

기본적으로 MainActivty에서 다른 액티비티들을 연결해 줘야 하므로 Intent를 사용하도록 하겠습니다.

Intent는 어플리케이션 구성요소(컴포넌트) 간에 정보를 전달해주는 역할을 하는데, 다른 액티비티를 호출하는 역할도 가능하기 때문에 화면 전환을 위해 Intent를 사용하는 경우가 잦습니다.

 

MainActivity.java

 

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    Button btnMeasure, btnFormula, btnLog, btnExit;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnMeasure =(Button)findViewById(R.id.btnMeasure);
        btnFormula= (Button)findViewById(R.id.btnFormula);
        btnLog= (Button)findViewById(R.id.btnLog);
        btnExit =(Button)findViewById(R.id.btnExit);
        btnMeasure.setOnClickListener((View.OnClickListener) this);
        btnFormula.setOnClickListener((View.OnClickListener) this);
        btnLog.setOnClickListener((View.OnClickListener) this);
        btnExit.setOnClickListener((View.OnClickListener) this);
    }

    public void onClick(View v) {
        if(v.getId()==R.id.btnMeasure)
        {
            Intent intent = new Intent(getApplicationContext(), Thermometer.class);
            startActivity(intent);
        }
        else if(v.getId()==R.id.btnFormula)
        {
            Intent intent = new Intent(getApplicationContext(), Formula.class);
            startActivity(intent);
        }
        else if(v.getId()==R.id.btnLog)
        {
            Intent intent = new Intent(getApplicationContext(), Calendar.class);
            startActivity(intent);
        }
        else
        {
            finish();
        }
    }
}

MainActivity에 OnClickListener를 상속받아 사용하도록 하겠습니다.

측정 , 불쾌지수 공식, 일지 , 종료 , 을 의미하는 4개의 버튼을 선언해주고 각각 OnClickListener를 넣어줍니다.

그리고 onClick을 정의하여 ID가 btnMeasure, 즉 측정계 버튼일때는 Thermometer 클래스를 열도록하고

나머지도 else if문을 통해 각각 처리해줍니다.

Intent를 통해 Activity의 정보를 받아올 수 있고, 그 받아온 정보를 통해 startActivity(Intent) 해주면 해당 액티비티로의

화면전환이 가능해집니다. 마지막으로 btnExit의 경우는 else문으로 빼주어 finish() 메소드를 통해 액티비티를 종료합니다. 굳이 일일이 OnclickListener를 입력해 줄 필요 없이, 이를 상속받고 else if문을 통해서 어떤 id의 버튼을 누르냐에 따라 각각 다른 Activity로 Intent 되도록 선언하였습니다.

 

이제 메뉴화면에서 각각 버튼을 눌러 다른 액티비티로 이동할 수 있습니다!!

 

---

3. 이미지뷰를 활용하여 formula.xml 제작

안드로이드에서 이미지를 넣고 싶을때는 ImageView를 이용하면 됩니다. TextView와 마찬가지로 View 클래스에서 상속받기 때문에 View에서 제공하는 기능과 속성을 그대로 사용할 수 있습니다. 일단 그 전에 사용할 이미지를 받아와야겠죠?

 

 

무료로 아이콘 이미지를 받을 수 있는 사이트인 FLATICON에서 이모티콘을 받아줍시다. 간단한 가입만 하면 무료로 받을 수 있는 사이트입니다.

https://www.flaticon.com/packs/emoticons-4

36 free vector icons of Emoticons designed by Roundicons

프로젝트의 res 폴더에는 기본적으로 drawable 폴더가 있습니다.

drawable 위에 우클릭 -> Show in brower를 누르면 해당 폴더가 열립니다. 그 속에 이미지 파일을 넣어주면 됩니다.

저 같은 경우는 5가지 이미지 파일을 사용할 것이기 때문에 png형식의 이미지 5개가 들어가 있네요.

 

이때 주의할 점은, 이미지 파일의 이름에 대문자가 섞이면 빌드 시 에러가 뜨기 때문에, 반드시 소문자로 해주어야 합니다. 안그래도 이름에 대문자가 섞인 이미지 파일을 불러오려고 하면 IDE에서 감지하고 바꾸라고 해줍니다.

drawable 폴더 안의 이미지는 소문자(a-z), 숫자(0-9) , 언더하이픈(_) 만 이름으로 지정할 수 있습니다.

 

 

이미지를 더블클릭 해 보면 이렇게 사용하고자 하는 이미지가 떠있네요.

이제 레이아웃에 ImageView를 추가해 줍시다. src 속성을 이용하여 drawable 폴더 안에 있는 fomular라는 이미지 파일을 불러와줍니다. 이러면 해당 ImageView에 이미지가 들어가게 됩니다. 이 이미지뷰를 이용하여 레이아웃을 다 짜주고 빌드해보면

넣고보니 뭔가 좌측으로 쏠린 느낌이네요 'ㅡ'

분산시켜 주겠습니다

한층 보기 편안합니다

 

이렇게 심플한 레이아웃이 완성되었네요!

 

---

4. 타이틀 없애기

날카로운 분들은 위의 스크린샷에서 특이점을 발견하셨을 겁니다.

바로 이 위쪽의 초록색 바 하나가 늘 떠있었는데 없어져 있는데요!

이 부분은 타이틀 바라고 해서 대부분의 경우 공간을 차지하고 디자인적으로도 이쁘지 않기 때문에 지워주고 전체화면으로 출력하게 프로그래밍하는 경우가 많습니다!

이 타이틀 바를 없애는 방법은

[안드로이드] 상단의 타이틀 없애기

제 다른 포스팅을 참고해 주세요!

 

 

 

---

이상으로 개발일지 2부 - 레이아웃 구성을 마칩니다.

간단한 작업이지만 눈에 띄는 결과가 바로바로 들어오기 때문에 굉장히 재밌는 과정이었어요!

글짜나 배경 색깔같은 세세한 디자인은 차후 프로토타입 완성 후 서서히 건드리도록 하겠습니다!