ساخت دیالوگ های سفارشی

دسته‌بندی:
2 دیدگاه

سلام دیالوگ ها تو اپلیکیشن ها کاربرد های زیادی دارند و احتمال زیاد تا بحال پیش اومده که ازشون استفاده کنید ولی مشکلی که هست اینه دیالوگ های پیش فرض خیلی ساده هستند و به UI برنامه شاید ضربه بزنند که تو متریال دیزاین این دیالوگ ها هم دستخوش تغییرات شدند ولی با این حال باز هم در برنامه نویسی اندروید برای طراحی یک دیالوگ زیبا باید دست به کار بشید و خودتون دیالوگی سفارشی طراحی کنید تا کمی رابط کاربری برنامه بهتر شودپس همراه ما باشید.

ساخت دیالوگ

اندروید دیالوگ

خب اول از یک فایل layout_colordialog.xml میسازیم و به شکل زیر کامل میکنیم.

 


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:wheel="http://schemas.android.com/apk/res-auto" 
android:id="@+id/loading"
 android:layout_width="300dp"
 android:layout_height="wrap_content" 
android:layout_gravity="center" 
android:gravity="center"
 android:orientation="vertical" 
android:padding="10dp">

    <LinearLayout android:id="@+id/llBkg"
 android:layout_width="match_parent"
 android:layout_height="wrap_content" 
android:background="@drawable/shape_top"
 android:orientation="vertical">

        <TextView android:id="@+id/tvTitle" 
android:layout_width="match_parent"
 android:layout_height="40dp"
 android:ellipsize="end"
 android:gravity="center"
 android:padding="5dp"
 android:singleLine="true" 
android:textColor="@android:color/white" 
android:textSize="16sp" />

        &lt;LinearLayout 
android:id="@+id/llContent" 
android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:gravity="center_vertical"
 android:minHeight="60dp" 
android:orientation="vertical"&gt;

            &lt;FrameLayout android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:minWidth="250dp"&gt;

                &lt;ImageView android:id="@+id/ivContent"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" 
android:layout_gravity="center"
 android:scaleType="fitCenter" 
android:visibility="gone"/&gt;

                &lt;TextView android:id="@+id/tvContent" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:gravity="left" 
android:paddingBottom="10dp"
 android:paddingLeft="10dp" 
android:paddingRight="10dp"
 android:paddingTop="5dp" 
android:textColor="@android:color/white"
 android:visibility="visible" /&gt;

            &lt;/FrameLayout&gt;

        &lt;/LinearLayout&gt;
    &lt;/LinearLayout&gt;


    &lt;LinearLayout android:id="@+id/llBtnGroup"
 android:layout_width="match_parent"
 android:layout_height="wrap_content" 
android:orientation="horizontal"&gt;

        &lt;TextView android:id="@+id/btnPositive" 
android:layout_width="0dp"
 android:layout_height="wrap_content" 
android:layout_weight="1" 
android:background="@drawable/sel_def_gray_left"
 android:clickable="true" 
android:gravity="center" 
android:minHeight="40dp" 
android:textColor="#676767" >


        <LinearLayout android:layout_width="wrap_content" 
android:layout_height="match_parent" 
android:background="@android:color/white"
 android:gravity="center_vertical"
 android:orientation="horizontal">

       <View android:id="@+id/divider"
 android:layout_width="1px" 
android:layout_height="20dp"
 android:layout_gravity="center_vertical"
 android:background="#929292" >
       </LinearLayout>

        <TextView android:id="@+id/btnNegative"
 android:layout_width="0dp"
 android:layout_height="wrap_content" 
android:layout_weight="1" 
android:background="@drawable/sel_def_gray_right"
 android:clickable="true"
 android:gravity="center"
 android:minHeight="40dp" 
android:textColor="#676767" />

   </LinearLayout>

</LinearLayout>

حالا فایل جاوا و یا کلاس ColorDialog.java را میسازیم و بصورت زیر کامل میکنیم.

 

import android.app.Dialog;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.RoundRectShape;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.Gravity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TextView;

