Ionic启动画面和加载动画

Question

有没有办法在启动画面中自定义旋转器？ 目前我正在使用cordova启动画面插件，并且我想更改出现在启动画面上的旋转器的颜色。

- anuj trehan

Answer 1

在 platforms/android/src/org/apache/cordova/splashscreen/SplashScreen.java 中，位于顶部：

import android.graphics.drawable.Drawable;
import android.content.res.Resources;

并在底部进一步替换为此函数：

 // Show only spinner in the center of the screen
private void spinnerStart() {
    cordova.getActivity().runOnUiThread(new Runnable() {
        public void run() {
            spinnerStop();

            spinnerDialog = new ProgressDialog(webView.getContext());
            spinnerDialog.setOnCancelListener(new DialogInterface.OnCancelListener() {
                public void onCancel(DialogInterface dialog) {
                    spinnerDialog = null;
                }
            });

            spinnerDialog.setCancelable(false);
            spinnerDialog.setIndeterminate(true);


            Resources activityRes = cordova.getActivity().getResources();
            int spinnerResId = activityRes.getIdentifier("customspinner", "drawable", cordova.getActivity().getPackageName());
            Drawable customSpinner = activityRes.getDrawable(spinnerResId);

            RelativeLayout centeredLayout = new RelativeLayout(cordova.getActivity());
            centeredLayout.setGravity(Gravity.CENTER);
            centeredLayout.setLayoutParams(new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

            ProgressBar progressBar = new ProgressBar(webView.getContext());
            progressBar.setIndeterminateDrawable(customSpinner);
            RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            layoutParams.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
            progressBar.setLayoutParams(layoutParams);

            centeredLayout.addView(progressBar);

            spinnerDialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
            spinnerDialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

            spinnerDialog.show();
            spinnerDialog.setContentView(centeredLayout);
        }
    });
}

在 platforms/android/res/drawable 中添加文件夹（如果不存在），然后添加文件 customspinner.xml：

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0"
    android:toDegrees="360">
    <shape android:shape="ring" android:innerRadiusRatio="3"
        android:thicknessRatio="8" android:useLevel="false">
        <size android:width="76dip" android:height="76dip" />
        <gradient android:type="sweep" android:useLevel="false"
            android:startColor="#FFFFFFFF" 
            android:endColor="#00FFFFFF"
            android:angle="0"
             />
    </shape>
</rotate> 

这里有原始答案：Cordova启动画面如何在安卓上更改旋转器颜色

- froger.me

---

在启动画面中，是否可以用其他旋转器（或其他加载器）替换默认的Spinner？ - Neotrixs

@Neotrixs，你可以在customspinner.xml中放置任何代码来创建不同的加载器，它不一定是一个旋转器。该文件定义了加载器的方式。 - froger.me

Answer 2

给ion-spinner提供颜色并不困难。你可以这样做
css

.spinner svg {
  width: 28px;
  height: 28px;
  stroke: #444;
  fill: #444;
}

html

<ion-spinner icon="circles "class="spinner-energized"></ion-spinner>

根据Ionic文档。

- Atula

---

我正在使用 Cordova 启动画面插件，该插件带有一个属性 ' <preference name="ShowSplashScreenSpinner" value="true"/> '，可用于添加旋转加载图标。你提供的解决方案是针对 Ionic 加载图标的，而在这种情况下并未使用。 - anuj trehan

如果您提供了代码，那么就不难猜测您正在使用什么以及您得到了什么。但是，您能告诉我屏幕上使用的是哪种类型的旋转器吗？为什么您没有使用Ionic旋转器呢？ - Atula

无法与默认启动画面一起使用。 - Salman Ullah Khan