前言
目前app常用的主界面大多類似如下界面所示：
GIF.gif
常用的利用fragment作為選項卡實現(xiàn)切換嵌屎，這里介紹兩種方法實現(xiàn)此效果：
1.FragmentManager+Fragment實現(xiàn)
2.ViewPager+FragmentPagerAdapter實現(xiàn)
下面接兩種方式具體介紹
1.FragmentManager+Fragment實現(xiàn)點擊切換
主要利用了Fragment在主內(nèi)容界面對Fragment的add,hide等事務操作。
效果圖：
GIF.gif
activity代碼如下：
package com.twq.databindinghelper.module.fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.widget.RadioGroup;
import com.twq.databindinghelper.R;
/**
* 測試fragment
* Created by Administrator on 2018/3/15 0015.
*/
public class TestTabActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {
private FragmentManager mFragmentManager;
private TabOneFragment tabOneFragment = null;
private TabOneFragment tabTwoFragment = null;
private TabOneFragment tabThreeFragment = null;
public static void launch(Context context) {
Intent intent = new Intent(context, TestTabActivity.class);
context.startActivity(intent);
}
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_test_tab);
RadioGroup radio_bottom = findViewById(R.id.radio_bottom);
mFragmentManager = getFragmentManager();
setTabSelection(0);
radio_bottom.setOnCheckedChangeListener(this);
}
/**
* 將所有的Fragment都置為隱藏狀態(tài)恍涂。
* 用于對Fragment執(zhí)行操作的事務
*/
private void hideFragments(FragmentTransaction transaction) {
if (tabOneFragment != null) {
transaction.hide(tabOneFragment);
}
if (tabTwoFragment != null) {
transaction.hide(tabTwoFragment);
}
if (tabThreeFragment != null) {
transaction.hide(tabThreeFragment);
}
}
private void setTabSelection(int index) {
// 開啟Fragment事務
FragmentTransaction transaction = mFragmentManager.beginTransaction();
hideFragments(transaction);
switch (index) {
case 0:
if (tabOneFragment == null) {
tabOneFragment = TabOneFragment.newInstance("我是One");
transaction.add(R.id.id_content, tabOneFragment);
} else {
transaction.show(tabOneFragment);
}
break;
case 1:
if (tabTwoFragment == null) {
tabTwoFragment = TabOneFragment.newInstance("我是Two");
transaction.add(R.id.id_content, tabTwoFragment);
} else {
transaction.show(tabTwoFragment);
}
break;
case 2:
if (tabThreeFragment == null) {
tabThreeFragment = TabOneFragment.newInstance("我是Three");
transaction.add(R.id.id_content, tabThreeFragment);
} else {
transaction.show(tabThreeFragment);
}
break;
}
transaction.commit();
}
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.radio_home:
setTabSelection(0);
break;
case R.id.radio_center:
setTabSelection(1);
break;
case R.id.radio_manager:
setTabSelection(2);
break;
}
}
}
這里利用RadioGroup作為底部布局宝惰，里面放置三個radiobutton這樣比一般的textview加imageview方便，背景文字顏色切換可以直接在xml里面配置好再沧，需要注意的是每次點擊都要開啟一個新的事務FragmentTransaction尼夺，不然會報錯 [Java.lang.IllegalStateException: commit already called]
此方法不能實現(xiàn)微信的滑動切換，只可以點擊切換
2.ViewPager+FragmentPagerAdapter實現(xiàn)
效果如下：
GIF.gif
主要代碼：
package com.twq.databindinghelper.module.fragment;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.widget.RadioButton;
import com.twq.databindinghelper.R;
import java.util.ArrayList;
import java.util.List;
/**
* Created by Administrator on 2018/3/15 0015.
*/
public class TestTabTwoActivity extends AppCompatActivity {
public static void launch(Context context) {
Intent intent = new Intent(context, TestTabTwoActivity.class);
context.startActivity(intent);
}
private RadioButton radio_home, radio_center, radio_manager;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_test_tab_two);
ViewPager mViewPager = findViewById(R.id.viewPager);
radio_home = findViewById(R.id.radio_home);
radio_center = findViewById(R.id.radio_center);
radio_manager = findViewById(R.id.radio_manager);
List<Fragment> list = new ArrayList<>();
list.add(TabTwoFragment.newInstance("我是1"));
list.add(TabTwoFragment.newInstance("我是2"));
list.add(TabTwoFragment.newInstance("我是3"));
mViewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager(), list));
mViewPager.setOffscreenPageLimit(3);
mViewPager.setCurrentItem(0);
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
reSetStatus();
switch (position) {
case 0:
radio_home.setChecked(true);
break;
case 1:
radio_center.setChecked(true);
break;
case 2:
radio_manager.setChecked(true);
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void reSetStatus() {
radio_home.setChecked(false);
radio_center.setChecked(false);
radio_manager.setChecked(false);
}
private class ViewPagerAdapter extends FragmentPagerAdapter {
private List<android.support.v4.app.Fragment> fragments;
public ViewPagerAdapter(FragmentManager fm, List<android.support.v4.app.Fragment> fragments) {
super(fm);
this.fragments = fragments;
}
@Override
public android.support.v4.app.Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments == null ? 0 : fragments.size();
}
}
}
這樣既可以點擊又可以滑動切換炒瘸，如果只想點擊切換可以重寫viewpager的onInterceptTouchEvent禁止viewpager滑動淤堵。
兩種方法都可以實現(xiàn)切換效果，需要注意的是第一種方法需要繼承fradment第二種實現(xiàn)需要你的fragment繼承v4包下的fragment顷扩，這是因為FragmentPagerAdapter是屬性v4包下面拐邪，最后推薦使用后面一種方法來搭建我們常用的app主界面。
