반응형

이번 시간에는 안드로이드 스튜디오에서 인트로 화면을 만들어 볼 텐데요, 

앱을 시작할 때 몇 초간 인트로 화면이 나오고 이후 메인화면으로 넘어가는 것을 실습해 보겠습니다. 

그럼, 안드로이드 스튜디오에서 New Project 》 Empty Views Activity를 선택해 주세요.

프로젝트가 생성되었으면, 
프로젝트 탐색창의 res 》 layout  폴더를  RMB(마우스 우 클릭)하여 New 》 Activity 》 Empty Views Activity를 추가해 주세요. (아래 참고)

타이틀 제목은 intro로 할게요.

그럼, 아래처럼 인트로 xml 파일과 코틀린 kt (자바는 js) 파일이 함께 만들어진 것을 볼 수 있습니다. (activity_intro.xml  & intro.kt )

그럼, 인트로 화면과 메인 화면을 구분하기 위해, 인트로 화면의 배경색을 기본 흰색에서 적당한 색으로 바꾸고,  intro 표시도 해볼게요.
activity_intro.xml의 코드내용을 아래와 같이 작성해 보세요.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#D1DB6E"
    tools:context=".intro">

    <TextView
        android:id="@+id/textView"
        android:layout_width="189dp"
        android:layout_height="107dp"
        android:gravity="center"
        android:singleLine="false"
        android:text="안녕하세요~!\n인트로 화면입니다.\n 5초 뒤에 사라집니다"
        android:textColor="#F44336"
        android:textSize="20dp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

그러면, 아래와 같이 보일 거예요.

그리고, 앱을 실행하면 제일 처음 뜨는 화면이 있는데, 기본적으로는 MainActivity로 지정되어 있어서, activity_main.xml 파일이 로드되어 화면에 보이게 되는데요,  우리는 지금 activity_intro.xml 파일을 먼저 띄워 주는 것으로 바꾸어야 하기 때문에, 아래 이미지를 참고해서 변경해 보세요.  app 》 manifests 》 AndroidMainfest.xml  파일을 열어서 
→ activity name이 .intro로 되어 있는 부분의  android:exported="false" 부분을 true로 변경하고 ,   
→ activity name이 .MainActivity로 되어 있는 부분의  android:exported="true" 부분을 false로 변경하면 됩니다.

그리고  .intro 부분과 .MainActivity 부분의 위치를 바꾸어 주세요.   (단, 복붙해서 바꿀 때,  />  와  > 표시가 잘못되지 않도록 주의하세요)

아래는 변경한 모습입니다. 

여기까지 해놓고 실행시켜 보면 인트로 화면이 먼저 뜨는 것을 볼 수 있습니다. 

이제, 인트로 화면이 5초 뒤에 사라지도록 해볼 텐데요,  아래처럼 intro.kt에 코드를 작성해 주세요.

class intro : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_intro)

        Handler(Looper.getMainLooper()).postDelayed({
            val intent = Intent(this@intro, MainActivity::class.java)
            startActivity(intent)
            finish()
        }, 5000)
    }
}

위 코드에서 마지막에 보이는 5000 수치를 변경하면 시간을 조절할 수 있습니다. (1000 → 1초)

Handler 클래스의 postDelayed 메서드를 이용해서 MainActivity로 이동하도록 하였는데요,  만약, Handler 글자가 빨간색으로 되어 에러 표시가 난다면,  마우스를 Handler 글자 위에 올려놓은 상태에서 Alt+Enter를 눌러 해당 클래스를 import 하여 추가해 주면 됩니다. 

import android.os.Handler

그리고 실행시켜 보면 아래와 같이 화면 전환 되는 것을 볼 수 있습니다. 

 

아래에 전체 코드를 다시 한번 올려놓을 게요.

[ intro.kt ]

package com.example.intropage

import android.content.Intent
import android.os.Bundle
import android.os.Handler
import android.os.Looper
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat

class intro : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_intro)

        Handler(Looper.getMainLooper()).postDelayed({
            val intent = Intent(this@intro, MainActivity::class.java)
            startActivity(intent)
            finish()
        }, 5000)
    }
}

 

[ AndroidManifest.xml ]

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.IntroPage"
        tools:targetApi="31">
        <activity
            android:name=".MainActivity"
            android:exported="false" />
        <activity
            android:name=".intro"
            android:exported="true" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

 

[ activity_intro.xml ]

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#D1DB6E"
    tools:context=".intro">

    <TextView
        android:id="@+id/textView"
        android:layout_width="189dp"
        android:layout_height="107dp"
        android:gravity="center"
        android:singleLine="false"
        android:text="안녕하세요~!\n인트로 화면입니다.\n 5초 뒤에 사라집니다"
        android:textColor="#F44336"
        android:textSize="20dp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

 감사합니다.  좋은 하루 보내세요~ 

반응형
반응형

▶ Fragment(프래그먼트) 정의

 프래그먼트는 태블릿과 같은 대화면에서 효율적으로 화면을 구성하기 위해 생긴 구성요소입니다. 하지만 스마트폰과 같은 작은 화면에서도 효율적인 자원 활용과 메뉴 구성을 위해 종종 사용됩니다.

액티비티를 분할하여 화면의 한 부분을 정의하며 액티비티와 같이 레이아웃, 동작 처리, 생명주기를 가지는 독립적인 모듈인데요, 다른 액티비티에서도 사용할 수 있어 재사용성이 뛰어나며 액티비티 실행 중에 추가, 제거가 가능합니다.

프레그먼트는 액티비티의 일부분에만 배치되는 화면 및 동작을 조작하기 위한 객체입니다.  프레그먼트 매니저를 통해서 여러개의 프레그먼트를 조작할 수 있습니다. 레이아웃 xml 파일에서 다른 뷰들과 함께 배치될 수 있습니다.

▶ 프래그먼트 실습 :  버튼을 클릭하면 해당 프래그먼트 화면을 보여주기!

→  3개의 버튼과 3개의 프래그먼트 화면을 각각 만들고 각 버튼들을 클릭하면 각각의 프래그먼트 화면이 로딩 되도록 합니다. 이때 메인 레이아웃(activity_main.xml) 화면에는 FrameLayout을 이용하여 화면을 fragment를 로딩할 View 영역과 버튼을 클릭할 영역으로 구분해서 만들어 봅니다.

 

→ 각각의 프래그먼트 화면을 아래처럼 단순하게 배경색을 변경하여 구성하고, 추후에 이미지를 넣거나 다양하게 응용하면 됩니다.

 

▶  실행 결과 

→ 1번, 2번, 3번 버튼을 클릭하면 아래와 같이 main_activity.xml 레이아웃 화면에 각각의 프래그먼트 화면이 로딩되도록 합니다.

 

▶ 코드 구성

① 먼저 gradle에 있는 build.gradle.kts(Module :app) 파일에 아래처럼 뷰바인딩 사용 선언을 해주세요.


② 아래 이미지를 참고하여 res 》 layout 》 New 》 Fragment 》 Fragment(Blank) 를 클릭하고 타이틀은 frag1으로 입력하여 만들면 fragment_frag1.xml 파일과 함께 frg1.kt 파일이 세트로 만들어집니다. (layout에서 마우스 우클릭하면 New 메뉴가 나타납니다)

