[英]Android : How to create TabLayout with drawable for count textview?
I'm trying to use the new TabLayout
in the android design library我正在尝试在 android 设计库中使用新的TabLayout
I wanted to create a TextView
having drawable as background on a tab of TabLayout
.我想在TabLayout
的选项卡上创建一个具有可绘制背景的TextView
。
For example例如
I search Los Angeles in Search box I should get number of Books,Movie,Place in the TextView
.我在搜索框中搜索洛杉矶我应该在TextView
获得 Books,Movie,Place 的数量。
Example image:示例图像:
Refer this link Add Icons+Text to TabLayout https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout#add-icons-text-to-tablayout请参阅此链接将图标+文本添加到 TabLayout https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout#add-icons-text-to-tablayout
And this和这个
https://gist.github.com/kevinpelgrims/8685c8e1a68e3cd9cff9 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;
}
Yes, you can acheive like this, you have to set custom view in each tab.是的,您可以这样实现,您必须在每个选项卡中设置自定义视图。 First setup your viewpager with adapter after tabLayout.setupWithViewPager(viewPager);在tabLayout.setupWithViewPager(viewPager);之后首先用适配器设置你的 viewpager ; after this call this method and add your custom layout what you want在此之后调用此方法并添加您想要的自定义布局
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);
}
}
and after change background in setOnTabSelectedListener并在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);
}
Use public TabLayout.Tab setCustomView (int layoutResId) Create a Layout with TextView and Button use this in Custom view.使用 public TabLayout.Tab setCustomView (int layoutResId) 创建一个带有 TextView 和 Button 的布局在自定义视图中使用它。
accepted Use public TabLayout.Tab setCustomView (int layoutResId)接受使用 public TabLayout.Tab setCustomView (int layoutResId)
Create a Layout with TextView and Button use this in Custom view.创建一个带有 TextView 和 Button 的布局在自定义视图中使用它。
For reference:以供参考:
Hope this will helpful to you.希望这对你有帮助。
Hi Nikhil you have to use custom view for tab set the count value on search result change using event bus.嗨 Nikhil,您必须使用自定义视图为选项卡设置使用事件总线更改搜索结果的计数值。 To know about evet bus reffer EventBus: Events for Android了解 evet bus reffer EventBus: Events for Android
search_tab_layout 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>
Declare tab 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);
In onCreateOptionMenu use eventBus to fire event on search在 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;
}
});
}
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.