코틀린 팀플1-자기소개

1)디자인, 개인 페이지, 메인 페이지

songyooho 2024. 5. 29. 14:34

1. 디자인: 피그마를 활용하여 미리 틀을 디자인함.

-문제점: 코드추출은 유료로 바뀌어서 사용불가 => 안드로이드 스튜디오 내에서 구현이 까다로운 부분(TEAM I 부분)은 PNG로 추출하여 이미지뷰로 넣는 방식으로 해결

 

2. 메인 페이지

1)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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    android:background="@drawable/mainbg">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="안드로이드 개발 2조"
        android:textColor="#4d4d4d"
        android:textSize="25sp"
        android:fontFamily="@font/pretendard"
        android:layout_marginTop="70dp"
        android:gravity="center"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:src="@drawable/team_name"
        android:layout_marginTop="20dp"/>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <View
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="50dp"
            android:background="@drawable/team_intro_bg" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="35dp"
            android:background="#c4da58"
            android:fontFamily="@font/pretendard"
            android:paddingHorizontal="10dp"
            android:text="팀원소개"
            android:textColor="@color/black"
            android:textSize="30sp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="50dp"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <Button
                android:id="@+id/joo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/main_btn_bg"
                android:fontFamily="@font/pretendard"
                android:paddingVertical="5dp"
                android:paddingHorizontal="60dp"
                android:layout_marginVertical="10dp"
                android:text="송주영"
                android:textSize="25sp"
                android:textStyle="bold" />

            <Button
                android:id="@+id/yoo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/main_btn_bg"
                android:fontFamily="@font/pretendard"
                android:paddingVertical="5dp"
                android:paddingHorizontal="60dp"
                android:layout_marginVertical="10dp"
                android:text="송유호"
                android:textSize="25sp"
                android:textStyle="bold" />

            <Button
                android:id="@+id/jeong"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/main_btn_bg"
                android:fontFamily="@font/pretendard"
                android:paddingVertical="5dp"
                android:paddingHorizontal="60dp"
                android:layout_marginVertical="10dp"
                android:text="김정호"
                android:textSize="25sp"
                android:textStyle="bold" />

            <Button
                android:id="@+id/chan"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/main_btn_bg"
                android:fontFamily="@font/pretendard"
                android:paddingVertical="5dp"
                android:paddingHorizontal="60dp"
                android:layout_marginVertical="10dp"
                android:text="김찬휘"
                android:textSize="25sp"
                android:textStyle="bold" />

            <Button
                android:id="@+id/seong"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/main_btn_bg"
                android:fontFamily="@font/pretendard"
                android:paddingVertical="5dp"
                android:paddingHorizontal="60dp"
                android:layout_marginVertical="10dp"
                android:text="김성진"
                android:textSize="25sp"
                android:textStyle="bold" />

        </LinearLayout>


    </FrameLayout>

</LinearLayout>

 

2)kotlin코드

package com.example.myapplication

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import androidx.appcompat.widget.Toolbar

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

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

        findViewById<Button>(R.id.yoo).setOnClickListener {
            val intent=Intent(this,yooho::class.java)
            startActivity(intent)
        }

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

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

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

    }
}

 

3)사용 툴

<1>FrameLayout: 팀원 소개 부분 테두리를 구현하기 위해 FrameLayout을 이용하여 테두리가 있는 네모 모양 View에 배경색이 초록인 텍스트뷰를 겹치는 방식을 사용

<2>이미지 삽입:drawable폴더에 이미지를 넣은 후 ImageView로 넣는 방식을 이용

<3>폰트 삽입:res->font 폴더(없으면 만들기)에 폰트 파일을 넣은 뒤 fontFamily속성을 통해 적용

<4>drawable resource file - shape:테두리가 있는 배경을 만들기 위해 drawable폴더 내에 파일 생성후 background 속성으로 적용

