Nouveau tiroir de navigation - comment utiliser les titres et les compteurs?

Question

http://developer.android.com/design/patterns/navigation-drawer.html

J'ai lu le tutoriel pour créer le tiroir de navigation, mais que dois-je faire pour utiliser également le titre, les icônes et les compteurs dans le cadre des éléments de tiroir? Je vois seulement dans l'exemple comment contrôler le texte.

Answer 1

Vous devez gérer l'interface utilisateur du tiroir de navigation avec une disposition spécifique. Une fois que vous avez enveloppé votre disposition d'activité avec la disposition du tiroir de navigation et ajouté votre listview, vous devez créer un nouveau layout.xml (retournez et ajoutez tout ce que vous voulez et spécifiez dans votre première liste cette présentation.)

Exemples de mise en page: https://gist.github.com/jordanblt/6220779

une réponse plus précise sur le titre: How to add title in Navigation drawer layout?

Answer 2

Cette réponse suppose que vous avez déjà un tiroir juste Navigation de travail et ont besoin d'ajouter des icônes et le comte

Voici comment je le fais. Prenez par exemple une application Nouvelles. Dans votre tiroir de navigation, vous avez Local News, Foreign News et Alien News. Ce que vous devez avoir des icônes, des titres et des compteurs est de définir un adaptateur personnalisé et une classe de modèle.

La classe Modèle:

public class NavDrawerItem { 

private String title; 
private int icon; 
private int count; 
private boolean isLocalNews; 
private boolean isForeignNews; 
private boolean isAlienNews; 

private boolean hasIcon; 
private boolean isCounterVisible = false; // boolean to set visibility of the counter 

public NavDrawerItem(){} 


public NavDrawerItem(String title, boolean hasICon, int icon, boolean isCounterVisible, 
boolean isLocalNews, boolean isForeignNews, boolean isAlienNews) { 
    this.title = title; 
    this.hasIcon = hasICon; 
    this.icon = icon; 
    this.isCounterVisible = isCounterVisible; 
    this.setHasIcon(isHasIcon()); 
    this.isLocalNews = isLocalNews; 
    this.isForeignNews = isForeignNews; 
    this.isAlienNews = isAlienNews; 
} 

public String getTitle(){ 
    return this.title; 
} 

public int getIcon(){ 
    return this.icon; 
} 

public int getCount(){ 
    return this.count; 
} 

public boolean getCounterVisibility(){ 
    return this.isCounterVisible; 
} 

public void setTitle(String title){ 
    this.title = title; 
} 

public void setIcon(int icon){ 
    this.icon = icon; 
} 

public void setCount(int count){ 
    this.count = count; 
} 

public void setCounterVisibility(boolean isCounterVisible){ 
    this.isCounterVisible = isCounterVisible; 
} 
public boolean isLocalNews() { 
    return isLocalNews; 
} 

public boolean isForeignNews() { 
    return isLocalNews; 
} 

public boolean isAlienNews() { 
    return isAlienNews; 
} 
public boolean isHasIcon() { 
    return hasIcon; 
} 

public void setHasIcon(boolean hasIcon) { 
    this.hasIcon = hasIcon; 
} 
} 

Ensuite, l'adaptateur personnalisé font ceci:

public class NavDrawerListAdapter extends BaseAdapter { 

private Context context; 
private ArrayList<NavDrawerItem> navDrawerItems; 


public NavDrawerListAdapter(Context context, ArrayList<NavDrawerItem> navDrawerItems){ 
    this.context = context; 
    this.navDrawerItems = navDrawerItems; 
} 

@Override 
public int getCount() { 
    return navDrawerItems.size(); 
} 

@Override 
public Object getItem(int position) { 
    return navDrawerItems.get(position); 
} 

@Override 
public long getItemId(int position) { 
    return position; 
} 

@Override 
public View getView(int position, View convertView, ViewGroup parent) { 
    if (convertView == null) { 

     LayoutInflater mInflater = (LayoutInflater) 
       context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE); 
     convertView = mInflater.inflate(R.layout.drawer_list_item, null); 
    } 

