如何在CardIView项目上创建透明层?

时间:2016-02-10 07:32:16

标签: android alertdialog android-alertdialog

我需要在特定的Griditem上有一个透明层,我点击 RED MARKED图标(3个点)。我得到了透明层。但它不在网格上。我把它放在活动的顶部。 怎么做?

**Expected Result**

enter image description here

这是我的代码:

在适配器类中:

private void createDialogBox() {
    AlertDialog.Builder builder = new AlertDialog.Builder(context);
    final AlertDialog dialog = builder.create();
    dialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
    View dialogLayout = LayoutInflater.from(context).inflate(R.layout.demo_dialog, null);
    dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
    dialog.setView(dialogLayout, 0, 0, 0, 0);


    dialog.setOnShowListener(new DialogInterface.OnShowListener() {
        @Override
        public void onShow(DialogInterface d) {
        }
    });
    dialog.getWindow().setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.MATCH_PARENT);
    dialog.show();
}

demo_dialog.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linearLayout"
    style="@style/LinearLayout_mm"
    android:layout_gravity="center"
    android:gravity="center"
    android:onClick="Click"
    android:orientation="vertical"
    android:theme="@style/cust_dialog">

    <ImageView
        android:id="@+id/pullToRefresh_img"
        style="@style/LinearLayout_mm"
        android:onClick="Click"
        android:src="@drawable/ig_dash_front1" />

</LinearLayout>

style.xml:

  <style name="cust_dialog" parent="@android:style/Theme.Holo.NoActionBar.Fullscreen">
        <item name="android:textColor">@color/white</item>
        <item name="android:background">#80000000</item>
        <item name="android:windowFrame">@null</item>
        <item name="android:windowBackground">@color/black</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowIsFloating">false</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowTitleStyle">@null</item>
        <item name="android:colorBackgroundCacheHint">@null</item>
        <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>
        <item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
        <item name="android:gravity">center</item>
        <item name="colorAccent">#00f3f4f8</item>
    </style>

2 个答案:

答案 0 :(得分:8)

认为我让它运作 .. !!

您可以使用可见性功能与框架布局相结合来实现透明度背景。为了您的理解,我已经包含详细的代码和解释。

试试这个..

这是您的单行项目xml布局。可能有点混乱,让我知道。

第1步: 您需要在cardview中创建一个Relativelayout,如下所示。

<android.support.v7.widget.CardView
android:layout_width = "160dp"
android:layout_height = "176dp"
app:cardCornerRadius = "5dp"
app:cardElevation = "5dp">

<RelativeLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:gravity = "center">

....
 .... // Here we need to do some trick to make the pop up appear.

</RelativeLayout>

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

第2步: 这是您在加载时实际可见的布局。将您的图像视图放在relativelayout中,如下所示。并使用框架布局结合视图在底部添加菜单和标题选项。请参阅以下代码。

  <ImageView
     android:id = "@+id/item_image"
     ....
     android:layout_gravity = "center"
     android:background = "@android:color/transparent"
     android:src = "@drawable/tes"/>

  <FrameLayout
     android:id = "@+id/frame_1"
     android:layout_width = "match_parent"
     android:layout_height = "32dp"
     android:layout_alignParentBottom = "true">

    <View
       android:id = "@+id/overlay_1"
       android:layout_width = "match_parent"
       android:layout_height = "32dp"/>

    <RelativeLayout
       android:layout_width = "match_parent"
       android:layout_height = "wrap_content"
       android:layout_alignParentBottom = "true"
       android:gravity = "center">

      <TextView
         android:id = "@+id/item_title"
         ... 
          ... />

       // Three dots
      <ImageButton 
         android:id = "@+id/item_menu"
         ..
         android:layout_alignParentRight = "true"
         android:background = "@android:color/transparent"
         android:scaleType = "centerCrop"
         android:src = "@drawable/abc_ic_menu_moreoverflow_mtrl_alpha"/>

    </RelativeLayout>
  </FrameLayout>