import cn.refactor.lib.colordialog.util.DisplayUtil;


public class ColorDialog extends Dialog implements View.OnClickListener {

    private ImageView mContentIv;

    private Bitmap mContentBitmap;

    private View mBtnGroupView, mDividerView, mBkgView, mDialogView;

    private TextView mTitleTv, mContentTv, mPositiveBtn, mNegativeBtn;

    private Drawable mDrawable;

    private AnimationSet mAnimIn, mAnimOut;

    private int mResId, mBackgroundColor, mTitleTextColor, mContentTextColor;

    private OnPositiveListener mPositiveListener;

    private OnNegativeListener mNegativeListener;

    private CharSequence mTitleText, mContentText, mPositiveText, mNegativeText;

    private boolean mIsShowAnim;

    public ColorDialog(Context context) {
        this(context, 0);
    }

    public ColorDialog(Context context, int theme) {
        super(context, R.style.color_dialog);
        init();
    }

    private void callDismiss() {
        super.dismiss();
    }

    private void init() {
        mAnimIn = AnimationLoader.getInAnimation(getContext());
        mAnimOut = AnimationLoader.getOutAnimation(getContext());
        initAnimListener();
    }

    @Override
    public void setTitle(CharSequence title) {
        mTitleText = title;
    }

    @Override
    public void setTitle(int titleId) {
        setTitle(getContext().getText(titleId));
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        View contentView = View.inflate(getContext(), R.layout.layout_colordialog, null);
        setContentView(contentView);

        mDialogView = getWindow().getDecorView().findViewById(android.R.id.content);
        mBkgView = contentView.findViewById(R.id.llBkg);
        mTitleTv = (TextView) contentView.findViewById(R.id.tvTitle);
        mContentTv = (TextView) contentView.findViewById(R.id.tvContent);
        mContentIv = (ImageView) contentView.findViewById(R.id.ivContent);

        mPositiveBtn = (TextView) contentView.findViewById(R.id.btnPositive);
        mNegativeBtn = (TextView) contentView.findViewById(R.id.btnNegative);

        mDividerView = contentView.findViewById(R.id.divider);
        mBtnGroupView = contentView.findViewById(R.id.llBtnGroup);

        mPositiveBtn.setOnClickListener(this);
        mNegativeBtn.setOnClickListener(this);

        mTitleTv.setText(mTitleText);
        mContentTv.setText(mContentText);
        mPositiveBtn.setText(mPositiveText);
        mNegativeBtn.setText(mNegativeText);

        if (null == mPositiveListener &amp;&amp; null == mNegativeListener) {
            mBtnGroupView.setVisibility(View.GONE);
        } else if (null == mPositiveListener &amp;&amp; null != mNegativeListener) {
            mPositiveBtn.setVisibility(View.GONE);
            mDividerView.setVisibility(View.GONE);
            mNegativeBtn.setBackgroundDrawable(getContext().getResources().getDrawable(R.drawable.sel_def_gray));
        } else if (null != mPositiveListener &amp;&amp; null == mNegativeListener ) {
            mNegativeBtn.setVisibility(View.GONE);
            mDividerView.setVisibility(View.GONE);
            mPositiveBtn.setBackgroundDrawable(getContext().getResources().getDrawable(R.drawable.sel_def_gray));
        }

        if (null != mDrawable) {
            mContentIv.setBackgroundDrawable(mDrawable);
        }

        if (null != mContentBitmap) {
            mContentIv.setImageBitmap(mContentBitmap);
        }

        if (0 != mResId) {
            mContentIv.setBackgroundResource(mResId);
        }

        setTextColor();

        setBackgroundColor();

        setContentMode();
    }

    @Override
    protected void onStart() {
        super.onStart();
        startWithAnimation(mIsShowAnim);
    }

    @Override
    public void dismiss() {
        dismissWithAnimation(mIsShowAnim);
    }

    private void startWithAnimation(boolean showInAnimation) {
        if (showInAnimation) {
            mDialogView.startAnimation(mAnimIn);
        }
    }

