良い一日 surfingbirdのモバイル開発者である私たちは、モバイルアプリケーション（Android、IOS）の開発プロセスで直面する困難、およびそれらの解決方法に関する短いシリーズの記事を作成することにしました。 ウェブビューの問題に専念することを決めた最初の投稿。 この問題を根本的に解決したことをすぐに予約します。より明確にするために、私たちが何をしているかについていくつかの言葉を話す必要があります。 さまざまなソースからコンテンツを集約し（元の記事を解析）、重要な部分（コンテンツ）を選択し、ユーザーの評価と複雑なアルゴリズムに基づいて、エンドユーザーに推奨します。もちろん、より便利な形式で表示するだけです。
モバイルアプリケーションでは、レイアウト要素や迷惑なポップアップからページを消去するだけでなく、モバイルデバイスでの使用に合わせてコンテンツを最適化するよう努めています。
しかし、webviewを使用してコンテンツを表示するとき、多くの困難に直面しました。 このコンポーネントはカスタマイズが難しく、非常に重く、バグがあります。 ウェブビューをまったく見たくないということに気づいた日がやってきました。 しかし、コンテンツがhtmlで私たちに与えられていることを考えると、それを取り除くために-それほど単純ではありませんでした。 そのため、htmlをネイティブコンポーネントに変えることにしました。
コード例に移る前に、原理を簡単に説明しようとします。
- スタイルとJavaScriptからHTMLを削除します
- 参照ポイントとして、画像とiframeへのリンクを使用します
- 画像リンクの前後にあるのは、textviewを使用してレンダリングされるテキストのみです
- 直接画像-imageviewを使用してレンダリング
- Iframeの場合、コンテンツとビデオを分析し、クリック可能な画像としてビデオ上でレンダリングし、残りをリンクとしてレンダリングします。極端な場合は、webviewコンテナー（soundcloudのオーディオリンクなど）に挿入します
- 結果のコンポーネントの配列はリストビューとアダプターに配置されます（実際には既にrecyclerViewにありますが、これを書いている時点ではリストビューでした）
まず、javascriptとcssの形式のジャンクのHTMLをクリアする必要があります。 これらの目的のために、
HtmlCleanerライブラリーを使用し
ました 。 同時に、コンテンツに表示されるすべての画像の配列を作成します（後で必要になります）。
final ArrayList<Link> links = new ArrayList<Link>(); HtmlCleaner mHtmlCleaner = new HtmlCleaner(); CleanerTransformations transformations = new CleanerTransformations(); TagTransformation tt = new TagTransformation("img", "imgs", true); transformations.addTransformation(tt); mHtmlCleaner.setTransformations(transformations);
ここでは、最初にimgタグをimgs ^ _ ^に置き換えます。これにより、textviewが画像をレンダリングしようとしないようにし、次に、画像へのすべてのリンクを見つけてimageviewに置き換えます。
画像をネイティブで表示することにしたので、同時に画面の1/3以上の平均的な画像がスマートフォンのフルスクリーンになり、小さな画像が大きくなり、非常に小さなものを完全に無視できるように、それらを増やすことは悪くありません（方法ルールはソーシャルネットワークへのリンクのアイコンです）：
public Link parseTag(TagNode tag,String type) { final String src = tag.getAttributeByName("src"); final String width = tag.getAttributeByName("width"); final String height = tag.getAttributeByName("height"); int iWidth=0, iHeight=0; try { iWidth = Integer.parseInt(width.split("\\.")[0]); iHeight = Integer.parseInt(height.split("\\.")[0]); } catch (Exception e) {}
実際、作業の半分はすでに完了しています。 画像へのリンクの配列を調べ、画像の前のコンテンツを見つけてテキストビューに貼り付けてから、画像を挿入します。
これを行うために、実際のコンテンツ自体を配置するArrayListを作成し、そのタイプ（テキスト、画像、iframe）を示します。
ある種の擬似コード：
private ArrayList<Link> data = new ArrayList<Link>();; for(int i=0;i<links.size();i++) { final Link link = links.get(i); if (link.type.equals("txt")) continue; int pos = html.indexOf(link.src); String abzats = ""; if (pos>0) { abzats = html.substring(0, pos); int closeTag = html.indexOf(">",pos)+1; if (closeTag>0) { html = html.substring(closeTag); } if (!TextUtils.equals("", abzats)) { data.add(new Link("txt","",0,0,abzats)); } }
この場所には、コンテンツがタイプに分類された豪華な配列があります。 残っているのは、レンダリングすることだけです。 また、配列のレンダリングでは、通常のリストビュー+アダプターよりも美しいものを見つけるのは困難です。
アダプターのgetViewコードは次のようになります。
if (link.type.equals("txt")) {
したがって、テキストはtextviewを使用してhtmlとしてレンダリングされ、写真は通常の写真に変わりますが、デバイスの解像度に最適化されます。 iframeには痛みのみが残っています。 そのコンテンツを分析し、たとえばyoutubeへのリンクの場合、YouTubeアプリケーションを開くアイコンをクリックして、ビデオプレースホルダー付きの画像を生成します。 一般に、すべてはすでに非常に簡単です：
String youtubeVideo = ""; if (link.src.contains("lj-toys") && link.src.contains("youtube") && link.src.contains("vid=")) { try { youtubeVideo = link.src.substring(link.src.indexOf("vid=") + 4, link.src.indexOf("&", link.src.indexOf("vid=") + 4)); } catch (Exception e) { e.printStackTrace(); } }
職場でのアプリケーションを示す
短いビデオを
撮影しましたが、アプリケーションをダウンロードし
て自分で
試してみることをお勧めします 。
おそらく、この方法は誰かにとってはやや基本的に思えるかもしれませんが、最終結果には満足しています。 ページの読み込みが速くなり、ネイティブで統一感があり、どのデバイスでも読みやすくなりました。 さらに、多くの興味深い機能が開き、ネイティブの写真プレビュー、フォント設定、ネイティブアプリケーションでビデオを開くことができます。もちろん、さまざまなバージョンや多くの場合、奇妙なWebビューの動作に問題はありません。