美文网首页
Android 仿IOS加载框

Android 仿IOS加载框

作者: 因为我的心 | 来源:发表于2020-05-22 16:55 被阅读0次

    一、前言:

    在公司UI设计的时候,经常以苹果的UI设计为主,我们Android们就要自定义实现苹果加载框的样式。
    gitee地址:https://gitee.com/luoyanyong/LodingWindowDemo
    效果图如下:

    image.png

    二、 jar包实现仿IOS样式:

    1、项目下的build.gradle添加

    allprojects {
            repositories {
                ...
                maven { url 'https://www.jitpack.io' }
            }
        }
    

    2、模块下的build.gradle添加依赖

    dependencies {
                compile 'com.github.gittjy:LoadingDialog:1.0.2'
        }
    

    3、在代码中使用

    LoadingDailog.Builder loadBuilder=new LoadingDailog.Builder(this)
                    .setMessage("加载中...")
                    .setCancelable(true)
                    .setCancelOutside(true);
            LoadingDailog dialog=loadBuilder.create();
            dialog.show();
    

    三、自定义实现苹果样式:

    1. CustomerLoadingDailog.java

    package com.sumansoul.lodingwindowdemo.utils;
    
    import android.app.Dialog;
    import android.content.Context;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.widget.TextView;
    
    import com.sumansoul.lodingwindowdemo.R;
    
    /**
     * Created by tjy on 2017/6/19.
     */
    public class CustomerLoadingDailog extends Dialog {
    
        public CustomerLoadingDailog(Context context) {
            super(context);
        }
    
        public CustomerLoadingDailog(Context context, int themeResId) {
            super(context, themeResId);
        }
    
        public static class Builder {
            private Context context;
            private String message;
            private boolean isShowMessage = true;
            private boolean isCancelable = false;
            private boolean isCancelOutside = false;
    
    
            public Builder(Context context) {
                this.context = context;
            }
    
            /**
             * 设置提示信息
             *
             * @param message
             * @return
             */
    
            public Builder setMessage(String message) {
                this.message = message;
                return this;
            }
    
            /**
             * 设置是否显示提示信息
             *
             * @param isShowMessage
             * @return
             */
            public Builder setShowMessage(boolean isShowMessage) {
                this.isShowMessage = isShowMessage;
                return this;
            }
    
            /**
             * 设置是否可以按返回键取消
             *
             * @param isCancelable
             * @return
             */
    
            public Builder setCancelable(boolean isCancelable) {
                this.isCancelable = isCancelable;
                return this;
            }
    
            /**
             * 设置是否可以取消
             *
             * @param isCancelOutside
             * @return
             */
            public Builder setCancelOutside(boolean isCancelOutside) {
                this.isCancelOutside = isCancelOutside;
                return this;
            }
    
            public CustomerLoadingDailog create() {
    
                LayoutInflater inflater = LayoutInflater.from(context);
                View view = inflater.inflate(R.layout.dialog_loading, null);
                CustomerLoadingDailog loadingDailog = new CustomerLoadingDailog(context, R.style.IosDialogStyle);
                TextView msgText = (TextView) view.findViewById(R.id.tipTextView);
                if (isShowMessage) {
                    msgText.setText(message);
                } else {
                    msgText.setVisibility(View.GONE);
                }
                loadingDailog.setContentView(view);
                loadingDailog.setCancelable(isCancelable);
                loadingDailog.setCanceledOnTouchOutside(isCancelOutside);
                return loadingDailog;
            }
        }
    }
    

    2. dialog_loading.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/dialog_loading_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">
    
        <LinearLayout
            android:layout_width="150dp"
            android:layout_height="110dp"
            android:background="@drawable/loading_bg"
            android:gravity="center"
            android:orientation="vertical"
            android:paddingBottom="10dp"
            android:paddingLeft="21dp"
            android:paddingRight="21dp"
            android:paddingTop="10dp">
    
            <ProgressBar
                android:id="@+id/progressBar1"
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:layout_gravity="center_horizontal"
                android:indeterminateBehavior="repeat"
                android:indeterminateDrawable="@drawable/dialog_loading"
                android:indeterminateOnly="true" />
    
            <TextView
                android:id="@+id/tipTextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:text="加载中..."
                android:textColor="#f0f0f0"
                android:textSize="15sp" />
        </LinearLayout>
    
    </LinearLayout>
    

    3. style.xml

        <!-- 仿IOS加载框  -->
        <style name="IosDialogStyle">
            <item name="android:windowBackground">@android:color/transparent</item>
            <item name="android:windowFrame">@null</item>
            <item name="android:windowNoTitle">true</item>
            <item name="android:windowIsFloating">true</item>
            <item name="android:windowIsTranslucent">true</item>
            <item name="android:windowContentOverlay">@null</item>
            <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>
            <item name="android:backgroundDimEnabled">true</item>
        </style>
    

    4. dialog_loading.xml

    <?xml version="1.0" encoding="utf-8"?>
    <animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:drawable="@mipmap/dialog_loading_img"
        android:pivotX="50%"
        android:pivotY="50%" />
    
    
        <!-- 下面是转圈的
        <?xml version="1.0" encoding="utf-8"?>
        <rotate xmlns:android="http://schemas.android.com/apk/res/android"
            android:drawable="@drawable/dialog_loading_img2"
            android:fromDegrees="0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="360" />
        -->
    

    5. 调用:

            /**
             * 2.自定义加载框
             */
            btn2.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    CustomerLoadingDailog.Builder loadBuilder=new CustomerLoadingDailog.Builder(MainActivity.this)
                            .setMessage("正在加载中...")
                            .setCancelable(true)
                            .setCancelOutside(false);
                    CustomerLoadingDailog dialog=loadBuilder.create();
                    dialog.show();
                }
            });
    

    四、Android原生仿闪屏:

    闪屏原理:https://www.jianshu.com/p/77b09c686e3d

    1. 调用

           /**
             * 3.Android原生加载框(防止闪屏)
             */
            btn3.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                     final AlertLoadingDialog dialog = new AlertLoadingDialog(MainActivity.this);
    
                    dialog.showDialog("努力加载中...");
                    dialog.setCanceledOnTouchOutside(false);
                    //sleep设置的是时长
                    //sleep设置的是时长
    //                new Handler().postDelayed(new Runnable() {
    //                    @Override
    //                    public void run() {
    //                        dialog.hideDialog();
    //                    }
    //                },1000) ;
                }
            });
    

    2. AlertLoadingDialog.java

    /**
     * 防止闪屏
     */
    public class AlertLoadingDialog extends AlertDialog {
    
        private static final int MIN_SHOW_TIME = 300;
        private static final int MIN_DELAY = 300;
    
        private TextView tvMessage;
    
        private long mStartTime = -1;
        private boolean mPostedHide = false;
        private boolean mPostedShow = false;
        private boolean mDismissed = false;
    
        private Handler mHandler = new Handler();
    
        private final Runnable mDelayedHide = new Runnable() {
    
            @Override
            public void run() {
                mPostedHide = false;
                mStartTime = -1;
                dismiss();
            }
        };
    
        private final Runnable mDelayedShow = new Runnable() {
    
            @Override
            public void run() {
                mPostedShow = false;
                if (!mDismissed) {
                    mStartTime = System.currentTimeMillis();
                    show();
                }
            }
        };
    
        public AlertLoadingDialog(@NonNull Context context) {
            super(context, R.style.IosDialogStyle);
            View loadView = LayoutInflater.from(getContext()).inflate(R.layout.alert_dialog_loading, null);
            setView(loadView);
            tvMessage = loadView.findViewById(R.id.tv_message);
        }
    
        public void showDialog() {
           // tvMessage.setText(message);
    
            mStartTime = -1;
            mDismissed = false;
            mHandler.removeCallbacks(mDelayedHide);
            mPostedHide = false;
            if (!mPostedShow) {
                mHandler.postDelayed(mDelayedShow, MIN_DELAY);
                mPostedShow = true;
            }
        }
        public void showDialog(String message) {
            tvMessage.setText(message);
    
            mStartTime = -1;
            mDismissed = false;
            mHandler.removeCallbacks(mDelayedHide);
            mPostedHide = false;
            if (!mPostedShow) {
                mHandler.postDelayed(mDelayedShow, MIN_DELAY);
                mPostedShow = true;
            }
        }
    
        public void hideDialog() {
            mDismissed = true;
            mHandler.removeCallbacks(mDelayedShow);
            mPostedShow = false;
            long diff = System.currentTimeMillis() - mStartTime;
            if (diff >= MIN_SHOW_TIME || mStartTime == -1) {
                dismiss();
            } else {
                if (!mPostedHide) {
                    mHandler.postDelayed(mDelayedHide, MIN_SHOW_TIME - diff);
                    mPostedHide = true;
                }
            }
        }
    
        @Override
        public void onDetachedFromWindow() {
            super.onDetachedFromWindow();
            mHandler.removeCallbacks(mDelayedHide);
            mHandler.removeCallbacks(mDelayedShow);
        }
    }
    

    3.alert_dialog_loading.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center"
        android:padding="20dp"
        android:background="@drawable/round_ffffff_8"
        >
    
        <ProgressBar
            android:id="@+id/progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:indeterminateTint="@color/colorPrimary"
    
            />
    
        <TextView
            android:id="@+id/tv_message"
            android:layout_marginTop="5dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="正在努力加载中..."
            android:textColor="#333333"
            android:textSize="16sp"
            />
    
    </LinearLayout>
    

    4.style.xml

        <!-- 仿IOS加载框  -->
        <style name="IosDialogStyle">
            <item name="android:windowBackground">@android:color/transparent</item>
            <item name="android:windowFrame">@null</item>
            <item name="android:windowNoTitle">true</item>
            <item name="android:windowIsFloating">true</item>
            <item name="android:windowIsTranslucent">true</item>
            <item name="android:windowContentOverlay">@null</item>
            <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>
            <item name="android:backgroundDimEnabled">true</item>
        </style>
    

    五、Android引入加载动画:

    效果图:

    6666.gif
    原生Demo:https://github.com/ybq/Android-SpinKit

    1. 依赖

    dependencies {
       implementation 'com.github.ybq:Android-SpinKit:1.4.0'
    }
    

    2. Xml

    <com.github.ybq.android.spinkit.SpinKitView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/spin_kit"
        style="@style/SpinKitView.Large.Circle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:SpinKit_Color="@color/colorAccent" />         
    

    3. ProgressBar

    ProgressBar progressBar = (ProgressBar)findViewById(R.id.progress);
    Sprite doubleBounce = new DoubleBounce();
    progressBar.setIndeterminateDrawable(doubleBounce);
    

    4. Style

    @style/SpinKitView
    @style/SpinKitView.Circle
    @style/SpinKitView.Large
    @style/SpinKitView.Small
    @style/SpinKitView.Small.DoubleBounce   
    

    5.调用:

        /**
             * 5.Android 动画一
             */
            btn5.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    AlertAnimationLoading alertLoading1 = new AlertAnimationLoading(MainActivity.this,  R.layout.base_loading_dialog);
                    alertLoading1.setMessage("加载中....");
                    alertLoading1.setCanceledOnTouchOutside(true);
                    alertLoading1.show();
                }
            });
    

    6.AlertAnimationLoading.java

    public class AlertAnimationLoading extends AlertDialog {
        private static final int MIN_SHOW_TIME = 300;
        private static final int MIN_DELAY = 300;
    
        private long mStartTime = -1;
        private boolean mPostedHide = false;
        private boolean mPostedShow = false;
        private boolean mDismissed = false;
    
        private Handler mHandler = new Handler();
    
        private TextView tv_tips;
        private int layoutResId;
        private String message;
    
        private final Runnable mDelayedHide = new Runnable() {
    
            @Override
            public void run() {
                mPostedHide = false;
                mStartTime = -1;
                dismiss();
            }
        };
    
        private final Runnable mDelayedShow = new Runnable() {
    
            @Override
            public void run() {
                mPostedShow = false;
                if (!mDismissed) {
                    mStartTime = System.currentTimeMillis();
                    show();
                }
            }
        };
    
    
        public AlertAnimationLoading(@NonNull Context context, int layoutResId) {
            super(context, R.style.IosDialogStyle);
            this.requestWindowFeature(Window.FEATURE_NO_TITLE);
            this.layoutResId = layoutResId;
    
        }
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            this.setContentView(layoutResId);
            tv_tips = (TextView) findViewById(R.id.tv_tips);
            tv_tips.setText(this.message);
        }
    
        public void showDialog() {
            mStartTime = -1;
            mDismissed = false;
            mHandler.removeCallbacks(mDelayedHide);
            mPostedHide = false;
            if (!mPostedShow) {
                mHandler.postDelayed(mDelayedShow, MIN_DELAY);
                mPostedShow = true;
            }
        }
    
        public void showDialog(String message) {
            tv_tips.setText(message);
    
            mStartTime = -1;
            mDismissed = false;
            mHandler.removeCallbacks(mDelayedHide);
            mPostedHide = false;
            if (!mPostedShow) {
                mHandler.postDelayed(mDelayedShow, MIN_DELAY);
                mPostedShow = true;
            }
        }
    
        public void hideDialog() {
            mDismissed = true;
            mHandler.removeCallbacks(mDelayedShow);
            mPostedShow = false;
            long diff = System.currentTimeMillis() - mStartTime;
            if (diff >= MIN_SHOW_TIME || mStartTime == -1) {
                dismiss();
            } else {
                if (!mPostedHide) {
                    mHandler.postDelayed(mDelayedHide, MIN_SHOW_TIME - diff);
                    mPostedHide = true;
                }
            }
        }
    
        @Override
        public void onDetachedFromWindow() {
            super.onDetachedFromWindow();
            mHandler.removeCallbacks(mDelayedHide);
            mHandler.removeCallbacks(mDelayedShow);
        }
    
    
        public void setMessage(String message) {
            this.message = message;
            if (!TextUtils.isEmpty(message) && this.tv_tips != null) {
                this.tv_tips.setText(this.message);
            }
        }
    }
    

    7.style.xml

        <!-- 仿IOS加载框  -->
        <style name="IosDialogStyle">
            <item name="android:windowBackground">@android:color/transparent</item>
            <item name="android:windowFrame">@null</item>
            <item name="android:windowNoTitle">true</item>
            <item name="android:windowIsFloating">true</item>
            <item name="android:windowIsTranslucent">true</item>
            <item name="android:windowContentOverlay">@null</item>
            <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>
            <item name="android:backgroundDimEnabled">true</item>
        </style>
    

    8. base_loading_dialog.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="140dp"
        android:layout_height="120dp"
        android:background="@drawable/round_ffffff_8"
        android:gravity="center"
        android:orientation="vertical">
    
        <com.github.ybq.android.spinkit.SpinKitView 
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/spin_kit"
            style="@style/SpinKitView.Large.Circle"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:gravity="center"
            android:padding="10dp"
            app:SpinKit_Color="#FF4961AC" />
        
        <TextView
            android:id="@+id/tv_tips"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="努力加载中..."
            android:textColor="#000000"
            android:textSize="15sp" />
    
    </LinearLayout>
    

    相关文章

      网友评论

          本文标题:Android 仿IOS加载框

          本文链接:https://www.haomeiwen.com/subject/dxtcahtx.html