2016-02-10 10 views
8

Ich brauche eine transparente Schicht über dem jeweiligen Griditem an, wo ich auf das ROT MARKIERTE Symbol (3 Punkte) klicke. Ich habe die transparente Ebene. Aber es ist nicht über das Raster., Ich habe es am Anfang einer Aktivität. Wie geht das?Wie wird eine transparente Ebene über dem CardIView-Objekt erstellt?

**Expected Result**

enter image description here

Dies ist mein Code:

In Adapter Klasse:

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

verwenden Sie die Recycler-Ansicht/eine andere Lib für das Grid-Layout? –

+0

Nur Recycler-Ansicht. –

+1

Wenn Sie also auf drei Punkte-Symbole klicken, benötigen Sie ein Overlay über dem bestehenden Layout und nicht auf den übrigen Elementen? richtig –

Antwort

8

denke ich habe es funktioniert .. !!

Sie können die Sichtbarkeitsfunktion in Kombination mit dem Rahmenlayout verwenden, um den Transparenzhintergrund zu erzielen. Für Ihr Verständnis habe ich den ausführlichen Code mit Erklärung eingeschlossen.

die Sie interessieren ..

Das ist Ihre einzige Reihe Element xml-Layout. Kann etwas verwirrend sein, lass es mich wissen.

Schritt 1: Sie müssen ein Relativlayout innerhalb des cardview wie unten erstellen.

<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> 

Schritt 2: Dies ist Sie tatsächlich sichtbare Layout auf Last. Platzieren Sie Ihre Bildansicht innerhalb des relativen Layouts wie unten. Fügen Sie die Menü- und Titeloptionen am unteren Rand hinzu, indem Sie das Rahmenlayout in Kombination mit der Ansicht verwenden. Siehe den folgenden Code.

<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> 

Schritt 3 Die Hälfte der Implementierung, bei der hier abgeschlossen. Stellen Sie nun das andere FrameLayout unter das bestehende Rahmenlayout.In diesem neu hinzugefügten Rahmenlayout sind drei Schaltflächen wie folgt definiert.

<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> 

Jetzt ist Ihre XML-Datei bereit. Sie haben also 1 Imageview, 2 Framelayouts innerhalb des RelativeLayout, das sich unter der Cardview befindet.

Jetzt ist es Zeit für Code.

Erstellen Sie in Recyclerview-Adapter die unten stehende Funktion am Ende, kopieren Sie einfach den folgenden Code. Dies dient zum Generieren des durchscheinenden Hintergrunds, wenn drei Schaltflächen angezeigt werden.

In Adapter Class

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

jetzt auf Ihrem BindViews Halter den Code unten schreiben.

@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); 

    } 

Finden Sie das beigefügte Screenshot

pop on row item

HINWEIS: Wenn Sie den Code informieren möchte, ich es für Ihr besseres Verständnis tun werde. Fragen lassen Sie mich wissen.

Glückliche Kodierung .. !!

2

Ich denke, ein PopupMenu ist, was Sie wollen, anstatt eine Alertdialog. Ihre 3-gepunktete-Symbol Angenommenmore_icon genannt wird, können Sie Ihre PopupMenu wie folgt definieren:

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

Dann rief benötigen Sie eine XML-Datei für die tatsächliche PopupMenu, show_more_menu in Ihrem main/res/menu Ordner.

<?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> 

Sie können dann einen Stil auf die PopupMenu gelten als in this SO-answer detailliert, wo Sie auch den Hintergrund transparent sein, ändern kann.

+0

Danke @mcwise. Lass mich das Ergebnis später ausprobieren und intimieren. –

+0

Hat nicht das genaue Ergebnis, das ich erwarte @mcwise –

+0

Können Sie ein bisschen präzise sein? Was ist noch anders? – marktani

Verwandte Themen