webentwicklung-frage-antwort-db.com.de

Fügen Sie dem TabLayout Symbole + Text hinzu

Ich arbeite an einem Bildschirm, der drei Registerkarten enthält. Ich versuche, ein Symbol mit Mein Text in Registerkarten hinzuzufügen, und ich möchte, dass das Bild über dem Text steht und zwischen ihnen ein wenig Platz ist.

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;
}}
androidandroid-layoutmaterial-designandroid-tabsandroid-tablayout
8
Mahmoud Ahmed

Versuchen Sie es auf diese Weise genau das, wonach Sie suchen

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

erstellen Sie zunächst eine Layout-XML-Datei mit der gewünschten Struktur für den TabBeispiel ist ein einfaches Symbol oben in einem Text. wie so:  enter image description here

1. Erstellen Sie das Layout-Register für die Navigationsregisterkarte: im Ordner 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>

geben Sie Ihr Layout und Ihre ID zum Aufblasen an, und geben Sie auch die ImageView- und die TextView-ID zum späteren Nachschlagen des übergeordneten Layouts an.

2. Definieren Sie Ihre Symbole im Ordner drawable und die Beschriftungen in der Datei strings.xml

verweisen Sie sie anhand ihrer Ressourcen-ID in einem Array, das so angeordnet ist, wie Sie möchten, dass Ihre Symbole angezeigt werden: 

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. richten Sie Ihre TabLayout mit Ihrer ViewerPager ein:

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

jetzt Anpassungsteil: 

// 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);
}

---

Letzte Berührung, um einen aktiven Status festzulegen und die Symbol- und Textfarbe zu ändern, wenn die Registerkarte ausgewählt wird:

sie können meine Antwort hier fortsetzen

Bild und Farbe des Texts auf die Registerkarte ändern, wenn ausgewählt

das wird erreichen:  enter image description here

18
Biskrem Muhammad

Wenn Sie Symbole und Text in einer einzelnen Zeile in einem Tablayout einfügen möchten, müssen Sie ein benutzerdefiniertes Layout wie unten beschrieben erstellen.

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>

Auf Ihrer Java-Seite können Sie den folgenden Code schreiben, um Bild und Titel in Ihre Registerkarten einzufügen.

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)

Hinweis : - In tabTitles array stelle ich fest, dass ich ein Leerzeichen vor Text (<space>Title 1) eingegeben habe, da zwischen Bild und Titel Platz bleibt.

Es tut mir leid, dass ich hier Kotlin-Code bereitstelle, aber Sie können ihn leicht in Java konvertieren. Wenn jemand ein Problem hat, kommentieren Sie diese Antwort und ich werde versuchen, ihnen zu helfen.

2
Jaydip Kalkani