android中TabLayout的使用和icon与文字的位置设置

￡神魔★判官ぃ 2022-07-10 10:27 725阅读 0赞

设置tab标题的使用方法1：  
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));  
设置tab标题的使用方法2：

<android.support.design.widget.TabLayout
             android:layout_height="wrap_content"
             android:layout_width="match_parent">
    
         <android.support.design.widget.TabItem
                 android:text="@string/tab_text"/>
    
         <android.support.design.widget.TabItem
                 android:icon="@drawable/ic_android"/>
    
     </android.support.design.widget.TabLayout>

设置tab标题icon的默认使用方法1：

tabLayout.addTab(tabLayout.newTab().setText("tab").setIcon(R.drawable.icon));

设置tab标题icon的默认使用方法2：

tabLayout.getTabAt(0).setIcon(R.mipmap.ic_launcher);

设置icon的上下左右的位置的方法1：  
采用自定义View

TextView newTab = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
    newTab.setText("tab1"); 
    newTab.setCompoundDrawablesWithIntrinsicBounds(your_drawable_icon_here, 0, 0, 0);
    tabLayout.getTabAt(tab_index_here_).setCustomView(newTab);
    其中通过setCompoundDrawablesWithIntrinsicBounds(leftDrawable, topDrawable, rightDrawable, bottomDrawable)设置icon的位置

其中custom_tab：

custom_tab.xml  
    <?xml version="1.0" encoding="utf-8"?>  
    <TextView xmlns:android="http://schemas.android.com/apk/res/android"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:id="@+id/tab"  
        android:textColor="@color/colorAccent"  
        android:textSize="@dimen/tab_label"  
        android:fontFamily="@string/font_fontFamily_medium"/>

自定义icon和text的view方法2：（推荐）

<?xml version="1.0" encoding="utf-8"?>  
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
        android:orientation="horizontal"  
        android:layout_width="wrap_content"  
        android:layout_height="48dp"  
        android:gravity="center"  
        >  
        <ImageView  
            android:layout_gravity="center"  
            android:id="@+id/tabicon"  
            android:src="@mipmap/ic_launcher"  
            android:layout_width="24dp"  
            android:layout_height="24dp" />  
        <TextView  
            android:id="@+id/tabtext"  
            android:gravity="center"  
            android:textSize="14sp"  
            android:text="TAB"  
            android:layout_width="wrap_content"  
            android:layout_height="match_parent" />  
    </LinearLayout>

如图：

![SouthEast][]

其中主要方法：

private void new_tab(){  
            tabLayout.addTab(tabLayout.newTab().setCustomView(tab_icon("首页",R.drawable.home_selector)));  
            tabLayout.addTab(tabLayout.newTab().setCustomView(tab_icon("行情",R.drawable.prices_selector)));  
            tabLayout.addTab(tabLayout.newTab().setCustomView(tab_icon("资讯",R.drawable.news_selector)));  
            tabLayout.addTab(tabLayout.newTab().setCustomView(tab_icon("个人",R.drawable.my_selector)));  
                  
            //Tablayout自定义view绑定ViewPager 自定义view时使用 tabLayout.setupWithViewPager(viewPager);方法关联无效，通过以下方法进行viewpager和tablayout的关联  
            viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));  
            tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager));  
      
        }  
      
        private View tab_icon(String name,int iconID){  
            View newtab =  LayoutInflater.from(this).inflate(R.layout.icon_view,null);  
            TextView tv = (TextView) newtab.findViewById(R.id.tabtext);  
            tv.setText(name);  
            ImageView im = (ImageView)newtab.findViewById(R.id.tabicon);  
            im.setImageResource(iconID);  
            return newtab;  
        }

其中主要的MainActivity:

