ViewPager顶部导航栏联动效果(标题栏条目多)

概述如果标题栏过多，超过屏幕的宽度，该怎么弄，下面我们就来解决一下，效果如下：

如果标题栏过多，超过屏幕的宽度，该怎么弄，下面我们就来解决一下，效果如下：

其实和之前写的也差不多，我就是在哪个demo里面添加和修改了一下，就加了几个Title标题，加了几个图片，最重要的是给tableLayout添加了一个属性：

app:tabMode="scrollable"

这个属性就是设置设置tableLayout可以滚动，看我滚动上面的标题栏：

这里我还给标题栏设置了几个附加的属性，让它显得更好看：

<span > </span>app:tabTextcolor="#f5eef5" app:tabSelectedTextcolor="#ec4213" app:tabIndicatorcolor="#aaff00"</pre><pre name="code" >app:tabTextcolor="#f5eef5" //这个是设置标题的字体颜色app:tabSelectedTextcolor="#ec4213" </span>//这个是设置标题被选中时的颜色app:tabIndicatorcolor="#aaff00" </span>//这个是设置下面跟着联动的长方形的颜色</pre><span >具体布局文件代码是：</span><p></p><p></p><pre name="code" ><?xml version="1.0" enCoding="utf-8"?> <relativeLayout xmlns:androID="http://schemas.androID.com/apk/res/androID" androID:layout_wIDth="match_parent" androID:layout_height="match_parent" xmlns:app="http://schemas.androID.com/apk/res-auto"> <!--app:tabIndicatorHeight="20dp"指示器的高度--> <androID.support.design.Widget.TabLayout androID:ID="@+ID/main_tab" androID:layout_wIDth="match_parent" androID:layout_height="50dp" app:tabMode="scrollable" app:tabTextcolor="#f5eef5" app:tabSelectedTextcolor="#ec4213" app:tabIndicatorcolor="#aaff00" /> <androID.support.v4.vIEw.VIEwPager androID:ID="@+ID/main_vIEwpager" androID:layout_wIDth="match_parent" androID:layout_below="@+ID/main_tab" androID:layout_height="match_parent"/> </relativeLayout>

Avtivity里面就是把之前写的tableLayout的mode给注释了：

// //设置tab的模式 // mTab.setTabMode(TabLayout.MODE_FIXED);不可滚动的tab //app:tabMode="scrollable"可以滑动的tab

然后其他照常加图片和标题，全部代码是：

package com.duanlian.tablayoutdemo; import androID.support.design.Widget.TabLayout; import androID.support.v4.vIEw.VIEwPager; import androID.support.v7.app.AppCompatActivity; import androID.os.Bundle; import androID.vIEw.Window; import androID.Widget.ImageVIEw; import com.duanlian.tablayoutdemo.adapter.MyVIEwPagerAdapter; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { private VIEwPager mVIEwPager; private TabLayout mTab; private MyVIEwPagerAdapter mAdapter; private List<ImageVIEw> mList; private List<String> TitleList; @OverrIDe protected voID onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentVIEw(R.layout.activity_main); initVIEw(); } /** * 实例化控件 */ private voID initVIEw() { mVIEwPager = (VIEwPager) findVIEwByID(R.ID.main_vIEwpager); //设置VIEwPager里面也要显示的图片 mList = new ArrayList<>(); ImageVIEw yuanYuan = new ImageVIEw(this); ImageVIEw yiYan = new ImageVIEw(this); ImageVIEw liYa = new ImageVIEw(this); ImageVIEw yixuan = new ImageVIEw(this); ImageVIEw yifei = new ImageVIEw(this); ImageVIEw zhuxian = new ImageVIEw(this); ImageVIEw tianai = new ImageVIEw(this); yuanYuan.setimageResource(R.mipmap.gaoyuanyuan); yiYan.setimageResource(R.mipmap.jiangyiyan); liYa.setimageResource(R.mipmap.tongliya); yixuan.setimageResource(R.mipmap.anyixuan); yifei.setimageResource(R.mipmap.liuyifei); zhuxian.setimageResource(R.mipmap.wangzhuxian); tianai.setimageResource(R.mipmap.zhangtianai); //设置图片显示全屏 yuanYuan.setScaleType(ImageVIEw.ScaleType.FIT_XY); yiYan.setScaleType(ImageVIEw.ScaleType.FIT_XY); liYa.setScaleType(ImageVIEw.ScaleType.FIT_XY); yixuan.setScaleType(ImageVIEw.ScaleType.FIT_XY); yifei.setScaleType(ImageVIEw.ScaleType.FIT_XY); zhuxian.setScaleType(ImageVIEw.ScaleType.FIT_XY); tianai.setScaleType(ImageVIEw.ScaleType.FIT_XY); mList.add(yuanYuan); mList.add(yiYan); mList.add(liYa); mList.add(yixuan); mList.add(yifei); mList.add(zhuxian); mList.add(tianai); //设置标题 TitleList = new ArrayList<>(); TitleList.add("高圆圆"); TitleList.add("江一燕"); TitleList.add("佟丽娅"); TitleList.add("安以轩"); TitleList.add("刘亦菲"); TitleList.add("王祖贤"); TitleList.add("张天爱"); mTab = (TabLayout) findVIEwByID(R.ID.main_tab); // //设置tab的模式 // mTab.setTabMode(TabLayout.MODE_FIXED);不可滚动的tab //app:tabMode="scrollable"可以滑动的tab //添加tab选项卡 for (int i = 0; i < TitleList.size(); i++) { mTab.addTab(mTab.newTab().setText(TitleList.get(i))); } //把TabLayout和VIEwPager关联起来 mTab.setupWithVIEwPager(mVIEwPager); //实例化adapter mAdapter = new MyVIEwPagerAdapter(mList,TitleList); //给VIEwPager绑定Adapter mVIEwPager.setAdapter(mAdapter); } }

Adapter里面什么都没变，依旧是：

package com.duanlian.tablayoutdemo.adapter; import androID.support.v4.vIEw.PagerAdapter; import androID.vIEw.VIEw; import androID.vIEw.VIEwGroup; import androID.Widget.ImageVIEw; import java.util.List; public class MyVIEwPagerAdapter extends PagerAdapter { private List<ImageVIEw> List; private List<String> TitleList; public MyVIEwPagerAdapter(List<ImageVIEw> mList,List<String> TitleList) { this.List = mList; this.TitleList = TitleList; } @OverrIDe public int getCount() { return List.size(); } @OverrIDe public boolean isVIEwFromObject(VIEw vIEw,Object object) { return vIEw==object; } @OverrIDe public Object instantiateItem(VIEwGroup container,int position) { container.addVIEw(List.get(position));//添加页卡 return List.get(position); } @OverrIDe public voID destroyItem(VIEwGroup container,int position,Object object) { container.removeVIEw(List.get(position));//删除页卡 } @OverrIDe public CharSequence getPageTitle(int position) { return TitleList.get(position);//页卡标题 } }

以上所述是小编给大家介绍的VIEwPager顶部导航栏联动效果(标题栏条目多)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程小技巧网站的支持！

总结

以上是内存溢出为你收集整理的ViewPager顶部导航栏联动效果(标题栏条目多)全部内容，希望文章能够帮你解决ViewPager顶部导航栏联动效果(标题栏条目多)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。