带有cardview布局问题的Android recyclerView答案

【问题标题】：Android recyclerView with cardview layout issue带有cardview布局问题的Android recyclerView
【发布时间】：2018-04-27 10:16:51
【问题描述】：

我正在创建一个布局，如第一张图片所示。我正在使用带有 Cardview 的 RecyclerView 来完成此屏幕，但正如您在模拟器输出中看到的那样，我没有得到所需的布局（显示在第一张图片中），因为它看起来很疯狂，因为所有项目都应该分别对齐，就像 HTML 表中的一样WEB 并且应该在所有设备上都可以正常工作。

这是我的布局资源 XML 文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/textViewStatus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:text="TextView" />

    <TextView
        android:id="@+id/textViewHomeTeam"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="false"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/textViewStatus"
        android:text="TextView" />

    <ImageView
        android:id="@+id/imageViewHomeTeamLogo"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_centerInParent="false"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/textViewHomeTeam"
        android:padding="4dp" />

    <TextView
        android:id="@+id/textViewScore"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="false"
        android:layout_toRightOf="@+id/imageViewHomeTeamLogo"
        android:text="TextView" />

    <TextView
        android:id="@+id/textViewMatchStatus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textViewStatus"
        android:layout_centerInParent="false"
        android:layout_toEndOf="@+id/imageViewHomeTeamLogo"
        android:text="TextView" />

    <ImageView
        android:id="@+id/imageViewAwayTeamLogo"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_centerInParent="false"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/textViewScore"
        android:padding="4dp" />

    <TextView
        android:id="@+id/textViewAwayTeam"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="false"
        android:layout_centerHorizontal="false"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/imageViewAwayTeamLogo"
        android:text="TextView" />

    </RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>

请纠正我缺少的内容。

【问题讨论】：

您为什么不使用 Studio 预览来检查您的项目布局？
我建议您使用 ConstraintLayout 而不是 RelativeLayout 并在 Android Studio 设计模式下重新排列您的视图
This 是我在 Studio 中使用您的布局得到的...您需要修复很多事情，但这是学习如何构建 Android 布局的一个很好的练习...开始包装内容和添加边距，还要考虑对不同屏幕尺寸的响应
您可以在 CardView 中使用 LinearLayout，然后在线性布局中使用 weightSum 来根据需要划分视图
是的，它的 recyclerView.setLayoutManager(new LinearLayoutManager(this));现在我正在使用约束布局，但它不能在所有屏幕上工作，因为在横向模式下它不会扩展到整个屏幕。 @Alessio 虽然它在 android studio 设计模式下的横向显示是正确的，但是当我在模拟器上运行它或在 android 设备上安装 apk 时，它确实在横向模式下显示全宽

标签： android android-recyclerview android-cardview recyclerview-layout

【解决方案1】：

用下面的替换你的 onCreateViewHolder

@Override
    public CountryListAdapter onCreateViewHolder(ViewGroup parent, int viewType) {
        View view;
        view = LayoutInflater.from(mContext).inflate(R.layout."your_layout", null);

        RecyclerView.LayoutParams params = new RecyclerView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        view.setLayoutParams(params);

        CountryListAdapter viewHolder = new CountryListAdapter(view);
        return viewHolder;
    }

【讨论】：

【解决方案2】：

您可以在卡片视图内使用水平方向的线性布局。

<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

</RelativeLayout>

【讨论】：

【解决方案3】：

嘿，我给你粗略的布局可能会对你有所帮助，

 <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
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_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="16dp" >

    <TextView
        android:id="@+id/textViewStatus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="FT"
        android:padding="8dp"
        android:background="@drawable/text_drawable"
        android:textSize="16sp"/>

    <TextView
        android:id="@+id/textViewHomeTeam"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="35dp"
        android:layout_marginLeft="35dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/textViewStatus"
        android:text="Arsenol" />

    <ImageView
        android:id="@+id/imageViewHomeTeamLogo"
        android:layout_width="25dp"
        android:layout_height="match_parent"
        android:layout_marginLeft="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/textViewHomeTeam"
        android:padding="4dp" />

    <TextView
        android:id="@+id/textViewScore"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/imageViewHomeTeamLogo"
        android:text="21:00"
        android:textStyle="bold"/>

    <TextView
        android:id="@+id/textViewMatchStatus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/textViewStatus"
        app:layout_constraintLeft_toRightOf="@+id/imageViewHomeTeamLogo"
        android:text="Not Started" />

    <ImageView
        android:id="@+id/imageViewAwayTeamLogo"
        android:layout_width="25dp"
        android:layout_marginLeft="12dp"
        android:layout_height="match_parent"
        android:src="@color/colorAccent"
        app:layout_constraintLeft_toRightOf="@+id/textViewMatchStatus"
        android:padding="4dp" />

    <TextView
        android:id="@+id/textViewAwayTeam"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/imageViewAwayTeamLogo"
        android:text="Leisure city" />

【讨论】：

我现在正在使用约束布局，它在纵向视图中运行良好，但在横向视图中效果不佳。我应该如何管理响应式

【解决方案4】：

使用以下布局更新您的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:weightSum="4">

            <ImageView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.5" />

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="horizontal"
                android:gravity="end">

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_weight="0.3" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:layout_weight="1"
                android:gravity="center">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

            </LinearLayout>


            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="horizontal">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"/>

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1" />

            </LinearLayout>

            <ImageView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.5" />

        </LinearLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

【讨论】：