package com.example.cuboo.mlcircles.activity;  
      
      
    import android.os.Bundle;  
    import android.support.design.widget.TabLayout;  
    import android.support.v4.app.Fragment;  
    import android.view.LayoutInflater;  
    import android.view.View;  
    import android.widget.ImageView;  
    import android.widget.TextView;  
      
    import com.example.cuboo.mlcircles.R;  
    import com.example.cuboo.mlcircles.fragment.fragment_pageradpter;  
    import com.example.cuboo.mlcircles.fragment.home_fragment;  
    import com.example.cuboo.mlcircles.fragment.my_fragment;  
    import com.example.cuboo.mlcircles.fragment.news_fragment;  
    import com.example.cuboo.mlcircles.fragment.prices_fragment;  
    import com.example.cuboo.mlcircles.utils.BaseAvtivity;  
    import com.example.cuboo.mlcircles.utils.CustomView;  
      
    import java.util.ArrayList;  
      
    public class MainActivity extends BaseAvtivity {  
        private TabLayout tabLayout;  
        private CustomView viewPager;  
        private ArrayList<Fragment> fragments;  
        private ArrayList<String> titles;  
      
        @Override  
        protected void onCreate(Bundle savedInstanceState) {  
            super.onCreate(savedInstanceState);  
            setContentView(R.layout.activity_main);  
            init();  
            initViewpager();  
        }  
        private void init(){  
            tabLayout = (TabLayout) findViewById(R.id.tab);  
            viewPager = (CustomView) findViewById(R.id.viewpager);  
            //设置是否开启ViewPager滑动  
            viewPager.setPagingEnabled(true);  
      
            fragments = new ArrayList<Fragment>();  
            titles = new ArrayList<String>();  
            //tabLayout.addTab(tabLayout.newTab().setText("首页"));  
            //tabLayout.addTab(tabLayout.newTab().setText("消息"));  
      
        }  
            private void initViewpager(){  
            fragments.add(new home_fragment());  
            fragments.add(new prices_fragment());  
            fragments.add(new news_fragment());  
            fragments.add(new my_fragment());  
    //        titles.add("首页");  
    //        titles.add("行情");  
    //        titles.add("资讯");  
    //        titles.add("个人");  
      
            fragment_pageradpter adpter = new fragment_pageradpter(getSupportFragmentManager(),fragments,null);  
            viewPager.setAdapter(adpter);  
    //        tabLayout.setupWithViewPager(viewPager);  
    //        tabLayout.getTabAt(0).setIcon(R.drawable.home_selector);  
    //        tabLayout.getTabAt(1).setIcon(R.drawable.prices_selector);  
    //        tabLayout.getTabAt(2).setIcon(R.drawable.news_selector);  
    //        tabLayout.getTabAt(3).setIcon(R.drawable.my_selector);  
             new_tab();  
      
            }  
        private void new_tab(){  
            tabLayout.addTab(tabLayout.newTab().setCustomView(tab_icon("首页",R.drawable.home_selector)));  
            tabLayout.addTab(tabLayout.newTab().setCustomView(tab_icon("行情",R.drawable.prices_selector)));  
            tabLayout.addTab(tabLayout.newTab().setCustomView(tab_icon("资讯",R.drawable.news_selector)));  
            tabLayout.addTab(tabLayout.newTab().setCustomView(tab_icon("个人",R.drawable.my_selector)));  
            //Tablayout自定义view绑定ViewPager  
            viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));  
            tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager));  
      
        }  
      
        private View tab_icon(String name,int iconID){  
            View newtab =  LayoutInflater.from(this).inflate(R.layout.icon_view,null);  
            TextView tv = (TextView) newtab.findViewById(R.id.tabtext);  
            tv.setText(name);  
            ImageView im = (ImageView)newtab.findViewById(R.id.tabicon);  
            im.setImageResource(iconID);  
            return newtab;  
        }  
      
    }

fragmentpageradapter:

package com.example.cuboo.mlcircles.fragment;  
      
    import android.support.v4.app.Fragment;  
    import android.support.v4.app.FragmentManager;  
    import android.support.v4.app.FragmentPagerAdapter;  
      
    import java.util.ArrayList;  
      
    /** 
     * Created by cuboo on 2016/10/3. 
     */  
      
    public class fragment_pageradpter extends FragmentPagerAdapter {  
        private ArrayList<Fragment> fragments;  
        private ArrayList<String> titles;  
      
        public fragment_pageradpter(FragmentManager fm, ArrayList<Fragment> fragments, ArrayList<String> tiles) {  
            super(fm);  
            this.fragments = fragments;  
            this.titles = tiles;  
        }  
      
        @Override  
        public Fragment getItem(int position) {  
            return fragments.get(position);  
        }  
      
        @Override  
        public int getCount() {  
            return fragments.size();  
        }  
      
        @Override  
        public CharSequence getPageTitle(int position) {  
            return titles.get(position);  
        }  
    }

自定义view的xml:

<?xml version="1.0" encoding="utf-8"?>  
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
        android:orientation="vertical"  
        android:layout_width="wrap_content"  
        android:layout_height="48dp"  
        android:layout_gravity="center"  
        android:gravity="center"  
        >  
        <ImageView  
            android:layout_gravity="center"  
            android:id="@+id/tabicon"  
            android:src="@mipmap/ic_launcher"  
            android:layout_width="24dp"  
            android:layout_height="24dp" />  
        <TextView  
            android:id="@+id/tabtext"  
            android:gravity="center"  
            android:textSize="12sp"  
            android:textColor="@drawable/tab_selector"  
            android:layout_width="wrap_content"  
            android:layout_height="match_parent" />  
    </LinearLayout>

icon位置方法3:

上icon下text：

compile 'com.android.support:appcompat-v7:23.2.1'
    compile 'com.android.support:design:23.2.1'

左icon右text：

compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.0.1'

源码下载地址：

[点击打开链接][Link 1]

[SouthEast]: /images/20220709/881df08cf49841c8bf61fe0f8c49e325.png
[Link 1]: http://download.csdn.net/detail/cheng9981/9637199