    private void dismissWithAnimation(boolean showOutAnimation) {
        if (showOutAnimation) {
            mDialogView.startAnimation(mAnimOut);
        } else {
            super.dismiss();
        }
    }

    private void initAnimListener() {
        mAnimOut.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                mDialogView.post(new Runnable() {
                    @Override
                    public void run() {
                        callDismiss();
                    }
                });
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
            }
        });
    }

    private void setBackgroundColor() {

        if (0 == mBackgroundColor) {
            return;
        }

        int radius = DisplayUtil.dp2px(getContext(), 6);
        float[] outerRadii = new float[] { radius, radius, radius, radius, 0, 0, 0, 0 };
        RoundRectShape roundRectShape = new RoundRectShape(outerRadii, null, null);
        ShapeDrawable shapeDrawable = new ShapeDrawable(roundRectShape);
        shapeDrawable.getPaint().setColor(mBackgroundColor);
        shapeDrawable.getPaint().setStyle(Paint.Style.FILL);
        mBkgView.setBackgroundDrawable(shapeDrawable);
    }

    private void setTextColor() {

        if (0 != mTitleTextColor) {
            mTitleTv.setTextColor(mTitleTextColor);
        }

        if (0 != mContentTextColor) {
            mContentTv.setTextColor(mContentTextColor);
        }

    }

    private void setContentMode() {
        boolean isImageMode = (null != mDrawable | null != mContentBitmap | 0 != mResId);
        boolean isTextMode = (!TextUtils.isEmpty(mContentText));

        if (isImageMode &amp;&amp; isTextMode) {
            FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) mContentTv.getLayoutParams();
            params.gravity = Gravity.BOTTOM;
            mContentTv.setLayoutParams(params);
            mContentTv.setBackgroundColor(Color.BLACK);
            mContentTv.getBackground().setAlpha(0x28);
            mContentTv.setVisibility(View.VISIBLE);
            mContentIv.setVisibility(View.VISIBLE);
            return;
        }

        if (isTextMode) {
            FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) mContentTv.getLayoutParams();
            params.gravity = Gravity.NO_GRAVITY;
            mContentTv.setLayoutParams(params);
            mContentIv.setVisibility(View.GONE);
            mContentTv.setVisibility(View.VISIBLE);
            return;
        }

        if (isImageMode) {
            mContentTv.setVisibility(View.GONE);
            mContentIv.setVisibility(View.VISIBLE);
            return;
        }

    }

    @Override
    public void onClick(View v) {
        int id = v.getId();

        if (R.id.btnPositive == id) {
            mPositiveListener.onClick(this);
        } else if (R.id.btnNegative == id) {
            mNegativeListener.onClick(this);
        } else {
        }
    }

    public ColorDialog setAnimationEnable(boolean enable) {
        mIsShowAnim = enable;
        return this;
    }

    public ColorDialog setAnimationIn(AnimationSet animIn) {
        mAnimIn = animIn;
        return this;
    }

    public ColorDialog setAnimationOut(AnimationSet animOut) {
        mAnimOut = animOut;
        initAnimListener();
        return this;
    }

    public ColorDialog setColor(int color) {
        mBackgroundColor = color;
        return this;
    }

    public ColorDialog setColor(String color) {
        try {
            setColor(Color.parseColor(color));
        } catch (IllegalArgumentException e) {
            e.printStackTrace();
        }
        return this;
    }

    public ColorDialog setTitleTextColor(int color) {
        mTitleTextColor = color;
        return this;
    }

    public ColorDialog setTitleTextColor(String color) {
        try {
            setTitleTextColor(Color.parseColor(color));
        } catch (IllegalArgumentException e) {
            e.printStackTrace();
        }
        return this;
    }

    public ColorDialog setContentTextColor(int color) {
        mContentTextColor = color;
        return this;
    }

    public ColorDialog setContentTextColor(String color) {
        try {
            setContentTextColor(Color.parseColor(color));
        } catch (IllegalArgumentException e) {
            e.printStackTrace();
        }
        return this;
    }


    public ColorDialog setPositiveListener(CharSequence text, OnPositiveListener l) {
        mPositiveText = text;
        mPositiveListener = l;
        return this;
    }

    public ColorDialog setPositiveListener(int textId, OnPositiveListener l) {
        return setPositiveListener(getContext().getText(textId), l);
    }

    public ColorDialog setNegativeListener(CharSequence text, OnNegativeListener l) {
        mNegativeText = text;
        mNegativeListener = l;
        return this;
    }

    public ColorDialog setNegativeListener(int textId, OnNegativeListener l) {
        return setNegativeListener(getContext().getText(textId), l);
    }

    public ColorDialog setContentText(CharSequence text) {
        mContentText = text;
        return this;
    }

    public ColorDialog setContentText(int textId) {
        return setContentText(getContext().getText(textId));
    }

    public ColorDialog setContentImage(Drawable drawable) {
        mDrawable = drawable;
        return this;
    }

    public ColorDialog setContentImage(Bitmap bitmap) {
        mContentBitmap = bitmap;
        return this;
    }

    public ColorDialog setContentImage(int resId) {
        mResId = resId;
        return this;
    }

    public CharSequence getContentText() {
        return mContentText;
    }

    public CharSequence getTitleText() {
        return mTitleText;
    }

    public CharSequence getPositiveText() {
        return mPositiveText;
    }

    public CharSequence getNegativeText() {
        return mNegativeText;
    }

    public interface OnPositiveListener {
        void onClick(ColorDialog dialog);
    }

    public interface OnNegativeListener {
        void onClick(ColorDialog dialog);
    }
}

