1.  activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/layout01"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:src="@drawable/pic1" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:src="@drawable/pic2" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:src="@drawable/pic3" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/layout02"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3">

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:src="@drawable/pic4" />

        <ImageView
            android:id="@+id/imageView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:src="@drawable/pic5" />

        <ImageView
            android:id="@+id/imageView6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:src="@drawable/pic6" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/layout03"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3">

        <ImageView
            android:id="@+id/imageView7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:src="@drawable/pic7" />

        <ImageView
            android:id="@+id/imageView8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:src="@drawable/pic8" />

        <ImageView
            android:id="@+id/imageView9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:src="@drawable/pic9" />

    </LinearLayout>

    <Button
        android:id="@+id/btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="투표 종료" />

</LinearLayout>

 

  • 바깥 리니어레이아웃 안에 리니어레이아웃 3개, 버튼 1개를 생성하고 layout_weight를 3:3:3:1로 함
  • 3개의 레이아웃에 각각 3개의 이미지뷰를 넣음. 각 이미지뷰의 layout_weight는 1:1:1로 함. 필요에 따라 이미지뷰에 적당한 layout_margin을 적용. (예 : 5dp)
  • 이미지뷰 9개의 아이디는 imageView1 ~ imageView9, 버튼의 아이디는 btnResult.


2.  result.xml

서브 액티비티에서 사용할 result.xml을 res - layout 폴더에 생성

바깥은 테이블레이아웃으로 설정하고 stretchColumns 속성을 0으로 함

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:stretchColumns="0">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="15dp"  />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <TableRow>

        <TextView
            android:id="@+id/textView1"
            android:layout_gravity="center_vertical"
            android:text="그림1"
            android:textSize="15dp" />

        <RatingBar
            android:id="@+id/ratingBar1"
            style="?android:attr/ratingBarStyleIndicator"
            android:layout_gravity="right" />
    </TableRow>

    <TableRow>

        <TextView
            android:id="@+id/textView2"
            android:layout_gravity="center_vertical"
            android:text="그림2"
            android:textSize="15dp" />

        <RatingBar
            android:id="@+id/ratingBar2"
            style="?android:attr/ratingBarStyleIndicator"
            android:layout_gravity="right" />
    </TableRow>

    <TableRow>

        <TextView
            android:id="@+id/textView3"
            android:layout_gravity="center_vertical"
            android:text="그림3"
            android:textSize="15dp" />

        <RatingBar
            android:id="@+id/ratingBar3"
            style="?android:attr/ratingBarStyleIndicator"
            android:layout_gravity="right" />
    </TableRow>

    <TableRow>

        <TextView
            android:id="@+id/textView4"
            android:layout_gravity="center_vertical"
            android:text="그림4"
            android:textSize="15dp" />

        <RatingBar
            android:id="@+id/ratingBar4"
            style="?android:attr/ratingBarStyleIndicator"
            android:layout_gravity="right" />
    </TableRow>

    <TableRow>

        <TextView
            android:id="@+id/textView5"
            android:layout_gravity="center_vertical"
            android:text="그림5"
            android:textSize="15dp" />

        <RatingBar
            android:id="@+id/ratingBar5"
            style="?android:attr/ratingBarStyleIndicator"
            android:layout_gravity="right" />
    </TableRow>

    <TableRow>

        <TextView
            android:id="@+id/textView6"
            android:layout_gravity="center_vertical"
            android:text="그림6"
            android:textSize="15dp" />

        <RatingBar
            android:id="@+id/ratingBar6"
            style="?android:attr/ratingBarStyleIndicator"
            android:layout_gravity="right" />
    </TableRow>

    <TableRow>

        <TextView
            android:id="@+id/textView7"
            android:layout_gravity="center_vertical"
            android:text="그림7"
            android:textSize="15dp" />

        <RatingBar
            android:id="@+id/ratingBar7"
            style="?android:attr/ratingBarStyleIndicator"
            android:layout_gravity="right" />
    </TableRow>

    <TableRow>

        <TextView
            android:id="@+id/textView8"
            android:layout_gravity="center_vertical"
            android:text="그림8"
            android:textSize="15dp" />

        <RatingBar
            android:id="@+id/ratingBar8"
            style="?android:attr/ratingBarStyleIndicator"
            android:layout_gravity="right" />
    </TableRow>

    <TableRow>

        <TextView
            android:id="@+id/textView9"
            android:layout_gravity="center_vertical"
            android:text="그림9"
            android:textSize="15dp" />

        <RatingBar
            android:id="@+id/ratingBar9"
            style="?android:attr/ratingBarStyleIndicator"
            android:layout_gravity="right" />
    </TableRow>

    <TableRow>

        <Button
            android:id="@+id/btnReturn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:text="돌아가기" />
    </TableRow>
