如何在 Xamarin 中使用 WebView 在混合应用程序中设置进度条 ios

how to set up progress bar in hybrid app with WebView in Xamarin ios

我正在尝试获得一个 ios 版本的混合 webview 应用程序,以便在我执行一些较长的操作时显示一些进度控件,但不知道如何设置它。在我的 Android 版本中,我基本上是在最初隐藏的 Main.axml 中创建进度控件,然后在需要时取消隐藏它们:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minWidth="25px"
    android:minHeight="25px">
    <ProgressBar
        android:id="@+id/ProgressSpinner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        style="@android:style/Widget.ProgressBar.Small"
        android:visibility="gone"
        android:layout_marginRight="5dp" />
    <ProgressBar
        android:id="@+id/ProgressBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:visibility="gone"
        android:layout_marginRight="5dp" />
    <TextView
        android:id="@+id/ProgressText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="" />
    <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/webView" />
</LinearLayout>

如何在 ios 中执行相同的操作?这是项目向导使用 WebView 应用程序为我设置的 storyboard.main:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="6211" systemVersion="14A298i" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" initialViewController="BYZ-38-t0r">
    <dependencies>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="6204"/>
    </dependencies>
    <scenes>
        <!--View Controller-->
        <scene sceneID="tne-QT-ifu">
            <objects>
                <viewController id="BYZ-38-t0r" customModuleProvider="" customClass="WebViewController" sceneMemberID="viewController">
                    <layoutGuides>
                        <viewControllerLayoutGuide type="top" id="3"/>
                        <viewControllerLayoutGuide type="bottom" id="4"/>
                    </layoutGuides>
                    <webView key="view" contentMode="scaleToFill" id="2BG-WL-JVn">
                        <rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                        <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                    </webView>
                    <connections>
                        <outlet property="WebView" destination="2BG-WL-JVn" id="name-outlet-2BG-WL-JVn"/>
                    </connections>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
            </objects>
        </scene>
    </scenes>
</document>

如果我尝试使用故事板编辑器并放置一个进度条,它只会替换 WebView。

我还尝试在 WebViewController 中以编程方式执行此操作。首先设置:

public static UIWebView webView;
public static UIActivityIndicatorView progressSpinner;
public static UIProgressView progressBar;
public static UILabel progressText;
// ...

// Get web view from storyboard backing code.
webView = WebView;

// Set up activity indicator.
progressSpinner = new UIActivityIndicatorView(UIActivityIndicatorViewStyle.Gray);
CGRect bounds = UIScreen.MainScreen.Bounds;
nfloat centerX = bounds.Width / 2;
nfloat centerY = bounds.Height / 2;
progressSpinner.Frame = new CGRect(
    centerX - (progressSpinner.Frame.Width / 2),
    bounds.Top,
    progressSpinner.Frame.Width,
    progressSpinner.Frame.Height);
progressSpinner.AutoresizingMask = UIViewAutoresizing.All;
progressSpinner.Hidden = false;
View.InsertSubviewAbove(progressSpinner, webView);

// Set up progress bar.
progressBar = new UIProgressView(UIProgressViewStyle.Bar);
progressBar.Frame = new CGRect(
    bounds.Left,
    progressSpinner.Frame.Bottom,
    bounds.Width,
    progressSpinner.Frame.Height);
progressBar.AutoresizingMask = UIViewAutoresizing.All;
progressBar.Hidden = false;
View.InsertSubviewAbove(progressBar, webView);

// Set up progress text message.
progressText = new UILabel();
progressText.Frame = new CGRect(
    bounds.Left,
    progressBar.Frame.Bottom,
    bounds.Width,
    progressText.Frame.Height);
progressText.AutoresizingMask = UIViewAutoresizing.All;
progressText.Hidden = false;
View.InsertSubviewAbove(progressText, webView);

然后使用它:

public override void ProgressOperation(ProgressMode mode, int value, string message)
{
    UIActivityIndicatorView progressSpinner = WebViewController.progressSpinner;
    UIProgressView progressBar = WebViewController.progressBar;
    UILabel progressText = WebViewController.progressText;

    if (progressBar == null)
        return;

    switch (mode)
    {
        case ProgressMode.Start:
            InProgress = true;
            ProgressMax = value;
            if (value <= 0)
                ProgressMax = 1.0f;
            progressBar.Hidden = false;
            progressBar.Progress = 0.0f;
            if (!String.IsNullOrEmpty(message))
            {
                progressText.Text = message;
                progressText.Hidden = false;
                HaveMessage = true;
            }
            break;
        case ProgressMode.Update:
            if (InProgress)
            {
                progressBar.Progress = value / ProgressMax;
                if (HaveMessage)
                {
                    if (!String.IsNullOrEmpty(message))
                        progressText.Text = message;
                }
            }
            break;
        case ProgressMode.Stop:
            progressBar.Hidden = true;
            progressText.Text = String.Empty;
            progressText.Hidden = true;
            InProgress = false;
            HaveMessage = false;
            break;
        case ProgressMode.Hide:
            progressSpinner.StopAnimating();
            progressSpinner.Hidden = true;
            break;
        case ProgressMode.Show:
            progressSpinner.Hidden = false;
            progressSpinner.StartAnimating();
            break;
        case ProgressMode.DelayedShow:
            if (InDelayedProgress)
            {
                progressSpinner.Hidden = false;
                progressSpinner.StartAnimating();
            }
            break;
        default:
            throw new Exception("ProgressOperation: Need mode support for: " + mode.ToString());
    }
}

虽然执行了显示和隐藏微调器或其他控件的代码,但控件永远不可见。如果有人可以帮助这个完全迷失在平台特定内容中的新手,我将不胜感激。谢谢。

-约翰

我最终完成的是完成 Apple 的 xcode 界面构建器教程 (https://developer.apple.com/library/content/referencelibrary/GettingStarted/DevelopiOSAppsSwift/) 的前几部分。由此我能够推断出我需要从一个带有嵌入式垂直堆栈视图的视图开始,该视图带有嵌入式 activity 指示器、进度条、标签和 Web 视图控件,适当地设置约束,甚至进行试验插座和一点 Swift 代码。

然后我尝试用 Xamarin 界面生成器做同样的事情,甚至遵循他们的教程之一,但我无法理解约束机制来做我在 xcode 中做的事情,所以我放弃了,只是复制了 xcode 故事板源代码。我不得不对它进行一些修改才能使其正常工作。我不得不重用 Xamarin 版本中的一些相同属性,删除插座,然后使用 Xamarin 的界面构建器重做插座。

令我惊讶的是,没有人花几分钟给我一个提示,让我从使用网络视图作为主视图更改为视图->堆栈视图->微调器+栏+标签+网络等级制度。但我想学习 xcode 的几个小时可能是值得的,而且也很有趣。 xcode 界面生成器似乎是我迄今为止使用的几个版本中唯一可用的版本。