Question

我正在尝试在android设计库中使用新的TabLayout
我想在标签上创建一个可绘制为背景的TextView TabLayout。
例如

我在搜索框中搜索洛杉矶我应该在TextView。

示例图片：

Answer 1

请参阅此链接将图标+文字添加到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

使用公共TabLayout.Tab setCustomView（int layoutResId）使用TextView和Button创建布局在自定义视图中使用它。

接受使用公共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>

声明标签veiws onCreate

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：如何使用drawable创建用于计数textview的TabLayout？

4 个答案: