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