it-swarm.com.ru

Добавить иконки + текст в TabLayout

Я работаю над экраном, который содержит три вкладки. Я пытаюсь добавить значок с текстом «Мой» на вкладках и хочу, чтобы изображение было выше текста, и между ними должно быть свободное пространство Это мой код.

public class HomeScreen extends AppCompatActivity
    implements NavigationView.OnNavigationItemSelectedListener {

private Toolbar toolbar;
private ViewPager pager;
private ViewPagerAdapter adapter;
private SlidingTabLayout tabs;
private CharSequence Titles[] = {"News", "Most Views", "Chart"};
int Numboftabs = 3;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_home_screen);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
            this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
    drawer.setDrawerListener(toggle);
    toggle.syncState();

    NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
    navigationView.setNavigationItemSelectedListener(this);

    //MAhmoud Code Addtion
    // getSupportActionBar().setDisplayHomeAsUpEnabled(true);
   // getSupportActionBar().setIcon(R.drawable.ic_launcher);

    // Creating The ViewPagerAdapter and Passing Fragment Manager, Titles
    // fot the Tabs and Number Of Tabs.
    adapter = new ViewPagerAdapter(getSupportFragmentManager(), Titles,
            Numboftabs);

    // Assigning ViewPager View and setting the adapter
    pager = (ViewPager) findViewById(R.id.pager);
    pager.setAdapter(adapter);

    // Assiging the Sliding Tab Layout View
    tabs = (SlidingTabLayout) findViewById(R.id.tabs);
    tabs.setDistributeEvenly(true);
    tabs.setViewPager(pager);

}

@Override
public void onBackPressed() {
    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    if (drawer.isDrawerOpen(GravityCompat.START)) {
        drawer.closeDrawer(GravityCompat.START);
    } else {
        super.onBackPressed();
    }
}}

ViewPagerAdapter

public class ViewPagerAdapter extends FragmentStatePagerAdapter {

CharSequence Titles[];
int NumbOfTabs;

public ViewPagerAdapter(FragmentManager fm, CharSequence mTitles[],
        int mNumbOfTabsumb) {
    super(fm);
    this.Titles = mTitles;
    this.NumbOfTabs = mNumbOfTabsumb;
}
// This method return the fragment for the every position in the View Pager
@Override
public Fragment getItem(int position) {
    switch (position) {
    case 0:
        return new Tap1();

    case 1:
        return new Tap2();
    case 2:
        return new Tap3();
    }
    return null;
}
// This method return the titles for the Tabs in the Tab Strip
@Override
public CharSequence getPageTitle(int position) {
    return Titles[position];
}
// This method return the Number of tabs for the tabs Strip
@Override
public int getCount() {
    return NumbOfTabs;
}}
8
Mahmoud Ahmed

Попробуйте так, это именно то, что вы ищете

http://www.androidhive.info/2015/09/Android-material-design-working-with-tabs/

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private int[] tabIcons = {
            R.drawable.ic_tab_favourite,
            R.drawable.ic_tab_call,
            R.drawable.ic_tab_contacts
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
        setupTabIcons();
    }

    private void setupTabIcons() {
        tabLayout.getTabAt(0).setIcon(tabIcons[0]);
        tabLayout.getTabAt(1).setIcon(tabIcons[1]);
        tabLayout.getTabAt(2).setIcon(tabIcons[2]);
    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFrag(new OneFragment(), "ONE");
        adapter.addFrag(new TwoFragment(), "TWO");
        adapter.addFrag(new ThreeFragment(), "THREE");
        viewPager.setAdapter(adapter);
    }

    class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }

        @Override
        public int getCount() {
            return mFragmentList.size();
        }

        public void addFrag(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }
    }
}

 enter image description here

26
Aditya Vyas-Lakhan

сначала создайте XML-файл макета, который имеет желаемую структуру вкладки. В качестве примера - простой значок в верхней части текста. вот так:  enter image description here

1. создать макет вкладки навигации xml: в папке layout> nav_tab.xml

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:id="@+id/nav_tab"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical"
    Android:gravity="center_horizontal">

    <ImageView
        Android:layout_width="wrap_content"
        Android:layout_height="@dimen/nav_icon"
        Android:scaleType="centerInside"
        Android:id="@+id/nav_icon"
        Android:layout_marginBottom="@dimen/tiny_padding"/>

    <TextView
        Android:id="@+id/nav_label"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:fontFamily="@string/font_fontFamily_medium"
        Android:shadowColor="@Android:color/black"
        Android:textColor="@color/dark_grey"
        Android:textSize="@dimen/nav_tab_label_font_size"
        tools:text="@string/nav_home" />

