如何将布局与图像视图和文本重叠在另一个布局上作为堆栈/桩

时间:2015-09-21 13:17:02

标签: android css android-layout layout

我在现有项目中处于一种奇怪的境地。在我的项目中,我希望将一个布局作为一个动态堆栈扩展到另一个布局。目前在我的项目中,我设法通过附加它们来垂直地显示布局,这种方法已被我选择,因为即使我试图将其显示为堆栈,在运行时期间只有一个图像出现在前面而不是一堆。为了解我的问题,请浏览以下图片链接和代码

desired result

acquired_result_when_tried_to_acheive_desired_result

approached way

家长布局:

<LinearLayout android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/imagegallery"
android:orientation="vertical"></LinearLayout>

子布局:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<RelativeLayout
    android:id="@+id/relativeImage"
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:layout_below="@+id/rl1"
    android:layout_centerVertical="true"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="15dp" >

    <RelativeLayout
        android:id="@+id/parent"
        android:layout_width="wrap_content"
        android:layout_height="250dp"
        android:orientation="vertical" >

        <Button
            android:id="@+id/left1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:background="@drawable/close" />

        <Button
            android:id="@+id/right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:background="@drawable/right" />

        <ImageView
            android:id="@+id/image"
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:adjustViewBounds="true"
            android:background="@drawable/deelpizza"
            android:paddingBottom="15dp"
            android:paddingEnd="0dp"
            android:paddingStart="0dp"
            android:scaleType="fitCenter" />

        <RelativeLayout
            android:id="@+id/left"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignTop="@+id/image"
            android:background="@drawable/text_bg" >

            <ImageView
                android:id="@+id/imageprew"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="15dp"
                android:background="@drawable/icon_3" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_toRightOf="@+id/imageprew"
                android:text="This is an exclusive Deel good for today only clime this  deel before its close!"
                android:textColor="#FFFFFF" />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="15dp"
                android:layout_below="@+id/imageprew" >
            </RelativeLayout>
        </RelativeLayout>
        <!--
      <Button
        android:id="@+id/left"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_alignParentLeft="true"
      android:background="@drawable/text_bg"
       android:layout_alignTop="@+id/image"
        />
        -->

    </RelativeLayout>
</RelativeLayout>

 <RelativeLayout
    android:id="@+id/relativeDetails"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/relativeImage"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:background="@drawable/rectangle" >
    <TextView
        android:id="@+id/locationText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/descText"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="8dp"
        android:text="woodfire pizza, Los Gatos CA\nLimited time offer, redeemable today only."
        android:textColor="#000000" />
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_below="@+id/locationText" />
    <TextView
        android:id="@+id/descText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="8dp"
        android:text="1 large, 2 topping pizza"
        android:textColor="#000000"
        android:textSize="20dp"
        android:textStyle="bold" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="10dp"
        android:text="$15"
        android:textColor="#FF0000"
        android:textSize="25dp" />
</RelativeLayout>

JavaCode:

 private void addImagesToThegallery() {
    LinearLayout imageGallery = (LinearLayout)findViewById(R.id.imagegallery);
    //imageGallery.setPadding(0, 0, 0, 30);
    LayoutInflater layoutInfralte=(LayoutInflater)getApplicationContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    List views=new ArrayList();
      View view;
    for(int j=0; j<=5; j++)
    {
        view=layoutInfralte.inflate(R.layout.newdeels, null);
        view.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
        views.add(view);
    }
    for(int i = 0; i<views.size(); i++)
    {
        imageGallery.addView((View) views.get(i));
      }

请仔细阅读我的代码,让我知道我哪里出错了,如果我不清楚,请告诉我

4 个答案:

答案 0 :(得分:0)

更改边距顶部以使视图稍微下降

  for(int j=0; j<=5; j++)
        {
            view=layoutInfralte.inflate(R.layout.newdeels, null);
            LinearLayout.LayoutParams lp=new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
            lp.setMargins(left,5*j, right, bottom);
            view.setLayoutParams(lp);
            views.add(view);
        }
        for(int i = 0; i<views.size(); i++)
        {
            imageGallery.addView((View) views.get(i));
          }

答案 1 :(得分:0)

结帐

<强> Github : Material Recent Layout

Material Recent Layout

<强>用法

//Search button click
$("#searchbutton").click(function() {
    var searchInfo = document.getElementById("search");
    console.log(searchInfo.value);
    var playerNamer = findPlayerBy(playerLst,searchInfo.value,null);
    if (playerNamer == false){
        //Do nothing, if search fails
    }
    else{
        console.log(document.getElementById("id_"+playerNamer.pos));
        window.scroll(0,findPos(document.getElementById("id_"+playerNamer.pos)));
    }
});

function findPos(obj) {
    var curtop = 0;
    if (obj.offsetParent) {
        do {
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    return [curtop];
    }
}

注意

您需要根据自己的要求进行修改。

答案 2 :(得分:0)

在父布局中尝试FrameLayout。在子视图中设置不同的边距以实现堆栈效果。

  

子视图以堆栈形式绘制,最近添加的子视图位于顶部

答案 3 :(得分:0)

  

退房:github.com/kikoso/Swipeable-Cards

根据您的回复:

嗨,谢谢您的答复,您的回复确实有效。但现在我正在处理另一种情况,其中我想基于滑动来更新细节,例如:如果卡被向右滑动,它应该被打手势,就好像卡片被向左滑动一样,它应该被打手势为不喜欢所以如何实际编码这些滑动手势可以帮助我

@ashwin为此你应该有likedislike可绘制或自定义视图。

    card.setOnCardDimissedListener(new CardModel.OnCardDismissedListener() {
     @Override
     public void onLike() {
          Log.d("Swipeable Card", "I liked it");
     }

     @Override
     public void onDislike() {
          Log.d("Swipeable Card", "I did not liked it");
     }
});

showhide各自的方法中,使用以上代码段likedislike onLike()onDislike()的视图。< / p>

修改1:

我想出了你面临的问题,如果你只是在实施Sample Code。然后,它清楚地显示CardContainer已将SimpleCardStackAdapter作为适配器,并使用 new 运算符将CardModel添加到其中。除了单独添加的CardModel的最后一个元素,并且cardModel Listener仅应用于最后一个元素。如果要将其应用于所有元素。然后,您必须按SimpleCardStackAdapter的{​​{1}}将元素添加到ArrayList