ViewPager頂部導(dǎo)航欄聯(lián)動(dòng)效果(標(biāo)題欄條目多)
如果標(biāo)題欄過(guò)多,超過(guò)屏幕的寬度,該怎么弄,下面我們就來(lái)解決一下,效果如下:
其實(shí)和之前寫(xiě)的也差不多,我就是在哪個(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里面就是把之前寫(xiě)的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)站的支持!
相關(guān)文章
Android 使用Vibrator服務(wù)實(shí)現(xiàn)點(diǎn)擊按鈕帶有震動(dòng)效果
這篇文章主要介紹了Android 使用Vibrator服務(wù)實(shí)現(xiàn)點(diǎn)擊按鈕帶有震動(dòng)效果,,本文通過(guò)實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)火鍋工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06Android實(shí)現(xiàn)獲取短信驗(yàn)證碼并自動(dòng)填寫(xiě)功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)獲取短信驗(yàn)證碼并自動(dòng)填寫(xiě)功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07Android列表實(shí)現(xiàn)(1)_數(shù)組列表實(shí)例介紹
最近開(kāi)始學(xué)習(xí)android的ui,先上幾個(gè)相關(guān)的例子,后續(xù)還會(huì)有更新,感興趣的朋友可以研究下2012-12-12使用ViewPager實(shí)現(xiàn)左右循環(huán)滑動(dòng)及滑動(dòng)跳轉(zhuǎn)
今天實(shí)現(xiàn)了左右滑動(dòng),至于在最后一頁(yè)滑動(dòng)跳轉(zhuǎn),這個(gè)也做了但是效果不是太好,也希望有實(shí)現(xiàn)的朋友能夠分享下2013-01-01解決NDK開(kāi)發(fā)中Eclipse報(bào)錯(cuò)Unresolved inclusion jni.h的最終解決方法(已測(cè))
這篇文章主要介紹了解決NDK開(kāi)發(fā)中Eclipse報(bào)錯(cuò)Unresolved inclusion jni.h的最終方法,需要的朋友可以參考下2016-12-12UiOS開(kāi)發(fā)中ITextView回收或關(guān)閉鍵盤(pán)使用方法總結(jié)
iOS開(kāi)發(fā)中,發(fā)現(xiàn)UITextView沒(méi)有像UITextField中textFieldShouldReturn:這樣的方法,那么要實(shí)現(xiàn)UITextView關(guān)閉鍵盤(pán),必須使用其他的方法,下面是可以使用的幾種方法,需要的朋友參考下吧2016-11-11Android App中使用ViewPager+Fragment實(shí)現(xiàn)滑動(dòng)切換效果
這篇文章主要介紹了Android App中使用ViewPager+Fragment實(shí)現(xiàn)滑動(dòng)切換效果的方法,借助Fragment可以使Activity的內(nèi)部管理邏輯更加清晰,需要的朋友可以參考下2016-03-03Android實(shí)現(xiàn)多級(jí)樹(shù)形菜單并支持多選功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)多級(jí)樹(shù)形菜單并支持多選功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07