實(shí)現(xiàn)方式
實(shí)現(xiàn)的方式有很多種 這里總結(jié)最常見的幾種方式，以后再添加其他的。
viewPager + RadioGroup
viewPager + FragmentTabHost
viewpager +TabLayout
viewPager+RadioGroup
感覺(jué)這是最簡(jiǎn)單的一個(gè)了，我也就不貼代碼 說(shuō)說(shuō)我理解的思路吧
通過(guò)給pager 和RadioGroup 添加監(jiān)聽，監(jiān)聽兩個(gè)控件的變化 實(shí)現(xiàn)聯(lián)動(dòng)
當(dāng)viewPager的顯示pager改變就會(huì)觸發(fā)監(jiān)聽 ，在監(jiān)聽中選中對(duì)應(yīng)的RadioButton即可
當(dāng)RadioGroup發(fā)生 選中改變時(shí)也會(huì)觸發(fā)監(jiān)聽 ，在選中改變后 設(shè)置顯示對(duì)應(yīng)的pager即可
FragmentTabHost +viewpager
這個(gè)方式 跟上面那個(gè)方式差不多 都是通過(guò) 監(jiān)聽 實(shí)現(xiàn)聯(lián)動(dòng)
如果只使用FragmentTabHost 只能實(shí)現(xiàn) 點(diǎn)擊tab切換 頁(yè)面的效果 不能實(shí)現(xiàn)左右滑動(dòng) 而 結(jié)合viewPager 剛好實(shí)現(xiàn)這一效果
先來(lái)看看FragmentTabHost經(jīng)常用的方法
- setup() 在使用addTab之前調(diào)用 設(shè)置必要的數(shù)據(jù) 如 FragmentManager,Fragment的容器id - addTab() 添加標(biāo)簽 - newTabSpec() 新建 tab - setCurrentTab() 設(shè)置當(dāng)前顯示的標(biāo)簽 - setOnChangeTabListtener 設(shè)置tab選中改變監(jiān)聽 - tabHost.getTabWidget().setDividerDrawable(null); //去除間隔線 - Tab的常用方法： - setIndicator() 可以設(shè)置view 和 字符串main布局<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/activity_tab_pager"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context="com.skymxc.demo.fragment.TabPagerActivity"><android.support.v4.view.ViewPagerandroid:id="@+id/pager"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"></android.support.v4.view.ViewPager><android.support.v4.app.FragmentTabHostandroid:id="@+id/tab_host"android:layout_width="match_parent"android:layout_height="wrap_content"></android.support.v4.app.FragmentTabHost></LinearLayout>
Framgent 簡(jiǎn)單起見 就不寫布局文件了 其他的Fragment 跟這個(gè)類似
public class DiscoverFragment extends Fragment {@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {TextView textView = new TextView(getActivity());textView.setText("發(fā)現(xiàn)");textView.setGravity(Gravity.CENTER);return textView;}}tab 的布局 圖片在上 文本在下 比較簡(jiǎn)單
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical" android:layout_width="match_parent"android:layout_height="match_parent"><ImageViewandroid:id="@+id/icon"android:layout_width="30dp"android:layout_height="30dp"android:layout_gravity="center"/><TextViewandroid:id="@+id/title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="@color/selector_font"android:text="發(fā)現(xiàn)"android:layout_gravity="center"/></LinearLayout>
selector 基本類似 這里貼一個(gè)
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_selected="true" android:drawable="@mipmap/cb_icon_discover_selected"/><item android:drawable="@mipmap/cb_icon_discover_normal"/></selector>
java 代碼
初始化 TabHost
private void initTabHost() {tabHost.setup(this,getSupportFragmentManager(), R.id.pager);tabHost.getTabWidget().setDividerDrawable(null);tabHost.addTab(tabHost.newTabSpec("discover").setIndicator(createView(R.drawable.selector_bg,"發(fā)現(xiàn)")), DiscoverFragment.class,null);tabHost.addTab(tabHost.newTabSpec("attach").setIndicator(createView(R.drawable.selector_bg_attach,"關(guān)注")), AttachFragment.class,null);tabHost.addTab(tabHost.newTabSpec("message").setIndicator(createView(R.drawable.selector_bg_message,"消息")), MsgFragment.class,null);tabHost.addTab(tabHost.newTabSpec("info").setIndicator(createView(R.drawable.selector_bg_info,"我的")), ContactFragment.class,null);}初始化 pager 并綁定適配器
/*** 初始化 pager 綁定適配器*/private void initPager() {fragments = new ArrayList<>();fragments.add(new DiscoverFragment());fragments.add(new AttachFragment());fragments.add(new MsgFragment());fragments.add(new ContactFragment());FragmentAdapter adapter = new FragmentAdapter(getSupportFragmentManager(),fragments);pager.setAdapter(adapter);}分別給 TabHost 和pager 添加監(jiān)聽 實(shí)現(xiàn)聯(lián)動(dòng)
/*** 為TabHost和viewPager 添加監(jiān)聽 讓其聯(lián)動(dòng)*/private void bindTabAndPager() {tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {/*** tab改變后* @param tabId 當(dāng)前tab的tag*/@Overridepublic void onTabChanged(String tabId) {log("vonTabChanged:"+tabId);int position = tabHost.getCurrentTab();pager.setCurrentItem(position,true);}});pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {/*** 頁(yè)面滑動(dòng) 觸發(fā)* @param position 當(dāng)前顯得第一個(gè)頁(yè)面的索引，當(dāng)滑動(dòng)出現(xiàn)時(shí)屏幕就會(huì)顯示兩個(gè)pager， 向右滑 position為當(dāng)前-1（左邊的pager就顯示出來(lái)了），向左滑position為當(dāng)前（右面就顯出來(lái)了），* @param positionOffset 0-1之間 position的偏移量 從原始位置的偏移量* @param positionOffsetPixels 從position偏移的像素值 從原始位置的便宜像素*/@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {log("onPageScrolled=============position:"+position+"====positionOffset:"+positionOffset+"====positionOffsetPixels:"+positionOffsetPixels);}/*** 頁(yè)面選中后* @param position 當(dāng)前頁(yè)面的index*/@Overridepublic void onPageSelected(int position) {tabHost.setCurrentTab(position);log("onPageSelected==========:position:"+position);}/*** 頁(yè)面滑動(dòng)狀態(tài)改變時(shí)觸發(fā)* @param state 當(dāng)前滑動(dòng)狀態(tài) 共三個(gè)狀態(tài)值*/@Overridepublic void onPageScrollStateChanged(int state) {String stateStr="";switch (state){case ViewPager.SCROLL_STATE_DRAGGING:stateStr="正在拖動(dòng)";break;case ViewPager.SCROLL_STATE_SETTLING:stateStr="正在去往最終位置 即將到達(dá)最終位置";break;case ViewPager.SCROLL_STATE_IDLE:stateStr="滑動(dòng)停止，當(dāng)前頁(yè)面充滿屏幕";break;}log("onPageScrollStateChanged========stateCode:"+state+"====state:"+stateStr);}});}完整代碼
public class TabPagerActivity extends AppCompatActivity {private static final String TAG ="TabPagerActivity";private FragmentTabHost tabHost;private ViewPager pager;private List<Fragment> fragments;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_tab_pager);tabHost = (FragmentTabHost) findViewById(R.id.tab_host);pager = (ViewPager) findViewById(R.id.pager);//初始化TabHostinitTabHost();//初始化pagerinitPager();//添加監(jiān)聽關(guān)聯(lián)TabHost和viewPagerbindTabAndPager();}/*** 為TabHost和viewPager 添加監(jiān)聽 讓其聯(lián)動(dòng)*/private void bindTabAndPager() {tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {/*** tab改變后* @param tabId 當(dāng)前tab的tag*/@Overridepublic void onTabChanged(String tabId) {log("vonTabChanged:"+tabId);int position = tabHost.getCurrentTab();pager.setCurrentItem(position,true);}});pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {/*** 頁(yè)面滑動(dòng) 觸發(fā)* @param position 當(dāng)前顯得第一個(gè)頁(yè)面的索引，當(dāng)滑動(dòng)出現(xiàn)時(shí)屏幕就會(huì)顯示兩個(gè)pager， 向右滑 position為當(dāng)前-1（左邊的pager就顯示出來(lái)了），向左滑position為當(dāng)前（右面就顯出來(lái)了），* @param positionOffset 0-1之間 position的偏移量 從原始位置的偏移量* @param positionOffsetPixels 從position偏移的像素值 從原始位置的便宜像素*/@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {log("onPageScrolled=============position:"+position+"====positionOffset:"+positionOffset+"====positionOffsetPixels:"+positionOffsetPixels);}/*** 頁(yè)面選中后* @param position 當(dāng)前頁(yè)面的index*/@Overridepublic void onPageSelected(int position) {tabHost.setCurrentTab(position);log("onPageSelected==========:position:"+position);}/*** 頁(yè)面滑動(dòng)狀態(tài)改變時(shí)觸發(fā)* @param state 當(dāng)前滑動(dòng)狀態(tài) 共三個(gè)狀態(tài)值*/@Overridepublic void onPageScrollStateChanged(int state) {String stateStr="";switch (state){case ViewPager.SCROLL_STATE_DRAGGING:stateStr="正在拖動(dòng)";break;case ViewPager.SCROLL_STATE_SETTLING:stateStr="正在去往最終位置 即將到達(dá)最終位置";break;case ViewPager.SCROLL_STATE_IDLE:stateStr="滑動(dòng)停止，當(dāng)前頁(yè)面充滿屏幕";break;}log("onPageScrollStateChanged========stateCode:"+state+"====state:"+stateStr);}});}/*** 初始化 pager 綁定適配器*/private void initPager() {fragments = new ArrayList<>();fragments.add(new DiscoverFragment());fragments.add(new AttachFragment());fragments.add(new MsgFragment());fragments.add(new ContactFragment());FragmentAdapter adapter = new FragmentAdapter(getSupportFragmentManager(),fragments);pager.setAdapter(adapter);}/*** 初始化 TabHost*/private void initTabHost() {tabHost.setup(this,getSupportFragmentManager(), R.id.pager);tabHost.getTabWidget().setDividerDrawable(null);tabHost.addTab(tabHost.newTabSpec("discover").setIndicator(createView(R.drawable.selector_bg,"發(fā)現(xiàn)")), DiscoverFragment.class,null);tabHost.addTab(tabHost.newTabSpec("attach").setIndicator(createView(R.drawable.selector_bg_attach,"關(guān)注")), AttachFragment.class,null);tabHost.addTab(tabHost.newTabSpec("message").setIndicator(createView(R.drawable.selector_bg_message,"消息")), MsgFragment.class,null);tabHost.addTab(tabHost.newTabSpec("info").setIndicator(createView(R.drawable.selector_bg_info,"我的")), ContactFragment.class,null);}/*** 返回view* @param icon* @param tab* @return*/private View createView(int icon,String tab){View view = getLayoutInflater().inflate(R.layout.fragment_tab_discover,null);ImageView imageView = (ImageView) view.findViewById(R.id.icon);TextView title = (TextView) view.findViewById(R.id.title);imageView.setImageResource(icon);title.setText(tab);return view;}private void log(String log){Log.e(TAG,"="+log+"=");}}效果如下：
viewpager +TabLayout
TabLayout 輸入 design的擴(kuò)展包 使用之前必須得先導(dǎo)入擴(kuò)展包
tabLayout 可以自動(dòng)去關(guān)聯(lián) viewPager 只需為tabLayout 指定關(guān)聯(lián)的viewPager就可以了
這樣是方便了很多，但是也有缺點(diǎn)，在自動(dòng)關(guān)聯(lián)之后 tabLayout會(huì)自動(dòng)去讀取 viewPager的title，想使用自定的view當(dāng)做tab就不可能了
導(dǎo)入 design 擴(kuò)展包 并排在v7上面
布局 這里使用了兩個(gè)TabLayout 分別實(shí)現(xiàn) 自動(dòng)關(guān)聯(lián) 和 手動(dòng)關(guān)聯(lián)
<?xml version="1.0" encoding="utf-8"?><LinearLayout 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:id="@+id/activity_tab_layout"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context="com.skymxc.demo.fragment.TabLayoutActivity"><!-- 使用自動(dòng)關(guān)聯(lián)--><android.support.design.widget.TabLayoutandroid:id="@+id/tab_layout"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabMode="fixed"app:tabSelectedTextColor="#f0f"app:tabIndicatorColor="#f0f"></android.support.design.widget.TabLayout><android.support.v4.view.ViewPagerandroid:id="@+id/container"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"></android.support.v4.view.ViewPager><!--通過(guò)監(jiān)聽去關(guān)聯(lián)--><android.support.design.widget.TabLayoutandroid:id="@+id/tab_layout_menu"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabMode="fixed"app:tabSelectedTextColor="#ff0"app:tabIndicatorColor="#ff0"></android.support.design.widget.TabLayout></LinearLayout>
初始化 自動(dòng)關(guān)聯(lián)的tab 并和viewPager綁定
private void initTabLayoutAndPager() {//關(guān)聯(lián) viewPager 使用關(guān)聯(lián)后 tab就會(huì)自動(dòng)去獲取pager的title，使用addTab就會(huì)無(wú)效tabLayout.setupWithViewPager(pager);fragments = new ArrayList<>();fragments.add(new DiscoverFragment());fragments.add(new AttachFragment());fragments.add(new MsgFragment());fragments.add(new ContactFragment());adapter = new FragmentAdapter(getSupportFragmentManager(),fragments);pager.setAdapter(adapter);}tab的布局和上面是一樣的。
為TabLayout 添加view 自動(dòng)關(guān)聯(lián)添加也沒(méi)用
tabLayoutMenu.addTab(tabLayoutMenu.newTab().setCustomView(createView(R.drawable.selector_bg,"發(fā)現(xiàn)")));tabLayoutMenu.addTab(tabLayoutMenu.newTab().setCustomView(createView(R.drawable.selector_bg_attach,"關(guān)注")));tabLayoutMenu.addTab(tabLayoutMenu.newTab().setCustomView(createView(R.drawable.selector_bg_message,"消息")));tabLayoutMenu.addTab(tabLayoutMenu.newTab().setCustomView(createView(R.drawable.selector_bg_info,"我的")));tabLayoutMenu.setSelectedTabIndicatorHeight(0);//去除指示器
設(shè)置 viewPager的監(jiān)聽和 TabLayout的監(jiān)聽 實(shí)現(xiàn)聯(lián)動(dòng)
tabLayoutMenu.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {/*** 選中tab后觸發(fā)* @param tab 選中的tab*/@Overridepublic void onTabSelected(TabLayout.Tab tab) {//與pager 關(guān)聯(lián)pager.setCurrentItem(tab.getPosition(),true);}/*** 退出選中狀態(tài)時(shí)觸發(fā)* @param tab 退出選中的tab*/@Overridepublic void onTabUnselected(TabLayout.Tab tab) {}/*** 重復(fù)選擇時(shí)觸發(fā)* @param tab 被 選擇的tab*/@Overridepublic void onTabReselected(TabLayout.Tab tab) {}});pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {//關(guān)聯(lián) TabLayouttabLayoutMenu.getTabAt(position).select();}@Overridepublic void onPageScrollStateChanged(int state) {}});完整代碼
package com.skymxc.demo.fragment;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.View;import android.widget.ImageView;import android.widget.TextView;import com.skymxc.demo.fragment.adapter.FragmentAdapter;import com.skymxc.demo.fragment.fragment.AttachFragment;import com.skymxc.demo.fragment.fragment.ContactFragment;import com.skymxc.demo.fragment.fragment.DiscoverFragment;import com.skymxc.demo.fragment.fragment.MsgFragment;import java.util.ArrayList;import java.util.List;public class TabLayoutActivity extends AppCompatActivity {private TabLayout tabLayout;private ViewPager pager;private TabLayout tabLayoutMenu;private FragmentAdapter adapter ;private List<Fragment> fragments;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_tab_layout);tabLayout = (TabLayout) findViewById(R.id.tab_layout);pager = (ViewPager) findViewById(R.id.container);tabLayoutMenu = (TabLayout) findViewById(R.id.tab_layout_menu);initTabLayoutAndPager();//想使用自己的布局就得 通過(guò) 監(jiān)聽進(jìn)行關(guān)聯(lián)bindPagerAndTab();}private void bindPagerAndTab() {tabLayoutMenu.addTab(tabLayoutMenu.newTab().setCustomView(createView(R.drawable.selector_bg,"發(fā)現(xiàn)")));tabLayoutMenu.addTab(tabLayoutMenu.newTab().setCustomView(createView(R.drawable.selector_bg_attach,"關(guān)注")));tabLayoutMenu.addTab(tabLayoutMenu.newTab().setCustomView(createView(R.drawable.selector_bg_message,"消息")));tabLayoutMenu.addTab(tabLayoutMenu.newTab().setCustomView(createView(R.drawable.selector_bg_info,"我的")));tabLayoutMenu.setSelectedTabIndicatorHeight(0);//去除指示器tabLayoutMenu.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {/*** 選中tab后觸發(fā)* @param tab 選中的tab*/@Overridepublic void onTabSelected(TabLayout.Tab tab) {//與pager 關(guān)聯(lián)pager.setCurrentItem(tab.getPosition(),true);}/*** 退出選中狀態(tài)時(shí)觸發(fā)* @param tab 退出選中的tab*/@Overridepublic void onTabUnselected(TabLayout.Tab tab) {}/*** 重復(fù)選擇時(shí)觸發(fā)* @param tab 被 選擇的tab*/@Overridepublic void onTabReselected(TabLayout.Tab tab) {}});pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {//關(guān)聯(lián) TabLayouttabLayoutMenu.getTabAt(position).select();}@Overridepublic void onPageScrollStateChanged(int state) {}});}private void initTabLayoutAndPager() {//關(guān)聯(lián) viewPager 使用關(guān)聯(lián)后 tab就會(huì)自動(dòng)去獲取pager的title，使用addTab就會(huì)無(wú)效tabLayout.setupWithViewPager(pager);fragments = new ArrayList<>();fragments.add(new DiscoverFragment());fragments.add(new AttachFragment());fragments.add(new MsgFragment());fragments.add(new ContactFragment());adapter = new FragmentAdapter(getSupportFragmentManager(),fragments);pager.setAdapter(adapter);}private View createView(int icon, String tab){View view = getLayoutInflater().inflate(R.layout.fragment_tab_discover,null);ImageView imageView = (ImageView) view.findViewById(R.id.icon);TextView title = (TextView) view.findViewById(R.id.title);imageView.setImageResource(icon);title.setText(tab);return view;}}效果圖
這里貼一下 viewPager的適配器
public class FragmentAdapter extends FragmentPagerAdapter {List<Fragment> fragments ;private String[] titles = new String[]{"發(fā)現(xiàn)","關(guān)注","消息","我的"};public FragmentAdapter(FragmentManager fm,List<Fragment> fragments) {super(fm);this.fragments =fragments;}@Overridepublic Fragment getItem(int position) {return fragments.get(position);}@Overridepublic int getCount() {return fragments ==null ?0:fragments.size();}@Overridepublic CharSequence getPageTitle(int position) {return titles[position];}}目前就總結(jié)了這幾種方式 想到別的方式 再總結(jié)
關(guān)于這個(gè) Demo的github ：https://github.com/sky-mxc/AndroidDemo/tree/master/fragment
以上所示是小編給大家介紹的Android開發(fā)之微信底部菜單欄實(shí)現(xiàn)的幾種方法匯總，希望對(duì)大家有所幫助！
新聞熱點(diǎn)
疑難解答
圖片精選