같은 방법으로 아래 이미지처럼  fragment_frag2.xml , fragment_frag3.xml ( frg2.kt , frag3.kt)을 만들어 주세요. 

 

→ frag 1의 xml 코드는 아래와 같습니다. (단순하게 배경색 지정하고 TextView를 하나 넣었습니다)

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:background="#2233aa"
    tools:context=".frag1">

    <TextView
        android:id="@+id/txtview_frag1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text= "Frag 1 page"
        android:textSize="20dp"
        android:textStyle="bold"
        android:textColor="@color/white"/>

</FrameLayout>

 

frag1.xml의 뷰화면

→ frag2의 xml 코드 또한 동일하며 배경색과 id 그리고 text 내용만 각각 바꾸어 주세요.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:background="#A51EB4"
    tools:context=".frag2">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text= "Frag 2 page"
        android:textSize="20dp"
        android:textStyle="bold"
        android:textColor="@color/white"/>

</FrameLayout>

frag2.xml의 뷰화면

 

→  frag3의 xml 코드 또한 동일하며 배경색과 id 그리고 text 내용만 각각 바꾸어 주세요.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:background="#FF9800"
    tools:context=".frag3">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text= "Frag 3 page"
        android:textSize="20dp"
        android:textStyle="bold"
        android:textColor="@color/white"/>

</FrameLayout>

frag3.xml의 뷰화면

④ 자동으로 생성된 frag1.kt 프래그먼트의 클래스 함수 코드는 아래와 같습니다.

package com.example.fragment

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

// TODO: Rename parameter arguments, choose names that match
// the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
private const val ARG_PARAM1 = "param1"
private const val ARG_PARAM2 = "param2"

/**
 * A simple [Fragment] subclass.
 * Use the [frag1.newInstance] factory method to
 * create an instance of this fragment.
 */
class frag1 : Fragment() {
    // TODO: Rename and change types of parameters
    private var param1: String? = null
    private var param2: String? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        arguments?.let {
            param1 = it.getString(ARG_PARAM1)
            param2 = it.getString(ARG_PARAM2)
        }
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_frag1, container, false)
    }

    companion object {
        /**
         * Use this factory method to create a new instance of
         * this fragment using the provided parameters.
         *
         * @param param1 Parameter 1.
         * @param param2 Parameter 2.
         * @return A new instance of fragment frag1.
         */
        // TODO: Rename and change types and number of parameters
        @JvmStatic
        fun newInstance(param1: String, param2: String) =
            frag1().apply {
                arguments = Bundle().apply {
                    putString(ARG_PARAM1, param1)
                    putString(ARG_PARAM2, param2)
                }
            }
    }
}

위 코드처럼 기본 생성된 코드 그대로 사용해도 실행에 문제는 없는데요,  필요 없는 내용 다 지우고 아래만 남겨 놓으면  됩니다.

package com.example.fragment

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

class frag1 : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_frag1, container, false)
    }
}

frag2.kt  와 frag3.kt 코드도 마찬가지로 정리해 보세요.

 

⑤ activity_main.xml  코드는 아래처럼 작성해 주세요.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/main_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/linearLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"></FrameLayout>

    <LinearLayout
        android:id="@+id/btn_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/main_view">

        <Button
            android:id="@+id/btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:text="1번"
            android:textSize="20dp"
            android:textStyle="bold" />

        <Button
            android:id="@+id/btn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:text="2번"
            android:textSize="20dp"
            android:textStyle="bold" />

        <Button
            android:id="@+id/btn3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:text="3번"
            android:textSize="20dp"
            android:textStyle="bold" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

 

⑥  뷰 바인딩을 적용한  MainActivity.kt의 코드는 아래처럼 해주세요. 

package com.example.fragment

import android.os.Bundle
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
import com.example.fragment.databinding.ActivityMainBinding
import com.example.fragment.databinding.FragmentFrag1Binding

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding = ActivityMainBinding.inflate(layoutInflater)        
        setContentView(binding.root)
        binding.btn1.setOnClickListener {
            supportFragmentManager.beginTransaction().replace(R.id.main_view, frag1()).commit()
        }
        binding.btn2.setOnClickListener {
            supportFragmentManager.beginTransaction().replace(R.id.main_view, frag2()).commit()
        }
        binding.btn3.setOnClickListener {
            supportFragmentManager.beginTransaction().replace(R.id.main_view, frag3()).commit()
        }
    }
}

 

위 코드에서 supportFragmentManager 코드에도 바인딩 기능을 적용하면 아래와 같이 하면 됩니다. 
그리고, 각 버튼을 클릭할 때 마다 LinearLayout의 배경색도 따라 바뀌도록 아래처럼 코드를 추가해 줄 수 있어요.
"binding.linearBtnbox.setBackgroundColor(Color.parseColor("#2233aa"))"

package com.example.fragment

import android.os.Bundle
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
import com.example.fragment.databinding.ActivityMainBinding
import com.example.fragment.databinding.FragmentFrag1Binding

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding = ActivityMainBinding.inflate(layoutInflater)        
        setContentView(binding.root)
        binding.btn1.setOnClickListener {
            binding.linearBtnbox.setBackgroundColor(Color.parseColor("#2233aa"))
            supportFragmentManager.beginTransaction().replace(binding.frameLayout.id, frag1()).commit()
        }
        binding.btn2.setOnClickListener {
            binding.linearBtnbox.setBackgroundColor(Color.parseColor("#A51EB4"))
            supportFragmentManager.beginTransaction().replace(binding.frameLayout.id, frag2()).commit()
        }
        binding.btn3.setOnClickListener {
            binding.linearBtnbox.setBackgroundColor(Color.parseColor("#FF9800"))
            supportFragmentManager.beginTransaction().replace(binding.frameLayout.id, frag3()).commit()
        }
    }
}

 

이렇게 까지만 하면 작성이 완료되고 실행해 보면 아래와 같이 실행이 되는 것을 볼 수 있습니다.

 

마지막으로, 살짝 응용해서 TextView 대신 이미지 뷰(ImageView)를 넣어 사진을 보여주는 것으로 바꾸어 볼게요.

그럼, 변경할 곳은 fragment_frag1.xml  파일에서 TextView 대신 아래와 같이 ImageView 를 대체해서 넣어 주면 됩니다.   나머지 fragment_frag2.xml 과 fragment_frag3.xml 파일도 동일하게 바꾸어주세요.

<fragment_frag1.xml 파일 코드>

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:background="#ffaaff"
    tools:context=".frag1">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:src="@drawable/lake1"
        android:background="#22aabb" />

</FrameLayout>

이때, 보여줄 사진으로 호수(lake)사진을 넣었는데요, 첨부해 드릴테니 연습으로 해보세요.

호수(jpg).zip
1.53MB


사진 파일들은  안드로이드 스튜디오의 프로젝트 탐색창에서 ,  res 》 drawable 폴더로 복사해 넣어주세요. 
(아래 참고)  직접 끌어다 넣기하거나 , 복붙해도 됩니다.

