如果标题栏过多，超过屏幕的宽度，该怎么弄，下面我们就来解决一下，效果如下：
其实和之前写的也差不多，我就是在哪个demo里面添加和修改了一下，就加了几个title标题，加了几个图片，最重要的是给tablelayout添加了一个属性：
app:tabmode="scrollable"
这个属性就是设置设置tablelayout可以滚动，看我滚动上面的标题栏：
这里我还给标题栏设置了几个附加的属性，让它显得更好看：
<span style="white-space:pre"> </span>app:tabtextcolor="#f5eef5" app:tabselectedtextcolor="#ec4213" app:tabindicatorcolor="#aaff00" </pre><pre name="code" class="html">app:tabtextcolor="#f5eef5" //这个是设置标题的字体颜色 app:tabselectedtextcolor="#ec4213" </span>//这个是设置标题被选中时的颜色 app:tabindicatorcolor="#aaff00" </span>//这个是设置下面跟着联动的长方形的颜色 </pre><span style="font-size:14px">具体布局文件代码是： </span><p></p><p></p><pre name="code" class="html"> <?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顶部导航栏联动效果(标题栏条目多)，希望对大家有所帮助
如对本文有疑问， 点击进行留言回复！！
网友评论