前言
目前app常用的主界面大多类似如下界面所示：
GIF.gif
常用的利用fragment作为选项卡实现切换，这里介绍两种方法实现此效果：
1.FragmentManager+Fragment实现
2.ViewPager+FragmentPagerAdapter实现
下面接两种方式具体介绍
1.FragmentManager+Fragment实现点击切换
主要利用了Fragment在主内容界面对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都置为隐藏状态。
* 用于对Fragment执行操作的事务
*/
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]
此方法不能实现微信的滑动切换，只可以点击切换
2.ViewPager+FragmentPagerAdapter实现
效果如下：
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滑动。
两种方法都可以实现切换效果，需要注意的是第一种方法需要继承fradment第二种实现需要你的fragment继承v4包下的fragment，这是因为FragmentPagerAdapter是属性v4包下面，最后推荐使用后面一种方法来搭建我们常用的app主界面。
网友评论