Android: Wie erstellt man TabLayout mit Zeichenfächern für TextView?

Question

• Ich versuche, die neuen TabLayout in der Android-Design-Bibliothek
• ich auf einer Registerkarte von TabLayout einen TextView mit ziehbar als Hintergrund schaffen wollte zu verwenden.

• Zum Beispiel

  Ich suche Los Angeles in Suchfeld Ich sollte Anzahl der Bücher erhalten, Film, Platz in der TextView.

Beispiel Bild:

Answer 1

Hallo Nikhil müssen Sie benutzerdefinierte Ansicht für Registerkarte verwenden, um den Zählwert auf Suchergebnisänderung mit Event-Bus zu setzen. über evet Bus Um zu wissen, reffer EventBus: Events for Android

search_tab_layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:gravity="center" 
    android:background="@color/app_blue"> 

    <!-- Menu Item Image --> 
    <TextView 
     android:id="@+id/tabTitle" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_toLeftOf="@+id/count" 
     android:text="Book" 
     android:textSize="12sp" 
     android:paddingTop="16dp" 
     android:paddingBottom="16dp" 
     android:paddingRight="8dp" 
     android:layout_centerVertical="true" 
     android:textColor="@color/white" 
     app:customTypeface="mayriad_pro_regular"/> 

    <TextView 
     android:id="@+id/count" 
     android:layout_width="18dp" 
     android:layout_height="18dp" 
     android:text="0" 
     android:gravity="center" 
     android:textSize="10sp" 
     android:background="@drawable/cart_circle" 
     android:textColor="@color/app_blue" 
     app:customTypeface="mayriad_pro_semi_bold"/> 

</LinearLayout> 

Declare Registerkarte veiws

tab1 = LayoutInflater.from(getActivity().getApplicationContext()).inflate(R.layout.search_tab_layout, null); 

tab2 = LayoutInflater.from(getActivity().getApplicationContext()).inflate(R.layout.search_tab_layout, null); 

tab3 = LayoutInflater.from(getActivity().getApplicationContext()).inflate(R.layout.search_tab_layout, null); 

In onCreateOptionMenu EventBus onCreate verwenden Ereignis auf Suche abzufeuern

@Override 
    public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) { 
     inflater.inflate(R.menu.menu_search, menu); 
     SearchManager searchManager = (SearchManager) getActivity().getSystemService(Context.SEARCH_SERVICE); 
     SearchView searchView = (SearchView) menu.findItem(R.id.menu_search).getActionView(); 
     if (null != searchView) { 
      searchView.setSearchableInfo(searchManager 
        .getSearchableInfo(getActivity().getComponentName())); 
      searchView.setIconifiedByDefault(false); 
     } 

     SearchView.OnQueryTextListener queryTextListener = new SearchView.OnQueryTextListener() { 
      public boolean onQueryTextChange(String newText) { 
       // this is your adapter that will be filtered 
       EventBus.getDefault().post(new SearchViewFilterEvent(newText)); 
       return true; 
      } 

      public boolean onQueryTextSubmit(String query) { 
       //Here u can get the value "query" which is entered in the search box. 
       return false; 
      } 
     }; 
     searchView.setOnQueryTextListener(queryTextListener); 
     MenuItemCompat.setOnActionExpandListener(menu.getItem(0), new MenuItemCompat.OnActionExpandListener() { 
      @Override 
      public boolean onMenuItemActionExpand(MenuItem menuItem) { 
       adapter.setIsHideWashAndFold(true); 
       tabLayout.removeTabAt(0); 
       adapter.notifyDataSetChanged(); 
       llSpinner.setVisibility(View.GONE); 
       tabLayout.getTabAt(0).setCustomView(tab); 
       tabLayout.getTabAt(1).setCustomView(tab2); 
       tabLayout.getTabAt(2).setCustomView(tab3); 
       return true; 
      } 

      @Override 
      public boolean onMenuItemActionCollapse(MenuItem menuItem) { 
       adapter.setIsHideWashAndFold(false);    adapter.notifyDataSetChanged(); 
       llSpinner.setVisibility(View.VISIBLE); 
       initView(); 
       return true; 
      } 
     }); 

     new Handler().post(new Runnable() { 
      @Override 
      public void run() { 
       final View v = getActivity().findViewById(R.id.menu_search); 

       if (v != null) { 
        v.setOnLongClickListener(new View.OnLongClickListener() { 
         @Override 
         public boolean onLongClick(View v) { 
          return false; 
         } 
        }); 
       } 
      } 
     }); 
    } 

