Android：如何使用可绘制的文本视图创建 TabLayout？

Question

• 我正在尝试在 android 设计库中使用新的TabLayout

• 我想创建一个TextView，在选项卡上具有可绘制作为背景 TabLayout.

• 例如

  我在搜索框中搜索洛杉矶 我应该在TextView 中获得书籍、电影、地点的数量。

示例图片：

Answer 1

参考这个链接 Add Icons+Text to 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

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

Answer 3

是的，您可以这样实现，您必须在每个选项卡中设置自定义视图。 首先使用适配器设置您的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 4

使用 public TabLayout.Tab setCustomView (int layoutResId) 在自定义视图中使用 TextView 和 Button 创建一个布局。

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

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

供参考：

setCustomView

Example

希望这对你有帮助。