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

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

В предыдущем топике про табы я показал как создавать их без картинок, честно сказать выглядит оно не так красиво как когда добавим картинки, и по этому я предлагаю еще один пост по теме табов но уже здесь я раскажу как вставить картинки в ваш проект. Вот так будет выглядеть наши табы после всех проделанных операций:




И так начнем. Открываем наш старый проект с табами, создаем папку drawable и три *.xml файла в ней, названия произвольные в моем случае это icon_read.xml, icon_share.xml и icon_other.xml. Теперь нам нужно нарисовать иконки, для примера я выложу свои иконки, можете использовать их в своем проекте, а потом перерисовать как уже захочется.





Вам иконки нужно уменьшить до нужных рахмеров, вот стандарты. В папку drawable_hdpi — размер 48х48px, в drawable_mdpi — размер 32х32px и в drawable_ldpi — размер 24х24px.

В каждой строке по две иконки, просто на белом фоне не видно самих белых иконок. И так, иконки у нас есть, теперь нам нужно их встроить в нашу программу. Для этого в созданные *.xml файлы пишем вот такой код, я напишу только для одного файла, код в принципе не отличается друг от друга, просто разные названия картинок.

icon_read.xml________________________________________________________________
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use grey -->
    <item android:drawable="@drawable/read_gray"
          android:state_selected="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/read_white" />
</selector>


В остальные файлы просто вставьте этот же код, но поменяйте название картинок, поле выделено жирным
android:drawable="@drawable/read_gray"

Теперь что бы эти картинки отображались у нас в табах — допишем в SimpleActivity.java кое какой код. Раньше строка обращения к классу выглядела так:



TabSpec videospec = tabHost.newTabSpec("tab3");
videospec.setIndicator("Другое");
Intent videosIntent = new Intent(this, SomeClass3.class);
videospec.setContent(videosIntent);


для отображения картинки выглядит:

TabSpec videospec = tabHost.newTabSpec("tab3");
videospec.setIndicator("Другое", getResources().getDrawable(R.drawable.icon_other)); //вот он, вот он!!!
Intent videosIntent = new Intent(this, SomeClass3.class);
videospec.setContent(videosIntent);


Если кто не заметил то добавился во вторую строку код
, getResources().getDrawable(R.drawable.icon_other
который вызывает файл с иконками.

Вот и все, теперь компилируем проект и любуемся красотой. 

2 комментария:

  1. Для чего нужны "три *.xml файла в ней" если мы "R.drawable.icon_other" указываем "адрес" картинки а не обращаемся к 3-мя xml?
    videospec.setIndicator("Другое", getResources().getDrawable(R.drawable.icon_other));

    ОтветитьУдалить
    Ответы
    1. Что бы при переклацивании между вкладками менялась картинка.

      //та которая будет после клика по вкладке
      android:drawable="@drawable/read_gray"

      //Текущая картинка
      <item android:drawable="@drawable/read_white"

      Удалить