Answer 2

Siehe Link Icons + Text zu TabLayout https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout#add-icons-text-to-tablayout

Und das

https://gist.github.com/kevinpelgrims/8685c8e1a68e3cd9cff9

@Override 
public CharSequence getPageTitle(int position) { 
    // Generate title based on item position 
    Drawable image = context.getResources().getDrawable(imageResId[position]); 
    image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight()); 
    // Replace blank spaces with image icon 
    SpannableString sb = new SpannableString(" " + tabTitles[position]); 
    ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM); 
    sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 
    return sb; 
} 

hinzufügen 10

Answer 3

Ja, Sie können wie folgt vorgehen, Sie müssen in jedem Register eine benutzerdefinierte Ansicht einstellen. Zuerst richten Sie Ihren Viewpager mit Adapter nach tabLayout.setupWithViewPager (viewPager); nach diesem Aufruf dieser Methode und fügen Sie Ihre benutzerdefinierten Layout, was Sie

private void setCustomIndicator() { 
     for (int i = 0; i < tabLayout.getTabCount(); i++) { 
      View tab = LayoutInflater.from(this).inflate(R.layout.layout_custom_tab, null); 
      TextView textName = (TextView) tab.findViewById(R.id.txtName); 
      TextView textViewNo = (TextView) tab.findViewById(R.id.txtNo); 
      if(i != 0){ 
       textName.setTextColor(ContextCompat.getColor(this, R.color.colorBlueLight)); 
       textViewNo.setBackgroundResource(R.drawable.round_blue_custom_tab); 
      } 

      textName.setText("One"+i); 
      textViewNo.setText(""+i); 
      tabLayout.getTabAt(i).setCustomView(tab); 
     } 
    } 

und nach der Änderung Hintergrund in setOnTabSelectedListener

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 
      @Override 
      public void onTabSelected(TabLayout.Tab tab) { 
       if (tab.getCustomView() != null) { 
        changeCustomIndicator(tab.getPosition()); 
       } 
      } 

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

      @Override 
      public void onTabReselected(TabLayout.Tab tab) { 
      } 
     }); 
private void changeCustomIndicator(int pos) { 
    for (int i = 0; i < tabLayout.getTabCount(); i++) { 
     View tab = tabLayout.getTabAt(i).getCustomView(); 
     TextView textName = (TextView) tab.findViewById(R.id.txtName); 
     TextView textViewNo = (TextView) tab.findViewById(R.id.txtNo); 
     if(pos == i){ 
      textName.setTextColor(ContextCompat.getColor(this, R.color.white)); 
      textViewNo.setBackgroundResource(R.drawable.round_red_custom_tab); 
     }else { 
      textViewNo.setBackgroundResource(R.drawable.round_blue_custom_tab); 
      textName.setTextColor(ContextCompat.getColor(this, R.color.colorBlueLight)); 
     } 
    } 
    viewPager.setCurrentItem(pos); 
} 

Answer 4

Nutzung öffentlicher TabLayout.Tab setCustomView (int layoutResId) erstellen möchten ein Layout mit TextView und Button verwenden dies in der benutzerdefinierten Ansicht.

akzeptiert Nutzung öffentlicher TabLayout.Tab setCustomView (int layoutResId)

ein Layout mit Textview erstellen und Button dies in Benutzerdefinierte Ansicht verwenden.

Zum Vergleich:

setCustomView

Example

hoffen, dass dies für Sie hilfreich.