导航抽屉中的自定义列表视图

时间：2016-02-19 23:13:51

标签： android xml navigation-drawer material-design custom-lists

我正在尝试使用一些自定义布局填充导航抽屉。该布局的XML文件如下：

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/toolbar">

    <!-- The main content view -->

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clickable="true">

    </FrameLayout>
    <!-- The navigation drawer -->

    <LinearLayout
        android:orientation="vertical"
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#FFFFFF">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginLeft="40px"
            android:layout_marginTop="40px">
            <ImageView
                android:id="@+id/imgUser"
                android:src="@drawable/empty_profile"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                />
            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20px"
                android:layout_marginTop="20px">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="15sp"
                    android:text="Waqas Ahmed Ansari"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="63km"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Joined: Feb '16"/>
            </LinearLayout>

        </LinearLayout>

        <ListView
            android:id="@+id/lstDrawerItems"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:choiceMode="singleChoice"
            android:layout_marginTop="20sp" />

    </LinearLayout>
</android.support.v4.widget.DrawerLayout>

然后我为ListView lstDrawerItems创建了一个CustomAdapter类 在这里。

public class CustomAdapter extends BaseAdapter {
public ArrayList<HashMap<String, String>> list;
Activity activity;
TextView txtFirst;
ImageView imgView;

public CustomAdapter(Activity activity, ArrayList<HashMap<String, String>> list) {
    super();
    this.activity=activity;
    this.list=list;
}

@Override
public View getView(final int position, View convertView, ViewGroup parent) {

    LayoutInflater inflater=activity.getLayoutInflater();

    if(convertView == null){
        convertView = inflater.inflate(R.layout.custom_drawer_list, null);

        txtFirst = (TextView) convertView.findViewById(R.id.drawer_itemName);
        imgView = (ImageView) convertView.findViewById((R.id.drawer_icon));
    }

    HashMap<String, String> map=list.get(position);
    txtFirst.setText(map.get("name"));
    imgView.setImageResource(Integer.parseInt(map.get("imgDrawerIcon")));
    return convertView;
}

@Override
public int getCount() {
    return 0;
}

@Override
public Object getItem(int position) {
    return null;
}

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

}

当我设置列表适配器时，我无法看到任何内容。 我在这里设置自定义适配器 CustomAdapter adapter = new CustomAdapter(HomeNoVehicle.this, list); ListView drawerList = (ListView) findViewById(R.id.lstDrawerItems); drawerList.setAdapter(adapter); enter image description here

但是当我设置条目属性列表时，它运行良好。 enter image description here 无法弄清问题是什么。

1 个答案:

答案 0 :(得分：0)

为了制作自定义列表，我想开始的方式是设计要在列表中显示的单元格或单元格。可能是这样的东西：

Custom Cell

然后我喜欢让一个班级去那个单元格：

public class ProfileCell extends RelativeLayout {
    ImageView imageView;
    TextView name;
    TextView dateJoined;
    TextView distance;

    String nameText;
    String dateJoinedText;
    String distanceText;

    public ProfileCell(Context context) {
        super(context);
        inflate(context, R.layout.nav_list_row, this);
        name = (TextView)findViewById(R.id.name);
        dateJoined = (TextView)findViewById(R.id.date_joined);
        distance = (TextView)findViewById(R.id.distance);
        imageView = (ImageView)findViewById(R.id.imgUser);
        //set Image to a default value
        imageView.setImageResource(R.mipmap.ic_launcher);
    }
    public String getNameText() {
        return nameText;
    }

    public void setNameText(String nameText) {
        this.nameText = nameText;
        name.setText(nameText);
    }

    public ImageView imageView() {
        return imageView;
    }
    public String getDateJoinedText() {
        return dateJoinedText;
    }

    public void setDateJoinedText(String dateJoinedText) {
        this.dateJoinedText = dateJoinedText;
        dateJoined.setText(dateJoinedText);
    }

    public String getDistanceText() {
        return distanceText;
    }

    public void setDistanceText(String distanceText) {
        this.distanceText = distanceText;
        distance.setText(distanceText);
    }
}

然后我也发现创建一个可以保存我想放在那个单元格中的信息的类很方便：

public class Profile {//Information about Users Profile



    public String name;
    public String dateJoined;
    public String distance;
/////////possibly have image url here ....

    public Profile(String name, String dateJoined, String distance)
    {
        this.name = name;
        this.dateJoined = dateJoined;
        this.distance = distance;
    }

}

然后我创建自定义适配器类：

public class CustomAdapter extends BaseAdapter {
    ArrayList<Profile> profiles;
    Context context;

    public CustomAdapter(Context context, ArrayList<Profile> profiles)
    {
        this.context = context;
        this.profiles = profiles;
    }

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

    @Override
    public Profile getItem(int position) {
        return profiles.get(position);
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null)
        {
            //Custom Cell is inflated inside of the Profile view class
            convertView = new ProfileCell(context);

        }
        ProfileCell cell = (ProfileCell) convertView;
        Profile profile = getItem(position);
        cell.setNameText(profile.name);
        cell.setDateJoinedText(profile.dateJoined);
        cell.setDistanceText(profile.distance);
        //Then you would set the image view to something...
        // cell.imageView().setImageResource(R.mipmap.ic_launcher);
        //something like that maybe

        return cell;
    }
}

然后，如果我将列表视图设置在我想要的位置，在您的情况下，在导航抽屉内，然后在导航活动中，您可以执行此操作：

//A list of data to display in list
        ArrayList<Profile> profiles = new ArrayList<>();

        for (int i = 0; i < 15; i++)
        {
            profiles.add(profile);//Adding same profile over an over
        }

        CustomAdapter adapter = new CustomAdapter(this,profiles);

        listView.setAdapter(adapter);

然后这将显示您放在这些单元格中的任何内容。

我在这里填写完整的代码： https://github.com/amffz9/NavigationProject

相关问题
最新问题