</TableLayout>

 

  • 각 <TableRow>에는 텍스트뷰 1개, 레이팅바 1개를 생성.
  • 마지막 <TableRow>에는 '돌아가기'를 생성.
  • 텍스트뷰의 아이디는 textView1 ~ textView9, 레이팅바의 아이디는 ratingBar1 ~ ratingBar9, 버튼의 아이디는 btnReturn.


3.  Kotlin 코드 작성 및 수정

MainActivity.kt
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.layout_01)

        title = "명화 선호도 투표"

        // 그림을 클릭할 때마다 투표수를 저장할 9개짜리 배열을 선언하고 0으로 초기화
        val voteCounts = IntArray(9)

        // 이미지뷰 위젯을 저장할 9개짜리 배열을 선언
        val images = arrayOfNulls<ImageView>(9)

        // 이미지 버튼 Id 배열
        val imageIds = arrayOf(R.id.imageView1, R.id.imageView2, R.id.imageView3,
            R.id.imageView4, R.id.imageView5, R.id.imageView6,
            R.id.imageView7, R.id.imageView8, R.id.imageView9)

        // 이미지 이름 문자열 배열
        val imageNames = arrayOf("독서하는 소녀", "꽃장식 모자 소녀", "부채를 든 소녀",
            "이레느깡 단 베르양", "잠자는 소녀", "테라스의 두 자매",
            "피아노 레슨", "피아노 앞의 소녀들", "해변에서")

        // 각 이미지뷰에 대한 클릭 이벤트리스너를 생성. 이미지뷰가 9개나 되므로 반복문을 사용
        for (i in imageIds.indices) {
            images[i] = findViewById(imageIds[i]
            images[i]!!.setOnClickListener {
                voteCounts[i]++  // 그림을 클릭하면 해당 그림의 투표수가 증가
                Toast.makeText( // 그림을 클릭할 때마다 그림의 제목과 누적된 투표수를 토스트 메시지로 보여줌
                    applicationContext,
                    "${imageNames[i]} : 총${voteCounts[i]} 표",
                    Toast.LENGTH_SHORT
                ).show()
            }
        }

        // '투표 종료'에 대해 클릭 이벤트 리스너를 생성
        val btnResult = findViewById<Button>(R.id.btn)
        // 인텐트를 생성하고 인텐트에 투표수 배열과 그림 제목 배열을 넣은 후 결과 액티비티를 호출
        btnResult.setOnClickListener {
            val intent = Intent(applicationContext, ResultActivity::class.java)
            intent.putExtra("voteCounts", voteCounts)
            intent.putExtra("imageNames", imageNames)
            startActivity(intent)
        }

    }
}

 

intent.putExtra("voteCounts", voteCounts)
intent.putExtra("imageNames", imageNames)


  정수형 voteCount 배열을 VoteCounts라는 이름으로 넘김. 이것을 액티비티에서는 getIntArrayExtra() 메서드로 받음.
  문자열 배열인 imageNames을 지정한 imageNames은 getStringArrayExtra() 메서드로 받음.

 

ResultActivity.kt
class ResultActivity: AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.result)

        // MainActivity에서 보낸 투표 결과 값을 받음
        title = "투표결과"
        
        val intent = intent
        val voteCounts = intent.getIntArrayExtra("voteCounts")
        val imageNames = intent.getStringArrayExtra("imageNames")

        // 가장 많은 투표를 받은 이미지와 제목을 나타내는 변수
        val mainText = findViewById<TextView>(R.id.textView)
        val mainImg = findViewById<ImageView>(R.id.imageView)

        // 9개의 TextView, RatingBar 객체 배열
        val ratingBars = arrayOfNulls<RatingBar>(9)
        val textViews = arrayOfNulls<TextView>(9)

        // 9개의 TextView, RatingBar id 배열
        val textViewIds = arrayOf(R.id.textView1, R.id.textView2, R.id.textView3,
                      R.id.textView4, R.id.textView5, R.id.textView6,
                      R.id.textView7, R.id.textView8, R.id.textView9)

        val ratingBarIds = arrayOf(R.id.ratingBar1, R.id.ratingBar2, R.id.ratingBar3,
                        R.id.ratingBar4, R.id.ratingBar5, R.id.ratingBar6,
                        R.id.ratingBar7, R.id.ratingBar8, R.id.ratingBar9)

        val imageIds = arrayOf(R.drawable.pic1, R.drawable.pic2, R.drawable.pic3,
                       R.drawable.pic4, R.drawable.pic5, R.drawable.pic6,
                       R.drawable.pic7, R.drawable.pic8, R.drawable.pic9)

        var maxVotesIndex = 0
        for (i in 1 until voteCounts!!.size) {
            if (voteCounts[i] > voteCounts[maxVotesIndex]) {
                maxVotesIndex = i
            }

            mainText.text = imageNames!![maxVotesIndex]
            mainImg.setImageResource(imageIds[maxVotesIndex])
        }

        for (i in voteCounts!!.indices) {

            textViews[i] = findViewById(textViewIds[i])
            textViews[i]!!.text = imageNames!![i]

            ratingBars[i] = findViewById(ratingBarIds[i])
            ratingBars[i]!!.rating = voteCounts[i].toFloat()
            ratingBars[i]!!.stepSize = 1f

        }

        // 버튼을 클릭하면 서브 액티비티를 종료. 메인 액티비티로 돌아감.
        val btnReturn = findViewById<Button>(R.id.btnReturn)
        btnReturn.setOnClickListener {
            finish()
        }

    }
}

 

 

 

 

 

 

