آموزش Pop up window در برنامه نویسی اندروید

سلام دوستان در این سری از آموزش برنامه نویسی اندروید به آموزش Pop up window در برنامه نویسی اندروید می پردازیم Pop up window شبیه به Context menu است با قابلیت سفارشی سازی در ادامه می توانید پیش نمایشی از آن را مشاهده کنید با ما همراه باشید.

این نوع منو ها سفارشی شده Context منو هستند در بالا ما تمامی بخش ها را سفارشی کردیم.
ابتدا یک فایل به نام customborder.xml در پوشه drawable ایجاد کنید.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <corners android:radius="20dp"/>
  <padding android:left="10dp" android:right="10dp" android:top="10dp" android:bottom="10dp"/>
  <solid android:color="#7FC9FF"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>

</shape>

فایل zip زیر را دانلود کنید و در پوشه drawable قرار دهید.
لینک دانلود فایل
در layout اصلی که در اینجا نام آن activity_main.xml است کدهای زیر قرار گرفته است.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="ir.programchi">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Programchi.ir"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <Button
        android:id="@+id/button"
        android:layout_width="88dp"
        android:layout_height="48dp"
        android:text="Button"
        tools:layout_editor_absoluteX="16dp"
        tools:layout_editor_absoluteY="16dp" />
</android.support.constraint.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="ir.programchi">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Programchi.ir"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent" />

<Button

android:id="@+id/button"

android:layout_width="88dp"

android:layout_height="48dp"

android:text="Button"

tools:layout_editor_absoluteX="16dp"

tools:layout_editor_absoluteY="16dp" />

</android.support.constraint.ConstraintLayout>

در بالا یک دکمه قرار گرفته است که Pop Up Menu در آن نمایش داده می شود.
یک فایل به نام winners.xml ایجاد کنید و کدهای زیر را در آن قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/popup_element"
    android:layout_width="240dp"
    android:layout_height="285dp"
    android:background="@drawable/customborder">
    <ImageView android:id="@+id/goldMedal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="5dp"
        android:src="@drawable/gold_medal" />
    <TextView android:id="@+id/goldName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/goldmedal"
        android:layout_marginLeft="15dp"
        android:layout_toEndOf="@+id/goldMedal"
        android:layout_toRightOf="@+id/goldMedal"
        android:text="Gold Name"
        android:textAppearance="?android:attr/textAppearanceMedium" />
    <TextView android:id="@+id/goldScore"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/goldName"
        android:layout_below="@+id/goldName"
        android:layout_marginTop="5dp"
        android:text="Gold Score"
        android:textAppearance="?android:attr/textAppearanceSmall" />
    <ImageView android:id="@+id/silverMedal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/goldMedal"
        android:layout_below="@+id/goldMedal"
        android:layout_marginTop="5dp"
        android:src="@drawable/silver_medal" />
    <TextView android:id="@+id/silverName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/goldName"
        android:layout_alignTop="@+id/silverMedal"
        android:text="Silver Name"
        android:textAppearance="?android:attr/textAppearanceMedium" />
    <TextView android:id="@+id/silverScore"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/silverName"
        android:layout_below="@+id/silverName"
        android:layout_marginTop="5dp"
        android:text="Silver Score"
        android:textAppearance="?android:attr/textAppearanceSmall" />
    <ImageView android:id="@+id/bronzeMedal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/silverMedal"
        android:layout_below="@+id/silverMedal"
        android:layout_marginTop="5dp"
        android:src="@drawable/bronze_medal" />
    <TextView android:id="@+id/bronzeName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/silverName"
        android:layout_alignTop="@+id/bronzeMedal"
        android:text="Bronze Name"
        android:textAppearance="?android:attr/textAppearanceMedium" />
    <TextView android:id="@+id/bronzeScore"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/bronzeName"
        android:layout_marginTop="5dp"
        android:layout_alignLeft="@+id/bronzeName"
        android:text="Bronze Score"
        android:textAppearance="?android:attr/textAppearanceSmall" />
    <Button android:id="@+id/close"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/bronzeMedal"
        android:layout_centerHorizontal="true"
        android:text="Close" />
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/popup_element"

