在页面底部添加结帐按钮

Posted

技术标签:

【中文标题】在页面底部添加结帐按钮【英文标题】:Add checkout button at bottom of page 【发布时间】:2021-07-18 15:30:26 【问题描述】:

我正在尝试在页面底部的RecyclerView 下方显示一个“结帐”按钮。

我的 XML 文件如下所示:

<androidx.drawerlayout.widget.DrawerLayout
    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_
    android:layout_
    android:background="@android:color/background_light"
    android:id="@+id/drawer_layout"
    tools:context=".Cart">

    <LinearLayout
        android:layout_
        android:layout_
        android:orientation="vertical">

        <include
            layout="@layout/main_toolbar"/>

        <TextView
            android:layout_
            android:layout_
            android:text="@string/Cart"
            android:gravity="center"
            android:fontFamily="@font/poppinsbold"
            android:textSize="20dp"
            android:textStyle="bold"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="10dp"/>


        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_
            android:layout_
            android:layout_marginBottom="500px"/>
        

        <Button
            android:id="@+id/checkout"
            android:layout_
            android:layout_
            android:layout_alignParentBottom="true"
            android:text="Checkout" />

    </LinearLayout>


    <RelativeLayout

        android:layout_
        android:layout_
        android:layout_gravity="start"
        android:background="@android:color/white">


        <include
            layout="@layout/main_nav_drawer"/>
    </RelativeLayout>

</androidx.drawerlayout.widget.DrawerLayout>

不幸的是,当我应用更改时,产品看起来很棒,但按钮没有显示。

我怎样才能让它显示出来?

非常感谢。

【问题讨论】:

【参考方案1】:

你需要

删除RecyclerView 的底部填充 不指定RecyclerView的高度,而是使用RecyclerView的权重来展开直到按钮 从Button 中删除android:layout_alignParentBottom="true",因为它与LinearLayout 无关

应用:

<?xml version="1.0" encoding="utf-8"?>

<androidx.drawerlayout.widget.DrawerLayout 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:id="@+id/drawer_layout"
    android:layout_
    android:layout_
    android:background="@android:color/background_light">

    <LinearLayout
        android:layout_
        android:layout_
        android:orientation="vertical">

        <include layout="@layout/main_toolbar" />

        <TextView
            android:layout_
            android:layout_
            android:layout_marginLeft="10dp"
            android:layout_marginTop="20dp"
            android:fontFamily="@font/poppinsbold"
            android:gravity="center"
            android:text="@string/Cart"
            android:textSize="20dp"
            android:textStyle="bold" />


        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_
            android:layout_weight="1"
            android:layout_ />
    
        <Button
            android:id="@+id/checkout"
            android:layout_
            android:layout_
            android:text="Checkout" />

    </LinearLayout>

    <RelativeLayout
        android:layout_
        android:layout_
        android:layout_gravity="start"
        android:background="@android:color/white">

        <include layout="@layout/main_nav_drawer" />
        
    </RelativeLayout>

</androidx.drawerlayout.widget.DrawerLayout>

【讨论】:

非常感谢 Zain 的回答。它实际上解决了我的问题,我会努力使布局完全符合我的要求。【参考方案2】:

问题在于 RecyclerView 的 layout_marginBottom 属性。 500像素?!你在跟我开玩笑吗? 8dp就够了。

【讨论】:

感谢您的回答。这实际上并没有解决问题,但@Zain 解决了。【参考方案3】:

可能的选择:

结合 ConstraintLayout,根据屏幕分辨率动态设置边距。这里有些例子: https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout?hl=id#RelativePositioning https://constraintlayout.com/layouts/percentlayout.html 根据您所需的比例动态设置边距。这是一个例子:https://***.com/a/16200839/9772953 删除 RecyclerView 的底部边距。 考虑更新 RecyclerView 的底部边距,将其替换为 更小的东西。

【讨论】:

以上是关于在页面底部添加结帐按钮的主要内容,如果未能解决你的问题,请参考以下文章

Woocommerce 如何将优惠券表格移动到结帐页面的底部

Woocommerce 添加到购物车按钮重定向到结帐

如何为 Ubercart 结帐完成页面设置主题

将客户的提示输入添加到 WooCommerce 结帐页面

从结帐页面中删除贝宝快速结帐单选按钮

如何使用 javascript 编辑结帐页面?