کار با Swipe tab Layouدر برنامه نویسی اندروید

به نام خدا در این آموزش می خواهیم با  Tab Swipe Layout در برنامه نویسی اندروید اشنا بشم.ویجت ViewPager یکی از ویژگی خوبیاست که از اندروید نسخه 4 به صورت کامل به پکیج توسعه برنامه های اندروید اضافه شد و باعث افزایش سرعت و ایجاد یک تعامل مناسب بین کاربر و برنامه شد.

برای شروع کار یک پروژه جدید ایجاد می کنیم و نام آن را SwipeView قرار میدهیم.در داخل لایه اصلی برنامه activity_main.xml از یک ویجت ViewPager  برای نمایش تب ها به صورت swipe استفاده کرده ایم.(کد های لایه activity_main.xml).

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

در ادامه برای اینکه بتونیم برای برنامه Tab تعریف کنیم باید از فراگمنت ها استفاده کنیم.فراگمنت ها در واقع لایه های داینامیکی هستند که میتوان در بخش های متخلف برنامه برای سوییچ بین امکانات مختلف برنامه ازشون استفاده کرد.برای اینکار ابتدا سه لایه جدید در پوشه Layout ایجاد می کنیم به نام های:android_frag,ios_frag,windows_frag.این لایه های جدید تب های جدید برنامه است که قراره با استفاده از swipe بینشون حرکت کنیم.

کدهای android_frag

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >
 
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="50sp"/>
 
</LinearLayout>

کدهای ios_frag

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >
 
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="50sp"/>
 
</LinearLayout>

کدهای windows_frag

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >
 
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="50sp"/>
 
</LinearLayout>

در مرحله بعدی باید برای لایه های که ایجاد کردیم کلاس های جاوا تعریف کنیم تا دربرنامه نمایش داده بشه.(برای ایجاد کلاس بر روی پکیج برنامه کلیک راست کرده گزینه Class رو انتخاب کنید).

کدهای جاوای Android برای لایه android_frag

package com.appinapps.swipeview;
//Appinapps.com

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
 
public class Android extends Fragment {
    @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
 
            View android = inflater.inflate(R.layout.android_frag, container, false);
            ((TextView)android.findViewById(R.id.textView)).setText("Android");
            return android;
}}

کدهای جاوای Ios برای لایه ios_frag

package com.appinapps.swipeview;
//Appinapps.com

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
 
public class Ios extends Fragment {
     @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
 
            View ios = inflater.inflate(R.layout.ios_frag, container, false);
            ((TextView)ios.findViewById(R.id.textView)).setText("iOS");
            return ios;
}}

کدهای جاوای Windows برای لایه windows_frag

package com.appinapps.swipeview;
//Appinapps.com

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
 
public class Windows extends Fragment {
     @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
 
            View windows = inflater.inflate(R.layout.windows_frag, container, false);
            ((TextView)windows.findViewById(R.id.textView)).setText("Windows");
            return windows;
}}

سپس باید برای این لایه ها یک آداپتر بسازیم تا به صورت یک جا از آن ها در برنامه استفاده بشه.برای اینکار یک کلاس جدید به نام TabPagerAdapter و کدهای زیر رو بهش اضافه کنید.

package com.appinapps.swipeview;
//Appinapps.com
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
 
public class TabPagerAdapter extends FragmentStatePagerAdapter {
    public TabPagerAdapter(FragmentManager fm) {
        super(fm);
        // TODO Auto-generated constructor stub
    }
 
    @Override
    public Fragment getItem(int i) {
        switch (i) {
        case 0:
            //فراگمنت برای تب اندروید
            return new Android();
        case 1:
           //فراگمنت برای تب ای او اس
            return new Ios();
        case 2:
            //فراگمنت برای تب ویندوز
            return new Windows();
        }
        return null;
 
    }
 
    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return 3; //No of Tabs
    }
 
    }

و در آخرین قدم میریم سراغ کلاس MainActivity و نوشتن کدهای اصلی برنامه.در داخل این کلاس ابتدا با استفاده از TabAdapter به اشکن بار برنامه یک نمایش تب اضافه می کنم.با دستور actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); نمایش تب ها رو در اکشن بار فعال می کنیم.سپس با دستور ActionBar.TabListener قابلیت کلیک به اکشن بار میدیم تا هر زمانی که بر روی تب ها کلیک شد فراگمنت  مدنظر رو نمایش بده.

//Appinapps.com
//اموزش برنامه نویسی
import android.os.Bundle;
import android.app.ActionBar;
import android.app.FragmentTransaction;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import android.widget.Toast;
 
public class MainActivity extends FragmentActivity {
 
	//معرفی ویجت ها
	ViewPager Tab;
    TabPagerAdapter TabAdapter;
    ActionBar actionBar;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        //ایحاد یک TabAdapter برای افزودن تب به برنامه
        TabAdapter = new TabPagerAdapter(getSupportFragmentManager());
 
        Tab = (ViewPager)findViewById(R.id.pager);
        Tab.setOnPageChangeListener(
                new ViewPager.SimpleOnPageChangeListener() {
                    @Override
                    public void onPageSelected(int position) {
 
                        actionBar = getActionBar();
                        actionBar.setSelectedNavigationItem(position);                    }
                });
        Tab.setAdapter(TabAdapter);
 
        actionBar = getActionBar();
        //فعال سازی تب در اکشن بار
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        ActionBar.TabListener tabListener = new ActionBar.TabListener(){
 
            @Override
            public void onTabReselected(android.app.ActionBar.Tab tab,
                    FragmentTransaction ft) {
                // TODO Auto-generated method stub
 
            }
 
            @Override
             public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
 
                Tab.setCurrentItem(tab.getPosition());
                
            }
 
            @Override
            public void onTabUnselected(android.app.ActionBar.Tab tab,
                    FragmentTransaction ft) {
                // TODO Auto-generated method stub
 
            }};
            //اضافه کردن تب های جدید
            actionBar.addTab(actionBar.newTab().setText("Android").setTabListener(tabListener));
            actionBar.addTab(actionBar.newTab().setText("iOS").setTabListener(tabListener));
            actionBar.addTab(actionBar.newTab().setText("Windows").setTabListener(tabListener));
 
    }
 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    
}

سورس کامل این آموزش را می توانید از فایل ضمیمه دانلود کنید.