</LinearLayout>

укажите свой макет и идентификатор для раздувания, а также присвойте идентификаторы ImageView и TextView, чтобы ссылаться позже после надувания родительского макета.


2. Определите ваши значки в папке drawable и метки в файле strings.xml

и ссылаться на них по их идентификатору ресурса в массиве, упорядоченном так, как вы хотите, чтобы ваши иконки появлялись:

private int[] navIcons = {
        R.drawable.ico_home,
        R.drawable.ico_search,
        R.drawable.ico_notification,
        R.drawable.ico_profile
};
private int[] navLabels = {
        R.string.nav_home,
        R.string.nav_search,
        R.string.nav_notifications,
        R.string.nav_profile
};
// another resouces array for active state for the icon
private int[] navIconsActive = {
        R.drawable.ico_home_red,
        R.drawable.ico_search_red,
        R.drawable.ico_notification_red,
        R.drawable.ico_profile_red
};

3. Настройте TabLayout с помощью ViewerPager:

TabLayout navigation = (TabLayout) findViewById(R.id.navigation);
navigation.setupWithViewPager(mainView/* the viewer pager object*/);

теперь часть настройки:

// loop through all navigation tabs
for (int i = 0; i < navigation.getTabCount(); i++) {
    // inflate the Parent LinearLayout Container for the tab
    // from the layout nav_tab.xml file that we created 'R.layout.nav_tab
    LinearLayout tab = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.nav_tab, null);

    // get child TextView and ImageView from this layout for the icon and label
    TextView tab_label = (TextView) tab.findViewById(R.id.nav_label);
    ImageView tab_icon = (ImageView) tab.findViewById(R.id.nav_icon);

    // set the label text by getting the actual string value by its id
    // by getting the actual resource value `getResources().getString(string_id)`
    tab_label.setText(getResources().getString(navLabels[i]));

    // set the home to be active at first
    if(i == 0) {
        tab_label.setTextColor(getResources().getColor(R.color.efent_color));
        tab_icon.setImageResource(navIconsActive[i]);
    } else {
        tab_icon.setImageResource(navIcons[i]);
    }

    // finally publish this custom view to navigation tab
    navigation.getTabAt(i).setCustomView(tab);
}

---

Последний раз, чтобы установить активное состояние и изменить цвет значка и текста при выборе вкладки:

вы можете продолжить мой ответ здесь

изменить изображение и цвет текста на вкладке при выборе

что достигнет:  enter image description here

18
Biskrem Muhammad

Если вы хотите поместить значки и текст в одну строку на вкладке табуляции, вы должны создать собственный макет, как показано ниже.

custom_tab_heading.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical"
    Android:gravity="center">
    <TextView
        Android:id="@+id/tabContent"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:textAlignment="center"
        Android:textColor="@Android:color/black"
        Android:gravity="center"/>
</LinearLayout>

На вашей стороне Java вы можете написать код ниже, чтобы поместить изображение и заголовок на ваши вкладки.

val tabTitles = arrayListOf<String>("  Text Jokes","  Funny Images")
val tabIcons = arrayListOf<Int>(R.drawable.text_jokes,R.drawable.image_jokes)


val tabLinearLayout = LayoutInflater.from(context).inflate(R.layout.custom_tab_heading, null) as LinearLayout
val tabContent = tabLinearLayout.findViewById<View>(R.id.tabContent) as TextView
tabContent.text = tabTitles.get(0)
tabContent.setCompoundDrawablesWithIntrinsicBounds(tabIcons[0], 0, 0, 0)
myTabLayout.getTabAt(0)!!.setCustomView(tabContent)

val tabLinearLayout1 = LayoutInflater.from(context).inflate(R.layout.custom_tab_heading, null) as LinearLayout
val tabContent1 = tabLinearLayout1.findViewById<View>(R.id.tabContent) as TextView
tabContent1.text = tabTitles.get(1)
tabContent1.setCompoundDrawablesWithIntrinsicBounds(tabIcons[1], 0, 0, 0)
var l = tabLinearLayout1.layoutParams
myTabLayout.getTabAt(1)!!.setCustomView(tabContent1)

Примечание : - В массиве tabTitles обратите внимание, что я дал пробел перед текстом (<space>Title 1), потому что он сохранит пространство между вашим изображением и заголовком.

Извините, что я предоставляю код kotlin здесь, но вы можете легко преобразовать его в Java. Если у кого-то возникли проблемы, прокомментируйте этот ответ, и я постараюсь помочь им.

2
Jaydip Kalkani