아래는, 이미지로 대체해서 실행한 모습입니다. 
사진이 없는 배경의 공간은 기본값인 흰색인데, background 배경의 색을 사진과 잘 어울리게 넣어서 채워봤습니다.

 

그럼, 지금까지 안드로이드 스튜디오에서  kotlin으로 프래그먼트(fragment)를 사용하는 방법과 실제 예시를 설명해 드렸습니다.  몇 번 반복적으로 연습해 보면 금방 응용할 수 있을 거예요. 

감사합니다.

반응형
반응형

▶ 기존 방식 →  findViewById

 안드로이드 스튜디오를 이용한 안드로이드 네이티브 앱개발에서 findViewById 메서드는 리소스 id를 통해서 레이아웃에 있는 뷰 객체들 중 일치하는 뷰를 가져오는 메서드입니다.  그리고 setContentView와 같은 메서드로 xml에 있는 리소스들을 지정한 속성에 맞게 인스턴스를 생성하여 메모리에 로드하는 인플레이션 과정이 필요합니다.  이때 사용하는 메서드가 findViewById인데요, 문제는 가져와야 할 요소가 적을 때는 별문제가 없지만 아무리 간단한 앱이라고 하더라도 페이지 화면과 구성요소들이 증가하게 되면, 이 메서드로 일일이 뷰 객체를 하나씩 지정해서 가져오는 작업이 아주 번거로워집니다.  이에 따라, 성능상으로도 좋지 않기에 kotlin extension, Data Binding, View Binding과 같은 대체 방법들이 추가되었고, 이를 이용해서 앱을 개발하는 것이 좋습니다.

 

▶ viewBinding의 장점

1. findViewById 보다 속도가 상대적으로 빠르다.
2. Binding 지정만 해주면 정확한 view의 타입을 찾아 알아서 맵핑해준다.
3. NullPointerException을 방지 해준다.

 

viewBinding 사용법

① build.gradle.kts (Module:app) 파일을 클릭하여 android {  ...  }  항목 속에 아래코드를 추가해 주세요.

viewBinding.isEnabled = true

android {
    namespace = "com.example.resourcetest"
    compileSdk = 34
    viewBinding.isEnabled = true
    defaultConfig {
        applicationId = "com.example.resourcetest"
        minSdk = 24
        targetSdk = 34
        versionCode = 1
        versionName = "1.0"

        testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
    }

코드 추가 후 상단에 보이는 Sync Now를 클릭하여 적용시켜 주세요.(아래)

 

그리고 바인딩을 참조하려는 layout의 이름 규칙에 따라 binding 객체를 생성해 주세요.  

이름 생성 규칙  ↓ ↓
예시 1) activity_main.xml 을 참조한다면(바인딩)  ActivityMainBinding 으로 이름 지어집니다.
(언더바는 생략하고 단어 첫 글자를 대문자로 한 다음 Binding글자와 함께 모두 이어 붙입니다.

예시 2) page_one.xml 을 참조한다면(바인딩)  PageOneBinding 으로 이름 지어집니다.

따라서 예시 1과 같이 activity_main.xml을 바인딩한다면  MainActivity.kt 파일의 코드를  아래와 같이 구성해 주면 됩니다.

val binding = ActivityMainBinding.inflate(layoutInflater)

그리고 변경하고자 하는 xml 파일의 text 값이 있다면 아래처럼 구성합니다.
만약, activity_main.xml의 textView 객체의 id가 txtview 라면,

binding.txtview.setText("클릭했음")

그러면 textView의 내용이 "클릭했음"으로 변경 되게 됩니다.

아래는 변경한 코드 포함 전체 MainActivity.kt의 코드입니다.  (버튼 1을 눌렀을 때 textView의 내용이 변하는 코드)

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding = ActivityMainBinding.inflate(layoutInflater)        
        setContentView(binding.root)
        binding.btn1.setOnClickListener {
        	binding.txtview.setText("클릭했음")
        }

 

반응형
반응형

- 안드로이드 스튜디오와 같은 개발프로그램에서 스마트폰과 연결하는 방법과
  (개발자 모드 활성화 방법)
- USB디버깅 모드가 비활성화 되어 있는 이유와 활성화 방법에 대해 다루어 볼게요

기본적으로 스마트폰에서는 보안관련 안전을 위해 케이블 연결로 안드로이드 스튜디오와 같은 프로그램에서 앱 직접 설치와 같은 접근을 제한하고 있는데요,  이를 해결하기 위해서는 스마트폰에 숨김처리되어 있는 '개발자 옵션'이라는 것을 활성화해주어야 합니다.   

우선 아래 안드로이드 프로그램에서 가상 디바이스로 먼저 기본화면을 동작시켜 볼게요.

 

픽셀이라는 가상 디바이스로 실행이 잘 되었네요.

 

현재 스마트폰이 PC에 연결되어 있으나 장치 목록에는 인식되지 않은 것으로 보이네요.

 

그럼, 스마트폰에서 설정으로 들어가세요.

그런 다음 제일 아래에 있는 '휴대전화 정보'를 터치해 들어가세요.

다음, '소프트웨어 정보'를 터치해주세요.

다음, '빌드번호'를 7회 이상 터치해 주면, 개발자 메뉴가 활성화됩니다.

그럼, 뒤로 가기를 한 번 눌러 제일 아래로 스크롤해 보면, 아래처럼 '개발자 옵션'이 활성화되어 있는 것을 볼 수 있어요.

USB 디버깅 메뉴를 터치해서 USB디버깅 허용 팝업창의 확인 버튼을 터치하고,

곧이어 뜨는 팝업창에서 '이 컴퓨터에서 항상 허용'을 체크하고 허용을 눌러주세요.

이제 안드로이드 스튜디오에서 PC와 연결된 스마트폰 디바이스가 잡히는 것을 볼 수 있습니다.

 

아래는 연결한 갤럭시 스마트폰에 앱설치와 동시에 바로 실행된 모습입니다.

 

※ USB 디버깅 모드가 활성화 자체가 안 되는 경우가 생기는데요, 즉 ON/OFF 자체를 할 수 없는 상황이 생기는데, 그 이유는 기존 연결해서 사용하던 PC가 아닌 노트북이나 다른 PC로 연결해서 사용할 때 이렇게 됩니다. 
이럴 때는 기존 PC에 연결 승인된 권한을 취소해 주어야 새로 연결하는 PC에 다시 권한을 주면서 USB 디버깅 모드를 활성화시킬 수 있게 됩니다. 

 

그럼 다시 "이 컴퓨터에서 항상 허용"에 체크해 주고 확인을 눌러 주면   USB 디버깅이 활성화된 것을 볼 수 있습니다.

 

자, 이렇게 해도 "USB 디버깅" 메뉴가 활성화 안 되는 경우에는  개발자 옵션을 삭제하고 다시 열어보시고, 그래도 안 될 경우에는,  Usb 디버깅 설정이 폰에 설치된 보안관련 설정 어플리케이션등에 의해 제한될 수 있는 경우이니, 최근 관련 어플 설치나 보안 관련 설정 변경을 한 것이 있는지? 찾아서 삭제하거나 해제해 보세요.  그러면 대부분은 이 문제가 해결 될 거예요. 
아레 폰에 보안 설정을 ON 하면 USB 디버깅 메뉴가 계속 꺼져있게 됩니다.

