【问题标题】:recycler view does not respect list item's margin回收站视图不尊重列表项的边距
【发布时间】:2021-12-31 19:46:36
【问题描述】:

它应该是什么样子-

它看起来如何 -

listitem.xml -

<?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"
    app:cardBackgroundColor="@color/card_background"
    android:layout_marginVertical="5dp"
    android:layout_marginHorizontal="10dp"
    app:cardCornerRadius="8dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/is_app_or_web_image_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/card_spacing"
            android:padding="@dimen/image_padding"
            app:layout_constraintBottom_toBottomOf="@id/delete_image_view"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="@id/delete_image_view"
            tools:src="@drawable/is_website_icon_24" />

        <TextView
            android:id="@+id/service_name_text_view"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginHorizontal="@dimen/card_spacing"
            android:text="@string/service_name"
            android:textSize="16sp"
            app:layout_constraintBottom_toBottomOf="@id/delete_image_view"
            app:layout_constraintLeft_toRightOf="@id/is_app_or_web_image_view"
            app:layout_constraintRight_toLeftOf="@id/edit_image_view"
            app:layout_constraintTop_toTopOf="@id/delete_image_view" />


        <androidx.appcompat.widget.AppCompatImageButton
            android:id="@+id/delete_image_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/card_spacing"
            android:layout_marginEnd="@dimen/card_spacing"
            android:background="@color/card_foreground"
            android:padding="@dimen/image_padding"
            android:src="@drawable/ic_baseline_delete_20"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />


        <androidx.appcompat.widget.AppCompatImageButton
            android:id="@+id/show_image_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/card_spacing"
            android:background="@color/card_foreground"
            android:padding="@dimen/image_padding"
            android:src="@drawable/ic_baseline_show_20"
            app:layout_constraintBottom_toBottomOf="@id/delete_image_view"
            app:layout_constraintRight_toLeftOf="@id/delete_image_view"
            app:layout_constraintTop_toTopOf="@id/delete_image_view" />


        <androidx.appcompat.widget.AppCompatImageButton
            android:id="@+id/edit_image_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/card_spacing"
            android:background="@color/card_foreground"
            android:padding="@dimen/image_padding"
            android:src="@drawable/ic_baseline_edit_20"
            app:layout_constraintBottom_toBottomOf="@id/delete_image_view"
            app:layout_constraintRight_toLeftOf="@id/show_image_view"
            app:layout_constraintTop_toTopOf="@id/delete_image_view" />


        <androidx.cardview.widget.CardView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginVertical="@dimen/card_spacing"
            app:cardBackgroundColor="@color/card_foreground"
            app:cardCornerRadius="@dimen/corner_radius"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="@id/is_app_or_web_image_view"
            app:layout_constraintRight_toRightOf="@id/delete_image_view"
            app:layout_constraintTop_toBottomOf="@id/is_app_or_web_image_view">


            <com.google.android.material.textview.MaterialTextView
                android:id="@+id/service_password_text_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="8dp"
                android:background="#00000000"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                tools:text="@string/service_password" />


        </androidx.cardview.widget.CardView>

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

我已经尝试过的-

将列表项的高度设置为固定值。像 200 dp 之类的东西(没有效果。就好像这个值甚至没有输入)

尝试更改布局管理器(无效)

现在,我什至不知道该尝试什么。任何帮助都是有用的。

适配器代码 -

package com.kenetic.savepass.adapters

import android.util.Log
import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.DiffUtil
import androidx.recyclerview.widget.ListAdapter
import androidx.recyclerview.widget.RecyclerView
import com.kenetic.savepass.R
import com.kenetic.savepass.databinding.PassListBinding
import com.kenetic.savepass.password.PasswordData


class PassAdapter() :
    ListAdapter<PasswordData, PassAdapter.PassViewHolder>(diffCallBack) {

    class PassViewHolder(val binding: PassListBinding) : RecyclerView.ViewHolder(binding.root) {
        var verifiedWithPassword = false
        private val TAG = "PassAdapter"

        fun bind(passwordData: PasswordData) {
            binding.isAppOrWebImageView.setImageResource(
                if (passwordData.isAnApplication) {
                    R.drawable.is_application_icon_24
                } else {
                    R.drawable.is_website_icon_24
                }
            )
            binding.serviceNameTextView.text = passwordData.serviceName

            binding.servicePasswordTextView.text = passwordData.servicePassword

            binding.deleteImageView.setOnClickListener {
                Log.d(TAG, "delete image onClick working")
            }
            binding.showImageView.setOnClickListener {
                Log.d(TAG, "show image onClick working")
            }
            binding.editImageView.setOnClickListener {
                Log.d(TAG, "edit image onClick working")
            }
        }
    }

    companion object {
        private val diffCallBack = object : DiffUtil.ItemCallback<PasswordData>() {
            override fun areItemsTheSame(oldItem: PasswordData, newItem: PasswordData) =
                (oldItem.id == newItem.id)

            override fun areContentsTheSame(oldItem: PasswordData, newItem: PasswordData) =
                (oldItem == newItem)
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PassViewHolder {
        return PassViewHolder(PassListBinding.inflate(LayoutInflater.from(parent.context)))
    }

    override fun onBindViewHolder(holder: PassViewHolder, position: Int) {
        holder.bind(getItem(position))
    }
}

【问题讨论】:

  • 尝试在您的顶级 CardView 中添加 margin_top、margin_start 和 margin_end。
  • 请在扩展列表项的位置包含您的适配器代码
  • 我添加了边距开始、停止和顶部。那些也没有做任何事情。我将在上面添加适配器代码。但我认为这不是问题。

标签: android xml kotlin android-recyclerview


【解决方案1】:

如果您想使用margin top 和margin_bottom 而不是marginvertical 来使用不同的margin,则列表项将删除margin android:layout_marginVertical="5dp" android:layout_marginHorizontal="10dp" 并添加此行android:layout_margin="5dp"

【讨论】:

  • 这是我最初尝试的。但是,它没有用。
【解决方案2】:

(回答我自己的问题)(解决方法)

我的列表项 xml 是卡片布局。我将其更改为卡片布局位于约束布局内,然后将卡片布局约束到父约束布局的所有四个侧面。所以,现在我的列表项 xml 是一个约束布局,里面有一个卡片布局。然后,我在卡片布局中添加了边距,在卡片布局的边框和约束布局之间提供了间距。所以,现在我的列表项之间有视觉上的间距。

下一个问题是约束布局背景为白色。要解决此问题,请将约束布局颜色设置为透明 #00000000 。就是这样。

【讨论】: