Добавить иконки в SlidingTabLayout вместо текста

Я реализую SlidingTabLayout в своем приложении для Android. Какой мой запрос заключается в том, что я хотел бы реализовать значки в своих скользящих вкладках вместо текстов для навигации. Я много искал в Интернете для любого такого учебника или образца, но не нашел его. Я также искал предыдущий вопрос о stackoverflow: Over Here – SlidingTabLayout с иконками . Это было немного информативно, но на самом деле не помогло мне.

Быть ясным. Мне нужно, чтобы мои вкладки состояли только из значков . Нет текста.

Поскольку я новичок во всей этой установке, я был бы признателен, если бы вы опубликовали правильный код с объяснением. Спасибо за ваше время и силы!

PS Я также слышал о том, что Андреас Стюэтс уделил внимание пейджлингу и подумал, будет ли это более подходящим для того типа вещей, который я собираюсь …

Также: вот что я хотел бы, чтобы мои скользящие вкладки выглядели. Проверьте верхнюю часть этого изображения.

ИЗМЕНИТЬ: ТЕПЕРЬ, ЧТО LOLLIPOP (С МАТЕРИАЛЫ ДИЗАЙНА) ПРИХОДИТ. Я ДОЛЖЕН СМОТРЕТЬ БОЛЬШЕ ПРИЛОЖЕНИЙ, ИСПОЛЬЗУЯ НОВУЮ «ТОЛЬКО ИКОНУ» СЛИШКОМ-ТАБЛИЦУ НИЖЕ ИХ ИНСТРУМЕНТА (ANDROID 5.0 ​​ACTION-BAR). ИХ ЛЮБОЙ НОВЫЙ СПОСОБ РЕАЛИЗАЦИИ ЭТОГО? ЕЩЕ РАЗ СПАСИБО!

См. Вкладку «Слайды» вверху?

Ключом к этому является возврат SpannableString, содержащий ваш значок в ImageSpan, из метода getPageTitle (position) вашего PagerAdapter:

 private int[] imageResId = { R.drawable.ic_tab_notifications, R.drawable.ic_tab_weather, R.drawable.ic_tab_calendar }; @Override public CharSequence getPageTitle(int position) { Drawable image = getResources().getDrawable(imageResId[position]); image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight()); SpannableString sb = new SpannableString(" "); ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM); sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); return sb; } 

Обычно этого будет достаточно, но вкладка по умолчанию, созданная SlidingTabLayout, вызывает вызов TextView#setAllCaps(true) который эффективно отключает все ImageSpans, поэтому вместо этого вам нужно будет использовать пользовательский вид табуляции:

разреш / макет / custom_tab.xml

   

и где бы вы ни настраивались / не привязывались к ViewPager:

 SlidingTabLayout slidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.sliding_tabs); slidingTabLayout.setCustomTabView(R.layout.custom_tab, 0); slidingTabLayout.setViewPager(viewPager); 

(обязательно вызовите setCustomTabView перед setViewPager )

Я решил такую ​​же проблему, но также и с возможностью изменения на выбранной вкладке.

Создайте свои чертежи для вкладок с двумя состояниями. first_tab_drawable.xml, second_tab_drawable.xml, third_tab_drawable.xml:

      

Создайте свой собственный пейджер-адаптер, начиная с PagerAdapter:

 public class MyPagerAdapter extends PagerAdapter { private int[] drawablesIds = { R.drawable.first_tab_drawable, R.drawable.second_tab_drawable, R.drawable.third_tab_drawable }; //Constructor and other standard funcs... public int getDrawableId(int position){ //Here is only example for getting tab drawables return drawablesIds[position]; } //... } 

Изменить код SlidingTabLayout:

 private void populateTabStrip() { //Here is no more standard PagerAdapter! final MyPagerAdapter adapter = (MyPagerAdapter) mViewPager.getAdapter(); final View.OnClickListener tabClickListener = new TabClickListener(); for (int i = 0; i < adapter.getCount(); i++) { View tabView = null; TextView tabTitleView = null; if (mTabViewLayoutId != 0) { // If there is a custom tab view layout id set, try and inflate it tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip, false); tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId); } if (tabView == null) { tabView = createDefaultTabView(getContext()); } if (tabTitleView == null && TextView.class.isInstance(tabView)) { tabTitleView = (TextView) tabView; } //Set icon, that can be changeable instead setting text. //I think the text also can setting here from getPageTitle func. //But we interesting only in icon tabTitleView.setCompoundDrawablesWithIntrinsicBounds(adapter.getDrawableId(i), 0, 0, 0); //Select tab if it is current if (mViewPager.getCurrentItem() == i){ tabView.setSelected(true); } tabView.setOnClickListener(tabClickListener); mTabStrip.addView(tabView); } } 

И сделайте действительно выбранный заголовок TextView также в SlidingTabLayout в InternalViewPagerListener:

  @Override public void onPageSelected(int position) { //Clear old selection and make new for(int i = 0; i < mTabStrip.getChildCount(); i ++){ mTabStrip.getChildAt(i).setSelected(false); } mTabStrip.getChildAt(position).setSelected(true); if (mScrollState == ViewPager.SCROLL_STATE_IDLE) { mTabStrip.onViewPagerPageChanged(position, 0f); scrollToTab(position, 0); } if (mViewPagerPageChangeListener != null) { mViewPagerPageChangeListener.onPageSelected(position); } } 

Надеюсь, это будет полезно для кого-то.

Чтобы настроить SlidingTabLayout так, как вы хотите, вам нужно только изменить метод populateTabStrip ():

 public void populateTabStrip() { final PagerAdapter adapter = mViewPager.getAdapter(); final View.OnClickListener tabClickListener = new TabClickListener(); for (int i = 0; i < adapter.getCount(); i++) { View tabView = null; tabView = LayoutInflater.from(getContext()).inflate(R.layout.tab_layout, mTabStrip, false); ImageView iconImageView = (ImageView) tabView.findViewById(R.id.tab_layout_icon); iconImageView.setImageDrawable(getContext().getResources().getDrawable(getIconResourceArray()[i])); tabView.setOnClickListener(tabClickListener); mTabStrip.addView(tabView); } } 

Ваш макет может быть примерно таким:

     

Способ реализации метода getResourceArray () зависит от вас. Вот как я это сделал:

 public class IconSlidingTabLayout extends HorizontalScrollView { private Integer[] mIconResourceArray; ... public Integer[] getIconResourceArray() { return mIconResourceArray; } public void setIconResourceArray(Integer[] mIconResourceArray) { this.mIconResourceArray = mIconResourceArray; } } 

В деятельности:

 mSlidingTabLayout = (IconSlidingTabLayout) findViewById(R.id.icon_sliding_tab_layout); Integer[] iconResourceArray = { R.drawable.news_tab_icon, R.drawable.challenges_tab_icon, R.drawable.trophies_tab_icon, R.drawable.leaderboard_tab_icon }; mSlidingTabLayout.setIconResourceArray(iconResourceArray); 

Имейте в виду, что для доступа к R.layout.tab_layout * вам необходимо импортировать yourpackage.R вместо android.R, поскольку он по умолчанию используется в SlidingTabStrip.

Хорошо … есть много способов реализации этого изменения. Это самый быстрый и грязный, просто для идеи ..

Замените метод SlidingTabLayout.populateTabStrip () для этого.

  private void populateTabStrip() { final OnClickListener tabClickListener = new TabClickListener(); View tabView = LayoutInflater.from(getContext()).inflate(R.layout.tab_notif_icon_only, mTabStrip, false); tabView.setOnClickListener(tabClickListener); mTabStrip.addView(tabView); tabView = LayoutInflater.from(getContext()).inflate(R.layout.tab_weather_icon_only, mTabStrip, false); tabView.setOnClickListener(tabClickListener); mTabStrip.addView(tabView); tabView = LayoutInflater.from(getContext()).inflate(R.layout.tab_calendar_icon_only, mTabStrip, false); tabView.setOnClickListener(tabClickListener); mTabStrip.addView(tabView); 

Создайте каждый макет таким образом LinearLayout> Элементы ImageView, src, указывающие на значок.

Ваш адаптер должен реализовать PagerSlidingTabStrip.IconTabProvider .

Затем в getPageIconResId вы можете вернуть идентификатор ресурса изображения:

 public class ViewPagerAdapter extends FragmentPagerAdapter implements PagerSlidingTabStrip.IconTabProvider { private static final int[] icons = {R.drawable.image1, R.drawable.image2, R.drawable.image3}; @Override public int getPageIconResId(int i) { return icons[i]; } } 

Имейте в виду, что будет отображаться только изображение, текст – нет.

Я знаю, что этот stream, если он довольно старый, но я хотел бы поделиться своим решением этой проблемы, тем не менее, потому что это может быть полезно для некоторых. Он работает довольно хорошо, даже для разных чертежей в зависимости от выбранного состояния.

Сначала я определил два массива внутри classа SlidingTabLayout (это можно было бы легко передать другому classу):

 private int[] imageResId = { R.drawable.multi_random, R.drawable.single_random, R.drawable.known_person, }; private int[] imageResSelected = { R.drawable.multi_random_selected, R.drawable.single_random_selected, R.drawable.known_person_selected }; private int mOldPosition = 0; 

Теперь мы SlidingTabLayout метод SlidingTabLayout populateTabStrip() внутри SlidingTabLayout :

  for (int i = 0; i < adapter.getCount(); i++) { View tabView = null; ImageView tabImageView = null; if (mTabViewLayoutId != 0) { // HAS TO BE SET FOR THE MOMENT! // If there is a custom tab view layout id set, try and inflate it tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip, false); tabImageView = (ImageView) tabView.findViewById(mTabViewTextViewId); } if (tabView == null) { tabView = createDefaultTabView(getContext()); } if (tabImageView == null && ImageView.class.isInstance(tabView)) { tabImageView = (ImageView) tabView; } int resourceId; if (i == mViewPager.getCurrentItem()) { resourceId = imageResSelected[i]; mOldPosition = i; } else { resourceId = imageResId[i]; } tabImageView.setImageResource(resourceId); tabView.setOnClickListener(tabClickListener); mTabStrip.addView(tabView); } 

Чтобы обновить изображение в соответствии с выбранной вкладкой, мы добавим некоторые строки в метод onPageSelected

 // This Method is called once the transition is finished // Change the drawable of the old one.. ImageView view = (ImageView) mTabStrip.getChildAt(mOldPosition); view.setImageResource(imageResId[mOldPosition]); // And now change it of the current one view = (ImageView) mTabStrip.getChildAt(position); view.setImageResource(imageResSelected[position]); mOldPosition = position; 

Наконец, нам нужно добавить пользовательский Tab View:

 mSlidingTabLayout.setCustomTabView(R.layout.custom_tab, 0); 

Как этот

   

Это решение далека от совершенства, но работает для моих нужд. Может быть, я могу помочь кому-то с этим.

Недавно я реализовал эту библиотеку под названием ViewPagerAddons . Он включает в себя SlidingTabLayoutColors , что именно то, что вам нужно. Просто позвольте адаптеру пейджера реализовать интерфейс SlidingTabLayouColors.ImageProvider , переопределить метод getPageImage и вернуть идентификаторы ресурса изображения в соответствии с позициями страницы. Просто.

Вот ссылка на библиотеку (включены инструкции по настройке): https://bitbucket.org/enthusiast94/viewpageraddons/src

Я последовал за ответом Джереми и его работой. AFAIK нет нового способа сделать это. Большинство приложений теперь полностью удаляют панель инструментов и добавляют пользовательскую скользящую панель, рекомендованную google.

Если у вас есть какие-то конкретные вопросы, дайте мне знать. iv получил мое приложение, похожее на скриншот, который вы опубликовали. Я чувствую, что это обновление материального дизайна больше фокусировалось на включении пользовательских анимаций и эффектов.

Просто возврат null из getPageTitle() сделал это для меня:

 @Override public CharSequence getPageTitle(int position) { return null; } 

Проверьте эту ссылку на решение androidhive о вкладках дизайна материалов / viewpager

Очень хороший сайт о решениях для Android. Надеюсь, вы найдете решение.

Расширьте свою основную деятельность от FragmentActivity. Также реализуйте этот class из ActionBar.TabListener, поскольку мы добавляем вкладки

// Для добавления вкладок

 for (String tab_name : tabs) { actionBar.addTab(actionBar.newTab().setIcon(R.drawable.drawable_id) .setTabListener(this)); } 

Проверьте здесь .

Interesting Posts

Как изменить имя экрана по умолчанию в OS X Lion?

Шаблоны метапрограммирования – разница между использованием Enum Hack и статическим контуром

Как восстановить из резервной копии истории файлов на новый компьютер?

Можете ли вы настроить Windows на открытие файлов JAR, таких как ZIP-файлы, без стороннего инструмента?

Как я могу сгенерировать список зависимостей функций в MATLAB?

Как * диагностировать * Windows Explorer часто замерзает

Не удалось разрешить все зависимости для конфигурации: _armv7DebugCompile ‘

Оценка математического выражения, заданного в виде строки

Поддерживает ли HTML5 взаимодействие с локальными клиентскими файлами из браузера

Поиск конкретных цветов пикселей BitmapImage

Зачем apply () возвращает транспонированную матрицу xts?

Java Class.forName () из удаленного каталога

Являются ли двойные квадратные скобки ] предпочтительными в квадратных скобках в Bash?

Что определяет размер целого числа?

Получите мой Wi-Fi ip-адрес Android

Давайте будем гением компьютера.