带分隔符的 RecyclerView 导航抽屉

Question

按照本教程，我开发了一个基于 Material Design 的导航抽屉，其中包含一个标题视图：How To Make Material Design Navigation Drawer With Header View。

我正在尝试在其下方添加一个带有类别名称的分隔符，但与我的分隔符对应的数据集的位置似乎存在问题。这意味着分隔符正确加载，但不在我想要的位置。 基本上我尝试做的是将“DrawerItem”对象的 ArrayList 传递到扩展 RecyclerView 的“MyAdapter”类中。数组列表包含所有内容： - 标头的参数 - 项目名称和图标 - 和分隔符，也将自己设计为 DrawerItem 对象，但只有一个字符串作为标题（在我的情况下为“Others”）。

这是我的代码：

抽屉物品：

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

}

我的适配器

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

}

如您所见，我正在使用三种对象填充 DrawerItem 的 ArrayList，按以下顺序（来自 MainActivity 的代码）：

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

问题是我的“分隔符”分隔符没有出现在我想要的位置（就在“商店”项目之前），而是出现在其他地方，如图所示：

我怎样才能把它移动到我想去的地方？

Answer 1

不知道您是否找到了解决方案，但由于您的问题帮助我了解回收商的观点，我想我会看看我是否可以回报。

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

我在抽屉中使用了分隔符，方法是在它到达我的第 6 个元素时创建一个新布局，方法是向 ViewHolder 传递不同的类型：

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