新导航抽屉 - 如何使用标题和计数器?

时间:2013-05-28 13:50:17

标签: android navigation drawer

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

我已阅读教程以创建导航抽屉,但我还需要做什么才能将标题,图标和计数器用作抽屉项目的一部分?我只在示例中看到如何控制文本。

2 个答案:

答案 0 :(得分:1)

您必须使用特定布局管理导航抽屉UI。使用导航抽屉布局包装活动布局并添加列表视图后,您必须创建一个新的layout.xml(包装并添加所需的所有内容并在第一个列表视图中指定此布局。

布局示例: https://gist.github.com/jordanblt/6220779

关于标题的更具体的答案:How to add title in Navigation drawer layout?

答案 1 :(得分:0)

此答案假定您已经有一个正常工作的导航抽屉,只需要添加图标和计数

我就是这样做的。以新闻应用为例。在导航栏中,您有Local NewsForeign NewsAlien News。您需要拥有的图标,标题和计数器是定义自定义适配器和模型类。

Model类:

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;
}
}

然后在自定义适配器中执行以下操作:

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;
}

 }

然后在活动中初始化这样的项目:

 // 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?
    );

在你的字符串资源文件中添加:

<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>