Поиск по этому блогу

понедельник, 26 декабря 2011 г.

Tab Layout на Android часть первая

Однажды появилось у меня желание написать одно Android приложение, идея есть но нет реализации так как языка java я не знаю и с разработкой под Android я никогда не сталкивался. GUI я хотел написать с красивыми табами для простоты использования, но полазив по интернетам я не нашел никакого гайда который бы толково объяснял как делаются эти заветные табы. Тогда я залез на забугорный американский сайт и о чудо я нашел то что нужно, нормальная статья с кодом который работает и который не требует всякого мусора который пишут в русских гайдах, все написано ясно и красиво. 
Ссылку на сайт я приведу в конце статьи, а сейчас я напишу маленький гайд.

Вот так просто будет выглядеть наши табы:


Теперь начнем.

Прежде всего я надеюсь на то что Вы умеете создавать уже проекты в Eclipse и сделаете это без меня. Вот мы создали проект и первое что мы сделаем это переименуем 

public class SimpleActivity extends Activity
в
public class SimpleActivity extends TabActivity

для особо внимательных я выделил то что нужно изменить. Далее создаем три файла у меня они называются — SomeClass1, SomeClass2 и SomeClass3, Вы называйте как хотите но в коде эти названия будут упоминаться. 

Теперь мы заполняем эти классы каким-то текстом что бы при перелистывании было видно что layout меняется. Я напишу только один класс так как они отличаються только текстом внутри «setText». Код ниже:

SomeClass1.java_________________________________________________________________________

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
public class SomeClass1 extends Activity{

        public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TextView textview = new TextView(this);
        textview.setText("Моя любимая музня");
        setContentView(textview);
    }
}


Теперь заполняем main.xml, открываем файл, удаляем весь текст который там есть и вставляем туда вот такой код:

main.xml________________________________________________________________________________
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"/>
    </LinearLayout>
</TabHost>


Здесь мы создали объект TabHost который обеспечивает работу табов в проекте. Должно получиться примерно вот такое в Eclipse


Дальше открываем наш SimpleActivity.java и в onCreate() вставляем вот такой код

SimpleActivity.java_____________________________________________________________________

        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        TabHost tabHost = getTabHost();
                                                                 //Таб музыки
        TabSpec music = tabHost.newTabSpec("tab1");              //идентификатор нашего таба
        music.setIndicator("Музыка");                            //Название таба
        Intent photosIntent = new Intent(this, SomeClass1.class);//Класс к которому будем обращаться при переходе
        music.setContent(photosIntent);

                                                                //Таб Фильмов
        TabSpec films = tabHost.newTabSpec("tab2");             //идентификатор нашего таба
        films.setIndicator("Фильмы");                           //Название таба
        Intent songsIntent = new Intent(this, SomeClass2.class);//Класс к которому будем обращаться при переходе
        films.setContent(songsIntent);
                                                                 //Таб игры
        TabSpec games = tabHost.newTabSpec("tab3");              //идентификатор нашего таба
        games.setIndicator("Игры");                              //Название таба
        Intent videosIntent = new Intent(this, SomeClass3.class);//Класс к которому будем обращаться при переходе
        games.setContent(videosIntent);

                                                                 //Добавляем все наши созданные табы в TabHost
        tabHost.addTab(music);                                   //музыка
        tabHost.addTab(films);                                   //фильмы
        tabHost.addTab(games);                                   //игры


Ну и под конец всего этого праздника жизни нам нужно прописать в Simple Manifest.xml несколько строк что бы определить наши классы к которым мы будем обращаться.

Simple Manifest.xml_____________________________________________________________________
<activity android:name=".SomeClass1"></activity>
<activity android:name=".SomeClass2"></activity>
<activity android:name=".SomeClass3"></activity>


Вот мы и собрали наши табы до кучи, теперь запускаем и любуемся этим прекрасным зрелищем :)

А вот и обещана ссылка на забугорный сайт. Там табы с картинками :) Мне они пока не нужны по этому я сделал без них, если кому нужно то могу сделать гайд табов с картинками.

Ни на что не претендую, просто решил написать мини гайд для новичков, каким сам являюсь… Спасибо за внимание!

6 комментариев:

  1. Нужно было указывать куда именно в Manifest.xml добавлять код:

    ОтветитьУдалить
    Ответы
    1. Я думаю понятно что ниже уже установленного актитивити.

      Удалить
    2. А так спасибо за статью, взял что мне нужно! +1

      Удалить
  2. Спасибо за статью, а то намучился с табами, то крашится,то рендерит не то, а тут оказывается все просто.

    ОтветитьУдалить
  3. Код в SimpleActivity.java. А разве нельзя "Музыка", "Фильмы", "Игры" поместить в массив, а потом прогнать его и все оформить?

    ОтветитьУдалить