/ / Fragment niepoprawnie zastępuje - android, fragmenty Androida, projektowanie materiałów, szuflada materiałów

Fragment niewłaściwie zastępujący - android, fragmenty androidów, material-design, materialdrawer

Zaimplementowałem MiniDrawer za pomocą MaterialDrawer autor: Mike Penz.

Działa poprawnie, ale kiedy próbuję zastąpić zawartość ramki innym fragmentem, treść zastępuje, ale stara treść pozostaje tam i oba elementy spoczywają na ekranie.

Dla lepszego zrozumienia możesz zobaczyć obraz (czerwone liczby nie są częścią zrzutu ekranu) poniżej

wprowadź opis obrazu tutaj

MainActivity.java:

package activity;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;

import com.danish.foveros.R;
import com.mikepenz.crossfader.Crossfader;
import com.mikepenz.crossfader.util.UIUtils;
import com.mikepenz.google_material_typeface_library.GoogleMaterial;
import com.mikepenz.materialdrawer.AccountHeader;
import com.mikepenz.materialdrawer.AccountHeaderBuilder;
import com.mikepenz.materialdrawer.Drawer;
import com.mikepenz.materialdrawer.DrawerBuilder;
import com.mikepenz.materialdrawer.MiniDrawer;
import com.mikepenz.materialdrawer.model.DividerDrawerItem;
import com.mikepenz.materialdrawer.model.PrimaryDrawerItem;
import com.mikepenz.materialdrawer.model.ProfileDrawerItem;
import com.mikepenz.materialdrawer.model.interfaces.IDrawerItem;
import com.mikepenz.materialdrawer.model.interfaces.IProfile;

import utils.CrossfadeWrapper;


public class MainActivity extends AppCompatActivity{
Toolbar toolbar;
private AccountHeader headerResult = null;
private Drawer result = null;
private MiniDrawer miniResult = null;
private Crossfader crossFader;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar=(Toolbar)findViewById(R.id.toolbar);
setTitle(R.string.app_name);
final IProfile profile = new ProfileDrawerItem().withName("MD Danish Ansari").withEmail("ansarid567@gmail.com").withIcon(R.drawable.my_profile);

headerResult=new AccountHeaderBuilder()
.withActivity(this)
.withHeaderBackground(R.drawable.header)
.withTranslucentStatusBar(false)
.addProfiles(profile)
.withSavedInstance(savedInstanceState)
.build();


DrawerBuilder builder =new DrawerBuilder()
.withActivity(this)
.withToolbar(toolbar)
.withTranslucentStatusBar(false)
.withAccountHeader(headerResult)
.addDrawerItems(
new PrimaryDrawerItem().withName(R.string.title_home).withIcon(GoogleMaterial.Icon.gmd_home).withIdentifier(1),
new PrimaryDrawerItem().withName(R.string.title_favourite).withIcon(GoogleMaterial.Icon.gmd_favorite).withIdentifier(2),
new PrimaryDrawerItem().withName(R.string.title_non_material).withIcon(GoogleMaterial.Icon.gmd_color_lens).withIdentifier(3),
new PrimaryDrawerItem().withName(R.string.title_web).withIcon(GoogleMaterial.Icon.gmd_web).withIdentifier(4),
new DividerDrawerItem(),
new PrimaryDrawerItem().withName(R.string.title_about).withIcon(GoogleMaterial.Icon.gmd_info).withIdentifier(5),
new PrimaryDrawerItem().withName(R.string.title_contact).withIcon(GoogleMaterial.Icon.gmd_contacts).withIdentifier(6)

)
.withOnDrawerItemClickListener(new Drawer.OnDrawerItemClickListener() {
@Override
public boolean onItemClick(View view, int position, IDrawerItem iDrawerItem) {
if(position==2)
{
Fragment fragment=new FavouriteFragment();
FragmentManager fragmentManager=getSupportFragmentManager();
FragmentTransaction fragmentTransaction=fragmentManager.beginTransaction();
fragmentTransaction.replace(R.id.content_frame,fragment);
fragmentTransaction.commit();
result.closeDrawer();
}
return miniResult.onItemClick(iDrawerItem);
}
})
.withSavedInstance(savedInstanceState);

result=builder.buildView();
miniResult=new MiniDrawer().withDrawer(result).withAccountHeader(headerResult).withInRTL(true);
//get the widths in px for the first and second panel
int firstWidth = (int) UIUtils.convertDpToPixel(300, this);
int secondWidth = (int) UIUtils.convertDpToPixel(72, this);

//create and build our crossfader (see the MiniDrawer is also builded in here, as the build method returns the view to be used in the crossfader)
crossFader = new Crossfader()
.withContent(findViewById(R.id.crossfade_content))
.withFirst(result.getSlider(), firstWidth)
.withSecond(miniResult.build(this), secondWidth)
.withSavedInstance(savedInstanceState)
.build();

//define the crossfader to be used with the miniDrawer. This is required to be able to automatically toggle open / close
miniResult.withCrossFader(new CrossfadeWrapper(crossFader));

//define a shadow (this is only for normal LTR layouts if you have a RTL app you need to define the other one
crossFader.getCrossFadeSlidingPaneLayout().setShadowResourceLeft(R.drawable.material_drawer_shadow_left);


}

}

activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
tools:ignore="UnusedAttribute" />

<FrameLayout
android:id="@+id/crossfade_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/toolbar">


<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="Hello World"
android:textSize="32sp" />
</FrameLayout>
</RelativeLayout>

Zapytaj, czy potrzebujesz więcej informacji. Każda pomoc jest mile widziana.

Odpowiedzi:

1 dla odpowiedzi № 1

Twój kod pokazuje, że masz FrameLayout który hostuje TextView. The FrameLayout jest używany dla Crossfader i będzie obszarem zawartości.

Kiedy zastępujesz obszar zawartości fragmentem, próbujesz zastąpić nieistniejący id. O ile widzę, nie ma content_frame w twoim układzie.

Gorąco polecam umieścić inny FrameLayout w obrębie crossfade_content który zostanie później zastąpiony fragmentem.

EDYTOWAĆ

Powinieneś stworzyć fragment_container w obrębie FrameLayout z identyfikatorem crossfade_content który nie ma elementów podrzędnych, a następnie wystarczy ustawić pierwszy fragment, a następnie można zastąpić ten fragment innym fragmentem.

Będziesz miał taki kod:

result = new Drawer()
.withActivity(this)
.withToolbar(mToolbar)
. withFireOnInitialOnClick(true)
.addDrawerItems(
new PrimaryDrawerItem().withName("FragmentA").withIdentifier(1),
new PrimaryDrawerItem().withName("FragmentB").withIdentifier(2)
)
.withOnDrawerItemClickListener(new Drawer.OnDrawerItemClickListener() {
@Override
public void onItemClick(View view, int position, IDrawerItem drawerItem) {
if(drawerItem != null) {
Fragment f = null;
switch(drawerItem.getIdentifier) {
case 1:
f = FragmentA.newInstance();
break;
case 2:
f = FragmentA.newInstance();

break;
}

if (drawerItem instanceof Nameable) {
mToolbar.setTitle(MainActivity.this.getString(((Nameable) drawerItem).getNameRes()));
}
}
}
}
}).build();

spowoduje to ustawienie pierwszego fragmentu podczas uruchamiania, ponieważ ustawiliśmy withFireOnInitialOnClick(true) który będzie strzelał do pierwszego wybranego fragmentu. a następnie zastępujesz go odpowiednim fragmentem dla nowego wybranego elementu. więc masz całą logikę fragmentów w onItemClick słuchacz