web-dev-qa-db-ja.com

カスタムビューをTabItemとして使用できますか？

AndroidのTabLayoutクラスは、テキストとアイコンを指定できるTabItemを提供します。カスタムビューをTabItemとして使用することは可能ですか？

私のタブは次のようになります

enter image description here

アイコンとテキストラベルのほかに表示されているように、通知シンボル（黄色の円内の数字）もあります。このようなタブを作成するにはどうすればよいですか？

androidandroid-layoutandroid-tablayout
18
Denny George

特定のケースでは、デフォルトのタブビューの代わりに、各タブにカスタムXMLレイアウトを適用したい場合があります。これを実現するには、スライド式タブをページャーに接続した後、すべてのTabLayout.Tabsを繰り返し処理します。

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

    //...
}

次に、getTabView（position）メソッドをSampleFragmentPagerAdapterクラスに追加します。

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

}

これにより、アダプターの各ページのカスタムタブコンテンツをセットアップできます。

[〜＃〜] source [〜＃〜]

40
Asym

これを試して

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