欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-03-07 20:01:33
如果标题栏过多,超过屏幕的宽度,该怎么弄,下面我们就来解决一下,效果如下: 其实和之前写的也差不多,我就是在哪个demo里面添加和修改了一下,就加了几个title标题...

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

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

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

app:tabmode="scrollable"

这个属性就是设置设置tablelayout可以滚动,看我滚动上面的标题栏:

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

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

<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顶部导航栏联动效果(标题栏条目多),希望对大家有所帮助