Android : 如何为计数文本视图创建带有可绘制对象的 TabLayout？

Question

我正在尝试使用 android 设计库中的新 TabLayout
我想创建一个 TextView 在选项卡上将可绘制对象作为背景共 TabLayout.
例如

我在搜索框中搜索洛杉矶我应该得到 TextView.
中的 Books,Movie,Place 的数量

示例图片：

Answer 1

参考这个 link 将图标+文本添加到 TabLayout https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout#add-icons-text-to-tablayout

还有这个

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

Answer 2

是的，你可以这样实现，你必须在每个选项卡中设置自定义视图。首先使用适配器设置您的 viewpager tabLayout.setupWithViewPager(viewPager); 在此之后调用此方法并添加您想要的自定义布局

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

在 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 3

使用publicTabLayout.TabsetCustomView(int layoutResId) 使用 TextView 和 Button 创建布局，在自定义视图中使用它。

已接受使用 public TabLayout.Tab setCustomView (int layoutResId)

使用 TextView 和 Button 创建布局，在自定义视图中使用它。

供参考：

setCustomView

Example

希望对您有所帮助。

Answer 4

您好 Nikhil，您必须使用自定义视图来使用事件总线为选项卡设置搜索结果更改时的计数值。了解 evet bus 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>

在创建时声明选项卡视图

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

在 onCreateOptionMenu 中使用 eventBus 触发搜索事件

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

Android : 如何为计数文本视图创建带有可绘制对象的 TabLayout？

Android : How to create TabLayout with drawable for count textview?

android

android-tablayout

tabview

android-search