Tablayout nur mit Symbolen

Tutorial zeigen in dem folgenden link sollte abdecken, was Sie wollen. https://github.com/codepath/android_guides/wiki/Google-Play-Style-Tabs-using-TabLayout#add-icons-to-tablayout

Kopierte ich den entsprechenden Abschnitt unten.

Fügen Sie Symbole, um TabLayout

Derzeit, die TabLayout Klasse nicht bieten eine saubere Abstraktion-Modell, der es ermöglicht, icons in der tab. Es gibt viele workarounds gepostet, einer davon ist die Rückgabe einer SpannableString, mit Ihrem Symbol in einer ImageSpan, von Ihrem PagerAdapter ist getPageTitle(position) - Methode, wie dargestellt in der code-snippet unter:

private int[] imageResId = {
        R.drawable.ic_one,
        R.drawable.ic_two,
        R.drawable.ic_three
};

//...

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

Standardmäßig die Registerkarte erstellt durch TabLayout legt die textAllCaps Eigenschaft, um wahr zu sein, die verhindert, dass ImageSpans gerendert wird. Sie können dieses Verhalten überschreiben, indem Sie ändern die tabTextAppearance Eigenschaft.

  <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabTextAppearance">@style/MyCustomTextAppearance</item>
  </style>

  <style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="textAllCaps">false</item>
  </style>

InformationsquelleAutor der Antwort user4989692

versuchen, diese

    public class GlobalActivity extends AppCompatActivity {
    Toolbar toolbar;
    ViewPager viewPager;
    TabLayout tabLayout;
    ViewPagerAdapter adapter;
    private int[] tabIcons = {
            R.drawable.home_ic,
            R.drawable.biz_ic,
            R.drawable.network_ic,
            R.drawable.offers_ic,
            R.drawable.message_ic_b
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_global_hub);
        tab();
    }
    public void tab(){
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);
        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        tabLayout.setupWithViewPager(viewPager);
        setupTabIcons();

    }
    private void setupTabIcons() {
        tabLayout.getTabAt(0).setIcon(tabIcons[0]);
        tabLayout.getTabAt(1).setIcon(tabIcons[1]);
        tabLayout.getTabAt(2).setIcon(tabIcons[2]);
        tabLayout.getTabAt(3).setIcon(tabIcons[3]);
        tabLayout.getTabAt(4).setIcon(tabIcons[4]);

    }
    public void setupViewPager(ViewPager viewPager){
        adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFrag(new GlHubFragment(),"HOME");
        adapter.addFrag(new BizForumFragment(), "BIZ FORUM");
        adapter.addFrag(new NetworkFragment(), "NETWORK");
        adapter.addFrag(new MessagesFragment(), "MESSAGEs");
        adapter.addFrag(new OfferFragmentActivity(), "OFFER");
        viewPager.setAdapter(adapter);
    }

    public class ViewPagerAdapter extends FragmentPagerAdapter{
        private final List<Fragment> mfragmentlist =new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();
        public ViewPagerAdapter(FragmentManager fm) {
            super(fm);
        }

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

        @Override
        public int getCount() {
            return mfragmentlist.size();
        }
        public void addFrag(Fragment fragment,String title){
            mfragmentlist.add(fragment);
            mFragmentTitleList.add(title);
        }
        @Override
        public CharSequence getPageTitle(int position){
            return mFragmentTitleList.get(position);
        }
    }
}

InformationsquelleAutor der Antwort Rahul Vishwakarma

Keiner dieser Methoden sind elegant, wenn mit TabLayout als der ViewPager "Dekor" - Szenario. TabLayout Dokumentation Hier ist eine einfache Erweiterung des TabLayout und PagerAdapter, bietet eine einfache drop-in-Ersatz für das TabLayout, dass es möglich sein sollte, entweder im Szenario ohne manuelles hinzufügen von Symbolen außerhalb der TabLayout Klasse und nach der Verwendung von PagerAdapter, um die Registerkarte Informationen.

/**
 * Created by JDL on 1/18/2017.
 */
public class TabLayoutExt extends TabLayout {

    protected ViewPager mViewPager;

