Android开发：如何在Fragment中正确显示ListView的ListItem

问题原因 #

• 未给ListView绑定Adapter：tools:listitem仅为Android Studio布局预览属性，运行时不会生成实际列表项，Fragment代码中缺少列表初始化、数据源配置、Adapter绑定的逻辑
• 列表项布局约束错误：item_follow.xml中三个TextView宽度设为0dp但未配置水平方向约束，运行时控件宽度为0，文字无法正常渲染

修复步骤 #

1. 修复item_follow.xml的约束问题 #

给三个TextView添加左右约束，确保宽度正常渲染：

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="16dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/favourite_match_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="8dp">

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/team_1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:layout_marginStart="16dp"
            android:fontFamily="@font/roboto_medium"
            android:text="FC Chelsea"
            android:textColor="@color/black"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@id/btn_follow"
            app:layout_constraintTop_toTopOf="parent"/>

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/team_2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:fontFamily="@font/roboto_medium"
            android:text="Manchester City"
            android:layout_marginStart="16dp"
            app:layout_constraintTop_toBottomOf="@+id/team_1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@id/btn_follow"
            android:textColor="@color/black" />

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/match_date"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:layout_marginStart="16dp"
            android:fontFamily="@font/roboto"
            android:text="25 сентября 2021 года"
            android:textColor="@color/colorGrey"
            android:textSize="12sp"
            app:layout_constraintTop_toBottomOf="@id/team_2"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@id/btn_follow" />

        <ImageButton
            android:id="@+id/btn_follow"
            android:layout_width="48dp"
            android:layout_height="50dp"
            android:layout_marginEnd="24dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:src="@drawable/ic_love"
            android:background="#00000000"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

2. 自定义列表数据实体类（MatchInfo.java） #

public class MatchInfo {
    private String team1;
    private String team2;
    private String matchDate;

    public MatchInfo(String team1, String team2, String matchDate) {
        this.team1 = team1;
        this.team2 = team2;
        this.matchDate = matchDate;
    }
    
    public String getTeam1() { return team1; }
    public String getTeam2() { return team2; }
    public String getMatchDate() { return matchDate; }
}

3. 自定义列表Adapter（FollowListAdapter.java） #

public class FollowListAdapter extends BaseAdapter {
    private Context context;
    private List<MatchInfo> dataList;

    public FollowListAdapter(Context context, List<MatchInfo> dataList) {
        this.context = context;
        this.dataList = dataList;
    }

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

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

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        if (convertView == null) {
            convertView = LayoutInflater.from(context).inflate(R.layout.item_follow, parent, false);
            holder = new ViewHolder();
            holder.team1 = convertView.findViewById(R.id.team_1);
            holder.team2 = convertView.findViewById(R.id.team_2);
            holder.matchDate = convertView.findViewById(R.id.match_date);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }
        MatchInfo item = dataList.get(position);
        holder.team1.setText(item.getTeam1());
        holder.team2.setText(item.getTeam2());
        holder.matchDate.setText(item.getMatchDate());
        return convertView;
    }

    static class ViewHolder {
        AppCompatTextView team1;
        AppCompatTextView team2;
        AppCompatTextView matchDate;
    }
}

4. 修改FollowFragment.java，初始化列表绑定Adapter #

public class FollowFragment extends Fragment {
    private ListView listView;
    private List<MatchInfo> matchList = new ArrayList<>();

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        getActivity().setTitle("Подписки");
        return inflater.inflate(R.layout.fragment_follow,container,false);
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        // 初始化ListView
        listView = view.findViewById(R.id.listview);
        // 构造测试数据，实际使用时替换为你的真实数据源
        initTestData();
        // 绑定Adapter
        FollowListAdapter adapter = new FollowListAdapter(getContext(), matchList);
        listView.setAdapter(adapter);
    }

    private void initTestData() {
        matchList.add(new MatchInfo("FC Chelsea", "Manchester City", "25 сентября 2021 года"));
        matchList.add(new MatchInfo("Real Madrid", "Barcelona", "26 сентября 2021 года"));
        matchList.add(new MatchInfo("Bayern Munich", "Borussia Dortmund", "27 сентября 2021 года"));
    }
}

可选优化建议 #

• ListView是较旧的列表组件，推荐使用RecyclerView替代，性能和扩展性更好
• 列表高度建议设为match_parent避免嵌套滚动问题，当前wrap_content在数据量大时会导致性能问题

内容的提问来源于stack exchange，提问作者Yotaka Yomoto