[ 내용 참고 : IT 학원 강의 ]


1.  안드로이드의 4대 컴포넌트

안드로이드의 4대 컴포넌트는 액티비티 · 서비스 · 브로드캐스트 리시버 · 콘텐트 프로바이더


1)  액티비티 Activity

 화면을 구성하는 가장 기본적인 컴포넌트

 

2)  서비스 service

  눈에 보이는 화면(액티비티)과 상관없이 백그라운드에서 동작하는 컴퍼넌트. 백신 프로그램처럼 눈에 보이지는 않지만 계속 동작
  -  로컬에서 동작하는 서비스는 다음과 같이 세 단계를 거침
      서비스 생성 ▶️ 서비스 시작 ▶️ 서비스 종료

 

3)  브로드캐스트 리시버

  -  안드로이드는 여러 응용 프로그램이나 장치에 메시지를 전달하기 위해 방송 broadcasting 메시지를 사용
  -  안드로이드는 문자 메시지 도착, 배터리 방전, SD 카드 탈부착, 네트워크 환경 변화가 발생하면 전체 응용 프로그램이 알 수 있도록 방송 신호를 보냄 그리고 브로드캐스트 리시버 Broadcast Receiver는 이러한 방송 신호가 발생하면 반응함

 

4)  콘텐트 프로바이더

 콘텐트 프로바이더 Content Provider는 응용 프로그램 사이에 데이터를 공유하기 위한 컴포넌트
  -  안드로이드 응용 프로그램은 데이터에 자신만 접근할 수 있으므로 자신의 데이터를 외부에 공유하려면 콘텐트 프로바이더를 만들어야 함. 콘텐트 프로바이더에서 처리된 데이터는 일반적으로 데이터베이스 또는 파일로 저장

 


2.  액티비티의 개요

액티비티는 안드로이드폰에 나타나는 화면 하나하나를 말함. 액티비티는 사용자에게 보여주는 화면을 만들기 때문에 안드로이드의 4개 컴포넌트 중 가장 핵심적인 요소.

 

  • 안드로이드 프로젝트를 생성할 때 activity_main.xml과 MainActivity.kt 파일이 생성
  • activity_main.xml은 화면을 구성하는 코드로 되어 있지만 activity_main.xml이 아니라 MainActivity.kt가 액티비티에 해당
  • 일반적으로 액티비티 하나당 XML 파일 하나를 만들어서 사용
activity_main.xml 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnNewActivity"
        android:text="새 화면 열기" />


</LinearLayout>

 

second.xml 

 

    [res] - [layout] 에 second.xml 생성

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#CDE4F6">

    <Button
        android:id="@+id/btnReturn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="돌아가기" />

</LinearLayout>

 

SecondActivity.kt
class SecondActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.second)

        val btnReturn: Button = findViewById(R.id.btnReturn)
        btnReturn.setOnClickListener {
            finish()
        }

    }
}

 

  📍  finish()가 호출되면 현재 액티비티를 종료. 세컨드 액티비티는 메인 액티비티에서 호출할 것이므로 세컨드 액티비티를 종료하면 다시 메인 액티비티가 나타남

 

MainActivity.kt
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val btnNewActivity = findViewById<Button>(R.id.btnNewActivity)
        btnNewActivity.setOnClickListener {
            val intent = Intent(applicationContext, SecondActivity::class.java)
            startActivity(intent)
        }
    }
}

 

val intent = Intent(applicationContext, SecondActivity::class.java)

 

  -  인텐트를 생성. Intent의 첫 번째 파라미터 applicationContext는 메인 클래스의 컨텍스트를 반환
  -  applicationContext 대신 this@MainActivity 도 가능
  -  두 번째 파라미터로 이 인텐트에 포함될 액티비티 SecondActivity를 넘겨줌. ::class.java를 붙여야 한다는 것을 주의.

 

