[:ru]Реализуем годный айфоновский TabBar на Android[:en]IPhone-like TabBar for Android applications[:]
[:ru]Столкнулся недвано с таким упертым консервативным заказчиком, который хотел что бы обе версии софта под iOS и Android не отличались визуально. Конечно одной из главных проблем стала реализация похожего на iPhone TabBar интерфейса в Android.
Говорить о том что TabBarNavigator подходит для этой задачи не приходится, разница в размещении и отображении огромна и наводит скорее на мысль о создании собственного виджета, который мог бы годно имитировать TabBar iPhone.
[:en]Some time ago I worked for conservative client who wants Android and iPhone versions of application look identical. Ofcourse one of main problems became development of iPhone-like TabBar widget in Android.
TabBarNavigator does not fit because of difference in position and visual appearence. So i`ve started to search the way to solve the problem.
[:][:ru]
Будем наследовать виджет от 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 версию приложения.[:en]
We would extend view class and describe it into xml respectively:
[xml title=»mainActivity.xml»]
&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;view xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
class=&quot;com.pixelscommander.tabbarapp$iRelativeLayout&quot;
android:orientation=&quot;vertical&quot;
android:layout_width=&quot;fill_parent&quot;
android:layout_height=&quot;fill_parent&quot;
android:background = &quot;#C5CCD4FF&quot;
&gt;
&lt;view
android:id=&quot;@+id/Tabs&quot;
android:layout_width = &quot;fill_parent&quot;
android:layout_height = &quot;50px&quot;
android:layout_alignParentBottom = &quot;true&quot;
/&gt;
&lt;/view&gt;
[/xml]
There we can find two classes iTab and iRelativeLayout described into application activity.
We would create TabBar with overriding view`s onDraw method for every iTab.
I`ll not describe listing in this article as it`s large enough. You can just look at comments into project that can be loaded here.
Ofcourse there are another ways to mimic iPhone tabbar but this not only looks like native, it allows the use of the same PNG icons with semitransparence so you have not to create new assets for android version of application.[:]