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

imadbelasri Android
AN

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


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


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

أول حاجة غادي نديروها غادي نفتحو Android Studio وغادي نزيدو مشروع جديد سميتو AndroidTabs منبعد غادي نزيدو 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.androidtabs.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.androidtabs.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);
    }
}
                                                        
                                                    

- الملف TabsAdapter.java

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

                                                        
                                                            package com.example.darijacoding.androidtabs.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 TabsAdapter extends FragmentPagerAdapter {
    private List<Fragment> listFragment = new ArrayList<>();
    private List<String> listTitles = new ArrayList<>();
    public TabsAdapter(FragmentManager fm,List<Fragment> listFragment ,List<String> listTitles ) {
        super(fm);
        this.listFragment = listFragment;
        this.listTitles = listTitles;

    }

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

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

    @Override
    public CharSequence getPageTitle(int position) {
        return listTitles.get(position);
    }
}
                                                        
                                                    

- الملف 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.androidtabs.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 ول listTitles منبعد كان créer l'objet من class TabsAdapter وكنعطيه listFragment و listTitles من بعد كنزيد l'objet adapter ل viewPager لي استرجعتو من activity_main منبعد كنزيد ل viewPager ف tabLayout الكود ديال الملف هو :

                                                        
                                                            package com.example.darijacoding.androidtabs;

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.androidtabs.Fragments.FragmentFour;
import com.example.darijacoding.androidtabs.Fragments.FragmentOne;
import com.example.darijacoding.androidtabs.Fragments.FragmentThree;
import com.example.darijacoding.androidtabs.Fragments.FragmentTwo;
import com.example.darijacoding.androidtabs.adapters.TabsAdapter;

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

public class MainActivity extends AppCompatActivity {
    private Toolbar toolbar;
    private List<Fragment> listFragment = new ArrayList<>();
    private List<String> listTitles = new ArrayList<>();
    private ViewPager viewPager;
    private TabLayout tabLayout;
    private TabsAdapter 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("Text Tabs");
        setSupportActionBar(toolbar);
        setTabs();
        adapter = new TabsAdapter(getSupportFragmentManager(),listFragment,listTitles);
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);

    }

    private void setTabs() {
        listFragment.add(new FragmentOne());
        listTitles.add("One");
        listFragment.add(new FragmentTwo());
        listTitles.add("Two");
        listFragment.add(new FragmentThree());
        listTitles.add("Three");
        listFragment.add(new FragmentFour());
        listTitles.add("Four");
    }
}