    public abstract static class TabLayoutViewPagerAdapter extends PagerAdapter {
        public TabLayoutViewPagerAdapter() {
        }

        /**
         * This method may be called by the TabLayout to obtain an icon drawable
         * to for the specified tab. This method may return null
         * indicating no tab icon for this page. The default implementation returns
         * null.
         *
         * @param position The position of the title requested
         * @return A drawable icon for the requested page
         */
        public Drawable getPageIcon(Context context, int position) {
            return null;
        }
    }

    public TabLayoutExt(Context context) {
        super(context);
    }

    public TabLayoutExt(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public TabLayoutExt(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onAttachedToWindow() {
        //Cover the implicit setup in TabLayout
        if (mViewPager == null) {
            final ViewParent vp = getParent();
            if (vp instanceof ViewPager) {
                mViewPager = (ViewPager)vp;
            }

        }
        super.onAttachedToWindow();
    }

    public void addTab(@NonNull Tab tab, int position, boolean setSelected) {
        if (mViewPager != null && mViewPager.getAdapter() instanceof TabLayoutViewPagerAdapter) {
            Drawable icon = ((TabLayoutViewPagerAdapter) mViewPager.getAdapter()).getPageIcon(getContext(),position);
            tab.setIcon(icon);
        }
        super.addTab(tab,position,setSelected);

    }

    @Override
    public void setupWithViewPager(@Nullable ViewPager viewPager, boolean autoRefresh) {
        mViewPager = viewPager;
        super.setupWithViewPager(viewPager, autoRefresh);
    }
}

Also alles, was muss getan werden, zu erweitern, um TabLayoutViewPagerAdapter statt PageAdapter und implementieren getPageIcon(Context,int) anstelle von oder zusätzlich zum Titel. Die drop-in TabLayoutExt in Ihrer XML-Datei statt der normalen TabLayout. Dies könnte erweitert werden, für die weitere Modifizierung des tab, entweder mit einer benutzerdefinierten Ansicht anstelle oder etwas anderes.

InformationsquelleAutor der Antwort JDL

am einfachsten ist es, Sie auf neue Tabelle erstellen, indem Sie Einstellung Ikone auf tablayout. code unten zwei Reiter mit Symbol nur. verwenden Sie diesen code auf onCreate () - Methode

 tablayout = (TabLayout) findViewById(R.id.order_tablayout);
 tablayout.addTab( tablayout.newTab().setIcon(getResources().getDrawable(R.mipmap.ic_shopping_cart_white_24dp)) );
 tablayout.addTab( tablayout.newTab().setIcon(getResources().getDrawable(R.mipmap.ic_like2_fille_white_24dp)) );

InformationsquelleAutor der Antwort lotus weaver

Dies ist möglicherweise nicht die beste Antwort für alle Fälle, aber was ich gefunden habe mein problem nicht lösen aber.

Nach einem Blick auf Androiden Umsetzung von tabLayout.setupWithViewPager(ViewPager pager) ich kam mit einer Lösung, die mit nur der Zuhörer.

Die layout-Struktur:

| LinearLayout (vertical)
|-- TabLayout (width: match_parent)
|---- TabItem (without text, just icons)
|---- TabItem
|---- ...
|-- ViewPager

Code für die beiden Zuhörer:

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        pager.setCurrentItem(tab.getPosition());
    }

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

    @Override
    public void onTabReselected(TabLayout.Tab tab) {
    }
});
pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        tabLayout.setScrollPosition(position, positionOffset, false);
    }

    @Override
    public void onPageSelected(int position) {
        TabLayout.Tab tab = tabLayout.getTabAt(position);
        if (tab != null) {
            tab.select();
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {
    }
});

Haben Sie einen Blick auf die tabLayout.setScrollPosition Aufruf innerhalb OnPageChangeListener.onPageScrolled für die mehr oder weniger gut verschieben der Anzeige beim scrollen.

Funktioniert dies nicht, wenn die TabLayout Breite ist nicht festgelegt match_parent (oder muss scrollbaren).

Grüße

InformationsquelleAutor der Antwort michiruf