<div id="readability-page-1" class="page"><div id="entry-view">
        
        <main>
          <div>
              <article id="mainContent">
                <div>
                  <p><a href="/m/category/android"><span>android</span></a></p><h3>kotlin모르는 상태에서 좀 해보려고 popcat 어플 만든 썰 푼다.</h3>
                </div>
                <p><cite>Berno</cite>
                  <span> 2022. 6. 25. 21:45</span>
                </p>
                
            
                <div>
                                <h3 data-ke-size="size23"><span>0. 들어가며</span></h3>
<p data-ke-size="size16"><span>이직한 회사에서 안드로이드 라이브러리를 만드는 업무를 맡게 되었다. 실은 안드로이드 안 해봤다. 자바는 적당히 해봤다고 생각했는데 이번에 사용하는 오픈소스 라이브러리 하나가 코틀린으로 되어있었다. 이렇게 된 이상 간단하게 만들어가며 적응을 좀 해보려고 한다는 것은 반은 맞는 말이고 실은 할거 없어서 하나 만들어보려고 했다.</span></p>

<h3 data-ke-size="size23"><span>1. 왜 popcat인가</span></h3>
<p data-ke-size="size16"><span>이유는 진짜 간단하다. 이미지 2개만 터치 이벤트 넣으면 끝난다.</span></p>

<h3 data-ke-size="size23"><span>2. 구현</span></h3>
<p data-ke-size="size16"><span>일단 popcat이미지 2개를 구했다.</span></p>
<figure data-ke-mobilestyle="widthOrigin" data-filename="popcat2.png" data-origin-width="500" data-origin-height="500">
    <span data-url="https://k.kakaocdn.net/dn/c4uU2q/btrFGAu2cps/kb5I6v8NAYP6plYAW8oJkk/img.png" data-lightbox="lightbox">
        <img src="https://k.kakaocdn.net/dn/c4uU2q/btrFGAu2cps/kb5I6v8NAYP6plYAW8oJkk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="274" height="274" data-filename="popcat2.png" data-origin-width="500" data-origin-height="500">
    </span>
    
</figure>

<figure data-ke-mobilestyle="widthOrigin" data-filename="popcat1.png" data-origin-width="500" data-origin-height="500">
    <span data-url="https://k.kakaocdn.net/dn/bfmxVb/btrFJ9QhBwZ/pKekuiSQpdC8KCraz2Ezvk/img.png" data-lightbox="lightbox">
        <img src="https://k.kakaocdn.net/dn/bfmxVb/btrFJ9QhBwZ/pKekuiSQpdC8KCraz2Ezvk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="298" height="298" data-filename="popcat1.png" data-origin-width="500" data-origin-height="500">
    </span>
    
</figure>
<p data-ke-size="size16"><span>그리고 입을 다물고 있는 이미지를 이미지뷰로 넣어 기본값으로 하고 배경은 검정색으로 만들었다.</span></p>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="1656" data-origin-height="1248">
    <span data-url="https://k.kakaocdn.net/dn/czIkiK/btrFGT2ay8s/E73c4ficgEuLvj88sVl2tk/img.png" data-lightbox="lightbox">
        <img src="https://k.kakaocdn.net/dn/czIkiK/btrFGT2ay8s/E73c4ficgEuLvj88sVl2tk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="1656" data-origin-height="1248">
    </span>
    
</figure>
<p data-ke-size="size16"><span>저 화면은 이미 내가 전체 화면을 적용해놓은 상태인데 appbar와 맨 위에 상태 표시줄을 없애기 위해서는 thems.xml에 다음 코드를 추가했다.</span></p>
<pre id="code_1656160009882" data-ke-language="html" data-ke-type="codeblock"><code>        &lt;item name="windowNoTitle"&gt;true&lt;/item&gt;
        &lt;item name="android:windowFullscreen"&gt;true&lt;/item&gt;</code></pre>
