前言

之前在另外一篇中用Fragment和button實(shí)現(xiàn)了點(diǎn)擊切換Fragment的效果，比較簡(jiǎn)陋。這次改用ViewPager+TabLayout 實(shí)現(xiàn)聯(lián)動(dòng)的效果。

實(shí)現(xiàn)效果

ViewPager 多個(gè)頁(yè)面滑動(dòng)

TabLayout 和 ViewPager綁定，實(shí)現(xiàn)Fragment和標(biāo)簽綁定

TabLayout的自定義標(biāo)簽以及選中顏色改變

效果圖

效果圖

思路分析

ViewPager用來(lái)放Fragment，并且實(shí)現(xiàn)滑動(dòng)的效果。(原諒我最近才知道這個(gè)控件，所以才會(huì)有上一篇用Fragment+Button來(lái)實(shí)現(xiàn)切換。PS：經(jīng)常百度copy的后遺癥┗( T﹏T )┛)

TabLayout 用來(lái)放Fragment對(duì)應(yīng)標(biāo)題。標(biāo)題只是文字話(huà)，需要重寫(xiě)FragmentPagerAdapter的getPageTitle()方法來(lái)獲取標(biāo)題，如果要用圖標(biāo)或者復(fù)雜的標(biāo)題可以用TabLayout的setCustomView()將自定義控件放入Tab中。

通過(guò)TabLayout的setupWithViewPager()方法來(lái)實(shí)現(xiàn)TabLayout和ViewPager聯(lián)動(dòng)。

布局文件

activity_tab_layout_custom_title.xml

主界面布局文件包含一個(gè)ViewPager和一個(gè)TabLayout

xmlns:app="http://schemas.android.com/apk/res-auto"

android:background="#FFFFFF"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:id="@+id/contextViewPager"

android:layout_width="match_parent"

android:layout_height="0px"

android:layout_weight="1">

android:id="@+id/tabLayout"

android:layout_width="match_parent"

android:layout_height="58dp"

app:tabMinWidth="80dp"

app:tabIndicatorColor="#00000000"

android:background="#FBFBFB"

app:tabMode="scrollable"

android:orientation="horizontal">

cust_tab_title.xml

自定義Tab標(biāo)題的布局文件包含一個(gè)ImageView和一個(gè)TextView(圖標(biāo)和文本)。

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:gravity="center"

android:orientation="vertical">

android:id="@+id/tabIcon"

android:layout_width="32dp"

android:layout_height="32dp"/>

android:id="@+id/tabTitle"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

接下來(lái)是代碼

TabLayoutCustomTitleActivity.java

主Activity文件

import android.graphics.Color;

import android.support.design.widget.TabLayout;

import android.support.v4.app.Fragment;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.widget.ImageView;

import android.widget.TextView;

import java.util.ArrayList;

import java.util.List;

import csl.com.fa.adapter.TabLayoutCustomTitleAdapter;

import csl.com.fa.fragment.ContextFragment;

/**

* TabLaytou和ViewPager聯(lián)動(dòng)，自定義標(biāo)題(icon+文字)

*/

public class TabLayoutCustomTitleActivity extends AppCompatActivity {

private String[] titleTexts = new String[]{"微信", "通信錄", "發(fā)現(xiàn)", "我", "QQ", "好友", "黑名單", "特別關(guān)心", "朋友圈"};// 標(biāo)簽標(biāo)題數(shù)組

private int[] titleIcons = new int[]{R.drawable.weixin, R.drawable.tongxunlu, R.drawable.weixin,

R.drawable.tongxunlu, R.drawable.weixin, R.drawable.tongxunlu, R.drawable.weixin,

R.drawable.tongxunlu,R.drawable.weixin};// 標(biāo)簽圖標(biāo)數(shù)組

private TabLayout tabLayout;// tabLayout

private List fragmentList;// Fragment集合

private ViewPager viewPager;// ViewPager

private TabLayoutCustomTitleAdapter adapter;

private final int TAB_SELECT_COLOR = Color.argb(255,72,193,30);// tab選中狀態(tài)顏色

private final int TAB_UN_SELECT_COLOR = Color.argb(255,175,175,175);// tab非選中狀態(tài)顏色

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_tab_layout_custom_title);

// 初始化控件

init();

}

/**

* 初始化控件

*/

