[프로젝트] 1일차 - 앱 바 구현

코틀린 공부를 할 겸 서버가 필요없는 단순한 앱을 만들어보기로 했다.

네이버에 검색하면 나오는 원판돌리기를 만들 것이다 ^▽^

오늘은 일단 시작으로 시안을 만들고 앱바를 구현하는 것까지 하였다.

 

앱바 공식문서 : 

https://developer.android.com/guide/fragments/appbar

AppBar 사용  |  Android 개발자  |  Android Developers

 

1. 앱바 메뉴 설정하기

일단 앱바에 띄울 메뉴를 설정하기 위해 menu.xml 파일을 만들었다.

(menu.xml 파일은 res 디렉토리 내에 menu라는 디렉토리를 만들고 그 안에 생성하면 된다)

 

menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:id="@+id/action_save"
        android:icon="@drawable/icn_save"
        android:title="@string/action_save"
        app:showAsAction="always" />

    <item android:id="@+id/action_load"
        android:icon="@drawable/icn_load"
        android:title="@string/action_load"
        app:showAsAction="always" />

    <item android:id="@+id/action_share"
        android:icon="@drawable/icn_share"
        android:title="@string/action_share"
        app:showAsAction="always" />
</menu>

icon과 title은 이름만 봐도 뭔지 알 것이고

나는 아이콘이 항상 보이게 하고 싶어서 showAsAction을 always로 주었다.

 

 

2. Activity에 표시하기 + 클릭할 때 액션 주기

menu.xml을 작성한 다음 MainActivity.kt로 와서 

onCreateOptionsMenu 메소드를 오버라이딩해준다.

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.menu, menu)
        return true
    }

마지막을 return true로 해 줘야 메뉴바가 보인다고 한다.

 

두 번째로 메뉴를 선택했을 때의 액션을 설정하기 위해 

onOptionsItemSelected를 오버라이딩한다

override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return when(item.itemId) {
            R.id.action_save, R.id.action_load, R.id.action_share -> {
                Toast.makeText(this, item.title, Toast.LENGTH_SHORT).show()
                true
            }
            else -> super.onOptionsItemSelected(item)
        }
    }

item을 받아서 item의 title을 토스트로 출력하도록 하였다.

 

마지막으로 앱 바에서 Title 텍스트를 숨겨주기 위해서

onCreate의 setContentView 아래에 아래와 같이 추가한다.

supportActionBar?.setDisplayShowTitleEnabled(false)

만약 로고를 넣고 싶다면 아래처럼 설정한다. (같은 애들 쭈루룩 하는 거라 스코프 함수 사용햇음)

supportActionBar?.apply {
    setLogo(R.mipmap.ic_launcher_round)	//로고 이미지 지정
    setDisplayUseLogoEnabled(true)	//얘가 true로 해야 로고 보임
    setDisplayShowHomeEnabled(true)	//얘를 true로 해야 로고 보임22222
}

 

3. 다국어 지원

위의 menu.xml를 보면 title을 string 리소스로 사용하는 것을 볼 수 있다.

다국어 지원을 위해 그렇게 처리하였다. (다른나라 사람들이 과연 다운로드 받을지는 일단 논외로..)

다국어 지원을 위해서는 values 폴더를 따로 만들어주어야한다.

 

values-ko-rKR의 strings.xml에는 한글로 된 문자열을 써 두고

values의 string.xml에는 영어로 된 문자열을 써 두면

기기에 설정된 언어에 따라서 자동으로

언어가 한국어일때는 'values-ko-rKR'에서 리소스를 불러오고

다른 언어일 때는 values에서 리소스를 불러오게 된다.

 

와! 날먹!

 

---

오늘은 피그마로 시안 만드는 게 오래 걸려서 코드는 많이 만지지는 못했다.

차근차근 만들어서 내 이름 들어간 앱 하나라도 만들어봐야지 ㅜ.ㅜ