tablelayout 和view pager 底部菜单添加文字和图片(view)方法

1. 先创建图片和文字的选择器view,并建立xml  tab文件,添加imageview和textview组件,此视图为加入到tablayout中的视图,会在adapter中将其与选择器绑定

代码如下:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/tab_iv1"/>
<TextView
    android:textSize="15sp"
    android:gravity="center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="@drawable/text_selector"
    android:id="@+id/tab_tv1"
    />

  2.建立文字和图片的选择器  selector格式文件

文字代码:

<!-- 未选中时字体颜色-->
<item android:state_selected="false"
    android:color ="#9E9E9E" ></item>
<!-- 选中时字体颜色-->
<item
    android:state_selected="true"
    android:color="#7CCD7C"/>
<!-- 非触摸模式下获得焦点并单击时的字体颜色 -->
<item
    android:state_focused="true"
    android:state_pressed="true"

    android:color="#7CCD7C"/>

图片代码如下:

<!-- 被选择时图片-->
 <item android:drawable="@mipmap/og"
     android:state_selected="true">

 </item>
 <!-- 未选择时图片-->
 <item android:drawable="@mipmap/of">

</item>

3.在adapter中建立两个数组 一为String类型,数组成员为菜单名称, 另一数组为int类型.成员为菜单图片ID 创建一个自定义方法,返回值为view  所以需要context添加view视图view为上文建立的xml视图 将两个数组设置到视图里的组件上  代码如下:

public class SendViewPagerAdapter extends FragmentPagerAdapter {
    private ArrayList<Fragment> datas;//因为要用将fragment加入到viewpager之中,所以内容为fragment类型的集合
    private Context context;
    String title1 = "拨号";
    String title2 = "最近通话";
    String title3 = "联系人";
    String title4 = "短信";
    String [] titles = {title1,title2,title3,title4};//设置底部tablayoutout显示文字
    private int [] imageviewId = {R.drawable.send_selector,R.drawable.call_history_selector,R.drawable.call_person_selector,R.drawable.message_selector};
    public SendViewPagerAdapter(FragmentManager fm, ArrayList<Fragment> datas,Context context) {//设置构造函数,将fragment传入到viewpager中
        super(fm);
        this.datas = datas;
        this.context = context;
    }

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

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

    @Override//tablayout和viewpager结合之后,创建底部title使用的方法
    public CharSequence getPageTitle(int position) {

        return null;
    }
    public View getTabView(int position) {
        View view = LayoutInflater.from(context).inflate(R.layout.main_tab, null);
        TextView textview = (TextView) view.findViewById(R.id.tab_tv1);
        ImageView imageview = (ImageView) view.findViewById(R.id.tab_iv1);
        textview.setText(titles[position]);
        imageview.setImageResource(imageviewId[position]);
        return view;
    }

}

4.主函数代码如下:

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        datas = new ArrayList<>();
        datas.add(new SendFragment());//将几个fragment加入datas中,data为fragment类型的集合
        datas.add(new CallHistoryFragment());
        datas.add(new ContactPersonFragment());
        datas.add(new MessageFragment());
        viewpager = (ViewPager) findViewById(R.id.viewpager);//绑定viewpager
        tablayout = (TabLayout) findViewById(R.id.tablayout);//绑定tablayout
        adapter = new SendViewPagerAdapter(getSupportFragmentManager(), datas,this);//初始化fragment类型adapter,datas为adapter构造函数参数
        viewpager.setAdapter(adapter);//将adapter加入viewpager中
//        tablayout.setTabTextColors(Color.BLUE,Color.GREEN);
        //加入title选择和被选择的颜色,前面为未点击的颜色,后面为点击后的颜色
        tablayout.setupWithViewPager(viewpager);//将tablayout与viewpager建立关系
        for(int i = 0;i < tablayout.getTabCount();i++){//判断tablayout有几个菜单数量
            TabLayout.Tab tab = tablayout.getTabAt(i);
            if (tab != null){
                tab.setCustomView(adapter.getTabView(i));//将adapter设置好的获取图片和文字的方法设置到视图中
            }
        }
        viewpager.setCurrentItem(1);
    }


}