Андроид създаване на табове (TabLayout)

 

Всяко едно приложение изглежда много добре, когато е изпълнено с табове. Тук ще ви покажа как в действителност да направите това. На снимката е показано как би могло да изглежда приложението. Разбира се Вашите табове могат да бъдат с текст не с икони, но това е въпрос на избор.

Първото нещо което трябва да направите е да поставите иконите (картинките) за отделните табове в директорията res\drawable от Вашия проект.  Размерите могат да бъдат различни , например 32×32 или 48×48, това е също въпрос на преценка.

Второто нещо което трябва да се направи е отново в същата директория да се създадат 4 нови xml файла, които ще указват на табовете да използват иконите. Ако не желаете да използвате икони може да пропуснете тази стъпка. Ето и съдържанието на всеки един от четирите файла.

Файл: icon_android_config.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item 
android:drawable="@drawable/ic_tab_android"
android:state_selected="true" />
<item android:drawable="@drawable/ic_tab_android" />
</selector>

Файл: icon_apple_config.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
<item 
android:drawable="@drawable/ic_tab_apple" android:state_selected="true" /> 
<item  
android:drawable="@drawable/ic_tab_apple" /> 
</selector>
 Файл: icon_blackberry_config.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item 
android:drawable="@drawable/ic_tab_blackberry" 
android:state_selected="true" /> 
<item 
android:drawable="@drawable/ic_tab_blackberry" />
</selector>
Файл: icon_windows_config.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_tab_windows"
          android:state_selected="true" />
    <item android:drawable="@drawable/ic_tab_windows" />
</selector>

Следващата стъпка е да се създадат 4 класа, които ще представляват Activity-тата за всеки един от табовете. Ето как може да изглеждат тези класове:

Файл: AndroidActivity.java

package com.sniper.android; import android.app.Activity; import android.os.Bundle; import android.widget.TextView; public class AndroidActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); TextView textview = new TextView(this); textview.setText("This is Android tab"); setContentView(textview); } }

Файл: AppleActivity.java


package com.sniper.android; import android.app.Activity; import android.os.Bundle; import android.widget.TextView; public class AppleActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); TextView textview = new TextView(this); textview.setText("This is Apple tab"); setContentView(textview); } }

Файл: BlackBerryActivity.java


package com.sniper.android; import android.app.Activity; import android.os.Bundle; import android.widget.TextView; public class BlackBerryActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); TextView textview = new TextView(this); textview.setText("This is BlackBerry tab"); setContentView(textview); } }

Файл: WindowsActivity.java

package com.sniper.android; import android.app.Activity; import android.os.Bundle; import android.widget.TextView; public class WindowsActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); TextView textview = new TextView(this); textview.setText("This is Windows mobile tab"); setContentView(textview); } }

Основното Activity т.е. Activity което се стартира при пускане на програмата, трябва да бъде наследник на класа TabActivity. В него ще се свързват класовете на всички отделни табове. Ето как може да изглежда този файл:

Файл: MainActivity.java

package com.sniper.android; import android.app.TabActivity; import android.content.Intent; import android.content.res.Resources; import android.os.Bundle; import android.widget.TabHost; import android.widget.TabHost.TabSpec; public class MainActivity extends TabActivity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Resources ressources = getResources(); TabHost tabHost = getTabHost(); // Кода за Android tab Intent intentAndroid = new Intent().setClass(this, AndroidActivity.class); TabSpec tabSpecAndroid = tabHost .newTabSpec("Android") .setIndicator("", ressources.getDrawable(R.drawable.icon_android_config)) .setContent(intentAndroid); // Кода за Apple tab Intent intentApple = new Intent().setClass(this, AppleActivity.class); TabSpec tabSpecApple = tabHost .newTabSpec("Apple") .setIndicator("", ressources.getDrawable(R.drawable.icon_apple_config)) .setContent(intentApple); // Кода за Windows tab Intent intentWindows = new Intent().setClass(this, WindowsActivity.class); TabSpec tabSpecWindows = tabHost .newTabSpec("Windows") .setIndicator("", ressources.getDrawable(R.drawable.icon_windows_config)) .setContent(intentWindows); // Кода за Blackberry tab Intent intentBerry = new Intent().setClass(this, BlackBerryActivity.class); TabSpec tabSpecBerry = tabHost .newTabSpec("Berry") .setIndicator("", ressources.getDrawable(R.drawable.icon_blackberry_config)) .setContent(intentBerry); // вмъкваме всички tabs в обекта TabHost tabHost.addTab(tabSpecAndroid); tabHost.addTab(tabSpecApple); tabHost.addTab(tabSpecWindows); tabHost.addTab(tabSpecBerry); //задаваме таб по подразбиране (броенето е от 0) tabHost.setCurrentTab(2); } }

Предпоследната стъпка от нашата програма е да се създаде Layout-та за MainActivity-то. Ето как би могъл да изглежда той:

Файл: res/layout/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”
android:padding=”5dp”>

<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”
android:padding=”5dp” />

</LinearLayout>

</TabHost>

Последното действие е да се направят корекциите в Manifest файла на приложението, където трябва да се декларират новите Activity-та и да се зададе началния изглед. Ето как трябва да изглежда Вашия файл:

Файл: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.sniper.android" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="10" /> <application android:icon="@drawable/ic_launcher" android:label="@string/app_name" > <activity android:name=".AndroidActivity" /> <activity android:name=".WindowsActivity" /> <activity android:name=".AppleActivity" /> <activity android:name=".BlackBerryActivity" /> <activity android:label="@string/app_name" android:name=".MainActivity" android:theme="@android:style/Theme.NoTitleBar" > <intent-filter > <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>

 

Като допълнение към този пост искам да Ви покажа, как може да споделяте общи променливи (данни) между отделните табове, без да има нужда всеки път явно да създавате Bundle и Intent обекти.

Нека да споделим две променливи между всички Activity съставящи табовете. Едната променлива да бъде от тип int, а другата от тип String. За целта първото нещо което трябва да направим е да дефинираме в класа MainActivity нашите две променливи като public final static. Сега трябва малко да променим началото на класа MainActivity като той трябва да изглежда така:

public class MainActivity extends TabActivity {
public final static int age;
public final static String name;
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
MainActivity.age = 15;
MainActivity.name = "Ivan Stankov";
.......
остава си стария код
.......
}
}

Сега ако искаме да използваме стойностите на тези две променливи някъде в кода, примерно в AndroidActivity класа, може просто да напишем MainActivity.name и MainActivity.age. По този начин могат да се предават всякакви обекти между отделните табове изграждащи приложението ни.

Другата особеност е, че във всяко едно от четирите Activity изграждащи MainActivity могат да се зададат нови стойности за age и name (примерно MainActivity.age = 100😉  ) след което новата стойност може да бъде използвана отново от всички.

Поста е реализиран със съдействието на www.mkyong.com

Надявам се всичко е ясно и добре описано. Благодаря за вниманието, коментирайте моля!!!

2 thoughts on “Андроид създаване на табове (TabLayout)

  1. Браво за поста, благодаря беши ми много полезен. Ще се се радвам да има повече такива постове в българското пространство. Поздрави!!!!

Leave a Reply

Your email address will not be published. Required fields are marked *