비록 크게 어려운 부분은 아니지만, 간혹 "USB디버깅" 메뉴 자체가 활성화 안 되어 당황할 수 있기에 이쪽 관련으로 처음 시작하려는 누군가에게는 도움이 되리라 생각하여 게시해 봅니다. 

그럼, 오늘도 좋은 하루 보내세요~ 

https://youtu.be/AWZE7UQLb3Q

 

- YouTube

 

www.youtube.com

 

 

반응형
반응형

 앱인벤터기초 #08 앱인벤터 1도 모르고 따라 하기 영상 실습#6 (사진 저장소 이미지 직접 불러오기)

 

App-Inventor !

 

[ 학습 목차 ]  

1. 카메라(camera) 컴포넌트를 이용하지 않고 스마트폰의 저장소 사진을 불러 올 수 있다.

2. Image 컴포넌트와 텍스트입력 콤포넌트의 기본 활용법을 익혀 본다.

 

▶ 선수학습 

( 선수학습이 필요한 경우, 아래 링크를 클릭해서 먼저 보세요 )

【 앱인벤터기초#1】 MIT-구글의 App-인벤터 란? ( App-Inventor !)

【 앱인벤터기초 #02】 앱인벤터 시작하기(설치&셋업) ( App-Inventor !)

【 앱인벤터기초 #03】 앱인벤터 따라하기 실습#1(메뉴화면소개 및 사용법)

【 앱인벤터기초 #04】 앱인벤터 1도 모르고 따라하기 실습#2(화면이동 예제만들기)

【 앱인벤터기초 #05】 앱인벤터 1도 모르고 따라 하기#3(날짜/시간/체크박스 실습)

 

▶  실습 준비사항 

  1. 안드로이드가 탑재된 스마트기기(스마트폰, 스마트패드 등) :  안드로이드OS 버전 4.2 이상 권장

  2. 웹브라우저가 구동가능한 PC(노트북) : 구동가능 웹(크롬, 파이어폭스, 사파리, 우분투웹), 익스플로러는 실행불가!

  3. 구글 계정 필요

 

▶  오늘의 실습 따라하기 영상 보기 

[ 앱 인벤터 강의 영상 (영상시간: 8분) ]

 

▶  영상 속 전체 내용 요약 

[ ※ 영상 속에는 앱인벤터에 대한 지식이 없어도 바로 따라 하실 수 있도록 상세히 설명 되어 있으니, 꼭 영상을 보시기 바랍니다 ]

(아래 이미지들을 클릭하면 선명하게 확인 가능 합니다)

 이번 영상에서는 카메라 콤포넌트를 이용하지 않고 한 줄짜리 간단한 블록코딩을 통하여 스마트폰 저장소에 저장된 사진을 Image 콤포넌트로 불러 오는 방법에 대한 영상입니다.    이 영상 자체로 큰 역할을 하는 앱은 아니나, 다른 앱제작에서 충분히 활용될 수 있는 부분이기에 이 번 영상을 통해 다루고 있습니다. (난이도 : 下) 

 

 

최종 앱의 모습은 아래와 같습니다.

 

① 컴포넌트 구성 : 아래 이미지를 참고하여 전체 컴포넌트를 구성해주세요.

 

② 전체 블록 코딩 : 아래는 블록 코딩의 전체 이미지 입니다.  이하 세부적으로 블록별 상세히 설명이 진행됩니다...

 

▶  완성 앱 다운로드  

 

Loadimage.apk
3.32MB

▶  완성된 앱인벤터 편집 파일 다운로드 (aia 파일)

Loadimage.aia
0.00MB

▶  유튜브 영상 링크

 

 

 그럼, 이상으로 "사진 저장소의 사진을 경로만 이용하여 이미지 콤포넌트로 띄우는 앱기능에 대해 설명을 하였습니다. 

너무 간단하죠?  ^^;;    하지만,  조금 규모가 있는 앱제작 등에서 요 기능이 필요한 경우가 종종 있고, 요청사항도 있어 영상과 함께 글을 작성하게 되었습니다.

 

 그럼,  앱인벤터로 , 재미있고 유용한 앱 제작 시간 되세요~

감사합니다~  ^^

 

#라이즈노IoT 구독을 하시면 새글이 업로드 될 때 마다 바로 받아 보실 수 있으세요~ 

많은 구독 부탁드려요~  ^^; 

 

반응형
반응형

 앱인벤터기초 #07 앱인벤터 1도 모르고 따라 하기 영상 실습#5 (사진/글자표시/SNS보내기 앱下-완결!)

 

App-Inventor !

[ 학습 목차 ]  

[지난시간 학습 목차]  -바로가기 클릭-

《응용 예제 #1-1 :  "예제3 : 사진 또는 캡쳐 이미지 위에 표시를 하거나 글자를 입력한 후 SNS로 보낼 수 있는 앱 제작 : 上 편"

1. 캔버스(Canvas) 컴포넌트를 활용하는 방법을(그리고 지우기 기능) 익힐 수 있다.

2. 수평정렬상자(HorizontalArrangement)를 이용해 버튼 들을 정 렬 할 수 있다.

3. 슬라이더(Slider) 컴포넌트를 활용하여 선의 굵기 값 등을 조절 할 수 있다.

4. 제작앱 확인하기 (에뮬레이터로 확인 및 스마트폰에 설치와 실행 )

4. 버튼을 클릭하여 그리기의 색을 변경 할 수 있다. 

 

[ 이번시간 학습 목차 ]

《응용 예제 #1-2 :  "예제3 : 사진 또는 캡쳐 이미지 위에 표시를 하거나 글자를 입력한 후 SNS로 보낼 수 있는 앱 제작 : 下 편"

1. 카메라(Camera) 컴포넌트를 사용하여 폰에서 사진을 찍고, 갤러리에서 찍은 사진을 꺼내어 활용할 수 있다.

2. 사진위에 표시하거나 문자를 입력하여 저장 할 수 있다. 
3. Spinner 컴포넌트를 활용하여 글자(폰트)의 크기를 선택하여 입력할 수 있다.

4. Notifier 컴포넌트를 활용하여 저장할 때의 안내 팝업 버튼을 구성 할 수 있다.

5. MMS 버튼을 구성하여 지인에게 특정표시를 한 사진을 문자메시지와 함께 보낼 수 있다.

6. SNS 버튼을 구성하여 카톡,밴드,페이스북,E메일,구글드라이브 등으로 특정표시를 한 이미지를 전송할 수 있다. 

 

▶ 선수학습 

( 선수학습이 필요한 경우, 아래 링크를 클릭해서 먼저 보세요 )

【 앱인벤터기초#1】 MIT-구글의 App-인벤터 란? ( App-Inventor !)

【 앱인벤터기초 #02】 앱인벤터 시작하기(설치&셋업) ( App-Inventor !)

【 앱인벤터기초 #03】 앱인벤터 따라하기 실습#1(메뉴화면소개 및 사용법)

【 앱인벤터기초 #04】 앱인벤터 1도 모르고 따라하기 실습#2(화면이동 예제만들기)

【 앱인벤터기초 #05】 앱인벤터 1도 모르고 따라 하기#3(날짜/시간/체크박스 실습)

 

▶  실습 준비사항 

  1. 안드로이드가 탑재된 스마트기기(스마트폰, 스마트패드 등) :  안드로이드OS 버전 4.2 이상 권장

  2. 웹브라우저가 구동가능한 PC(노트북) : 구동가능 웹(크롬, 파이어폭스, 사파리, 우분투웹), 익스플로러는 실행불가!

  3. 구글 계정 필요

 

▶  오늘의 실습 따라하기 영상 보기 

[ 앱 인벤터 강의 영상 (영상시간: 37분) ]

 

 

▶  영상 속 전체 내용 요약 

[ ※ 영상 속에는 앱인벤터에 대한 지식이 없어도 바로 따라 하실 수 있도록 상세히 설명 되어 있으니, 꼭 영상을 보시기 바랍니다 ]

(아래 이미지들을 클릭하면 선명하게 확인 가능 합니다)

 이번 시간부터는 앱을 하나 만들어 볼 텐데요, 사진을 찍고 그 위에 간단한 표시나 글자를 입력하여 문자나 카톡과 같은 SNS로 지인에게 전송 할 수 있는 앱을 만들어 보겠습니다.

 

단순히 사진만 보내는 것 보다, 어떤 정보를 표시하면 굉장히 유용할 때가 있어요.

예를 들어, 모임 장소를 찾아오는 친구에게 지도나 캡처한 사진을 보내 줄 때 그냥, 사진만 보내는 것 보다, 사진위에 표시하거나 필요한 안내 문자를 입력 한 후 보내주면 굉장히 편리 하겠죠. 기존에 저장된 갤러리 사진도 되고, 즉석에서 바로 찍어 표시하는 것도 가능한 앱입니다.

이 번 앱 제작 영상에서는 한 번에 완성형으로 가는 것 보다, 앱 인벤터의 주요 기능들을 익힐 수 있도록, 상-하로 2편으로 제작되었습니다.  현재글은 하편 최종 완결편입니다.

 

최종 앱의 모습은 아래와 같습니다.

【 아래 1편 완성 이후부터 시작합니다.  

 

① 컴포넌트 구성 : 아래 이미지를 참고하여 전체 컴포넌트를 구성해주세요.

② 전체 블록 코딩 : 아래는 블록 코딩의 전체 이미지 입니다.  이하 세부적으로 블록별 상세히 설명이 진행됩니다...

③ 캔버스 전체 디자인 참조. 

우선 전체화면을 참고하면서, 지난시간 디자인 완료부분부터 시작하면 됩니다.

그리고 아래와 같은 넌비지어블 컴포넌트(Non visiable Component)가 필요하니 ,  해당 항목들을 찾아서 폰화면위로 드래그해서 놓으면, 폰 화면 바로아래로 추가가 됩니다.

 

④ 색 바꾸기 영역의 설정

아래에 있는 BLACK, RED, GREEN, BLUE 색버튼에 대해 색 설정을 해주세요~ 

 

⑤ 사진, 열기, 저장, 지우기, Line SIZE 버튼에 대한 구성 :

대부분 폰트 크기는 15~16으로 하였고, 굵은 폰트의 볼드에 체크 하였어요. 

우선 텍스트칸에, 사진, 열기, 저장과 같은 제목을 써주세요,  하지만 나중에 이부분들은 구글에서 저작권에 문제 없는 이미지로 다운받아 변경하게 됩니다.  그래서 우선, Height와 width는 별다른 설정을 해주지 않아도 됩니다.  나중에 이미지 크기를 조정할 때 이미지에 맞추어 조절해야하기 때문이예요.

⑤ Text Size , 폰트 픽커, 선택컬러, 컬러표시용 레이블에 대한 구성 :

 아래 이미지를 참고해서 구성해주세요. 폰트를 구성해주는 것만 스피너 콤포넌트로 구성하고 나머지는 Lable을 이용하면 됩니다. 

그리고 스피너를 클릭하게 되면 아래처럼 실행이 됩니다. 

 

⑥ 메시지(Message) 컴포넌트의 구성 :

 아래 메시지 입력창 컴포넌트를 구성해 주세요.  메시지 입력창은 TextBox 컴포넌트로 구성하면 됩니다.

 

 

⑦ Send MMS, MMS, Send SNS, SNS 버튼에 대해 구성 :

멀티 문자를 보낼 수 있는 MMS 보내기 버튼과 카톡이나 네이버 밴드, 페이스북 혹은, 이메일이나 구글 드라이브 등으로 특정표시를 한 사진과 함께 멘트를 달아 보낼 수 있는 컴포넌트 구성입니다. 

제목을 Lable 컴포넌트를 이용하면 되구요,  MMS 와 SNS는 버튼 컴포넌트로 하면 됩니다. 

 

 

⑧ 앱 버튼 아이콘 이미지 꾸미기 :

 앱 버튼에 넣어줄 이미지를 위해 보통 구글등에서 검색하실 텐데요,  그냥 보이는 사진을 그 대로 사용하기 보다는, 저작권등에도 신경써서 하시는 것이 좋습니다.  camera png 또는 camera icon 등으로 검색한 다음  도구 메뉴를 클릭하면 나타나는 사용권한 메뉴를 눌러보세요.   

그럼 몇가지 메뉴가 뜨는데요,  수정후 재사용가능 또는 재사용 가능 , 비상업적 용도로 재사용 가능 등의 옵션을 체크해서 나타나는 이미지를 사용하시는 걸 추천해 드려요.

 그리고 앱버튼들의 아이콘용으로 사용할 이미지는 배경이 투명한 PNG 이미지를 사용하면 앱 버튼의 모습이 훨씬 깔끔해 집니다.  다만, PNG라고 하더라도 배경이 모두 투명한 건 아니니, 이때는 포토샵과 같은 편집프로그램으로 배경을 투명 처리해 주면 좋습니다.  ^^;

 

 그래서 아래와 같이 이미지를 업로드하고 높이와 폭을 적절히 이미지 크기를 고려해서 맞추어 주세요.

그리고 Text 항목에 적혀 있는 사진 이라는 글자는 지워 주세요.

 나머지 아이콘에 대해서도 처리한 아래 이미지를 참고하세요.

 

⑨ 세부 블록 코딩.

위의 코딩 블록을 참고해서 전체 블록코딩을 완성해 주세요.

 

가로보기 기능

- 만약 폰을 가로로 했을 때 앱 화면이 가로로 바뀌길 원한다면,  Screen1을 클릭하고,  Properties 편집창 아래쪽에 보면  ScreenOrientation 이라는 항목이 있어요, 그 부분에 옵션을 Sensor로 바꾸어 놓으면, 폰에 있는 자이로 센서에 의해 폰이 가로로 기울어 질때 센서에 반응해서 앱로 가로로 바뀌게 해줍니다.

 

 그럼, 이상으로 "사진에 특정표시하고 MMS, SNS 등으로 보낼 수 있는 앱" 만들기에 대해 설명을 드렸습니다. 