خب به همین راحتی تموم شد حالا مثلا میخواهیم این دیالوگ تو یک صفحه نمایش بدیم از این کد استفاده می کنیم به شکل زیر.

 


ColorDialog dialog = new ColorDialog(this);
        dialog.setTitle(getString(R.string.operation));
        dialog.setContentText(getString(R.string.content_text));
        dialog.setContentImage(getResources().getDrawable(R.mipmap.sample_img));
        dialog.setPositiveListener(getString(R.string.delete), new ColorDialog.OnPositiveListener() {
            @Override
            public void onClick(ColorDialog dialog) {
                Toast.makeText(MainActivity.this, dialog.getPositiveText().toString(), Toast.LENGTH_SHORT).show();
            }
        })
        .setNegativeListener(getString(R.string.cancel), new ColorDialog.OnNegativeListener() {
            @Override
            public void onClick(ColorDialog dialog) {
                Toast.makeText(MainActivity.this, dialog.getNegativeText().toString(), Toast.LENGTH_SHORT).show();
                dialog.dismiss();
            }
        }).show();

برای مشاهده کد های بیشتر میتونید به این لینک مراجعه کنید.

برنامه نویسی اندروید

 

ساخت دیالوگ سفارشی

ساخت دیالوگ سفارشی

آموزش زبان کاتلین
  • نویسنده
    hesam
  • تعداد بازدید
    158 views
2دیدگاه فرستاده شده است.
شما هم دیدگاه خود را بنویسید
  1. kia :
    ۰۲ آذر ۹۵

    سلام..
    من جدیدا با سایت شما آشنا شدم و باید از آموزش هاتون تشکر کنم چون واقعا خوب و کاربردی هستن…اما یه سری مشکلات ریزی هم داره که اگه رفع بشه عالیه….

    مثلا در بند
    <?xml version=”1.0″ encoding=”utf-8″?>
    همونطور که میبینید به جای کلمات < و > اومدن که این در تمام فایل های XML هست ….

    دوم اینکه لطف کنید سورس قسمتی که آموزش دادید رو هم بزارید…..اینطوری خیلی بهتره….مثلا در همین آموزش شما چند تا عکس استفاده کردید که قرار ندادید….یا یه سری چیزای دیگه سخته رفعشون کرد…اگه سورس رو هم بزارید عالی میشه…

    با تشکر…در کل سایت خوبی دارید…

    • hesam :
      ۰۲ آذر ۹۵

      سلام
      چشم کیا جان سعی میکنم مطالب همراه با سورس باشه ممنون

نوشته‌های ویژه
اخبار ویژه