webentwicklung-frage-antwort-db.com.de

Tablayout nur mit Symbolen

Ich verwende Entwurfsunterstützung, um Registerkarten zu erstellen. Ich verwende auch ViewPager für ausklappbare Tabs.

Nun weiß ich nicht, wie ich anstelle von Texten in Registerkarten nur Symbole verwenden soll. Ich versuchte es herauszufinden, aber es gelang mir nicht.

Mein Code:

Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    viewPager = (ViewPager) findViewById(R.id.pager);
    setupViewPager(viewPager);
    setupTablayout();
}

private void setupTablayout() {
    tabLayout = (TabLayout) findViewById(R.id.tabLayout);
    tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
    tabLayout.setupWithViewPager(viewPager);
}

class MyPagerAdapter extends FragmentPagerAdapter {

    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

    public MyPagerAdapter(FragmentManager manager) {
        super(manager);
    }

    @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) {
        mFragmentTitleList.get(position)
    }
}

private void setupViewPager(ViewPager viewPager) {
    MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
    adapter.addFrag(new frag(), "CAT");
    adapter.addFrag(new frag(), "DOG");
    adapter.addFrag(new frag(), "BIRD");
    viewPager.setAdapter(adapter);
}
57
androGuy

Ein Ansatz besteht darin, die Symbole nach der Methode TabLayout.setupWithViewPager () festzulegen.

mTabLayout.setupWithViewPager(mViewPager);
for (int i = 0; i < mTabLayout.getTabCount(); i++) {
  mTabLayout.getTabAt(i).setIcon(R.drawable.your_icon);
}
149
user802421

Das im folgenden Link gezeigte Tutorial sollte abdecken, was Sie möchten. https://github.com/codepath/Android_guides/wiki/Google-Play-Style-Tabs- using-TabLayout#add-icons-to-tablayout

Ich habe den entsprechenden Abschnitt unten kopiert.

Fügen Sie TabLayout Symbole hinzu

Derzeit bietet die TabLayout-Klasse kein sauberes Abstraktionsmodell, das Symbole auf Ihrer Registerkarte zulässt. Es gibt viele Problemumgehungen, von denen eine einen SpannableString mit Ihrem Symbol in einem ImageSpan aus der getPageTitle (position) -Methode Ihres PagerAdapters zurückgibt, wie im folgenden Codeausschnitt gezeigt:

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 legt die von TabLayout erstellte Registerkarte die Eigenschaft textAllCaps auf true fest, sodass ImageSpans nicht gerendert werden kann. Sie können dieses Verhalten überschreiben, indem Sie die tabTextAppearance-Eigenschaft ändern.

  <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>
25
user4989692

In der neuen Version von TabLayout fügte google TabItem hinzu, mit der Icon einfach durch folgenden Code in XML eingefügt werden kann:

<Android.support.design.widget.TabLayout
         app:tabTextColor="@color/gray"
         app:tabMode="fixed"
         app:tabBackground="@color/red"
         app:tabIndicatorHeight="4dp"
         app:tabIndicatorColor="@color/purple"
         app:tabPadding="2dp"
         app:tabSelectedTextColor="@color/white"
         app:tabMinWidth="64dp"
         Android:layout_height="wrap_content"
         Android:layout_width="match_parent">

     <!--add height and width to TabItem -->
     <Android.support.design.widget.TabItem 
             Android:text="@string/tab_text"/>

     <Android.support.design.widget.TabItem
             Android:icon="@drawable/ic_Android"/>

 </Android.support.design.widget.TabLayout>

Sehen Sie mehr hier .

24
Amir

versuche dies 

    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);
        }
    }
}
15

Die einfachste Möglichkeit, Icons zu verwenden, ist die Verwendung von Tablayout.Tab.setIcon (drawable). Auf diese Weise können Sie auch das ausgewählte Symbol leicht markieren. Wenn Sie dies tun möchten, führen Sie die folgenden Schritte aus.