위에 첨부한 유튜브 영상과 함께 보면 훨씬 쉽게 따라하기 쉬울 듯 합니다. 

그럼,  앱인벤터로 , 재미있고 유용한 앱 제작 시간 되세요~

감사합니다~  ^^

 

#라이즈노IoT 구독을 하시면 새글이 업로드 될 때 마다 바로 받아 보실 수 있으세요~ 

많은 구독 부탁드려요~  ^^; 

 

반응형
반응형

 앱인벤터기초 #06 앱인벤터 1도 모르고 따라 하기 영상 실습#4 (사진/글자표시/SNS보내기 앱上)

 

 

App-Inventor !

[ 학습 목차 ]  

《응용 예제 #1-1 :  "예제3 : 사진 또는 캡쳐 이미지 위에 표시를 하거나 글자를 입력한 후 SNS로 보낼 수 있는 앱 제작 : 上 편"

1. 캔버스(Canvas) 컴포넌트를 활용하는 방법을(그리고 지우기 기능) 익힐 수 있다.

2. 수평정렬상자(HorizontalArrangement)를 이용해 버튼 들을 정렬 할 수 있다.

3. 슬라이더(Slider) 컴포넌트를 활용하여 선의 굵기 값 등을 조절 할 수 있다.

4. 제작앱 확인하기 (에뮬레이터로 확인 및 스마트폰에 설치와 실행 )

4. 버튼을 클릭하여 그리기의 색을 변경 할 수 있다. 

 

[ 다음시간 학습 목차 ]

《응용 예제 #1-2 :  "예제3 : 사진 또는 캡쳐 이미지 위에 표시를 하거나 글자를 입력한 후 SNS로 보낼 수 있는 앱 제작 : 下 편"

1. 카메라(Camera) 컴포넌트를 사용하여 폰에서 사진을 찍고, 갤러리에서 찍은 사진을 꺼내어 활용할 수 있다.

2. 사진위에 표시하거나 문자를 입력하여 저장 할 수 있다. 
3. Spinner 컴포넌트를 활용하여 글자(폰트)의 크기를 선택하여 입력할 수 있다.

4. Notifier 컴포넌트를 활용하여 저장할 때의 안내 팝업 버튼을 구성 할 수 있다.

5. MMS 버튼을 구성하여 지인에게 특정표시를 한 사진을 문자메시지와 함께 보낼 수 있다.

6. SNS 버튼을 구성하여 카톡,밴드,페이스북,E메일,구글드라이브 등으로 특정표시를 한 이미지를 전송할 수 있다. 

 

▶ 선수학습 

( 선수학습이 필요한 경우, 아래 링크를 클릭해서 먼저 보세요 )

【 앱인벤터기초#1】 MIT-구글의 App-인벤터 란? ( App-Inventor !)

【 앱인벤터기초 #02】 앱인벤터 시작하기(설치&셋업) ( App-Inventor !)

【 앱인벤터기초 #03】 앱인벤터 따라하기 실습#1(메뉴화면소개 및 사용법)

【 앱인벤터기초 #04】 앱인벤터 1도 모르고 따라하기 실습#2(화면이동 예제만들기)

【 앱인벤터기초 #05】 앱인벤터 1도 모르고 따라 하기#3(날짜/시간/체크박스 실습)

 

▶  실습 준비사항 

  1. 안드로이드가 탑재된 스마트기기(스마트폰, 스마트패드 등) :  안드로이드OS 버전 4.2 이상 권장

  2. 웹브라우저가 구동가능한 PC(노트북) : 구동가능 웹(크롬, 파이어폭스, 사파리, 우분투웹), 익스플로러는 실행불가!

  3. 구글 계정 필요

 

▶  오늘의 실습 따라하기 영상 보기 

[ 앱 인벤터 강의 영상 (영상시간: 19분) ]

 

 

▶  영상 속 전체 내용 요약 

[ ※ 영상 속에는 앱인벤터에 대한 지식이 없어도 바로 따라 하실 수 있도록 상세히 설명 되어 있으니, 꼭 영상을 보시기 바랍니다 ]

(아래 이미지들을 클릭하면 선명하게 확인 가능 합니다)

이번 시간부터는 앱을 하나 만들어 볼 텐데요, 사진을 찍고 그 위에 간단한 표시나 글자를 입력하여 문자나 카톡과 같은 SNS로 지인에게 전송 할 수 있는 앱을 만들어 보겠습니다.

 

단순히 사진만 보내는 것 보다, 어떤 정보를 표시하면 굉장히 유용할 때가 있어요.

예를 들어, 모임 장소를 찾아오는 친구에게 지도나 캡처한 사진을 보내 줄 때 그냥, 사진만 보내는 것 보다, 사진위에 표시하거나 필요한 안내 문자를 입력 한 후 보내주면 굉장히 편리 하겠죠. 기존에 저장된 갤러리 사진도 되고, 즉석에서 바로 찍어 표시하는 것도 가능한 앱입니다.

이 번 앱 제작 영상에서는 한 번에 완성형으로 가는 것 보다, 앱 인벤터의 주요 기능들을 익힐 수 있도록, 3회로 풀어서 올려 드리려고 합니다.

 

최종 앱의 모습은 아래와 같습니다.

 

1회차 에서는 캔버스 컴포넌트의 활용과, 버튼을 이용하여 색을 변경하고 캔버스에 그릴 수 있는 기능에 대해 진행됩니다

【 1회차 최종 완성본

 

① 컴포넌트 구성 : 아래 이미지를 참고하여 전체 컴포넌트를 구성해주세요.

 

② 전체 블록 코딩 : 아래는 블록 코딩의 전체 이미지 입니다.  이하 세부적으로 블록별 상세히 설명이 진행됩니다..

 

③ 캔버스1(Canvas1) 의 배치와 설정(properties)

화면 위쪽 영역에 이미지를 올려놓고 그리기 할 수 있는 캔버스 컴포넌트를 올려보겠습니다.

캔버스 컴포넌트는 Drawing and animation 항목에 있습니다.

캔버스 컴포넌트를 폰 화면 속으로 이렇게 끌어다 놓으면 됩니다.

그리고 캔버스 영역을 정할 텐데요, 높이는 250 Pixel로 하고 가로 크기는 화면에 최대로 차도로고 Fill parent로 하겠습니다.

 

④ 수평정렬상자의 설정 (HorizontalArrangement )

그림을 그려줄 여러 색의 버튼들을 배치해야 하는데요,

버튼을 그냥 놓게 되면 가로로 가지런히 배치가 되지 않습니다.

이럴 때는 Layout 메뉴에 있는 수평정렬 상자를 이용하면 됩니다.

그리고 이 수평정렬 상자가 가로로는 꽉 채우도록 Fill parent로 하지만, 높이는 버튼 크기에 따라 자동으로 맞추어 지도록 Automatic 상태 그대로 둡니다.

 

⑤ 색상 버튼의 구성 :

