替换片段会导致包含在framelayout中的额外视图层次结构

Question

我目前正在开发一个互相拥有两个片段的应用。下部片段是导航轮，因此一个永远不会改变，但当用户更改下部片段上的模式时，上部片段会发生变化。我遇到的问题是，当我使用滚轮更改模式时，新的视图会添加到层次结构中，但旧的视图不会被删除，新添加的视图也包含在我未在任何地方定义的FrameLayout中。 / p>

这是我在onCreate of my activity中的代码

RandomActivity.java

@Override
public void onCreate(Bundle savedInstanceState) {           
    super.onCreate(savedInstanceState);

    setContentView(R.layout.root);

    fragmentManager = getSupportFragmentManager();
    fragmentTransaction = fragmentManager.beginTransaction();       
    modeFragment = new LottoModeFragment();
    wheelFragment = new WheelFragment();        
    fragmentTransaction.add(R.id.mode_view, modeFragment);
    fragmentTransaction.add(R.id.wheel_view, wheelFragment);        
    fragmentTransaction.commit();
}

这是我用来切换片段的代码

RandomActivity.java

private void switchFragments(ModeFragment fragment){
    fragmentManager = getSupportFragmentManager();
    fragmentTransaction = fragmentManager.beginTransaction();
    fragmentTransaction.replace(R.id.mode_view, fragment);
    fragmentTransaction.commit();   
}

这是根视图，其中声明了两个片段的两个占位符

的ROOT.xml

<org.random.wheel.RootView
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/root"
  android:contentDescription="@string/root_desc"    
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical"
  android:background="@color/root_background">

  <FrameLayout 
      android:id="@+id/mode_view"
      android:contentDescription="@string/mode_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent"/>

  <FrameLayout 
      android:id="@+id/wheel_view"
      android:contentDescription="@string/wheel_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent"/>    
</org.random.wheel.RootView>

在我的片段中（我希望最终有很多不同的模式，但我目前只有两个模式）我在onCreateView中这样做

LottoModeFragment

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    modeView = (LottoModeView) inflater.inflate(R.layout.lotto_mode, container, false);
    return modeView;
}

为了更好地说明正在发生的事情，请查看hierachyviewer

中的这些屏幕截图

这显然很烦人，而不是它应该如何工作。如何摆脱作为添加视图的父级的冗余FrameLayout？我如何让Android实际上用另一个片段替换一个片段而不是仅添加它？

类似的问题似乎只发生在xml中声明片段时，但正如你所看到的，我的是用java代码制作的。例如here

另外。我正在使用支持包。

提前致谢。

修改

根据要求包含ModeView.java：

ModeView.java

public class ModeView extends RelativeLayout{

private RandomActivity activity;
private AppDisplaySizeInterface appDisplay;

public ModeView(Context context, AttributeSet attrs) {      
    super(context, attrs);  
    activity = (RandomActivity) getContext();
}

private void applyRoundedCorners(){
    int width = (int) activity.getAppDisplaySizes().getModeWidth();
    int height = (int) activity.getAppDisplaySizes().getModeHeight();               
    Bitmap original = Conversion.drawableToBitmap(this.getBackground(), width, height);
    float radius = Float.parseFloat(getResources().getString(R.string.rounded_corner_radius));
    RoundedCorners rounded = new RoundedCorners(original, radius, 0);
    this.setBackgroundDrawable(rounded);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    appDisplay = activity.getAppDisplaySizes();     
    super.onMeasure(MeasureSpec.makeMeasureSpec((int) appDisplay.getModeWidth(), MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec((int) appDisplay.getModeHeight(), MeasureSpec.EXACTLY));
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {      
    super.onLayout(changed, l, t, r, b);        
    applyRoundedCorners();      
}

@Override
protected void onDraw(Canvas canvas) {      
    super.onDraw(canvas);
}

}