Schritt 1 ... Fügen Sie Ihre Bilder den res.mipmap-Ordnern hinzu. (mipmap-mdpi, hdpi usw.) Nach den anderen Antworten zu urteilen, ist es auch in Ordnung, diese dann in die res.drawable-Ordner zu legen.

Schritt 2 . Rufen Sie setIcon auf allen Ihren Registerkarten auf, nachdem Sie TabLayout und ViewPager eingerichtet haben. Ich habe dies in meinen AdapterTabs gemacht, um die Aktivität in Ordnung zu halten.

    tablayout = (TabLayout) findViewById(R.id.tab_layout);
    viewPager = (ViewPager) findViewById(R.id.viewPager);
    adapterTabs = new AdapterTabs(this, getSupportFragmentManager(), fragments, tablayout, viewPager);

    viewPager.setAdapter(adapterTabs);
    tablayout.setupWithViewPager(viewPager);
    adapterTabs.setTabIcons();

und in Ihren AdapterTabs, die FragmentPagerAdapter erweitern sollen, setzen Sie Ihre setTabIcons () -Methode.

    public void setTabTitlesToIcons() {
    Drawable icon1 = context.getResources().getDrawable(R.mipmap.ic_1);
    Drawable icon2 = context.getResources().getDrawable(R.mipmap.ic_2);
    Drawable icon3 = context.getResources().getDrawable(R.mipmap.ic_3);
    Drawable icon1Hilighted = context.getResources().getDrawable(R.mipmap.ic_1_selected);
    Drawable icon2Hilighted = context.getResources().getDrawable(R.mipmap.ic_2_selected);
    Drawable icon3Hilighted = context.getResources().getDrawable(R.mipmap.ic_3_selected);

    icons.add(icon1);
    icons.add(icon2);
    icons.add(icon3);
    iconsHilighted.add(icon1Hilighted);
    iconsHilighted.add(icon2Hilighted);
    iconsHilighted.add(icon3Hilighted);

    for(int i = 0; i < icons.size(); i++) {
        if(i == 0) {
            //noinspection ConstantConditions
            tabLayout.getTabAt(i).setIcon(iconsSelected.get(i));
        }
        else {
            //noinspection ConstantConditions
            tabLayout.getTabAt(i).setIcon(icons.get(i));
        }
    }
}

Vergewissern Sie sich, dass Sie einen Verweis auf die beiden Listen 'icons' und 'iconsHilighted' speichern. Du wirst sie später brauchen. Speichern Sie außerdem einen Verweis auf das TabLayout und den ViewPager, die Sie aus der Aktivität übergeben haben.

Schritt 3: Stellen Sie sicher, dass AdapterTabs.getPageTitle () den Wert null zurückgibt. Wenn Sie es jetzt ausführen, sollten Sie das erste Symbol hervorgehoben sehen.

Schritt 4 . Implementieren Sie ViewPager.OnPageChangeListener in AdapterTabs und fügen Sie diesen Listener zu Ihrem viewPager hinzu

    public AdapterTabs(Context context, FragmentManager fragmentManager, List<Fragment> fragments, TabLayout tabLayout, ViewPager viewPager) {
    super(fragmentManager);
    this.context = context;
    this.tabLayout = tabLayout;
    this.viewPager = viewPager;
    this.viewPager.addOnPageChangeListener(this);

    tabs.add(fragments.get(0));
    tabs.add(fragments.get(1));
    tabs.add(fragments.get(2));
}

Schritt 5 ... Aktualisieren Sie die Symbole in den Registerkarten des Callbacks onPageSelected in Ihren AdapterTabs.

    @Override
public void onPageSelected(int position) {
    for (int i = 0; i < tabs.size(); i++) {
        if(i == position) {
            //noinspection ConstantConditions
            tabLayout.getTabAt(i).setIcon(iconsSelected.get(i));
        }
        else {
            //noinspection ConstantConditions
            tabLayout.getTabAt(i).setIcon(icons.get(i));
        }
    }
}

Jetzt sollte das hilighted-Symbol aktualisiert werden, wenn Sie die Registerkarten wechseln.

5
ninjachippie

Keine dieser Methoden ist elegant, wenn Sie TabLayout als ViewPager-Szenario verwenden. TabLayout Documentation Hier ist eine einfache Erweiterung von TabLayout und PagerAdapter, die einen einfachen Ersatz für TabLayout bietet, der in beiden Szenarien verwendet werden kann, ohne dass manuell Symbole außerhalb der TabLayout-Klasse hinzugefügt werden müssen und die Verwendung von PagerAdapter nach folgt Holen Sie sich die Tab-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);
    }
}

Es muss also lediglich TabLayoutViewPagerAdapter anstelle von PageAdapter erweitert und getPageIcon(Context,int) anstelle von oder zusätzlich zum Titel implementiert werden. Das Ablegen von TabLayoutExt in Ihrer XML-Datei anstelle der normalen TabLayout. Dies kann zur weiteren Änderung der Registerkarte erweitert werden, entweder mit einer benutzerdefinierten Ansicht oder etwas anderem. 

4
JDL

In TabLayout ist das Einstellungssymbol einfach:

getPageTitle(position) sollte null zurückgeben (wenn der Titel nicht angezeigt werden soll).

Nächster : 

tabLayout.getTabAt(0).setIcon(resId);

tabLayout.getTabAt(1).setIcon(resId);

......
3
Bhuwan

Versuchen Sie dies, dies wird auf jeden Fall funktionieren. 

private TabLayout tabLayout;
private ViewPager viewPager;
private int[] tabIcons = {
        R.drawable.single,
        R.drawable.multiple};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_contact_picker);

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    toolbar.setTitle("Choose contact");
    setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    tab();
}


public void tab(){
    viewPager = (ViewPager) findViewById(R.id.viewpager);
    setupViewPager(viewPager);
    tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);
    setupTabIcons();
}

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

}

private void setupViewPager(ViewPager viewPager) {
    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
    adapter.addFragment(new Login());
    adapter.addFragment(new Register());
    viewPager.setAdapter(adapter);
}

class ViewPagerAdapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();

    public ViewPagerAdapter(FragmentManager manager) {
        super(manager);
    }

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

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

    public void addFragment(Fragment fragment) {
        mFragmentList.add(fragment);

    }


}

Wie in den Kommentaren erwähnt, funktioniert das Definieren der Symbole im TabLayout nicht, wenn ein PagerAdapter verwendet wird. Für Benutzer von Kotlin besteht eine Problemumgehung darin, eine Erweiterungsfunktion wie die folgende zu erstellen:

fun TabLayout.setupWithViewPagerAndKeepIcons(viewPager : ViewPager?) {
    val icons =  mutableListOf<Drawable?>()
    repeat(tabCount) {
        icons.add(getTabAt(it)?.icon)
    }
    setupWithViewPager(viewPager)

    repeat(tabCount) {
        getTabAt(it)?.setIcon(icons.get(it))
    }
}

Fügen Sie dann in der layout.xml Ihre Icons zum TabLayout hinzu:

    <com.google.Android.material.tabs.TabLayout
            Android:id="@+id/tab_layout">

        <com.google.Android.material.tabs.TabItem
                Android:icon="@drawable/your_icon"/>

    </com.google.Android.material.tabs.TabLayout>

Verwenden Sie schließlich die Erweiterungsfunktion, um das TabLayout mit einem ViewPager einzurichten.

tab_layout.setupWithViewPagerAndKeepIcons(view_pager)
0
kjellhaaland

der einfachste Weg ist das Erstellen einer neuen Tabelle, indem Sie das Symbol auf dem Tablayout festlegen. Unter dem Code werden nur zwei Registerkarten mit Symbol erstellt. Verwenden Sie diesen Code für die 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)) );
0
Kamal Bunkar