Jak zaimplementować niestandardowe zakładki w systemie Android, takie jak Instagram

Question

Próbuję zaimplementować niestandardowe zakładki UI na dole, tak jak na Instagramie (zrzut ekranu jest załączony). Chcę, aby środkowa karta otwierała inną aktywność zamiast otwierania fragmentu wewnątrz tego samego widoku.

Czuję, że jest to realizowane za pomocą nakładki imagebutton na hoście tabulacji. Ale nadal nie mogę prawidłowo umieścić tego obrazu, aby interfejs wyglądał prawidłowo. Poniżej jest kod na zakładkach w dolnej

<?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:orientation="vertical" > 
<FrameLayout 
    android:id="@+id/realtabcontent" 
    android:layout_width="match_parent" 
    android:layout_height="0dp" 
    android:layout_weight="1" /> 
<android.support.v4.app.FragmentTabHost 
    android:id="@android:id/tabhost" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" > 
    <FrameLayout 
     android:id="@android:id/tabcontent" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:layout_weight="0" /> 
</android.support.v4.app.FragmentTabHost> 
</LinearLayout> 

życzliwej pomocy.

Dzięki,

Answer 1

Zastosowanie TabLayout to zrobić.

xml:

<android.support.design.widget.TabLayout 
      android:id="@+id/tabLayout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_alignParentBottom="true" 
      android:minHeight="100dp" 
      app:tabGravity="fill" 
      app:tabMode="fixed" 
      app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> 

Kod:

tabLayout.addTab(tabLayout.newTab().setText("Tab 1")); 
tabLayout.addTab(tabLayout.newTab().setText("Tab 2")); 
tabLayout.addTab(tabLayout.newTab()); 

View custom = LayoutInflater.from(this).inflate(R.layout.custom_tab, null); 
((TextView) custom.findViewById(R.id.tabTitle)).setText("Tab 3"); 
(custom.findViewById(R.id.tabIcon)).setBackgroundResource(R.drawable.ic_place_white_18dp); 
TabLayout.Tab customTab = tabLayout.getTabAt(2); 
customTab.setCustomView(custom); 


tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 
     @Override 
     public void onTabSelected(TabLayout.Tab tab) { 

      switch (tabLayout.getSelectedTabPosition()) { 
       case 0: 
        //do what you want when tab 0 is selected 
        break; 
       case 1: 
        //do what you want when tab 1 is selected 
        break; 
       case 2: 
        //do what you want when tab 2 is selected 
        break; 
       default: 
        break; 
      } 

     } 

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

     } 

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

     } 
    }); 

EDIT:

Trzecia zakładka wykorzystuje niestandardowy układ.