[Buttom UP] 버튼 만들기, Splash 이미지, 화면 전환 구성

오늘은 어제 만들던 화면에 대해 이어서 구현해보았다. 오늘 구현한 목록은 다음과 같다.

 

1. 텍스트 폰트 커스터마이징(색 바꾸기, 글꼴 바꾸기)

2. 버튼 만들기

3. 스플래시 이미지 넣기

4. 버튼 화면 동작 구현하기

 

[1] textview font 디자인

TextView를 이용하여 만든 텍스트의 색과 글꼴 크기, 폰트를 지정하기 위해 이 부분에 대해 공부했다.

간단하게 키워드만 제공하자면 아래와 같다. 키워드만 치면 자동완성을 해줘서 매우 편리했다. 자동완성 덕분에 어려워도 재미를 느끼고 계속 할 수 있었던 것 같다.

 

텍스트 색 바꾸기: textColor

텍스트 크기 바꾸기: textSize

 

그 외 텍스트 글꼴 폰트 지정하는 방법은 아래와 같다.

1. res 폴더에 font속성의 font 폴더를 하나 만든다.

2. 그 안에 또 xml 파일을 생성하여 font-family로 폰트를 사용할 준비를 한다.

3. TextView에서 android:fontFamily= 로 파일/글꼴을 하여 적용한다.

 

- 예시코드:

 <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="버대학교 몇 학년인가?"
                android:textSize="20dp"
                android:textColor="#f2a3bb"
                android:gravity="center"
                android:fontFamily="@font/scdream3"
                android:layout_marginRight="50dp"/>

 

[2] 버튼 만들기

버튼을 만드는 여러가지 방법이 있지만 내가 처리한 버튼은 이미지로 처리하였다. 

src로 drawable 폴더에 있는 리소스 파일을 가져와서 이미지뷰로 처리를 하고, 그 이미지 뷰 영역에 onclick또는 id를 지정해주어 동작을 하게 만들었다. 동작(화면전환)을 하도록 하는 방법은 뒤에서 자세히 설명하겠다. 

 

- 예시코드:

       <ImageView
                            android:onClick="auto_btn"
                            android:layout_width="match_parent"
                            android:layout_height="50dp"
                            android:layout_marginLeft="32dp"
                            android:layout_marginRight="32dp"
                            android:src="@drawable/select_button_background" />
 
 
                        <ImageView
                            android:onClick="dire_btn"
                            android:layout_width="match_parent"
                            android:layout_height="80dp"
                            android:layout_marginLeft="32dp"
                            android:layout_marginRight="32dp"
                            android:src="@drawable/select_button_background" />

- 결과 화면:

 

[3] 스플래시 이미지 넣기

앱을 실행할 때 로딩 중에 잠시 화면을 보여주는 화면이 '스플래시 화면'이라는 것을 깨달았다.

미리 만들어둔 이미지를 xml로 처리하여 java 동작을 이용하여 스플래시 화면을 구현하였다.

 

1. 우선 원하는 이미지를 drawable에 넣는다.

2. layout 폴더에 원하는 xml 파일을 만든다. (나는 activity_loading으로 만들었다.)

3. 여기에 이미지 파일을 불러와서 넣는 xml 코드를 작성한다.

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

 

4. 그리고 이 xml 파일을 불러올, 짝꿍이 되는 java 파일을 생성해준다.(이 파일은 SplashActivity로 했다.)

package com.example.bottomup_school_timetable;
 
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
 
public class SplashActivity extends Activity {
 
    @Override
    protected  void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_loading);
 
        Handler handler = new Handler();
        handler.postDelayed(new splashhandler(), 4000);
    }
 
    private class splashhandler implements Runnable {
        public void run() {
            startActivity(new Intent(getApplication(), MainActivity.class)); //로딩후 페이지 이동
            SplashActivity.this.finish(); //로딩페이지 activity stack에서 제거
        }
    }
    @Override
    public void onBackPressed() {}
    //초반 화면에서 버튼 못 누르게 설정
}

 

5. 그리고 다 만든 이 파일을 첫화면으로 불러오는 설정을 해야하는데, 이 설정은 AndroidManiFest에서 해준다.

* <activity andriod:name 부분을 SplashActivity로 바꿔주면 된다.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.bottomup_school_timetable">
 
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".SplashActivity"> //시작화면 지정
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".MainActivity"/> //이부분 추가(액티비티 생성)
        <activity android:name=".Select_grade"/> //이부분 추가(액티비티 생성시)
    </application>
 
</manifest>

그리고 주의할 점은 액티비티 태그 마지막에 새로운 액티비티 태그를 생성 후 원래 화면을 액티비티에 넣어주면 된다.

또한 세로운 xml 파일을 만들었을 경우 이 파일에 액티비티 태그로 추가를 해 주어야 한다고 한다.

 

이 과정을 그대로 쭉 따라오니 시작 전 화면이 잘 로딩이 되어 나왔다.

 

[4] 버튼 화면 동작 구현하기

버튼 전환, 액티비티간의 이동을 구현해보았다. 사실, 이 과정에서 안드로이드 스튜디오의 전반적인 흐름을 이해할 수 있었던 것같다. 액티비티에 화면을 xml로 구현하고, 짝인 java을 같이 생성해줌으로써 화면에서 처리할 수 있는 코드들을 작성해줌으로써 어느정도 개발이 시작되는 것 같다. 아직 이것정도만 아는 초짜이지만 그래도 아무것도 안 했을때와는 달리 막막함이 조금 사라지고 흥미가 샘솟기 시작했다.

 

잡담은 여기까지 하고, 액티비티 이동에 대해 간단히 설명하겠다.

어렵지 않다, 아까 사담처럼 말했듯이 버튼에 id를 지정한 후에 Intent를 이용하여 java 파일에서 동작을 선언해주면 된다.

 

1. 동작할 객체에 onClick이나 id를 부여해 구별해준다.

2. java 파일에서 아래와 같은 코드를 작성해준다. 

public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
    }
 
    public void auto_btn(View view) { //auto_making
        Intent auto = new Intent(this, Select_grade.class);
        startActivity(auto);
    }
 
    public void dire_btn(View view) { //direct_making
        Intent direct = new Intent(this, Select_grade.class);
        startActivity(direct);
    }
}
 

3. 모두 작성했다면 마지막으로 ManiFest에서 액티비티를 추가해준다. 그러면 버튼을 클릭했을 때 원하는 페이지로 넘어가는 모습을 볼 수 있을 것이다. 

 

오늘은 여기까지 간단히 구현해보았다. 조금 더 효율적으로 코딩하는 것을 고려해보고 싶지만 천천히 공부해나갈 예정이다. 눈에 바로 결과가 보이니 흥미를 끌기에 나에게는 충분하게 다가왔다.