android:layout_width="240dp"

android:layout_height="285dp"

android:background="@drawable/customborder">

<ImageView android:id="@+id/goldMedal"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentTop="true"

android:layout_alignParentLeft="true"

android:layout_marginLeft="10dp"

android:layout_marginTop="5dp"

android:src="@drawable/gold_medal" />

<TextView android:id="@+id/goldName"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignTop="@+id/goldmedal"

android:layout_marginLeft="15dp"

android:layout_toEndOf="@+id/goldMedal"

android:layout_toRightOf="@+id/goldMedal"

android:text="Gold Name"

android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView android:id="@+id/goldScore"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignLeft="@+id/goldName"

android:layout_below="@+id/goldName"

android:layout_marginTop="5dp"

android:text="Gold Score"

android:textAppearance="?android:attr/textAppearanceSmall" />

<ImageView android:id="@+id/silverMedal"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignLeft="@+id/goldMedal"

android:layout_below="@+id/goldMedal"

android:layout_marginTop="5dp"

android:src="@drawable/silver_medal" />

<TextView android:id="@+id/silverName"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignLeft="@+id/goldName"

android:layout_alignTop="@+id/silverMedal"

android:text="Silver Name"

android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView android:id="@+id/silverScore"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignLeft="@+id/silverName"

android:layout_below="@+id/silverName"

android:layout_marginTop="5dp"

android:text="Silver Score"

android:textAppearance="?android:attr/textAppearanceSmall" />

<ImageView android:id="@+id/bronzeMedal"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignLeft="@+id/silverMedal"

android:layout_below="@+id/silverMedal"

android:layout_marginTop="5dp"

android:src="@drawable/bronze_medal" />

<TextView android:id="@+id/bronzeName"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignLeft="@+id/silverName"

android:layout_alignTop="@+id/bronzeMedal"

android:text="Bronze Name"

android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView android:id="@+id/bronzeScore"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/bronzeName"

android:layout_marginTop="5dp"

android:layout_alignLeft="@+id/bronzeName"

android:text="Bronze Score"

android:textAppearance="?android:attr/textAppearanceSmall" />

<Button android:id="@+id/close"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/bronzeMedal"

android:layout_centerHorizontal="true"

android:text="Close" />

</RelativeLayout>

حالا بخش مربوط به MainActivity.java که همانند زیر می شود.

package ir.programchi;
import android.content.Context;
import android.graphics.drawable.ColorDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.PopupWindow;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
    String goldWinner="Fred Bloggs";
    int goldScore=98123;
    String silverWinner="John Doe";
    int silverScore=54900;
    String bronzeWinner="Joe Public";
    int bronzeScore=25789;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.button).setOnClickListener(new HandleClick());
    }
    private class HandleClick implements View.OnClickListener {
        public void onClick(View arg0) {
            showWinners();
        }
    }
    private void showWinners(){
        LayoutInflater inflater = (LayoutInflater) MainActivity.this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View layout = inflater.inflate(R.layout.winners,null);
        ((TextView)layout.findViewById(R.id.goldName)).setText(goldWinner);
        ((TextView)layout.findViewById(R.id.goldScore)).setText(Integer.toString(goldScore));
        ((TextView)layout.findViewById(R.id.silverName)).setText(silverWinner);
        ((TextView)layout.findViewById(R.id.silverScore)).setText(Integer.toString(silverScore));
        ((TextView)layout.findViewById(R.id.bronzeName)).setText(bronzeWinner);
        ((TextView)layout.findViewById(R.id.bronzeScore)).setText(Integer.toString(bronzeScore));
        float density=MainActivity.this.getResources().getDisplayMetrics().density;
        final PopupWindow pw = new PopupWindow(layout, (int)density*240, (int)density*285, true);
        ((Button) layout.findViewById(R.id.close)).setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                pw.dismiss();
            }
        });
        pw.setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
        pw.setTouchInterceptor(new View.OnTouchListener() {
            public boolean onTouch(View v, MotionEvent event) {
                if(event.getAction() == MotionEvent.ACTION_OUTSIDE) {
                    pw.dismiss();
                    return true;
                }
                return false;
            }
        });
        pw.setOutsideTouchable(true);
        pw.showAtLocation(layout, Gravity.CENTER, 0, 0);
    }
}

