كيفاش تصاوب أندرويد Tabs الجزء الثاني


فهاد الدرس من كيفاش تصاوب أندرويد Tabs الجزء الثاني غادي نشوفو كيفاش نقادو Android Icon Tabs يعني بلاصت text غادي يكون عندنا icons الدرس بسيط للمبتدئين.

نظرة سريعة بالفيديو


- ملفات الواجهة


أول حاجة غادي نديروها غادي نفتحو Android Studio وغادي نزيدو مشروع جديد سميتو TabsIcon منبعد غادي نزيدو 4 ملفات فالمجلد res/drawable وغادي تسميهم fragment_one.xml , fragment_two.xml, fragment_three.xml, fragment_four.xmlولي غادي يكونو الصفحات لي غادي تكون فيها TextView و LinearLayout ولي غادي تكون هي Layouts ديال الملفات FragmentOne.java,FragmentTwo.java,FragmentThree.java,FragmentFour.java لي غادي نزيدو من بعد الكود ديال الملف fragment_one.xml ولي هو نفس الكود لي كاين فالملفات 3 الأخرى فقط كتغير text ديال TextView ولbackground ديال LinearLayout هو :

                                    
                                        <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:background="@android:color/holo_blue_bright"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:id="@+id/text"
            android:text="Fragment 1"
            android:textStyle="bold"
            android:textAlignment="center"
            android:textColor="@color/colorPrimary"
            android:textSize="25sp"
            android:layout_gravity="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
</RelativeLayout>
                                    
                                

- الملف FragmentOne.java


فالمجلد java غادي نزيد package جديد سميه fragments فيه زيد 4 ملفات عبارة عن class سميهم FragmentOne.java,FragmentTwo.java,FragmentThree.java,FragmentFour.java ولي غادي يكون الكود ديال الملف FragmentOne.java هو نفسو ديال الأخرين فقط كتبدل لlayout هنا ف FragmentOne.java عندنا fragment_one.xml فلخرين كتبدل مثلا ف FragmentTwo.java غادي تدير fragment_two.xml ونفس الشيء للبقية الكودديال FragmentOne.java هو :

                                    
                                        package com.example.darijacoding.tabsicon.Fragments;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.darijacoding.tabsicon.R;

/**
 * Created by Imad on 09/03/2017.
 */
public class FragmentOne extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_one,container,false);
    }
}

                                    
                                

- الملف TabsIconAdapter.java


فالمجلد java غادي نزيد package جديد سميه adapters فيه زيد ملف عبارة عن class سميه TabsIconAdapter.java ولي غادي يكون فيه الكود لي غادي يمكن من عرض كل Fragment بالicone ديالها فعندنا listFragment لي غادي يكون فيها fragments ثم getItem لي كترجع لFragment لي مafficher حاليا فلecran ثم getCount لي كترجع عدد لfragments ليعندنا ف listFragment الكود ديال الملف هو :

                                      
                                        package com.example.darijacoding.tabsicon.adapters;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by Imad on 09/03/2017.
 */
public class TabsIconAdapter extends FragmentPagerAdapter {
    private List<Fragment> listFragment = new ArrayList<>();
    public TabsIconAdapter(FragmentManager fm, List<Fragment> listFragment) {
        super(fm);
        this.listFragment = listFragment;

    }

    @Override
    public Fragment getItem(int position) {
        return listFragment.get(position);
    }

    @Override
    public int getCount() {
        return listFragment.size();
    }
}

                                      
                                    

- الملف activity_main.xml


الملف ديال الواجهة الرئيسية ديال التطبيق ولي غادي يكون فيها Toolbar ولي هي لي كايكون فيها العنوان ديال التطبيق ثم TabLayout لي هي لي غادي تمكنا باش يكون عندنا Tabs ثم ViewPager لي غادي يمكنا باش ينتحركوا ما بين الصفحات من بعد ما نزيده ف TabLayout الكود ديال الملف هو :

                                        
                                            <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.example.darijacoding.tabsicon.MainActivity">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:background="@color/colorPrimary"
        android:layout_alignParentTop="true"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">
    </android.support.v7.widget.Toolbar>
    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        app:tabGravity="fill"
        app:tabMode="fixed"
        android:background="@color/colorPrimary"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v4.view.ViewPager>
</LinearLayout>
                                        
                                    

- الملف MainActivity.java


هادا الملف الرئيسي لي غادي يكون فيه الكود لي كيمكن من إضافة Toolbar بالعنوان ديالها ثم من بعد كاين fonction setTabs لي كتزيد كل Fragment للlistFragment ول fonction setTabsIcons لي كتزيد لكل tab ل icon ديالها منبعد كان créer l'objet من class TabsIconAdapter وكنعطيه listFragment من بعد كنزيد l'objet adapter ل viewPager لي استرجعتو من activity_main منبعد كنزيد ل viewPager ف tabLayout الكود ديال الملف هو :

                                        
                                            package com.example.darijacoding.tabsicon;

import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;

import com.example.darijacoding.tabsicon.Fragments.FragmentFour;
import com.example.darijacoding.tabsicon.Fragments.FragmentOne;
import com.example.darijacoding.tabsicon.Fragments.FragmentThree;
import com.example.darijacoding.tabsicon.Fragments.FragmentTwo;
import com.example.darijacoding.tabsicon.adapters.TabsIconAdapter;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private Toolbar toolbar;
    private List<Fragment> listFragment = new ArrayList<>();
    private ViewPager viewPager;
    private TabLayout tabLayout;
    private TabsIconAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        toolbar.setTitle("Icon Tabs");
        setSupportActionBar(toolbar);
        setTabs();
        adapter = new TabsIconAdapter(getSupportFragmentManager(),listFragment);
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);
        setTabsIcons();

    }

    private void setTabsIcons() {
        tabLayout.getTabAt(0).setIcon(R.drawable.facebook);
        tabLayout.getTabAt(1).setIcon(R.drawable.youtube);
        tabLayout.getTabAt(2).setIcon(R.drawable.googleplus);
        tabLayout.getTabAt(3).setIcon(R.drawable.twitter);
    }

    private void setTabs() {
        listFragment.add(new FragmentOne());
        listFragment.add(new FragmentTwo());
        listFragment.add(new FragmentThree());
        listFragment.add(new FragmentFour());
    }
}

                                        
                                    

كلمات مفاتيح :