<p data-ke-size="size16"><span>배경을 검정색으로 만들기 위해 해당 activity의 layout xml코드의 최상위 layout에서 다음 속성을 추가한다.</span></p>
<pre id="code_1656160401150" data-ke-language="html" data-ke-type="codeblock"><code>android:background="#000000"</code></pre>

<p data-ke-size="size16"><span>이제 이미지뷰가 터치될 때 이미지를 교체하는 코드를 작성해야 한다.</span></p>
<p data-ke-size="size16"><span>일단 아래 코드가 전체 코드다.</span></p>
<pre id="code_1656160547875" data-ke-language="kotlin" data-ke-type="codeblock"><code>    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        var imageview:ImageView = findViewById(R.id.imageView)

        imageview.setOnTouchListener(object : View.OnTouchListener{
            @SuppressLint("ClickableViewAccessibility")
            override fun onTouch(p0: View?, p1: MotionEvent?): Boolean {
                if (p1 != null) {
                    if(p1.action == MotionEvent.ACTION_DOWN){
                        imageview.setImageResource(R.drawable.popcat2)
                    } else {
                        imageview.setImageResource(R.drawable.popcat1)
                    }
                }
                return true
            }
        })
    }</code></pre>
<p data-ke-size="size16"><span>자바 9인가 10부터 var를 사용할 수 있다고 듣긴 했는데 코틀린은 이미 존재했다.&nbsp;</span></p>
<p data-ke-size="size16"><span>변수 선언도 좀 특이했다.&nbsp;</span></p>
<p data-ke-size="size16"><span>var와 val이 존재했는데 var는 variable, val은 valuable로 변수와 상수 개념이다.&nbsp;</span></p>
<p data-ke-size="size16"><span>기존 언어들에서는 변수 선언할 때는 [데이터타입 변수이름] 이렇게 선언했는데 코틀린은 var 변수이름:데이터타입 으로 선언한다.</span></p>
<p data-ke-size="size16"><span>함수 인자로 들어갈 때도 변수이름: 데이터타입 으로 들어간다.</span></p>
<p data-ke-size="size16"><span>nullable옵션이 들어갈 수 있다. 변수 선언할 때 ?가 들어가면 nullable이고 아니면 null로 초기화하며 선언이 불가능하다.</span></p>

<p data-ke-size="size16"><span>imageview에서 setOnTouchListener를 호출해 터치가 되었을 때 리스너를 설정한다.</span></p>
<p data-ke-size="size16"><span>이때 파라미터에서 다시 View.OnTouchListener를 구현해주어야 한다.</span></p>
<p data-ke-size="size16"><span>onTouch를 구현하며 MotionEvent가 터치일 때는 입을 벌리는 이미지로 하고 아니면 입을 다물고 있는 이미지로 변경하게 만들었다.</span></p>
<figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="kakaotv" data-video-url="https://tv.kakao.com/v/429900587" data-video-thumbnail="https://scrap.kakaocdn.net/dn/s2YTF/hyOSMddJdf/QYECApxweLEnw1ugEiPdj0/img.jpg?width=526&amp;height=1064&amp;face=0_0_526_1064,https://scrap.kakaocdn.net/dn/j3iwm/hyOSUvzm5C/soI9YE2boKkKB29o7iQLY0/img.jpg?width=526&amp;height=1064&amp;face=0_0_526_1064" data-video-width="526" data-video-height="1064" data-video-origin-width="526" data-video-origin-height="1064" data-ke-mobilestyle="widthContent" data-video-play-service="daum_tistory">
<figcaption></figcaption>
<img src="https://scrap.kakaocdn.net/dn/s2YTF/hyOSMddJdf/QYECApxweLEnw1ugEiPdj0/img.jpg?width=526&amp;height=1064&amp;face=0_0_526_1064,https://scrap.kakaocdn.net/dn/j3iwm/hyOSUvzm5C/soI9YE2boKkKB29o7iQLY0/img.jpg?width=526&amp;height=1064&amp;face=0_0_526_1064"></figure>


<h3 data-ke-size="size23"><span>3. 마치며</span></h3>
<p data-ke-size="size16"><span>더 뭔가를 붙일까 아니면 여기서 멈추고 git에 올릴까 고민 중이다. 그리고 맥북이 있는데 swift랑 flutter로도 해보려고 한다.</span></p>



            
            
                </div>
            

                            
            
              </article>
              
                
              
              
              
              
              
                
              
            </div>
        </main>
        
      </div></div>

흔한 컴공출신 개발자

bernoyoun

0. 들어가며
이직한 회사에서 안드로이드 라이브러리를 만드는 업무를 맡게 되었다. 실은 안드로이드 안 해봤다. 자바는 적당히 해봤다고 생각했는데 이번에 사용하는 오픈소스 라이브러리 하나가 코틀린으로 되어있었다. 이렇게 된 이상 간단하게 만들어가며 적응을 좀 해보려고 한다는 것은 반은 맞는 말이고 실은 할거 없어서 하나 만들어보려고 했다.
 
1. 왜 popcat인가
이유는 진짜 간단하다. 이미지 2개만 터치 이벤트 넣으면 끝난다.
 
2. 구현
일단 popcat이미지 2개를 구했다.
 
그리고 입을 다물고 있는 이미지를 이미지뷰로 넣어 기본값으로 하고 배경은 검정색으로 만들었다.
저 화면은 이미 내가 전체 화면을 적용해놓은 상태인데 appbar와 맨 위에 상태 표시줄을 없애기 위해서는 thems.xml에 다음 코드를 추가했다.
        <item name="windowNoTitle">true</item>
        <item name="android:windowFullscreen">true</item>
배경을 검정색으로 만들기 위해 해당 activity의 layout xml코드의 최상위 layout에서 다음 속성을 추가한다.
android:background="#000000"
 
이제 이미지뷰가 터치될 때 이미지를 교체하는 코드를 작성해야 한다.
일단 아래 코드가 전체 코드다.
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        var imageview:ImageView = findViewById(R.id.imageView)
        imageview.setOnTouchListener(object : View.OnTouchListener{
            @SuppressLint("ClickableViewAccessibility")
            override fun onTouch(p0: View?, p1: MotionEvent?): Boolean {
                if (p1 != null) {
                    if(p1.action == MotionEvent.ACTION_DOWN){
                        imageview.setImageResource(R.drawable.popcat2)
                    } else {
                        imageview.setImageResource(R.drawable.popcat1)
                    }
                }
                return true
            }
        })
    }
자바 9인가 10부터 var를 사용할 수 있다고 듣긴 했는데 코틀린은 이미 존재했다. 
변수 선언도 좀 특이했다. 
var와 val이 존재했는데 var는 variable, val은 valuable로 변수와 상수 개념이다. 
기존 언어들에서는 변수 선언할 때는 [데이터타입 변수이름] 이렇게 선언했는데 코틀린은 var 변수이름:데이터타입 으로 선언한다.
함수 인자로 들어갈 때도 변수이름: 데이터타입 으로 들어간다.
nullable옵션이 들어갈 수 있다. 변수 선언할 때 ?가 들어가면 nullable이고 아니면 null로 초기화하며 선언이 불가능하다.
 
imageview에서 setOnTouchListener를 호출해 터치가 되었을 때 리스너를 설정한다.
이때 파라미터에서 다시 View.OnTouchListener를 구현해주어야 한다.
onTouch를 구현하며 MotionEvent가 터치일 때는 입을 벌리는 이미지로 하고 아니면 입을 다물고 있는 이미지로 변경하게 만들었다.
 
 
3. 마치며
더 뭔가를 붙일까 아니면 여기서 멈추고 git에 올릴까 고민 중이다. 그리고 맥북이 있는데 swift랑 flutter로도 해보려고 한다.

kotlin모르는 상태에서 좀 해보려고 popcat 어플 만든 썰 푼다.

댓글