Comment activer ou créer une mini variante du guide de conception des matériaux pour Android.support.v4.widget.DrawerLayout?
Comment activer la "mini variante" du Guide de conception des matériaux - afin que seules les icônes du tiroir soient affichées dans son état fermé?
En tant que un projet test simple pour ma question, j’ai pris le bien connu Navigation Drawer Example de Google - puis j’ai ajouté le second tiroir à droite et les icônes des entrées ListView des deux côtés:
Veuillez indiquer comment activer (ou peut-être simuler?) La "mini variante Drawer" - afin que seuls les symboles musicaux soient visibles sur le côté droit de la capture d'écran ci-dessus.
Voici mon fichier de mise en page activity_main.xml :
<Android.support.v4.widget.DrawerLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:id="@+id/drawer_layout"
Android:layout_width="match_parent"
Android:layout_height="match_parent">
<LinearLayout
Android:orientation="vertical"
Android:layout_width="match_parent"
Android:layout_height="match_parent">
<Android.support.v7.widget.Toolbar
xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:id="@+id/toolbar"
Android:layout_width="match_parent"
Android:layout_height="wrap_content">
<ImageView
Android:src="@drawable/ic_music_note_black_24dp"
Android:onClick="openActions"
Android:layout_gravity="right"
Android:padding="16dp"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content" />
</Android.support.v7.widget.Toolbar>
<FrameLayout
Android:id="@+id/content_frame"
Android:layout_width="match_parent"
Android:layout_height="match_parent" />
</LinearLayout>
<ListView
Android:id="@+id/left_drawer"
Android:layout_width="240dp"
Android:layout_height="match_parent"
Android:layout_gravity="start"
Android:choiceMode="singleChoice" />
<ListView
Android:id="@+id/right_drawer"
Android:layout_width="160dp"
Android:layout_height="match_parent"
Android:layout_gravity="end"
Android:choiceMode="singleChoice" />
</Android.support.v4.widget.DrawerLayout>
Et le MainActivity.Java l’utiliser:
public class MainActivity extends AppCompatActivity {
private Toolbar mToolbar;
private DrawerLayout mDrawerLayout;
private ListView mDrawerList;
private ListView mActionList;
private ActionBarDrawerToggle mDrawerToggle;
private String[] mPlanetTitles;
private String[] mActions;
private int[] mIcons;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mPlanetTitles = getResources().getStringArray(R.array.planets_array);
mActions = getResources().getStringArray(R.array.music_actions);
TypedArray ta = getResources().obtainTypedArray(R.array.music_icons);
mIcons = new int[ta.length()];
for (int i = 0; i < mIcons.length; i++)
mIcons[i] = ta.getResourceId(i, R.drawable.ic_menu_black_24dp);
ta.recycle();
mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerList = (ListView) findViewById(R.id.left_drawer);
mActionList = (ListView) findViewById(R.id.right_drawer);
mDrawerList.setAdapter(new ArrayAdapter<String>(this,
R.layout.drawer_list_item, mPlanetTitles) {
@Override
public View getView(int position, View convertView, ViewGroup parent) {
TextView view = (TextView) super.getView(position, convertView, parent);
view.setCompoundDrawablePadding(24);
view.setCompoundDrawablesWithIntrinsicBounds(
R.drawable.ic_stars_white_24dp, 0, 0, 0);
return view;
}
});
mActionList.setAdapter(new ArrayAdapter<String>(this,
Android.R.layout.simple_list_item_1, mActions) {
@Override
public View getView(int position, View convertView, ViewGroup parent) {
TextView view = (TextView) super.getView(position, convertView, parent);
view.setCompoundDrawablePadding(24);
view.setCompoundDrawablesWithIntrinsicBounds(mIcons[position], 0, 0, 0);
return view;
}
});
mDrawerToggle = new ActionBarDrawerToggle(
this, /* Host Activity */
mDrawerLayout, /* DrawerLayout object */
mToolbar,
R.string.drawer_open, /* "open drawer" description for accessibility */
R.string.drawer_close /* "close drawer" description for accessibility */
) {
public void onDrawerClosed(View view) {
mToolbar.setTitle(mTitle);
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
public void onDrawerOpened(View drawerView) {
mToolbar.setTitle(mDrawerTitle);
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
};
mDrawerLayout.setDrawerListener(mDrawerToggle);
if (savedInstanceState == null) {
selectItem(0);
}
}
Voici une vidéo montrant Gmail pour tablettes dans ce mode.
L'officiel NavigationDrawer mentionne bien 'mini-variante' dans leur spécification de conception , mais il n'y a pas de documentation sur son utilisation. Peut-être que cela viendra plus tard en tant que partie de la bibliothèque de support. Met à jour la réponse si/quand il y aura une solution officielle.
En attendant, jetez un œil à bibliothèque ActionsContentView , fait exactement ce que vous voulez. La dernière fois que cela a été mis à jour était il y a 2 ans, mais cela fonctionne, je l'utilise depuis un moment. Vous pouvez également l'obtenir sur Google Play et le tester.
S'il vous plaît visitez le lien suivant:
https://github.com/mikepenz/MaterialDrawer
https://github.com/mikepenz/MaterialDrawer/issues/487
MaterialDrawer est une implémentation permettant de créer un tiroir de matériau. Sa dernière version, 4.0, bien que pas encore publiée, fournit un " tiroir intégré " pour atteindre ce que vous voulez. Pas parfait jusqu'à présent car j'ai téléchargé sa démo, essayé cette nouvelle fonctionnalité et découvert que le tiroir ne pouvait pas s'ouvrir en glissant, mais l'auteur travaille dur pour la finir.
En conséquence, vous pouvez attendre la prochaine version et vérifier son utilisation à ce moment-là.
Découvrez cette autre question de variante Mini nav: Implémentation d’une tablette Gmail comme Navigation Drawer .
Il semble disposer d’une solution efficace pour la variante de tiroir Mini nav, comme dans l’application Gmail pour tablettes, mentionnée par @Amol Gupta. La réponse acceptée dans l’autre question contient un lien vers un blog post avec une explication plus détaillée sur la manière de mettre en œuvre la mini variante. Leur solution utilise une disposition de volet coulissant qui passe en fondu entre une disposition "partielle" et une disposition "complète".
Voici un lien vers l'exemple de la source de l'article de blog:
https://github.com/chiuki/sliding-pane-layout
Je recommanderai de changer le layout_width de @id/left_drawer de 240dp en un nombre plus petit, comme 80dp.