如果標(biāo)題欄過(guò)多，超過(guò)屏幕的寬度，該怎么弄，下面我們就來(lái)解決一下，效果如下：
其實(shí)和之前寫的也差不多，我就是在哪個(gè)demo里面添加和修改了一下，就加了幾個(gè)title標(biāo)題，加了幾個(gè)圖片，最重要的是給TableLayout添加了一個(gè)屬性：
app:tabMode="scrollable"
這個(gè)屬性就是設(shè)置設(shè)置TableLayout可以滾動(dòng)，看我滾動(dòng)上面的標(biāo)題欄：
這里我還給標(biāo)題欄設(shè)置了幾個(gè)附加的屬性，讓它顯得更好看：
<span style="white-space:pre"> </span>app:tabTextColor="#f5eef5" app:tabSelectedTextColor="#ec4213" app:tabIndicatorColor="#aaff00"</pre><pre name="code" class="html">app:tabTextColor="#f5eef5" //這個(gè)是設(shè)置標(biāo)題的字體顏色app:tabSelectedTextColor="#ec4213" </span>//這個(gè)是設(shè)置標(biāo)題被選中時(shí)的顏色app:tabIndicatorColor="#aaff00" </span>//這個(gè)是設(shè)置下面跟著聯(lián)動(dòng)的長(zhǎng)方形的顏色</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給注釋了：
// //設(shè)置tab的模式 // mTab.setTabMode(TabLayout.MODE_FIXED);不可滾動(dòng)的tab //app:tabMode="scrollable"可以滑動(dòng)的tab
然后其他照常加圖片和標(biāo)題，全部代碼是：
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(); } /** * 實(shí)例化控件 */ private void initView() { mViewPager = (ViewPager) findViewById(R.id.main_viewpager); //設(shè)置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); //設(shè)置圖片顯示全屏 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); //設(shè)置標(biāo)題 titleList = new ArrayList<>(); titleList.add("高圓圓"); titleList.add("江一燕"); titleList.add("佟麗婭"); titleList.add("安以軒"); titleList.add("劉亦菲"); titleList.add("王祖賢"); titleList.add("張?zhí)鞇?ài)"); mTab = (TabLayout) findViewById(R.id.main_tab); // //設(shè)置tab的模式 // mTab.setTabMode(TabLayout.MODE_FIXED);不可滾動(dòng)的tab //app:tabMode="scrollable"可以滑動(dòng)的tab //添加tab選項(xiàng)卡 for (int i = 0; i < titleList.size(); i++) { mTab.addTab(mTab.newTab().setText(titleList.get(i))); } //把TabLayout和ViewPager關(guān)聯(lián)起來(lái) mTab.setupWithViewPager(mViewPager); //實(shí)例化adapter mAdapter = new MyViewPagerAdapter(mList,titleList); //給ViewPager綁定Adapter mViewPager.setAdapter(mAdapter); } }Adapter里面什么都沒(méi)變，依舊是：
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));//添加頁(yè)卡 return list.get(position); } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(list.get(position));//刪除頁(yè)卡 } @Override public CharSequence getPageTitle(int position) { return titleList.get(position);//頁(yè)卡標(biāo)題 } }以上所述是小編給大家介紹的ViewPager頂部導(dǎo)航欄聯(lián)動(dòng)效果(標(biāo)題欄條目多)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
