ViewPager頂部導(dǎo)航欄聯(lián)動(dòng)效果(標(biāo)題欄條目多)
如果標(biāo)題欄過多,超過屏幕的寬度,該怎么弄,下面我們就來解決一下,效果如下:

其實(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)的長方形的顏色 </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í)鞇?);
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)起來
mTab.setupWithViewPager(mViewPager);
//實(shí)例化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);//頁卡標(biāo)題
}
}
以上所述是小編給大家介紹的ViewPager頂部導(dǎo)航欄聯(lián)動(dòng)效果(標(biāo)題欄條目多),希望對(duì)大家有所幫助,如果大家有任何疑問請(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)效果,,本文通過實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)火鍋工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
Android實(shí)現(xiàn)獲取短信驗(yàn)證碼并自動(dòng)填寫功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)獲取短信驗(yàn)證碼并自動(dòng)填寫功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
Android列表實(shí)現(xiàn)(1)_數(shù)組列表實(shí)例介紹
最近開始學(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),至于在最后一頁滑動(dòng)跳轉(zhuǎn),這個(gè)也做了但是效果不是太好,也希望有實(shí)現(xiàn)的朋友能夠分享下2013-01-01
解決NDK開發(fā)中Eclipse報(bào)錯(cuò)Unresolved inclusion jni.h的最終解決方法(已測(cè))
這篇文章主要介紹了解決NDK開發(fā)中Eclipse報(bào)錯(cuò)Unresolved inclusion jni.h的最終方法,需要的朋友可以參考下2016-12-12
UiOS開發(fā)中ITextView回收或關(guān)閉鍵盤使用方法總結(jié)
iOS開發(fā)中,發(fā)現(xiàn)UITextView沒有像UITextField中textFieldShouldReturn:這樣的方法,那么要實(shí)現(xiàn)UITextView關(guān)閉鍵盤,必須使用其他的方法,下面是可以使用的幾種方法,需要的朋友參考下吧2016-11-11
Android App中使用ViewPager+Fragment實(shí)現(xiàn)滑動(dòng)切換效果
這篇文章主要介紹了Android App中使用ViewPager+Fragment實(shí)現(xiàn)滑動(dòng)切換效果的方法,借助Fragment可以使Activity的內(nèi)部管理邏輯更加清晰,需要的朋友可以參考下2016-03-03
Android實(shí)現(xiàn)多級(jí)樹形菜單并支持多選功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)多級(jí)樹形菜單并支持多選功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07