버튼의 구성은 이렇게 4개로 해보겠습니다.

유저 인터페이스 메뉴로 가서 버튼 컴포넌트를 끌어다 놓습니다.

그리고 텍스트 항목에 BLACK 이라고 입력합니다.

Font Bold에 체크 하고, Font size16으로 합니다.

Red, Green, Blue, 버튼에 대해서도 같은 방법으로 작업해줍니다.

그리고 버튼의 크기를 정해보겠습니다.

높이는 40 픽셀로 하고, 폭은 70픽셀로 합니다.

만약에 앱화면에서 글자가 모두 보이지 않을 경우 폭을 더 넓혀 주어야 할 수도 있습니다.

다음 버튼들도 같은 방법으로 작업해줍니다.

 

⑥ 버튼 컴포넌트들의 이름 설정 :

버튼들의 이름을 정해줍니다. Canvas와 같이 하나만 나오는 컴포넌트를 제외하고는 이름을 체계적으로 붙여주는 것이 좋습니다.

제 경우는 버튼의 경우 맨 앞에 button 철자를 줄여서 btn이라 사용하고_ 언더바로 구분한 다음 버튼의 이름을 붙여주는 식으로 합니다. 만약 Lable 컴포넌트를 사용할 때는 약자로 lbl이라고 사용하는 식으로 합니다.

이렇게 하면, 나중에 블록코딩을 할 때 헷갈리지 않게 하여 코딩을 하기가 쉬워집니다.

 

⑦ 지우기 버튼 설정 :

그린 내용을 지울 수 있는 지우기 버튼과 그리기 선의 굵기를 정해줄 슬라이드 컴포넌트를 배치할 텐데요.

나란히 수평으로 배치될 수 있도록 'Layout' 항목에 있는 수평정렬상자를 먼저 배치합니다.

그리고 폭의 옵션만 'Fill parent‘로 바꾸어 줍니다.

여기에 버튼을 하나 끌어다 놓고, text 항목에 지우기라는 한글 이름을 넣어줍니다.

그리고 폰트 볼드에 체크하고, 폰트 사이즈를 16으로 하여 키워줍니다.

슬라이더의 설정

⑧ 캔버스 화면에 기본 이미지 불러오기 :

 앱을 실행했을 때 기본 배경으로 쓰일 이미지를 캔버스에 올려 주겠습니다.

캔버스 컴포넌트 클릭하고 우측 속성 메뉴 중 Background Image를 선택합니다. 적당한 이미지를 고른 다음 Upload File을 클릭하여 올려줍니다

만약 이미지를 바꾸고 싶으면, 같은 방법으로 다른 이미지를 선택하여 업로드 하면 이미지를 바꿀 수 있습니다.

이미지 업로드를 하고서 OK 버튼를 클릭하면 아래와 같이 기본배경이미지 설정이 완료 된다.

 

⑨ 세부 블록 코딩.

 

- 캔버스의 블록 코딩과 라인굵기 선택을 위한 전역변수(size) 선언

 

- 색상 선택을 위한 버튼들의 블록 코딩

- 지우기 버튼과 슬라이더 컴포넌트의 블록 코딩

 

- 블록 코딩에 대한 해설은 영상에서 상세하게 설명하고 있으니, 영상을 참고해 주세요. 

 

- 그럼 재미있는 앱 제작 시간 되세요~ 감사합니다~

 

반응형
반응형

 앱인벤터기초 #05 앱인벤터 1도 모르고 따라 하기 영상 실습#3 (날짜/시간/체크박스 실습

 

App-Inventor !

[ 학습 목차 ]  

1. 예제 만들기 #2 :  "예제2 : 체크박스, 날짜-시간 선택메뉴 활용하기"

2. 날짜 선택(DatePicker) 블록을 이용하여 날짜를 선택하고 레이블로 표시하기

3. 시간 선택(TimePicker) 블록을 이용하여 시간을 선택하고 레이블로 표시하기

4. 체크박스(CheckBox) 블록을 이용하여 선택 한 내용 표시하기

5. 제작앱 확인하기 (에뮬레이터로 확인 및 스마트폰에 설치와 실행 )

 

 

[ 다음시간 학습 목차 ]

1. 예제 만들기 #3 :  "예제3 : 이미지 선택 출력하기, 이미지 컴포넌트 제어!"

2. 봄/여름/가을/겨울 이미지를 버튼선택으로 화면에 출력하기 

3. 출력이미지 확대 축소하기

 

▶ 선수학습 

   - 【앱인벤터 기초#01】 앱 인벤터란?       ← 클릭 이동

   - 【앱인벤터 기초#02】 앱인벤터 시작하기(설치&셋업)   ← 클릭 이동

   - 【앱인벤터 기초#03】 앱인벤터 영상실습#1(메뉴소개) ← 클릭 이동

   - 【앱인벤터 기초#04】 앱인벤터 영상실습#2(화면이동). ← 클릭 이동 

 

▶  실습 준비사항 

  1. 안드로이드가 탑재된 스마트기기(스마트폰, 스마트패드 등) :  안드로이드OS 버전 4.2 이상 권장

  2. 웹브라우저가 구동가능한 PC(노트북) : 구동가능 웹(크롬, 파이어폭스, 사파리, 우분투웹), 익스플로러는 실행불가!

  3. 구글 계정 필요

 

▶  오늘의 실습 따라하기 영상 보기 

[ 앱 인벤터 강의 영상 (영상시간: 21분) ]

https://youtu.be/9Ki9grq4BqQ

 

【앱인벤터-기초#3】 앱인벤터 1도 모르고 따라하기(#3. 체크 데이 타임 메뉴) AppInventor Lecture#3

【앱인벤터-기초#3】 체크박스, 날짜메뉴, 시간메뉴 선택 표시하기! - 앱인벤터 처음시작 하는 분들을 위한 시리즈 강좌입니다. 메뉴부터 상세하게 설명드리니, #1편 부터 보세요~ - 앱인벤터 설치&셋업, 준비하기, 앱인벤터 메뉴소개 등 : https://rasino.tistory.com/category/App-INVENTOR - 앱인벤터 1도 모르고 따라하기 #1 영상보러가기! : https://youtu.be/pIKQM9MUNfU - 앱인벤터 1도 모

www.youtube.com

 

▶  영상 속 내용 요약 

[ ※ 영상 속에는 앱인벤터에 대한 지식이 없어도 바로 따라 하실 수 있도록 상세히 설명 되어 있으니, 꼭 영상을 보시기 바랍니다 ]

(아래 이미지들을 클릭하면 선명하게 확인 가능 합니다)

① 사전준비 : 에뮬레이터 설치와 구동하기 

 

②  1번 화면에 대한 '화면구성요소' 만들기

 : 아래와 같은 화면으로 컴포넌트를 구성하고 배치하세요.(세부 옵션 영상 참조)

 

 

③ 날짜와 시간 모듈(Date Picker & Time Picker) 에 대한 '코드 블록'  만들기

 : 아래와 같은 화면으로 코드 블록을 쌓으세요. 

 

④ 체크박스 모듈(Check Box 1 & 2 ) 에 대한 '코드 블록'  만들기

 : 아래와 같은 화면으로 코드 블록을 쌓으세요. 

 

