2016-02-10 8 views
8

赤いマーク付きアイコン(3ドット)をクリックすると、特定のGriditem上に透明なレイヤーが必要です。私は透明なレイヤーを持っています。しかし、それはグリッド上ではありません。私はアクティビティの最上部にあります。 これを行う方法は?CardIViewアイテムを透過するレイヤーを作成するには?

**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> 
+0

グリッドレイアウト用にリサイクルビュー/その他のライブラリを使用していますか? –

+0

Recyclerビューのみ。 –

+1

3ドットアイコンをクリックすると、既存のレイアウトの上にオーバーレイが必要ですが、残りのアイテムにはオーバーレイが必要ですか?正しい –

答えて

8

だと思います。です!!

フレームレイアウトと一緒に表示機能を使用すると、透過背景を実現できます。あなたの理解のために私は説明と詳細なコードを含んでいます。

これを試してみてください。

これはあなたの単列アイテムのxmlレイアウトです。ちょっと混乱するかもしれませんが、私に知らせてください。

ステップ1: 以下のように、カードビュー内に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を既存のフレームレイアウトの下に配置します。この新たに追加されたフレームレイアウトには、以下のように3つのボタンが定義されています。

<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アダプタでは、最後に以下のコードを貼り付けてください。これは、3つのボタンが表示されたときに半透明の背景を生成するためのものです。あなたのbindviewホルダーは、下記のコードを書くようになりまし

アダプタクラスで

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(); 
    } 

@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

NOTEを探す:あなたは、コードをブリーフィングしたい場合、私はあなたのより良い理解のためにそれをやります。 クエリでお知らせします。

ハッピーコーディング.. !!

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(); 
     } 
    } 

次に、あなたが実際のPopupMenuのためのXMLファイルを必要とする、あなたの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にスタイルを適用することができます。

+0

ありがとう@mcwise。後で結果をあなたに知らせてください。 –

+0

私は@mcwiseが期待している正確な結果を得られませんでした –

+0

あなたはちょっと正確ですか?まだ何が違うのですか? – marktani

関連する問題