[안드로이드 자바] 탭 레이아웃을 이용해 이미지 바꾸기(TabLayout)

 

 

디자인

 

 

프로젝트 설명

각 탭을 누르면 탭이 변경되면서 이미지가 바뀐다

※ drawable 폴더에 다음과 같이 이미지를 위치시켜야 함

 

 

xml

<?xml version="1.0" encoding="utf-8"?>
<TabHost 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:id="@android:id/tabhost"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/Linearlayout1"
        android:orientation="vertical">
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:id="@android:id/tabcontent">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/ImageView1"
                android:layout_gravity="center"
                android:src="@drawable/dog" />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/ImageView2"
                android:layout_gravity="center"
                android:src="@drawable/cat" />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/ImageView3"
                android:layout_gravity="center"
                android:src="@drawable/rabbit" />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/ImageView4"
                android:layout_gravity="center"
                android:src="@drawable/horse" />
        </FrameLayout>
        <TabWidget
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@android:id/tabs"
            android:background="#f0f000">
        </TabWidget>
    </LinearLayout>
</TabHost>

 

java

package com.sample.picturetab;

import android.app.TabActivity;
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);
        setTitle("TabApp");

        TabHost host = getTabHost();

        TabHost.TabSpec sdog = host.newTabSpec("DOG").setIndicator("개");
        sdog.setContent(R.id.ImageView1);
        host.addTab(sdog);

        TabHost.TabSpec scat = host.newTabSpec("CAT").setIndicator("고양이");
        scat.setContent(R.id.ImageView2);
        host.addTab(scat);

        TabHost.TabSpec srabbit = host.newTabSpec("RABBIT").setIndicator("토끼");
        srabbit.setContent(R.id.ImageView3);
        host.addTab(srabbit);

        TabHost.TabSpec shorse = host.newTabSpec("HORSE").setIndicator("말");
        shorse.setContent(R.id.ImageView4);
        host.addTab(shorse);

        host.setCurrentTab(0);

    }
}