    ImageView imgIcon = (ImageView) convertView.findViewById(R.id.icon); 
    TextView txtTitle = (TextView) convertView.findViewById(R.id.title); 
    TextView countTxt = (TextView) convertView.findViewById(R.id.debtCounter); 



    imgIcon.setImageResource(navDrawerItems.get(position).getIcon()); 

    //I am getting the count of each news item from a database, 
    //for this purpose just initialize them to any random number e.g  
    //localNewsCount = 56 
    int localNewsCount = databaseManager.getAllLocalNews().size(); 
    int foreignNewsCount = databaseManager.getForeignNews().size(); 
    int alienNewsCount = databaseManager.getAllAlienNews().size(); 

    txtTitle.setText(navDrawerItems.get(position).getTitle()); 

    // To display the count (number of news per item) in the navigation drawer, 
    //first check whether count textview is set to visible or not. True means the item can have a counter 

    if(navDrawerItems.get(position).getCounterVisibility() && navDrawerItems.get(position).isLocalNews()) { 
     navDrawerItems.get(position).setCount(localNewsCount); 
     countTxt.setText(String.valueOf(navDrawerItems.get(position).getCount())); 
    } 

    if(navDrawerItems.get(position).getCounterVisibility() && navDrawerItems.get(position).isForeignNews()){ 
     navDrawerItems.get(position).setCount(foreignNewsCount); 
     countTxt.setText(String.valueOf(navDrawerItems.get(position).getCount())); 
    } 

    if(navDrawerItems.get(position).getCounterVisibility() && navDrawerItems.get(position).isAlienNews()){ 
     navDrawerItems.get(position).setCount(alienNewsCount); 
     countTxt.setText(String.valueOf(navDrawerItems.get(position).getCount())); 
    } 

    if(!navDrawerItems.get(position).getCounterVisibility()) { 
     countTxt.setVisibility(View.GONE); 
    } 

    if (!navDrawerItems.get(position).isHasIcon()) { 
     imgIcon.setVisibility(View.GONE); 
    } 
    return convertView; 
} 

} 

Et puis dans l'activité initialize les articles comme celui-ci:

// load slide menu items 
    navMenuTitles = getResources().getStringArray(R.array.nav_drawer_items); 

    // nav drawer icons from resources 
    TypedArray navMenuIcons = getResources() 
      .obtainTypedArray(R.array.nav_drawer_icons); 


ArrayList<NavDrawerItem> navDrawerItems = new ArrayList<>(); //Create an array of navigation drawer items. 

    //local news 
    navDrawerItems.add(new NavDrawerItem(
        navMenuTitles[0], //Title 
        true,    //hasIcon 
        navMenuIcons.getResourceId(0, -1), //Icon resource 
        true, //is counter visible? 
        true) //is localNews? 
       false) //is foreignNews? 
       false) //is alienNews? 
    ); 
    //Foreign news 
    navDrawerItems.add(new NavDrawerItem(
        navMenuTitles[1], //Title 
        true,    //hasIcon 
        navMenuIcons.getResourceId(1, -1), //Icon resource 
        true, //is counter visible? 
        false) //is localNews? 
       true) //is foreignNews? 
       false) //is alienNews? 
    ); 

    //Alien news, since we know nothing about aliens we won't add icons and counter 
    navDrawerItems.add(new NavDrawerItem(
      navMenuTitles[2], //Title 
      false,    //hasIcon 
      navMenuIcons.getResourceId(2, -1), //Icon resource 
      false, //is counter visible? 
      false) //is localNews? 
       false) //is foreignNews? 
       true) //is alienNews? 
    ); 

Dans votre fichier de ressources de chaîne, ajoutez ceci:

<array name="nav_drawer_icons"> 
    <item>@drawable/ic_localnews</item> 
    <item>@drawable/ic_foreignnews</item> 
    <item>@drawable/ic_aliensnews</item> 

</array> 

<!-- Nav Drawer Menu Items --> 
<string-array name="nav_drawer_items"> 
    <item> Local News </item> 
    <item> Foreign News </item> 
    <item> Alien News </item> 
</string-array>