android tab 切换动画,Android之ViewPager+TabLayout组合实现导航条切换效果（微信和QQ底部多标签切换）...
前言
之前在另外一篇中用Fragment和button實現了點擊切換Fragment的效果，比較簡陋。這次改用ViewPager+TabLayout 實現聯動的效果。
實現效果
ViewPager 多個頁面滑動
TabLayout 和 ViewPager綁定，實現Fragment和標簽綁定
TabLayout的自定義標簽以及選中顏色改變
效果圖
效果圖
思路分析
ViewPager用來放Fragment，并且實現滑動的效果。(原諒我最近才知道這個控件，所以才會有上一篇用Fragment+Button來實現切換。PS：經常百度copy的后遺癥┗( T﹏T )┛)
TabLayout 用來放Fragment對應標題。標題只是文字話，需要重寫FragmentPagerAdapter的getPageTitle()方法來獲取標題，如果要用圖標或者復雜的標題可以用TabLayout的setCustomView()將自定義控件放入Tab中。
通過TabLayout的setupWithViewPager()方法來實現TabLayout和ViewPager聯動。
布局文件
activity_tab_layout_custom_title.xml
主界面布局文件包含一個ViewPager和一個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標題的布局文件包含一個ImageView和一個TextView(圖標和文本)。
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"/>
接下來是代碼
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聯動，自定義標題(icon+文字)
*/
public class TabLayoutCustomTitleActivity extends AppCompatActivity {
private String[] titleTexts = new String[]{"微信", "通信錄", "發現", "我", "QQ", "好友", "黑名單", "特別關心", "朋友圈"};// 標簽標題數組
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};// 標簽圖標數組
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選中狀態顏色
private final int TAB_UN_SELECT_COLOR = Color.argb(255,175,175,175);// tab非選中狀態顏色
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_layout_custom_title);
// 初始化控件
init();
}
/**
* 初始化控件
*/
private void init() {
fragmentList = new ArrayList<>();
// 根據標題的數量，動態創建Fragment，并將其動態加入Fragment集合
for (String title : titleTexts) {
// 聲明一個Fragment
ContextFragment contextFragment = new ContextFragment();
// 聲明一個Bundle用來初始化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);
// 默認第一個頁面
viewPager.setCurrentItem(0);
// 初始化TabLayout
tabLayout = findViewById(R.id.tabLayout);
// 將TabLayout與ViewPager綁定，實現TabLayout與ViewPager聯動
tabLayout.setupWithViewPager(viewPager);
// 自定義tab標簽(這里主要是自定義控件，圖標+標題)
// 如果不需要自定義標簽，只需要顯示文本，則可以直接通過FragmentPagerAdapter的getPageTitle()方法返回標簽的值
setTabCustomView();
}
/**
* 自定義tab標簽(這里主要是自定義控件，圖標+標題)
*/
private void setTabCustomView() {
// 遍歷tab標簽頁標題數組，自定義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);
// 設置文本信息和顏色
TextView textView = v.findViewById(R.id.tabTitle);
textView.setText(titleTexts[i]);
textView.setTextColor(TAB_UN_SELECT_COLOR);
// 設置圖片
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);
}
// 將第一個標簽頁顏色調整為被選中的顏色
changeTabColor(tabLayout.getTabAt(0), TAB_SELECT_COLOR);
// 加入監聽
tabLayout.addOnTabSelectedListener(new TabLayout.BaseOnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
// 將tab調整為選中的顏色
changeTabColor(tab, TAB_SELECT_COLOR);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
// 將tab調整為非選中的顏色
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);
// 改變圖標顏色
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通過該方法，獲取tab的標題title
* @param position
* @return
*/
@Override
public CharSequence getPageTitle(int position) {
return mFragmentList.get(position).getArguments().getString("textValue");
}
}
總結
嗯，比上次做的那個好看多了，但是感覺這次寫的說明的比較不詳細，但是又不知道怎么寫。。下次想到了再做補充吧。有不清楚的可以留言或者發我郵箱(466120367@qq.com)。
后續會把demo放到git上，以后會養成分享的好習慣，希望大家多多指教。
總結
以上是生活随笔為你收集整理的android tab 切换动画,Android之ViewPager+TabLayout组合实现导航条切换效果（微信和QQ底部多标签切换）...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java 1m_Java编程测试1M内存
- 下一篇： android studio黄油刀依赖,