带分离器的RecyclerView导航抽屉

时间:2015-03-08 20:25:39

标签: android android-layout android-recyclerview material-design navigation-drawer

我按照本教程开发了一个包含标题视图的基于材质设计的导航抽屉:How To Make Material Design Navigation Drawer With Header View

我正在尝试在其下面添加一个带有类别名称的分隔符,但似乎与我的分隔符对应的数据集的位置有问题。这意味着分隔符正确加载,但不在我想要的位置。 基本上我试图做的是将“DrawerItem”对象的ArrayList传递给扩展RecyclerView的“MyAdapter”类。 arraylist包含一切: - 标题的参数 - 项目名称和图标 - 和分隔符,设计自己也作为DrawerItem对象,但只有一个字符串作为标题(在我的情况下“其他”)。

这是我的代码:

  

DrawerItem:

package madapps.materialdesignappbar;

public class DrawerItem {

    String ItemName;
    int imgResID;
    String title;

    String name ;
    String email ;
    int profile  ;

public DrawerItem(String Name, String Email, int profileResID){
    name = Name;
    email = Email;
    profile = profileResID;
}

public DrawerItem(String itemName, int imgResID) {
    ItemName = itemName;
    this.imgResID = imgResID;
}
//separator case
public DrawerItem(String title) {
    this(null, 0);
    this.title = title;
    this.ItemName = "separator";
}

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

public String getItemName() {
    return ItemName;
}

public int getImgResID() {
    return imgResID;
}

public void setItemName(String itemName) {
    this.ItemName = itemName;
}

public void setImgResID(int imgResID) {
    this.imgResID = imgResID;
}

public void setName(String Name){
    this.name = Name;
}

public void setEmail(String Email){
    this.email = Email;
}

public void setProfile(int Profile){
    this.profile = Profile;
}

public String getName(){
    return name;
}
public String getEmail(){
    return email;
}
public int getProfile(){
    return profile;
}

}
  

MyAdapter

package madapps.materialdesignappbar;

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {

private static final int TYPE_HEADER = 0;  // Declaring Variable to Understand which View is being worked on
// IF the view under inflation and population is header or Item
private static final int TYPE_ITEM = 1;
private static final int TYPE_SEPARATOR = 2;

private ArrayList<DrawerItem> data;

MyAdapter(ArrayList<DrawerItem> Data){
    // MyAdapter Constructor with titles and icons parameter
    // titles, icons, name, email, profile pic are passed from the main activity as we have seen earlier
    data = Data;
}
// Creating a ViewHolder which extends the RecyclerView View Holder
// ViewHolder are used to to store the inflated views in order to recycle them
public static class ViewHolder extends RecyclerView.ViewHolder {
    int Holderid;

    LinearLayout itemLayout;
    TextView textView;
    ImageView imageView;
    ImageView profile;
    TextView Name;
    TextView email;
    TextView drawerTitle;
    LinearLayout separatorLayout;
    // Creating ViewHolder Constructor with View and viewType As a parameter
    public ViewHolder(View itemView, int ViewType) {
        super(itemView);
        // Here we set the appropriate view in accordance with the
        // the view type as passed when the holder object is created
        if (ViewType == TYPE_HEADER){
            Name = (TextView) itemView.findViewById(R.id.name);           // Creating Text View object from header.xml for name
            email = (TextView) itemView.findViewById(R.id.email);         // Creating Text View object from header.xml for email
            profile = (ImageView) itemView.findViewById(R.id.circleView); // Creating Image view object from header.xml for profile pic

            Holderid = 0; // Setting holder id = 0 as the object being populated are of type header view
        }
        if(ViewType == TYPE_ITEM) {

            textView = (TextView) itemView.findViewById(R.id.rowText);   // Creating TextView object with the id of textView from item_row.xml
            imageView = (ImageView) itemView.findViewById(R.id.rowIcon); // Creating ImageView object with the id of ImageView from item_row.xml

            Holderid = 1;                                                 // setting holder id as 1 as the object being populated are of type item row
        }
        if(ViewType == TYPE_SEPARATOR){
            drawerTitle = (TextView) itemView.findViewById(R.id.drawerTitle);

            Holderid = 2;
        }
    }
}

//Below first we Override the method onCreateViewHolder which is called when the ViewHolder is
//Created, In this method we inflate the item_row.xml layout if the viewType is Type_ITEM or else we inflate header.xml
// if the viewType is TYPE_HEADER
// and pass it to the view holder
@Override
public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

    if (viewType == TYPE_HEADER) {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.header, parent, false); //Inflating the layout
        ViewHolder vhHeader = new ViewHolder(v,viewType); //Creating ViewHolder and passing the object of type view

        return vhHeader; //returning the object created
    }else

    if (viewType == TYPE_ITEM) {
            View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_row, parent, false); //Inflating the layout
            ViewHolder vhItem = new ViewHolder(v, viewType); //Creating ViewHolder and passing the object of type view
            return vhItem; // Returning the created object
            //inflate your layout and pass it to view holder
    }
    if (viewType == TYPE_SEPARATOR){
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.separator, parent, false);
        ViewHolder vhSeparator = new ViewHolder(v, viewType);

        return vhSeparator;
    }

    return null;
}
/* Next we override a method which is called when the item in a row is needed to be displayed,
@param position   tells us item at which position is being constructed to be displayed
@param holder     id of the holder object tell us which view type is being created 1 for item row */
@Override
public void onBindViewHolder(MyAdapter.ViewHolder holder, int position) {

    if(holder.Holderid==0) {
        holder.profile.setImageResource(data.get(0).getProfile());   // Similarly we set the resources for header view
        holder.Name.setText(data.get(0).getName());
        holder.email.setText(data.get(0).getEmail());
    }
    if(holder.Holderid == 1) {
            // as the list view is 1going to be called after the header view so we decrement the

        holder.textView.setText(data.get(position).title);
        holder.imageView.setImageResource(data.get(position).imgResID);

    }if (holder.Holderid==2){
        holder.drawerTitle.setText(data.get(4).getItemName());
    }
}

