如何在我的Android應用程序中實現類似iOS的標籤功能

Question

我正在研究包含五個選項卡的android應用程序。每個選項卡需要多個頁面，並且在選項卡上重新選擇，它應該放在每個選項卡的第一個片段上。以下是我的代碼;

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout); 
     tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.icon_discover)); 
     tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.icon_my_cuddll)); 
     tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.helpicon_feedback)); 
     tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.icon_notifications)); 
     tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.icon_user)); 
     tabLayout.setTabGravity(TabLayout.GRAVITY_FILL); 

     final ViewPager viewPager = (ViewPager) findViewById(R.id.pager); 
     final PagerAdaptor adapter = new PagerAdaptor 
       (getSupportFragmentManager(), tabLayout.getTabCount()); 
     viewPager.setAdapter(adapter); 
     viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout)); 
     tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 
      @Override 
      public void onTabSelected(TabLayout.Tab tab) { 
       viewPager.setCurrentItem(tab.getPosition()); 
       tab.getIcon().setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN); 
       if(tab.getPosition()==4) 
       { 

       } 
      } 

      @Override 
      public void onTabUnselected(TabLayout.Tab tab) { 
       tab.getIcon().setColorFilter(Color.parseColor("#87243D"), PorterDuff.Mode.SRC_IN); 

      } 

      @Override 
      public void onTabReselected(TabLayout.Tab tab) { 



      } 
     }); 

我的傳呼機適配器類如下：

public class PagerAdaptor extends FragmentStatePagerAdapter { 
    int mNumOfTabs; 


    public PagerAdaptor(FragmentManager fm, int NumOfTabs) { 
     super(fm); 
     this.mNumOfTabs = NumOfTabs; 

    } 

    @Override 
    public Fragment getItem(int position) { 

     switch (position) { 
      case 0: 
       CuddllFragment tab1 = new CuddllFragment(); 
       return tab1; 
      case 1: 
       MyCuddllFragment tab2 = new MyCuddllFragment(); 
       return tab2; 
      case 2: 
//    CuddllConversationFragment tab3 = new CuddllConversationFragment(); 
       ConversationFragment conversationFragment = new ConversationFragment(); 
       return conversationFragment; 

      case 3: 
//    CuddllNotificationsFragment tab4 = new CuddllNotificationsFragment(); 
       Tab4ContainerFragment notificationPageFragment = new Tab4ContainerFragment(); 
       return notificationPageFragment; 

      case 4: 
       MyProfileFragment tab5 = new MyProfileFragment(); 
       return tab5; 

      default: 
       return null; 
     } 
    } 

    @Override 
    public int getCount() { 
     return mNumOfTabs; 
    } 

Answer 1

Tab.xml

<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" 
    tools:context=".TabFragment" 
    android:orientation="vertical"> 
     <android.support.v4.view.ViewPager 
      android:id="@+id/viewpager" 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:background="@color/white"/> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/sliding_tabs" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:background="@color/orange" /> 
</LinearLayout> 

這裏TabFragment.Java

package com.example.sachin.omcommunication; 

import android.os.Bundle; 
import android.support.annotation.Nullable; 
import android.support.design.widget.TabLayout; 
import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentManager; 
import android.support.v4.app.FragmentPagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 

public class TabFragment extends Fragment { 

    public static TabLayout tabLayout; 
    public static ViewPager viewPager; 
    public static int int_items = 3 ; 
    private int[] tabIcons = { 
      R.drawable.tab_home, 
      R.drawable.arrow, 
      R.drawable.tab_home 
    }; 
    @Nullable 
    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 

     View x = inflater.inflate(R.layout.activity_home_page,null); 
     tabLayout = (TabLayout) x.findViewById(R.id.sliding_tabs); 
     viewPager = (ViewPager) x.findViewById(R.id.viewpager); 

     viewPager.setAdapter(new MyAdapter(getChildFragmentManager())); 


     tabLayout.post(new Runnable() { 
      @Override 
      public void run() { 
       tabLayout.setupWithViewPager(viewPager); 
       //You tab icons 
       int[] icons = { 
         R.drawable.tab_home, 
         R.drawable.arrow, 
         R.drawable.tab_home 
       }; 

       for (int i = 0; i < tabLayout.getTabCount(); i++) { 
        tabLayout.getTabAt(i).setIcon(icons[i]); 
       } 
      } 
     }); 
     tabLayout.setupWithViewPager(viewPager); 


     return x; 

    } 
    class MyAdapter extends FragmentPagerAdapter { 

     public MyAdapter(FragmentManager fm) { 
      super(fm); 
     } 

     /** 
     * Return fragment with respect to Position . 
     */ 

     @Override 
     public android.support.v4.app.Fragment getItem(int position) 
     { 
      switch (position){ 
       case 0 : return new HomePage(); 
       case 1 : return new Attendence(); 
       case 2 : return new Delivery(); 
      } 
      return null; 
     } 

     @Override 
     public int getCount() { 

      return int_items; 

     } 

     /** 
     * This method returns the title of the tab according to the position. 
     */ 

     @Override 
     public CharSequence getPageTitle(int position) { 

      switch (position){ 
       case 0 : 
        return "Primary"; 
       case 1 : 
        return "Social"; 
       case 2 : 
        return "Updates"; 
      } 
      return null; 
     } 
    } 

} 

試試這個..可能適合你。