Material Design :原生TabLayout+viewpaper+fragment實現滑動效果
簡單實現
效果圖
步驟:
- 需求:TabLayout的簡單使用
- 確定佈局—找到控制元件–設定adapter–
- 1 initView()
- 2 initAdapter()
- 3 initTablayout()
- 4 initViewpager()
佈局:
Eclipse注意V4,V7,Design包裡面的屬性是不主動提示的,要手敲或copy
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!--要引用全路徑+特有屬性不提示,最好copy,title的大小不可設定,只能通過@style設定-->
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@color/colorAccent"
app:tabBackground="@color/TabLayoutBG"
app:tabGravity="fill"
app:tabIndicatorColor="@color/colorAccent"
app:tabIndicatorHeight ="3dp"
app:tabMode="fixed"
app:tabSelectedTextColor="@android:color/holo_blue_dark"
app:tabTextAppearance="@style/TabLayoutTabTextAppearance"
app:tabTextColor="@android:color/black"/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/tabLayout">
</android.support.v4.view.ViewPager>
</RelativeLayout>
設定tab字型大小+去掉字母預設大寫限制
<style name="TabLayoutTextStyle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textAllCaps">false</item>
<item name="android:textSize">15sp</item>
</style>
parent也可以是:
parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">
java程式碼
//注意這2行程式碼的順序:viewpaper要先設定adapter,才可以讓 tablayout繫結,否則報錯:viewpager沒有setAdapter()
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
viewPager.setCurrentItem(0);
常見問題
怎麼新增Tittle
tabLayout.setTabMode(TabLayout.MODE_FIXED);//官網解釋fixed是個滑動
tabLayout.addTab(tabLayout.newTab().setText(tabs.get(0)));/**注意建立TAB物件:tabLayout.newTab()*/
tabLayout.addTab(tabLayout.newTab().setText(tabs.get(1)));
tabLayout.addTab(tabLayout.newTab().setText(tabs.get(2)));
tabLayout.addTab(tabLayout.newTab().setText(tabs.get(3)));
tabLayout.addTab(tabLayout.newTab().setText(tabs.get(4)));
上述以前可以,但現在不行了,下面解釋
怎麼將二者繫結 TabLayout+Viewpager?
private void initViewPager() {
//注意這2行程式碼的順序:viewpaper要先設定adapter,才可以讓 tablayout繫結,否則報錯:viewpager沒有setAdapter()
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
viewPager.setCurrentItem(0);
}
為什麼呼叫方法setupWithViewPager()後Title消失了?
因為setupWithViewPager()方法內部呼叫了removeAllTabs()。
按住ctrl+滑鼠左鍵,進入原始碼:
Step1
tabLayout.setupWithViewPager(viewPager);
Step2:setupWithViewPager()
public void setupWithViewPager(@Nullable ViewPager viewPager) {
setupWithViewPager(viewPager, true);
}
Step3:setupWithViewPager()
private void setupWithViewPager(@Nullable final ViewPager viewPager, boolean autoRefresh,boolean implicitSetup) {
if (viewPager != null) {
...
if (adapter != null) {
// Now we'll populate ourselves from the pager adapter, adding an observer if
// autoRefresh is enabled
setPagerAdapter(adapter, autoRefresh);
}
} else {
// We've been given a null ViewPager so we need to clear out the internal state,
// listeners and observers
mViewPager = null;
setPagerAdapter(null, false);
}
...
}
Step4:setPagerAdapter()
void setPagerAdapter(@Nullable final PagerAdapter adapter, final boolean addObserver) {
...
// Finally make sure we reflect the new adapter
populateFromPagerAdapter();
}
Step5: populateFromPagerAdapter()
void populateFromPagerAdapter() {
removeAllTabs();
...
}
到這裡我們就應該知道原因了,下面在看看這個方法是怎麼實現的。
Step6:removeAllTabs()
/**
* Remove all tabs from the action bar and deselect the current tab.
*/
public void removeAllTabs() {
// Remove all the views
for (int i = mTabStrip.getChildCount() - 1; i >= 0; i--) {
removeTabViewAt(i);
}
for (final Iterator<Tab> i = mTabs.iterator(); i.hasNext();) {
final Tab tab = i.next();
i.remove();
tab.reset();
sTabPool.release(tab);
}
mSelectedTab = null;
}
怎麼解決:“呼叫方法setupWithViewPager()後Title消失” ?
方法一:
在setupWithViewPager()後 新增title
tabLayout.setupWithViewPager(viewPager);
//如果不呼叫下面的程式碼,執行後發現tablayout沒有了Title,
// 這是因為原始碼呼叫了removeAllTabs();以前沒有,具體API幾新增的這個方法不清楚
//方法一:
tabLayout.getTabAt(0).setText("精選");
tabLayout.getTabAt(1).setText("訂閱");
tabLayout.getTabAt(2).setText("發現");
方法二:ViewPager的adapter中呼叫getPageTitle(int position)
//設定Tab的標題
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
app:tabGravity=”fill” app:tabGravity=”center”的區別?
app:tabGravity=”center” tab居中顯示,若tab數量較少,導致無法填充滿螢幕寬度,會居中顯示,兩邊會有空白。
app:tabGravity=”fill”
app:tabGravity=”center”
android:background=”” 與app:tabBackground=“” 的區別?
見上圖:
app:tabMode=”fixed”和app:tabMode=”scrollable”的區別?
app:tabMode=”fixed”和app:tabMode=”scrollable”的區別也是這樣,fixed會充滿螢幕寬度,tab數量較少時,scrollable不足以充滿螢幕寬度,而且是左對齊。
怎麼去掉下劃線?
讓下劃線的高度為0即可。
app:tabIndicatorHeight="0dp"
怎麼給tab新增分割線?
LinearLayout tab1 = (LinearLayout) tabLayout.getChildAt(0);
tab1.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
tab1.setDividerDrawable(getResources().getDrawable(R.drawable.divider));
divider.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/item6"/>
<size android:width="1dp"/>
</shape>
屬性
屬性 | 含義 |
---|---|
android:background=”“ | 整個TabLayout的背景色 |
app:tabBackground=“” | tab的背景色 |
app:tabMode=”fixed” | tab的擺放方式,fixed:充滿螢幕;scrollable:左對齊 |
app:tabGravity=”fill” | tab的擺放方式,fill:充滿螢幕寬度;center:水平居中 |
app:tabIndicatorColor=“” | 下劃線顏色 |
app:tabIndicatorHeight=“” | 下劃線高度 |
app:tabTextColor=”@android:color/black” | tab文字顏色 |
app:tabSelectedTextColor=”@color/colorAccent” | 當前tab文字顏色 |
app:tabTextAppearance=”@style/TabLayoutTextStyle” | 文字大小顏色等 |
TabLayout新增TAB的3種方式
第一種:addTab()
tabLayout2.addTab(tabLayout2.newTab().setText("tab1").setIcon(R.mipmap.ic_launcher_round));
第二種:在xml佈局中直接新增TabItem
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="60dp">
<android.support.design.widget.TabItem
android:id="@+id/tab1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:icon="@mipmap/ic_launcher"
android:text="首頁"/>
<android.support.design.widget.TabItem
android:id="@+id/tab2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:icon="@mipmap/ic_launcher"
android:text="聯絡人"/>
<android.support.design.widget.TabItem
android:id="@+id/tab3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:icon="@mipmap/ic_launcher"
android:text="朋友圈"/>
<android.support.design.widget.TabItem
android:id="@+id/tab4"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:icon="@mipmap/ic_launcher"
android:text="我"/>
</android.support.design.widget.TabLayout>
第三種:呼叫adapter中的方法getPageTitle()
這也是最常用的
//設定Tab的標題
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
Android Developer 文件中還介紹了ViewPager包裹TabLayout,不知道怎麼使用
SlidingTabLayout + SlidingTabStrip
相關推薦
Material Design :原生TabLayout+viewpaper+fragment實現滑動效果
簡單實現 效果圖 步驟: 需求:TabLayout的簡單使用 確定佈局—找到控制元件–設定adapter– 1 initView() 2 initAdapter() 3 initTablayout() 4 initViewpager()
TabLayout+ViewPager+Fragment實現滑動效果
實現的效果圖如下: 一、頁面佈局檔案 1. 主頁面tab_main.xml,程式碼如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://sc
Material Design:TabLayout的使用
ase 現在 omv follow 滿足 script sta ont cti 轉:https://www.jianshu.com/p/9c072bc99ebe 谷歌在Material Design中推出TabLayout以替代開源庫PagerSlidingT
Material Design:利用RecyclerView CardView實現新聞卡片樣式
最終要實現的效果: 1,支援低版本 RecyclerView 和 CardView都是在Android 5.0中引入的,所以要想在低版本中使用,需要在build.gradle中新增: dependencies { ...
Android TabLayout+ViewPager+Fragment實現tab欄的時候,無法實時更新ViewPager內的Fragment問題終極解決方法
TabLayout+ViewPager+Fragment模式在應用中必不可少,有時候我們可能會遇到tab欄會動態改變的問題,如新增,或刪減,這時候就需要把viewpager內相應的fragment新增或刪減; 如想做以下等操作? 1、更新單個item mDataList.remove(0
TabLayout+ViewPager+Fragment實現多條目載入(多個介面)
要求: 實現如圖所示效果,上方TabLayout,下面ViewPager+Fragment,下拉重新整理,上拉載入更多,多條目載入,顯示title標題,根據images圖片數量進行多條目載入。 介面如下,其中page為頁數,lid為上方標題的id https://feed.mix.s
android使用Viewpager和TabLayout結合fragment實現首頁底部導航的效果
前言 現如今幾乎每一款手機APP首頁都採用了底部導航的功能,現在我們使用Viewpager和TabLayout結合fragment來實現該功能。 效果圖如下: 這裡有一個問題,TabLayout的五個icon在模擬器中寬度無法充滿螢幕,暫時還不知道為什麼,手機能夠正
TabLayout+ViewPager+Fragment實現多條目載入
要求: 實現如圖所示效果,上方TabLayout,下面ViewPager+Fragment,下拉重新整理,上拉載入更多,多條目載入,顯示title標題,根據images圖片數量進行多條目載入。 介面如下,其中page為頁數,lid為上方標題的id https://fee
TabLayout+ViewPager+Fragment實現底部導航
MainActivity extends AppCompatActivity { private TabLayout mTabLayout; //Tab 文字 private final int[] TAB_TITLES = new int[]{R.string.weixin,R.string.con
安卓開發:viewpager + fragment 實現滑動切換
時間緊迫 長話短說 以後再補上 佈局檔案、 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.co
實現Android 5.0 Material Design的點選任意View的水波效果
我正在參加部落格之星,點選這裡投我一票吧,謝謝~ 前言自從Android 5.0問世以後,它的UI風格受到了大家普遍的讚美,簡單、動感十足,但是由於工作比較忙,本人對於Android 5.0並沒有太多的關注。前幾天在知名博主任玉剛 ( 部落格地址 ) 帥哥的群中有同學問
TabLayout+ViewPager+Fragment實現頂部或底部導航欄
以前看慕課網的教程,寫過一個微信Tab選項卡切換的例子,使用的是ViewPager+Fragment來實現的,說實話,當時為了實現一些效果,還是寫了蠻多的程式碼,但是,今天介紹的TabLayout+ViewPager+Fragment實現導航欄可以使用很少的程式
tablayout+viewpager+fragment實現頁面底部導航欄
先附上效果圖第一步:書寫佈局我的佈局檔案是這樣的<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/an
viewpager + fragment實現滑動切換效果
先上一張效果圖(非動圖,但是可以實現滑動切換,點選下方按鈕,也可以進行切換): MainActivity之中的程式碼 public class Main2Activity extends AppCompatActivity implements View.OnClickListener{
Android Studio 使用ViewPager + Fragment實現滑動選單Tab效果 --簡易版
描述: 之前有做過一個記賬本APP,拿來練手的,做的很簡單,是用Eclipse開發的; 最近想把這個APP重新完善一下,添加了一些新的功能,並選用Android Studio來開發; APP已經完善了一部分,現在就想把已經做好的功能整理一下,記錄下來。 效果圖
Viewpager+Fragment實現滑動,點選滑動效果
佈局頁面 佈局有很多種方式,為了美觀,這裡我們就用RadioGroup實現 <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_widt
三行程式碼實現TabLayout+ViewPager的Tab滑動效果,從封裝到開源
本文已授權微信公眾號:code小生 原創首發 在學習TabLayout的時候為了加深自己的記憶,將TabLayout和ViewPager進行了一些簡單的封裝,可以更加快捷的生成我們想要的滑動頁面,對於新手拿來練手還是不錯的,由於技術水平有限,大神勿噴!
不用ViewPager和Fragment實現滑動頁面的效果
這是一篇被逼出來的文章。 一入SDK深似海,從此jar包是路人,沒錯,你以為我願意不用ViewPager和Fragment啊,因為SDK為了減少包體大小不能用v4的包啊!坑爹的v4包居然有1M多,你們可真能寫啊。我相信一定有朋友會建議說,把v4包裡相關的類摳出
Fragment 實現動畫效果
利用fragment transaction進行切換,很方便提供切換的效果。 利用setTransition() 通過setTransition()我們可以設定有限幾個切換效果,程式碼如下: protected void addFragmentToStack
ViewPager+Fragment 實現滑動頁面的效果
佈局檔案如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"