package ir.programchi;

import android.content.Context;

import android.graphics.drawable.ColorDrawable;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.Gravity;

import android.view.LayoutInflater;

import android.view.MotionEvent;

import android.view.View;

import android.widget.Button;

import android.widget.PopupWindow;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

String goldWinner="Fred Bloggs";

int goldScore=98123;

String silverWinner="John Doe";

int silverScore=54900;

String bronzeWinner="Joe Public";

int bronzeScore=25789;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

findViewById(R.id.button).setOnClickListener(new HandleClick());

}

private class HandleClick implements View.OnClickListener {

public void onClick(View arg0) {

showWinners();

}

private void showWinners(){

LayoutInflater inflater = (LayoutInflater) MainActivity.this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

View layout = inflater.inflate(R.layout.winners,null);

((TextView)layout.findViewById(R.id.goldName)).setText(goldWinner);

((TextView)layout.findViewById(R.id.goldScore)).setText(Integer.toString(goldScore));

((TextView)layout.findViewById(R.id.silverName)).setText(silverWinner);

((TextView)layout.findViewById(R.id.silverScore)).setText(Integer.toString(silverScore));

((TextView)layout.findViewById(R.id.bronzeName)).setText(bronzeWinner);

((TextView)layout.findViewById(R.id.bronzeScore)).setText(Integer.toString(bronzeScore));

float density=MainActivity.this.getResources().getDisplayMetrics().density;

final PopupWindow pw = new PopupWindow(layout, (int)density*240, (int)density*285, true);

((Button) layout.findViewById(R.id.close)).setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {

pw.dismiss();

}

});

pw.setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));

pw.setTouchInterceptor(new View.OnTouchListener() {

public boolean onTouch(View v, MotionEvent event) {

if(event.getAction() == MotionEvent.ACTION_OUTSIDE) {

pw.dismiss();

return true;

}

return false;

}

});

pw.setOutsideTouchable(true);

pw.showAtLocation(layout, Gravity.CENTER, 0, 0);

}

در بالا با استفاده از LayoutInflater لایه سفارشی که ساختیم را دریافت کردیم سپس تمامی آنها را find کردیم و یک مقدار در آنها set کردیم برای اینکه قسمت background ما نمایش داده شود باید آن را Transparent کنیم زیرا به صورت پیشفرض از background سیاه یا سفید تم ما استفاده خواهد کرد و یک دکمه نیز برای برای بستن آن قرار داده ایم هر جور که دوست داشته باشید می توانید آن را سفارشی کنید.

این آموزش هم به پایان رسید.

موفق و پیروز باشید.

مطالعه بیشتر

یک پاسخ به “آموزش Pop up window در برنامه نویسی اندروید”

aso گفت:
خرداد 12, 1398 در 4:36 ق.ظ
خیلی آموزش عالی و مفیدی بود و خیلی به دردم خورد ممنون از شما .
در ضمن یک سوالی داشتم که میشه همین popup سفارشی را با یک Animation نشان داد؟
یعنی اگر همون Button لمس شد , popup با Animation نشان داده شود؟
اگر امکانش هست لطفا به ایمیلپ کد هارو بفرستید یا اطلاع دهید که روی سایتتون قرار داده اید ممنونم.
aso80choopani@gmail.com
پاسخ

آموزش Pop up window در برنامه نویسی اندروید

مطالب مشابه

یک پاسخ به “آموزش Pop up window در برنامه نویسی اندروید”

دیدگاهتان را بنویسید لغو پاسخ

مطالب مشابه

یک پاسخ به “آموزش Pop up window در برنامه نویسی اندروید”

دیدگاهتان را بنویسید لغو پاسخ

اشتراک گذاری در شبکه های اجتماعی