private void init() {

fragmentList = new ArrayList<>();

// 根據(jù)標(biāo)題的數(shù)量，動(dòng)態(tài)創(chuàng)建Fragment，并將其動(dòng)態(tài)加入Fragment集合

for (String title : titleTexts) {

// 聲明一個(gè)Fragment

ContextFragment contextFragment = new ContextFragment();

// 聲明一個(gè)Bundle用來(lái)初始化Fragment中TextView控件的文本信息

Bundle bundle = new Bundle();

bundle.putString("textValue", title);

// 將Bundle裝入Fragment

contextFragment.setArguments(bundle);

// 將Fragment加入Fragment集合

fragmentList.add(contextFragment);

}

// 將Fragment集合裝入適配器

adapter = new TabLayoutCustomTitleAdapter(getSupportFragmentManager(), fragmentList);

// 初始化ViewPager

viewPager = findViewById(R.id.contextViewPager);

// 將適配器綁定到ViewPager

viewPager.setAdapter(adapter);

// 默認(rèn)第一個(gè)頁(yè)面

viewPager.setCurrentItem(0);

// 初始化TabLayout

tabLayout = findViewById(R.id.tabLayout);

// 將TabLayout與ViewPager綁定，實(shí)現(xiàn)TabLayout與ViewPager聯(lián)動(dòng)

tabLayout.setupWithViewPager(viewPager);

// 自定義tab標(biāo)簽(這里主要是自定義控件，圖標(biāo)+標(biāo)題)

// 如果不需要自定義標(biāo)簽，只需要顯示文本，則可以直接通過(guò)FragmentPagerAdapter的getPageTitle()方法返回標(biāo)簽的值

setTabCustomView();

}

/**

* 自定義tab標(biāo)簽(這里主要是自定義控件，圖標(biāo)+標(biāo)題)

*/

private void setTabCustomView() {

// 遍歷tab標(biāo)簽頁(yè)標(biāo)題數(shù)組，自定義tab顯示

for (int i=0, len=titleTexts.length; i

// 自定義控件布局 cust_tab_title(icon+文本)

View v = LayoutInflater.from(this).inflate(R.layout.cust_tab_title, null);

// 設(shè)置文本信息和顏色

TextView textView = v.findViewById(R.id.tabTitle);

textView.setText(titleTexts[i]);

textView.setTextColor(TAB_UN_SELECT_COLOR);

// 設(shè)置圖片

ImageView imageView = v.findViewById(R.id.tabIcon);

imageView.setImageDrawable(getResources().getDrawable(titleIcons[i]));

imageView.setColorFilter(TAB_UN_SELECT_COLOR);

// 將自定義控件加入到tab中

tabLayout.getTabAt(i).setCustomView(v);

}

// 將第一個(gè)標(biāo)簽頁(yè)顏色調(diào)整為被選中的顏色

changeTabColor(tabLayout.getTabAt(0), TAB_SELECT_COLOR);

// 加入監(jiān)聽(tīng)

tabLayout.addOnTabSelectedListener(new TabLayout.BaseOnTabSelectedListener() {

@Override

public void onTabSelected(TabLayout.Tab tab) {

// 將tab調(diào)整為選中的顏色

changeTabColor(tab, TAB_SELECT_COLOR);

}

@Override

public void onTabUnselected(TabLayout.Tab tab) {

// 將tab調(diào)整為非選中的顏色

changeTabColor(tab, TAB_UN_SELECT_COLOR);

}

@Override

public void onTabReselected(TabLayout.Tab tab) {

}

});

}

/**

* 改變Tab控件的顏色

* @param tab

* @param color

*/

private void changeTabColor(TabLayout.Tab tab, int color) {

// 改變文本顏色

TextView textView = tab.getCustomView().findViewById(R.id.tabTitle);

textView.setTextColor(color);

// 改變圖標(biāo)顏色

ImageView imageView = tab.getCustomView().findViewById(R.id.tabIcon);

imageView.setColorFilter(color);

}

}

TabLayoutCustomTitleAdapter.java

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

public class TabLayoutCustomTitleAdapter extends FragmentPagerAdapter {

private List mFragmentList;

public TabLayoutCustomTitleAdapter(FragmentManager fragmentManager, List fragmentList) {

super(fragmentManager);

this.mFragmentList = fragmentList;

}

@Override

public Fragment getItem(int position) {

return mFragmentList.get(position);

}

@Override

public int getCount() {

return mFragmentList.size();

}

/**

* TabLayout通過(guò)該方法，獲取tab的標(biāo)題title

* @param position

* @return

*/

@Override

public CharSequence getPageTitle(int position) {

return mFragmentList.get(position).getArguments().getString("textValue");

}

}

總結(jié)

嗯，比上次做的那個(gè)好看多了，但是感覺(jué)這次寫(xiě)的說(shuō)明的比較不詳細(xì)，但是又不知道怎么寫(xiě)。。下次想到了再做補(bǔ)充吧。有不清楚的可以留言或者發(fā)我郵箱(466120367@qq.com)。

后續(xù)會(huì)把demo放到git上，以后會(huì)養(yǎng)成分享的好習(xí)慣，希望大家多多指教。

總結(jié)

以上是生活随笔為你收集整理的android tab 切换动画,Android之ViewPager+TabLayout组合实现导航条切换效果（微信和QQ底部多标签切换）...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。