— Pixels Commander

[ In English, На русском ]

Реализуем годный айфоновский TabBar на Android

Столкнулся недвано с таким упертым консервативным заказчиком, который хотел что бы обе версии софта под iOS и Android не отличались визуально. Конечно одной из главных проблем стала реализация похожего на iPhone TabBar интерфейса в Android.

Говорить о том что TabBarNavigator подходит для этой задачи не приходится, разница в размещении и отображении огромна и наводит скорее на мысль о создании собственного виджета, который мог бы годно имитировать TabBar iPhone.

Будем наследовать виджет от view и соответственно опишем его в разметке:

[xml title=”mainActivity.xml”]
<?xml version="1.0" encoding="utf-8"?>
<view xmlns:android="http://schemas.android.com/apk/res/android"
class="com.pixelscommander.tabbarapp$iRelativeLayout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background = "#C5CCD4FF"
>
<view
class="com.pixelscommander.tabbarapp$iTab"
android:id="@+id/Tabs"
android:layout_width = "fill_parent"
android:layout_height = "50px"
android:layout_alignParentBottom = "true"
/>
</view>

[/xml]

Видим тут два класса iTab и iRelativeLayout описанных в активити приложения. С помощью перегрузки метода onDraw и разметки областей под каждый iTab мы реализуем виджет с аналогичным айфоновскому видом.

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

Конечно есть и другие способы сделать нечто похожее на таббар айфона, но этот позволяет получить визуально аналогичный результат и что не маловажно работает с теми же полупрозрачными PNG, что и iPhone TabBar, вам не прийдется создавать новую графику под Android версию приложения.