ViewPager頂部導航欄聯(lián)動效果(標題欄條目多)
如果標題欄過多,超過屏幕的寬度,該怎么弄,下面我們就來解決一下,效果如下:
其實和之前寫的也差不多,我就是在哪個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>//這個是設置下面跟著聯(lián)動的長方形的顏色 </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("張?zhí)鞇?); 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關聯(lián)起來 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頂部導航欄聯(lián)動效果(標題欄條目多),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
Android 使用Vibrator服務實現(xiàn)點擊按鈕帶有震動效果
這篇文章主要介紹了Android 使用Vibrator服務實現(xiàn)點擊按鈕帶有震動效果,,本文通過實例圖文相結合給大家介紹的非常詳細,對大家的學習火鍋工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06Android列表實現(xiàn)(1)_數(shù)組列表實例介紹
最近開始學習android的ui,先上幾個相關的例子,后續(xù)還會有更新,感興趣的朋友可以研究下2012-12-12使用ViewPager實現(xiàn)左右循環(huán)滑動及滑動跳轉
今天實現(xiàn)了左右滑動,至于在最后一頁滑動跳轉,這個也做了但是效果不是太好,也希望有實現(xiàn)的朋友能夠分享下2013-01-01解決NDK開發(fā)中Eclipse報錯Unresolved inclusion jni.h的最終解決方法(已測)
這篇文章主要介紹了解決NDK開發(fā)中Eclipse報錯Unresolved inclusion jni.h的最終方法,需要的朋友可以參考下2016-12-12UiOS開發(fā)中ITextView回收或關閉鍵盤使用方法總結
iOS開發(fā)中,發(fā)現(xiàn)UITextView沒有像UITextField中textFieldShouldReturn:這樣的方法,那么要實現(xiàn)UITextView關閉鍵盤,必須使用其他的方法,下面是可以使用的幾種方法,需要的朋友參考下吧2016-11-11Android App中使用ViewPager+Fragment實現(xiàn)滑動切換效果
這篇文章主要介紹了Android App中使用ViewPager+Fragment實現(xiàn)滑動切換效果的方法,借助Fragment可以使Activity的內(nèi)部管理邏輯更加清晰,需要的朋友可以參考下2016-03-03