第3步 这里完成了一半的实施。现在将另一个FrameLayout放在现有框架布局下面。在这个新添加的框架布局中有三个按钮,如下所示。

  <FrameLayout
     android:id = "@+id/frame_2"
     android:layout_width = "match_parent"
     android:layout_height = "match_parent"
     android:layout_alignParentBottom = "true"
     android:visibility = "gone">

    <View
       android:id = "@+id/overlay_2"
       android:layout_width = "match_parent"
       android:layout_height = "match_parent"/>

    <LinearLayout
       android:layout_width = "match_parent"
       android:layout_height = "match_parent"
       android:layout_alignParentBottom = "true"
       android:gravity = "center"
       android:orientation = "vertical">

      <Button
         android:id = "@+id/b1"
         ...
         android:text = "DETAIL"/>

      <Button
         android:id = "@+id/b2"
         ...
         android:text = "CART"/>

      <Button
         android:id = "@+id/b3"
         ...
         android:text = "CHECKOUT"/>
    </LinearLayout>
  </FrameLayout>

现在您的XML文件已准备就绪。所以你有1个Imageview,2个Framelayouts包含在Cardview下面的RelativeLayout中。

现在是代码的时间。

在Recyclerview适配器中,最后创建以下功能,只需复制粘贴下面的代码即可。这是为了在出现三个按钮时生成半透明背景。

在适配器类

public void setOverlay(View v, int opac) {
    int opacity = opac; // from 0 to 255
    v.setBackgroundColor(opacity * 0x1000000); // black with a variable alpha
    FrameLayout.LayoutParams params =
            new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT);
    params.gravity = Gravity.NO_GRAVITY;
    v.setLayoutParams(params);
    v.invalidate();
  }

现在在你的bindview持有者上写下面的代码。

@Override
  public void onBindViewHolder(final CustomViewHolder holder, final int position) {

// Initally image with title and menu is shown.

    holder.menu.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        holder.ff.setVisibility(View.GONE); // this will hide the title and menu button.
        holder.ff2.setVisibility(View.VISIBLE); // will show you the three button popup.
      }
    });

    holder.b1.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        holder.ff.setVisibility(View.VISIBLE);
        holder.ff2.setVisibility(View.GONE);
      }
    });
    holder.itemTitle.setText(memList.get(position));

// Hero of the code. This will set the translucent background when 3 buttons appear. 
    setOverlay(holder.overlayPager_1, 140);  
    setOverlay(holder.overlayPager_2, 200);

  }

查找附加的屏幕截图

pop on row item

注意:如果您想简要介绍一下代码,我会这样做是为了让您更好地理解。 查询让我知道。

快乐的编码.. !!

答案 1 :(得分:2)

我认为PopupMenu是您想要的,而不是AlertDialog。 假设您的3点式图标名为 more_icon ,您可以像这样定义PopupMenu:

    more_icon.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            PopupMenu popupMenu = new PopupMenu(v.getContext(), v);
            popupMenu.inflate(R.menu.show_more_menu);

            //registering popup with OnMenuItemClickListener
            popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
                public boolean onMenuItemClick(MenuItem item) {
                    if (item.getItemId() == R.id.view_detail_item) {
                        // view detail was clicked
                        return true;
                    } else if (item.getItemId() == R.id.add_to_cart_item) {
                        // add to cart was clicked
                        return true;
                    } else if (item.getItemId() == R.id.checkout_item) {
                        // checkout was clicked
                        return true;
                    }
                    return false;
                    }
                });

            popupMenu.show();
        }
    }

然后,您需要一个xml文件,用于实际的PopupMenu,在main/res/menu文件夹中名为 show_more_menu

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/view_detail_item"
          android:title="View Detail" >
    </item>
    <item android:id="@+id/add_to_cart_item"
          android:title="Add to Cart" >
    </item>
    <item android:id="@+id/checkout_item"
          android:title="Checkout" >
    </item>
</menu>

然后您可以按照this SO-answer中的详细说明将样式应用于PopupMenu,您也可以在其中将背景更改为透明。