小程序视图view重叠展示示例

Posted 2023-04-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序视图view重叠展示示例相关的知识，希望对你有一定的参考价值。

参考技术A 类似如图背景图片底部显示半透明文本view：

.wxml

.wxss

要点：父视图的position: relative; 重叠放置在父视图上的视图postion: absolute。

设置可见性时 XML 列表视图重叠元素

【中文标题】设置可见性时 XML 列表视图重叠元素【英文标题】：XML listview overlaps elements when setting visibility 【发布时间】：2013-09-10 06:22:52 【问题描述】：

我有一个大约 3000 行的 xml 布局，用作问卷类型应用程序的布局。问卷的每一页都在不同的线性布局内，我使用View.GONE 或View.VISIBLE 在代码中设置线性布局的可见性。这样，用户无需每次加载新的intents 即可浏览页面。

但是，当我快速浏览应用程序时（只需按 next button 浏览屏幕），一些本应为 View.GONE 的元素出现并重叠可见项。这只发生在其中包含列表视图的线性布局中。对于所有其他页面。

我可以快速滚动浏览它们，但是当我导航太快时，有时会出现在View.GONE 元素中具有列表视图的那些。我怎样才能解决这个问题？如果您需要代码，请告诉我...但是 xml 非常大。

T.I.A.

编辑

这是我的 xml 代码的一个示例，我的 xml 中有 3000 行重复...

  <LinearLayout
android:id="@+id/package_normal_samplesblood"
android:orientation="vertical"
android:layout_
android:layout_>

    <LinearLayout
    android:layout_
    android:layout_
    android:layout_marginBottom="70dp"
    android:orientation="vertical">

        <TextView
            android:id="@+id/textview_heading_b1"
            android:layout_
            android:layout_
            android:textSize="23sp"
            android:layout_marginLeft="13dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="12dp"
            android:layout_marginBottom="12dp"
            android:textColor="#6f6f6f"
            android:layout_gravity="left"
            android:text="Blood Samples"/>

    <Button
    android:id="@+id/button_samples_blood"
    android:text="Add Blood Samples"
    android:layout_
    android:layout_
    android:textSize="20sp"
    android:layout_gravity="center"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"/>

    <ListView
    android:id="@+id/listview_samples_blood"
    android:scrollbarSize="0dp"
    android:layout_
    android:layout_
    android:background="#ffffff"
    android:orientation="vertical"
    /> 
        </LinearLayout>
       <RelativeLayout
android:orientation="horizontal"
android:background="#ffffff"
android:layout_
android:layout_
android:layout_marginTop="-75dp"

>
        <View
    android:layout_
    android:layout_alignParentTop="true"
    android:layout_
    android:background="#DEDEDE"
    android:layout_marginTop="2dp"/>
<ImageButton
            android:id="@+id/left9"
            android:background="@null"
            android:scaleType="fitEnd"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="10dp"
            android:layout_
            android:layout_
            android:src="@drawable/left"/>
<TextView
            android:id="@+id/textview_heading2"
            android:layout_
            android:layout_
            android:textSize="25sp"
            android:layout_centerInParent="true"
            android:layout_marginTop="10dp"
            android:textColor="#6f6f6f"
            android:layout_gravity="center"
            android:text="RhODIS®"/>
<ImageButton
            android:id="@+id/right9"
            android:background="@null"
            android:scaleType="fitEnd"
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"
            android:layout_marginTop="10dp"
            android:layout_marginRight="10dp"
            android:layout_
            android:layout_
            android:src="@drawable/right"/>
 </RelativeLayout>
 </LinearLayout>


  <LinearLayout
android:id="@+id/package_normal_sampleshair"
android:orientation="vertical"
android:layout_
android:layout_>

    <LinearLayout
    android:layout_
    android:layout_
    android:layout_marginBottom="70dp"
    android:orientation="vertical">

        <TextView
            android:id="@+id/textview_heading_b2"
            android:layout_
            android:layout_
            android:textSize="23sp"
            android:layout_marginLeft="13dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="12dp"
            android:layout_marginBottom="12dp"
            android:textColor="#6f6f6f"
            android:layout_gravity="left"
            android:text="Hair Samples"/>

    <Button
    android:id="@+id/button_samples_hair"
    android:text="Add Hair Samples"
    android:layout_
    android:layout_
    android:textSize="20sp"
    android:layout_gravity="center"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"/>

    <ListView
    android:id="@+id/listview_samples_hair"
    android:scrollbarSize="0dp"
    android:layout_
    android:layout_
    android:background="#ffffff"
    android:orientation="vertical"
    /> 
        </LinearLayout>
       <RelativeLayout
android:orientation="horizontal"
android:background="#ffffff"
android:layout_
android:layout_
android:layout_marginTop="-75dp"

>
        <View
    android:layout_
    android:layout_alignParentTop="true"
    android:layout_
    android:background="#DEDEDE"
    android:layout_marginTop="2dp"/>
<ImageButton
            android:id="@+id/left10"
            android:background="@null"
            android:scaleType="fitEnd"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="10dp"
            android:layout_
            android:layout_
            android:src="@drawable/left"/>
