web-dev-qa-db-de.com

Kann eine benutzerdefinierte Ansicht als TabItem verwendet werden?

Die TabLayout-Klasse in Android bietet Ihnen ein TabItem, mit dem Sie einen Text und ein Symbol angeben können. Ist es möglich, eine benutzerdefinierte Ansicht als TabItem zu verwenden?

Mein Tab würde so aussehen

 enter image description here

wie Sie neben einem Symbol und einem Textetikett sehen können, habe ich auch ein Benachrichtigungssymbol (eine Zahl in einem gelben Kreis). Wie kann ich solche Tabs machen?

16
Denny George

In bestimmten Fällen möchten wir anstelle der Standard-Registerkartenansicht für jede Registerkarte ein benutzerdefiniertes XML-Layout anwenden. Um dies zu erreichen, durchlaufen Sie alle TabLayout.Tabs nach dem Anbringen der Schiebelaschen am Pager:

public class MainActivity extends AppCompatActivity {

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

        // Get the ViewPager and set it's PagerAdapter so that it can display items
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        SampleFragmentPagerAdapter pagerAdapter = 
            new SampleFragmentPagerAdapter(getSupportFragmentManager(), MainActivity.this);
        viewPager.setAdapter(pagerAdapter);

        // Give the TabLayout the ViewPager
        TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
        tabLayout.setupWithViewPager(viewPager);

        // Iterate over all tabs and set the custom view
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            tab.setCustomView(pagerAdapter.getTabView(i));
        }
    }

    //...
} 

Als Nächstes fügen wir der Klasse SampleFragmentPagerAdapter die Methode getTabView (position) hinzu:

public class SampleFragmentPagerAdapter extends FragmentPagerAdapter {
   private String tabTitles[] = new String[] { "Tab1", "Tab2" };
   private int[] imageResId = { R.drawable.ic_one, R.drawable.ic_two };

    public View getTabView(int position) {
        // Given you have a custom layout in `res/layout/custom_tab.xml` with a TextView and ImageView
        View v = LayoutInflater.from(context).inflate(R.layout.custom_tab, null);
        TextView tv = (TextView) v.findViewById(R.id.textView);
        tv.setText(tabTitles[position]);
        ImageView img = (ImageView) v.findViewById(R.id.imgView);
        img.setImageResource(imageResId[position]);
        return v;
    }

} 

Hiermit können Sie für jede Seite im Adapter einen benutzerdefinierten Registerkarteninhalt einrichten.

QUELLE

33
Asym

Versuche dies

private View mCustomView;
private ImageView mImageViewCustom;
private TextView mTextViewCustom;
private int count = 0;

public View getCustomTab() {
        mCustomView = LayoutInflater.from(NewHomePageActivity.this).inflate(R.layout.custom_tab, null);
        mImageViewCustom = (ImageView) mCustomView.findViewById(R.id.custom_tab_imageView);
        mTextViewCustom = (TextView) mCustomView.findViewById(R.id.custom_tab_textView_count);
        if (count > 0) {
            mTextViewCustom.setVisibility(View.VISIBLE);
            mTextViewCustom.setText(String.valueOf(count));
        } else {
            mTextViewCustom.setVisibility(View.GONE);
        }
        return mCustomView;
    }

private void setupTabIcons() {
        tabLayout.getTabAt(0).setIcon(R.mipmap.ic_home_gray_48);
        tabLayout.getTabAt(1).setIcon(R.mipmap.ic_follow_gray_48);
        tabLayout.getTabAt(2).setIcon(R.mipmap.ic_follower_gray_48);
        tabLayout.getTabAt(3).setIcon(R.mipmap.ic_news_event_gray_48);
        tabLayout.getTabAt(4).setCustomView(getCustomTab());
        tabLayout.getTabAt(5).setIcon(R.mipmap.ic_menu_gray_48);
    }

XML

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@color/colorPrimary">

    <ImageView
        Android:id="@+id/custom_tab_imageView"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:background="@mipmap/ic_bell_gray_48"
        Android:contentDescription="@string/image_dsc" />

    <TextView
        Android:id="@+id/custom_tab_textView_count"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="right"
        Android:layout_marginEnd="5dp"
        Android:layout_marginRight="5dp"
        Android:layout_marginBottom="5dp"
        Android:background="@drawable/shape_circle"
        Android:padding="2dp"
        Android:text="1"
        Android:textColor="@color/colorWhite"
        Android:textSize="11sp" />

</FrameLayout>
0
Ashwin H