728x90
반응형

 

 

카톡이나 인스타그램 같은 앱을 보시면 하단에 탭 버튼이 있어, 각 탭을 눌러서 화면을 이동할 수 있도록 되어있습니다.

 

만약 옆으로 밀어서 화면이 넘어가는 탭을 만들고 싶다면 '뷰클리퍼'를 사용할 수 있습니다.

 

 

 

 

탭 호스트는 탭 버튼에 맞는 화면을 갈아끼울 수 있는 장소라고 생각하시면 됩니다.

 

각 버튼에 맞는 화면은 1개씩만 지정이 가능하고 사진을 연결할 수도 있고,

xml을 따로 연결할 수도 있어서 각 탭 버튼에 맞는 화면 구현이 가능합니다.

 

각 탭버튼마다 xml을 연결한다면, 필요한 xml의 개수는 4개 입니다.

 

탭 호스트 xml 1개, 각 화면에 맞는 xml 3개!

 

 

 

 

 

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"
android:orientation="vertical"
tools:context=".MainActivity">

<TabHost
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="@android:id/tabhost">

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

<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@android:id/tabcontent">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tab_study"
android:orientation="vertical" ></LinearLayout>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="@+id/tab_time"></LinearLayout>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="@+id/tab_group"></LinearLayout>

</FrameLayout>



<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"></TabWidget>


</LinearLayout>


</TabHost>

</LinearLayout>

프레임 레이아웃 안쪽 리니어 레이아웃이 3개가 있습니다.

이 리니어 레이아웃의 개수가 버튼의 개수라고 생각하시면 됩니다.

 

만약 탭 버튼들이 하단이 아니라 상단에 위치하는것을 원하신다면 탭위젯을 프레임레이아웃 바로 위로 올려주시면 됩니다.

 

 

 

 

 

 

 

MainActivity.java

package com.example.together;


import androidx.appcompat.app.AppCompatActivity;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TabHost;



@SuppressWarnings("deprecation") //이거 있어야 합니다.

public class MainActivity extends TabActivity {



@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);


TabHost tabHost = getTabHost(); //탭 호스트 객체 생성

// 탭스팩 선언하고, 탭의 내부 명칭, 탭에 출력될 글 작성
TabHost.TabSpec spec;
Intent intent; //객체




//탭에서 액티비티를 사용할 수 있도록 인텐트 생성
intent = new Intent().setClass(this, Study.class);
spec = tabHost.newTabSpec("Study"); // 객체를 생성
spec.setIndicator("공부하기"); //탭의 이름 설정
spec.setContent(intent);
tabHost.addTab(spec);



//탭에서 액티비티를 사용할 수 있도록 인텐트 생성
intent = new Intent().setClass(this, Time.class);
spec = tabHost.newTabSpec("Time"); // 객체를 생성
spec.setIndicator("통계"); //탭의 이름 설정
spec.setContent(intent);
tabHost.addTab(spec);



//탭에서 액티비티를 사용할 수 있도록 인텐트 생성
intent = new Intent().setClass(this, Together_home.class);
spec = tabHost.newTabSpec("Together_home"); // 객체를 생성
spec.setIndicator("그룹"); //탭의 이름 설정
spec.setContent(intent);
tabHost.addTab(spec);



tabHost.setCurrentTab(0); //먼저 열릴 탭을 선택! (2)로 해두면 그룹이 시작 화면!


}

}

각 탭에 맞는 xml이 연결될 수 있도록 자바코드를 작성해줍니다. xml에 맞는 java파일을 꼭 만드셔야해요.

 

intent = new Intent().setClass(this, Together_home.class); 이 부분이 각 탭에 맞는 화면이 나올 수 있도록 인텐트 하는 부분입니다.

 

 

 

 

Together_home.java

package com.example.together;

import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import androidx.appcompat.app.AppCompatActivity;



public class Together_home extends AppCompatActivity {


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.together_home); //xml연결



}

}

그룹 버튼을 눌렀을떄 연결되는 자바파일 입니다. xml과 연결되어 있어야 합니다.

 

새로운 자바파일을 추가했으면, Manifest에 추가하는거 잊지 마시길 바랍니다.

 

 

 

 

 

 

 

결과 화면

 

728x90
반응형

+ Recent posts