ViewPager顶部导航栏联动效果(标题栏条目多)
程序员文章站
2024-03-07 20:01:33
如果标题栏过多,超过屏幕的宽度,该怎么弄,下面我们就来解决一下,效果如下:
其实和之前写的也差不多,我就是在哪个demo里面添加和修改了一下,就加了几个title标题...
如果标题栏过多,超过屏幕的宽度,该怎么弄,下面我们就来解决一下,效果如下:
其实和之前写的也差不多,我就是在哪个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顶部导航栏联动效果(标题栏条目多),希望对大家有所帮助