کار با 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;
    }
    
}

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


فایلهای ضمیمه
توجه! برای مشاهده فایلهای ضمیمه با ید وارد سایت شوید

نظرات شما نظر جدید
سایر مقالات این دسته
کار با حالت ActionMode در اندرویدکار با انیمیشن ها قسمت اول ساخت Spalsh Screenساخت انیمیشن به صورت کامل قسمت دومحرکت اسلاید بین اکتیوتی ها با انیمیشن ها +سورسمعرفی انواع پایگاه داده (DataBase)کار با دیتابیس در اندروید قسمت اولساخت toggleButton زیبا و سفارشیکار با دیتابیس در اندروید قسمت دومساخت برنامه رادیوی انلاین+سورسکار با حافظه داخلی در اندرویدساخت برنامه تشخیص صدای فارسی و انگلیسی در اندروید+استفاده از سورس های اندروید استودیو در محیط ایکلیپکار با Switch Button در اندرویدتغییر خودکار تصویر پس زمینه لایه ساخت لیست ویو با قابلیت جستوجوی الفباییدانلود تصویر از ادرس اینترنتی+سورسکار با دیتابیس در اندروید:جستجو در sqlite قسمت 1دانلود نسخه جدید و بروز شده محیط توسعه اندرویدکار با دیتابیس در اندروید:جستجو در sqlite قسمت 2ساخت کتاب برای اندروید بدون برنامه نویسیبهترین زبان برنامه نویسی که میتوانید در 2015 بياموكار با Power Manager در اندرويدساخت اسکرول بار سفارشی+سورسساخت گرید ویو سفارشیساخت پروگرس بار با شمارنده +سورسترسیم یک خط با Canvas+سورستغییر نام برنامه به صورت کاملکار با حالت دوبل بک(Double back)ساخت برنامه دو زبانه(Multi language )ساخت لایه و عناصر داینامیک در اندرویدساخت برنامه چاپ متن بر روی تصویر+سورسکار با ShowCase View در اندروید+سورسافزودن لیست به الرت دیالوگ+سورسساخت مرورگر وب سادهکار با Drag And Drop در اندروید+سورسکار با DatePickerDialog در اندروید+سورسکار با فرگمنت ها(ساخت Sliding Navigation Drawer)کار با ViewFlipper (ساخت اسلاید شو تصاویر)ساخت توست سفارشی قسمت دوم زمانبندی Toastکار با BroadcastReceiver ها،ساخت برنامه دریافتsmsطراحی و ساخت صفحه Login Screen + سورسبارگذاری ویدیو از گالری در اندرویدساخت پنجره پاپ آپ + سورسبارش برف بروی تصویر + سورسکار با فیلتر hue رنگی کردن تصویر انتخاب و پخش فایل صوتی از حافظه گوشی+سورساضافه کردن چک باکس به لیست ویوکار با ShelfView یا نمایش کتابخانه ای + سورسکار با TabHost،اضافه کردن تب به برنامه های اندرویدمعکوس کردن رنگ ها(Invert Image) + سورسآموزش کامل ساخت اکشن بار سفارشی+سورسساخت برنامه های واکنش گرا(ریسپانسیو) در اندرویدقسمت دوم صفحات 7 اینچ به بالااضافه کردن انیمیشن به دکمه+سورسکار با View Switcher در اندروید + سورسکار با فیلتر Blur Mask + سورسدانلود پک کامل آیکون های طراحی اندرویدکار با sharedPreferences در اندروید+سورسآموزش کار با proguard،محافظت از برنامه اندرویدپخش فایل صوتی (MP3) از ادرس اینترنتی+سورسپخش ویدیو از آدرس اینترنتی(URL) در اندروید+سورسگوشی های و تبلت های مطرح تا چینی به ساده ترین روشپاسخ به رویداد های WebVeiw دسترسی به وب ویو با استفاده از جاوااسکریپتکار با WIFI اکسس+سورسساخت تقویم هجری برای اندروید+سورسapp rateدانلود و نمایش تصویر در ListView+سورسدانلود و نمایش فایل متنی+سورسکار با کلاس های پایه اکتیویتیآینه کردن تصویر+سورسافزودن آیتم منو سفارشی بهActionBar+سورسارسال اطلاعات از دیتابیس به GridView + سورسکار با کلید های فیزیکی در اندروید+سورسدسترسی به Api هایREST قسمت اولتغییر فونت لیست ویواستفاده از تحلیل گرGoogle Analytics در برنامه اندرویداضافه کردن انیمیشن به دیالوگ ها در اندروید+سورساستفاده ازگیت‌هاب در اندروید استودیوکار با Swipe tab Layouدر برنامه نویسی اندروید دیباگ کردن برنامه اندروید با wifiبهینه سازی مصرف RAM در برنامه نویسی اندرویدافزودن شمارنده صفحه به ViewPager + سورس آموزش نرم افزار SQLite Browserکار با JSON در اندرویدآموزش ساده نصب شبیه ساز اندروید Genymotion