<TextView
            android:id="@+id/textview_heading2"
            android:layout_
            android:layout_
            android:textSize="25sp"
            android:layout_centerInParent="true"
            android:layout_marginTop="10dp"
            android:textColor="#6f6f6f"
            android:layout_gravity="center"
            android:text="RhODIS®"/>
<ImageButton
            android:id="@+id/right10"
            android:background="@null"
            android:scaleType="fitEnd"
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"
            android:layout_marginTop="10dp"
            android:layout_marginRight="10dp"
            android:layout_
            android:layout_
            android:src="@drawable/right"/>
 </RelativeLayout>
 </LinearLayout>

然后这是我如何在代码中显示和隐藏线性布局的示例，重复 24 个左按钮和 24 个右按钮：

left24.setOnClickListener(new View.OnClickListener()
    
        public void onClick(View v)
        
            package_normal_welcomescreen.setVisibility(View.GONE);
            package_normal_package_details.setVisibility(View.GONE);
            package_normal_openbag.setVisibility(View.GONE);
            package_normal_kitnumber.setVisibility(View.GONE);
            package_normal_emptybag.setVisibility(View.GONE);
            package_normal_gpscoordinates.setVisibility(View.GONE);
            package_normal_image_scene.setVisibility(View.GONE);
            package_normal_samplesblood.setVisibility(View.GONE);
            package_normal_sampleshair.setVisibility(View.GONE);
            package_normal_samplestissue.setVisibility(View.GONE);
            package_normal_sampleshorn.setVisibility(View.GONE);
            package_normal_samplesother.setVisibility(View.GONE);
            package_normal_packsamples.setVisibility(View.GONE);
            package_normal_returnbag.setVisibility(View.GONE);
            package_normal_sealreturnbag.setVisibility(View.GONE);
            package_normal_image_sealedbag.setVisibility(View.GONE);
            package_normal_scanned.setVisibility(View.GONE);
            package_normal_animal_details.setVisibility(View.GONE);
            package_normal_animal_horn_details.setVisibility(View.GONE);
            package_normal_animal_ears.setVisibility(View.GONE);
            package_normal_area_details.setVisibility(View.GONE);

            package_normal_collecter_details.setVisibility(View.GONE);
            package_normal_additional_information.setVisibility(View.GONE);

             package_normal_owner_details.setVisibility(View.VISIBLE);
             package_normal_owner_details.bringToFront();
        
    );

    right24.setOnClickListener(new View.OnClickListener()
    
        public void onClick(View v)
        
            if(Session.signatureIsCaptured)
            
            package_normal_welcomescreen.setVisibility(View.GONE);
            package_normal_package_details.setVisibility(View.GONE);
            package_normal_openbag.setVisibility(View.GONE);
            package_normal_kitnumber.setVisibility(View.GONE);
            package_normal_emptybag.setVisibility(View.GONE);
            package_normal_gpscoordinates.setVisibility(View.GONE);
            package_normal_image_scene.setVisibility(View.GONE);
            package_normal_samplesblood.setVisibility(View.GONE);
            package_normal_sampleshair.setVisibility(View.GONE);
            package_normal_samplestissue.setVisibility(View.GONE);
            package_normal_sampleshorn.setVisibility(View.GONE);
            package_normal_samplesother.setVisibility(View.GONE);
            package_normal_packsamples.setVisibility(View.GONE);
            package_normal_returnbag.setVisibility(View.GONE);
            package_normal_sealreturnbag.setVisibility(View.GONE);
            package_normal_image_sealedbag.setVisibility(View.GONE);
            package_normal_scanned.setVisibility(View.GONE);
            package_normal_animal_details.setVisibility(View.GONE);
            package_normal_animal_horn_details.setVisibility(View.GONE);
            package_normal_animal_ears.setVisibility(View.GONE);
            package_normal_area_details.setVisibility(View.GONE);
            package_normal_owner_details.setVisibility(View.GONE);
            package_normal_collecter_details.setVisibility(View.GONE);
            package_normal_additional_information.setVisibility(View.VISIBLE);
            package_normal_additional_information.bringToFront();
            
            else
            
                Toast.makeText(Screen_Package_Normal.this, "Authorized Signature Required", Toast.LENGTH_LONG).show();
            

        

    );

我有不同类型的列表视图和适配器，自定义和内置的 android。我认为问题不在于适配器，因为它可以很好地显示列表视图，甚至在填充列表视图之前就出现问题...

【问题讨论】：

【参考方案1】：

我有一个临时修复，不确定作为答案的正确性，但这解决了我的问题...我将它应用于我的整个布局，当我隐藏和显示布局时它会添加一个动画，从而减慢它们向下一点，从显示中删除重叠的元素。

这是我添加到布局中的内容：

android:animateLayoutChanges="true"

【讨论】：

我的解决办法是致电requestLayout()。

以上是关于小程序视图view重叠展示示例的主要内容，如果未能解决你的问题，请参考以下文章

小程序框架之视图层 View~获取界面节点信息