startActivity(intent)


  -  startActivity() : 새로운 액티비티를 화면에 출력. 파라미터로 인텐트를 받음.

 

AndroidManifest.xml
<activity
    android:name=".MainActivity"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
         category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>
<activity android:name=".SecondActivity" />

 

  📍  안드로이드는 사용될 액티비티를 AndroidManifest.xml에 반드시 등록. 프로젝트를 생성할 때 메인 액티비티는 자동으로 등록되지만, 추가한 세컨드 액티비티는 별도로 등록해야 함.

 


3.  명시적 인텐트

인텐트 Intent는 안드로이드의 4대 컴포넌트가 서로 데이터를 주고받기 위한 메시지 객체.

명시적 인텐트와 암시적 인텐트로 구분


1)  명시적 인텐트와 데이터 전달

  🐰  명시적 인텐트 explicit intent는 다른 액티비티의 이름을 명확히 지정할 때 사용

val intent = Intent(applicationContext, SecondActivity::class.java)
startActivity(intent)


  ✓  Intent() 생성자의 두 번째 파라미터에서는 액티비티 클래스를 넘길 수 있는데, 위의 코드에서는 그 전에 생성한 SecondActivity로 정확히 지정. 그리고 생성한 인텐트를 넘겨서 세컨드 액티비티를 실행

  ✓  이처럼 명확하게 액티비티의 이름을 지정했기 때문에 명시적 인텐트가 됨. 일반적으로 명시적 인텐트는 사용자가 새로운 액티비티를 직접 생성하고 호출할 때 사용

  🐰  인텐트에 데이터를 담아서 넘기는 것도 가능. 메인 액티비티에서 인텐트에 데이터를 실어서 넘긴 다음 세컨드 액티비티에게 받은 데이터를 처리

 

 

1)  putExtra()를 이용해서 필요한 만큼 데이터를 인텐트에 넣음
2)  startActivity()로 인텐트를 다른 액티비티에 넘김
3)  인텐트를 받은 액티비티에서 getStringExtra(), getIntExtra(), getBooleanExtra() 등의 메서드로 넘어온 데이터에 접근

 

 

 


2)  레이팅바

xml 코드
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <RatingBar
        android:id="@+id/ratingBar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <RatingBar
        android:id="@+id/ratingBar2"
        style="?android:attr/ratingBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="10"
        android:stepSize="1" />

    <RatingBar
        android:id="@+id/ratingBar3"
        style="?android:attr/ratingBarStyleIndicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rating="1.5" />

    <Button
        android:id="@+id/btnIncrease"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="증가시키기" />

    <Button
        android:id="@+id/btnDecrease"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="감소시키기" />

</LinearLayout>

 

style="?android:attr/ratingBarStyleSmall"
style="?android:attr/ratingBarStyleIndicator"

 

  -  레이팅바의 스타일을 지정. 작은 모양과 중간 모양을 표시.

android:stepSize="1"


  -  한 번에 증가될 크기를 별 1개로 지정. 소수점으로 설정할 수 있으며 디폴트는 0.5.

android:numStars="10"


  -  별의 개수를 지정. 디폴트는 5개.

 

android:rating="1.5"


  -  초깃값을 설정. 1.5개가 채워진 상태로 표현.

 

kotlin 코드
val ratingBar1 = findViewById<RatingBar>(R.id.raingBar1)
val ratingBar2 = findViewById<RatingBar>(R.id.raingBar1)
val ratingBar3 = findViewById<RatingBar>(R.id.raingBar1)
val btnIncrease = findViewById<RatingBar>(R.id.btnIncrease)
val btnDecrease = findViewById<RatingBar>(R.id.btnDecrease)

btnDecrease.setOnClickListener {
    ratingBar1.rating = ratingBar1.rating + ratingBar1.stepSize
    ratingBar2.rating = ratingBar2.rating + ratingBar2.stepSize
    ratingBar3.rating = ratingBar3.rating + ratingBar3.stepSize
}    

btnIncrease.setOnClickListener {
    ratingBar1.rating = ratingBar1.rating + ratingBar1.stepSize
    ratingBar2.rating = ratingBar2.rating + ratingBar2.stepSize
    ratingBar3.rating = ratingBar3.rating + ratingBar3.stepSize
}

 

  -  rating으로 레이팅바에 채워진 개수와 stepSize로 레이팅바에 설정된 stepSize 속성의 증가 크기 (디폴트는 0.5)를 더하거나 뺌

 

 

 

 

[ 내용참고 : IT 학원 강의 ]

 

+ Recent posts