-파일 코드

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

    <solid android:color="#00FF0000"/> <!-- 이부분은 배경색 -->
    <stroke android:color="#000000" android:width="1dp"/>  <!-- 이부분은 테두리 -->
    
    <!--외곽을 둥글게 만들고 싶으면 아래부분 추가-->
    <!--<corners android:radius="15dp"/> -->

</shape>

 

3. 개인 페이지

개인 페이지

1)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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".yooho"
    android:background="#F9FBBC">

    <androidx.appcompat.widget.Toolbar
        app:layout_constraintTop_toTopOf="parent"
        android:id="@+id/mainToolbar"
        android:background="#A9A9A9"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">



    </androidx.appcompat.widget.Toolbar>

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:src="@drawable/face"
        app:civ_border_overlay="true"
        app:civ_border_width="2dp"
        app:civ_border_color="@color/black"
        android:layout_marginTop="70dp"/>

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="이름: 이름\nMBTI: INFP\n취미: 소설 읽기\n좌우명: 될 때 까지 하자\n목표: 부트캠프 잘 끝내는 것"
        android:gravity="center"
        android:padding="15dp"
        android:fontFamily="@font/pretendard"
        android:textColor="@color/black"
        android:lineSpacingMultiplier="1.5"
        android:textSize="25sp"
        android:layout_marginTop="50dp"
        android:layout_marginHorizontal="50dp"
        android:background="@drawable/bg"/>


</LinearLayout>

 

2)kotlin 코드

package com.example.myapplication

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.Menu
import android.view.MenuItem
import androidx.appcompat.widget.Toolbar

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

        val toolbar = findViewById<Toolbar>(R.id.mainToolbar)
        setSupportActionBar(toolbar)
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setDisplayShowTitleEnabled(false)
        supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_home)


        toolbar.title="이름 소개페이지"
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when(item!!.itemId){
            android.R.id.home -> finish()
        }

        return super.onOptionsItemSelected(item)
    }
}

 

3)사용 툴

<1>원형 이미지 뷰: 이미지를 둥근 모양으로 삽입하게 해주는 위젯

-1. implement: build.gradle(module)에서 dependencies수정 후 sync

dependencies {

    .
    .
    .

    implementation 'de.hdodenhof:circleimageview:3.1.0'
}

 

-2. de.hdodenhof.circleimageview.CircleImageView 위젯 삽입

<de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:src="@drawable/face"
        app:civ_border_overlay="true"
        app:civ_border_width="2dp"
        app:civ_border_color="@color/black"
        android:layout_marginTop="70dp"/>
        
<!--overlay는 테두리를 이미지에 겹쳐지게 할지 여부, width는 테두리 두께, color는 테두리 컬러-->

 

<2>Appbar-toolbar사용

-1. res->value->themes에서 NoActionBar로 수정하여 기존 액션바를 없앰

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.MyApplication" parent="Theme.AppCompat.DayNight.NoActionBar">
    .
    .
    .

-2. xml파일에 최상위에 위치한 위젯 내부에 툴바 삽입

<androidx.appcompat.widget.Toolbar
        android:id="@+id/mainToolbar"
        android:background="#A9A9A9"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

-3. 툴바 설정

val toolbar = findViewById<Toolbar>(R.id.mainToolbar)
setSupportActionBar(toolbar) //툴바를 액션바로 설정
supportActionBar?.setDisplayHomeAsUpEnabled(true) //왼쪽버튼 활성화
supportActionBar?.setDisplayShowTitleEnabled(false) //액션바에서 앱이름 안보이게 제거
supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_home) //왼쪽 버튼 아이콘 설정

toolbar.title="송유호 소개페이지"

-맨 아래는 툴바 타이틀 설정

 

-4. 왼쪽 버튼 클릭시 동작 설정

override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when(item!!.itemId){
            android.R.id.home -> finish() //R.id.home이 왼쪽 버튼의 id, 클릭시 액티비티 종료
        }

        return super.onOptionsItemSelected(item)
}

-onCreate바깥에 해당 함수 작성

'코틀린 팀플1-자기소개'의 다른글

  • 현재글1)디자인, 개인 페이지, 메인 페이지

티스토리툴바