⑤ 최종 완성형 '코드 블록'

 : 아래와 같은 화면으로 코드 블록을 쌓으세요. 

 

⑥ 시뮬레이션 확인 및 앱 빌드 후 스마트폰으로 전송

 : 에뮬레이터를 통하여 앱의 제대로 동작하는지 확인 후 아래처럼 앱을 PC로 빌드하여, 연결시킨 스마트폰으로 앱을 복사해 넣기

 

⑦ 스마트기기에서 앱 실행과 테스트 하기!

 : 스마트폰에서 탐색창과 같은 앱을 통해 다운받은 'xxxx.apk' 앱설치 파일을 눌러 앱을 설치하고 실행시켜 본다.

아래는 앱이 실행되는 모습.

 

※ 이상으로 날짜 모듈/ 시간모듈 /체크박스 모듈을 활용하는 방법에 대해 설명을 드렸습니다. 궁금한 사항은 댓글로 남겨주세요.  감사합니다.  ("메뉴 사용 설명등 설명하지 않은 부분에 대한 이해는 사전학습 부분의 이전 영상을 참고하시면 도움이 되세요~") .

 

반응형
반응형

 앱인벤터기초 #04 앱인벤터 1도 모르고 따라 하기실습#2(화면 이동 예제만들기

 

App-Inventor !

[ 학습 목차 ]  

1. 예제 만들기 #1 :  "예제1 : 두 개의 화면을 버튼 클릭하여 이동하기"

2. 제작앱 확인하기 (스마트폰에 설치 및 실행 또는 에뮬레이터로 확인)

 

[ 다음시간 학습 목차 ]

1. 예제 만들기 #2 :  "예제2 : 체크박스, 날짜-시간 선택메뉴 활용하기"

2. 날짜 선택(DatePicker) 블록을 이용하여 날짜를 선택하고 레이블로 표시하기

3. 시간 선택(TimePicker) 블록을 이용하여 시간을 선택하고 레이블로 표시하기

4. 체크박스(CheckBox) 블록을 이용하여 선택 표시하기

5. 제작앱 확인하기 (스마트폰에 설치 및 실행 또는 에뮬레이터로 확인)

 

▶ 선수학습 

   - 【앱인벤터 기초#01】 앱 인벤터란?       ← 클릭 이동

   - 【앱인벤터 기초#02】 앱인벤터 시작하기(설치&셋업)   ← 클릭 이동

   - 【앱인벤터 기초#03】 앱인벤터 영상실습#1 (메뉴소개) ← 클릭 이동

 

▶  실습 준비사항 

  1. 안드로이드가 탑재된 스마트기기(스마트폰, 스마트패드 등) :  안드로이드OS 버전 4.2 이상 권장

  2. 웹브라우저가 구동가능한 PC(노트북) : 구동가능 웹(크롬, 파이어폭스, 사파리, 우분투웹), 익스플로러는 실행불가!

  3. 구글 계정 필요

 

▶  오늘의 실습 따라하기 영상 보기 

[ 앱 인벤터 강의 영상 (영상시간: 16분) ]

 : 두 개의 화면을 버튼 클릭하여 이동하기

https://youtu.be/E2ujM5T1HdQ

 

▶  영상 속 내용 요약 

[ ※ 영상 속에는 앱인벤터에 대한 지식이 없어도 바로 따라 하실 수 있도록 상세히 설명 되어 있으니, 꼭 영상을 보시기 바랍니다 ]

 

① 1번 화면에 대한 '화면구성요소' 만들기

 : 아래와 같은 화면으로 컴포넌트를 구성하고 배치하세요.(세부 옵션 참조)

 

② 1번 화면에 대한 '코드 블록'  만들기

 : 아래와 같은 화면으로 코드 블록을 쌓으세요. (영문 메뉴와 한글메뉴 모두 표시하였음)

 

③ 2번 화면에 대한 '화면구성요소' 만들기

 : 아래와 같은 화면으로 컴포넌트를 구성하고 배치하세요.(세부 옵션 참조)

 

④ 2번 화면에 대한 '코드 블록'  만들기

 : 아래와 같은 화면으로 코드 블록을 쌓으세요. (영문 메뉴와 한글메뉴 모두 표시하였음)

⑤ QR 코드 스캔하여 테스트 및 앱 설치 파일 다운 받기 

 : AI Companion 메뉴등을 이용하여 작성한 앱을 테스트 할 수 있다.

 

⑥ 앱을 스마트폰에 설치하고 실행시키기 

 : 아래처럼 스마트 기기에 앱을 다운받아 설치 한 후 실행시켜보자~!  멋지게 동작 할 것이다!

 

▶  앱인벤트 프로젝트 파일 고대로~ 다운로드 받기!

[ 직접만든 앱이 실행 에러가 나거나, 앱을 바로 확인하고 싶을 때, 아래 프로젝트 파일을 다운받아 여러분의 앱인벤트 프로젝트에서 열기를 하신다면 본 글에서 작업한 프로젝트 그대로 열릴 것입니다 ] 

: 앱인벤터 새프로젝트 화면에서 아래처럼 프로젝트 메뉴에서 다운받은 파일을 삽입해보세요

Projects 》 Import project (.aia) from my computer ...

[ 프로젝트 파일 ]

Button_move.aia
0.00MB

반응형
반응형

 앱인벤터기초 #03 앱인벤터 따라하기 실습#1(메뉴화면소개 및 사용법

 

App-Inventor !

[ 학습 목차 ]  

1. 앱-인벤터 저작화면 메뉴 설명 ( Design 화면 & Block 코딩화면)

2. 인벤터 상단 메뉴 설명 ( Project / Connect / Build 메뉴)

3. 갤러리(Gallery) 안내 (앱인벤터 유저들의 앱 공유 공간)

4. 앱인벤터 언어설정 모드 변경 소개(영어, 한글, 중국어 모드 등)

 

[ 다음시간 학습 목차 ]

1. 예제 만들기 :  "예제1 : 두 개의 화면을 버튼 클릭하여 이동하기"

2. 제작앱 확인하기 (스마트폰에 설치 및 실행 또는 에뮬레이터로 확인)

 

▶ 선수학습 

  : 【앱인벤터 기초#01】 앱 인벤터란?       ← 클릭 이동

  : 【앱인벤터 기초#02】 앱인벤터 시작하기(설치&셋업)   ← 클릭 이동

 

▶  실습 준비사항 

  1. 안드로이드가 탑재된 스마트기기(스마트폰, 스마트패드 등) :  안드로이드OS 버전 4.2 이상 권장

  2. 웹브라우저가 구동가능한 PC(노트북) : 구동가능 웹(크롬, 파이어폭스, 사파리, 우분투웹), 익스플로러는 실행불가!

  3. 구글 계정 필요

 

▶  앱 인벤터 메뉴 소개 

[ 앱 인벤터 강의 영상 보기 (영상시간: 10분) ]

 앱인벤터 화면 및 메뉴 구성에 대해 다루고 있습니다.

https://youtu.be/pIKQM9MUNfU

 

반응형