// This method returns the number of items present in the list
@Override
public int getItemCount() {
    return data.size(); 
}
// With the following method we check what type of view is being passed
@Override
public int getItemViewType(int position) {
    if (isPositionHeader(position)) {//if position == 0 return true
        return TYPE_HEADER;     //0
    }
    if(isSeparator(position)){
        return TYPE_SEPARATOR;
    }
        return TYPE_ITEM;
}
private boolean isSeparator(int position){
    return position==2;
}
private boolean isPositionHeader(int position) {
    return position == 0;
}

}

正如您所看到的,我按照这个顺序(来自MainActivity的代码)用三种对象填充DrawerItem的ArrayList:

ArrayList data = new ArrayList<DrawerItem>();

    data.add(new DrawerItem("Chris Benois","chris_benois@mail.com",R.mipmap.aka));

    data.add( new DrawerItem("Home",R.mipmap.ic_home));
    data.add( new DrawerItem("Events",R.mipmap.ic_events));
    data.add( new DrawerItem("Mail", R.mipmap.ic_mail));
    data.add(new DrawerItem("Others"));
    data.add( new DrawerItem("Shop", R.mipmap.ic_shop));
    data.add( new DrawerItem("Travel", R.mipmap.ic_travel));

问题是我的“分隔符”分隔符没有出现在我希望的位置(就在“Shop”项目之前),但在其他地方如图所示:

Navigation Drawer

如何将它移动到我想要的位置?

1 个答案:

答案 0 :(得分:3)

不知道你是否找到了解决方案,但是当你的问题帮助我了解回收者的观点时,我想我会看到我能否回报这个问题。

我发现ViewHolder类中最重要的方法是getItemViewType(int position)。在您发布的代码中,您似乎没有为TYPE_SEPARATOR返回2,而没有正确检查导航抽屉中元素的位置,这就是为什么您的分隔符出现在导航抽屉中的主页下方。您需要检查第5个位置,然后返回TYPE_SEPARATOR。

我在抽屉中使用了分隔符,当它通过将ViewHolder传递给另一种类型来触及我的第6个元素时创建一个新的布局:

 public int getItemViewType(int position) {
    if (position == 0) {
        return TYPE_HEADER;
    } else if (position>0 && position <6) {
        return TYPE_TAG;
    } else if (position ==6) {
        return TYPE_DIVIDER;
    }
    else
        return TYPE_ICON;


}

并在我的ViewHolder构造函数中:

public ViewHolder(View itemView, int viewType) {
        super(itemView);


        if(viewType == TYPE_HEADER)
        {

            name = (TextView) itemView.findViewById(R.id.name);
            email = (TextView) itemView.findViewById(R.id.email);
            profile = (ImageView) itemView.findViewById(R.id.image_view);
            holderId = 0;

        }

        if (viewType == TYPE_TAG)
        {

            tagText = (TextView) itemView.findViewById(R.id.tag);
            holderId = 1;


        }

        if(viewType == TYPE_ICON)
        {
            iconText = (TextView) itemView.findViewById(R.id.rowText);
            icon = (ImageView) itemView.findViewById(R.id.rowIcon);
            holderId = 2;


        }

        if(viewType == TYPE_DIVIDER)
        {
            dividerText = (TextView) itemView.findViewById(R.id.rowText);
            dividerIcon = (ImageView) itemView.findViewById(R.id.rowIcon);


            holderId = 3; 
        }


    }

}

在我的onCreateViewHolder方法中,我刚为TYPE_DIVIDER填充了不同的布局。

希望它有所帮助。

修改

我已经创建了一个工作的回收站视图,我不建议为分隔符扩展不同的布局。它给我带来了各种各样的问题。您应该使用RecyclerView.ItemDecoration。以下是SO上的一些精彩帖子,How to add dividers and spaces between items in RecyclerView?