豊富なテキストエディター
豊富なテキスト編集が長いテキストタイプをサポートする必要があることを考慮すると、ほとんどの豊富なテキストは、カスタムシングルエディッテキストを使用してビューを再利用することはできません。したがって、RecycleViewに基づいて実装された豊富なテキストエディターは現在開発の過程にあります。
リッチなテキストエディターの実装については、実装されたエディターがサポートする必要があるいくつかの必要な機能を間違いなく考えます。
1.多数のテキスト、写真、テキストスタイルの表示と編集が含まれます。
2。非常に複雑なユーザーインタラクションを伴います。
GitHubで私が知っているRich Text Editorは、基本的に2つのタイプに基づいて実装されています。
これら2つのソリューションに関する個人的な意見をいくつか紹介します。
まず第一に、WebViewのレンダリングパフォーマンスの1つの欠点はです。第二に、非常に複雑なヒューマンコンピューターの相互作用を伴う場合、WebViewを実装することはより困難です。もう1つの点は、WebViewの互換性も考慮する必要があるポイントであるということです。
単一の編集を書き直すために、それは実際に相互作用、テキストのレンダリング、スタイルのサポートに非常にスケーラブルです。ただし、多数の写真があることを考えると、ここでは記憶状況を考慮する必要があります。 Edittextの場合、ビューの再利用は間違いなくありません。基本的に、写真があるのと同じくらい多くのメモリが必要です。一方、Native TextViewは常に大量のテキストをレンダリングすることで批判されており、TextViewのパフォーマンスを最適化するための多くのソリューションがあります。
そこで、Recyclerviewをリッチテキストエディターを実装するための実装ソリューションとして使用することを選択しました。落とし穴はありますが、それは実行可能な解決策でもあります。 (Doubanの編集者はRecyclerviewを使用して実装されています)
利点:まず第一に、ネイティブコンポーネントとしてのRecyclervieは、多数のUIコンポーネントを表示するために非常に優れたパフォーマンスを持っています。第二に、Recyclerviewの多重化メカニズムは、メモリ消費の制御を適切にサポートします。
短所::もちろん、これはリッチなテキストエディターを実装するための最初の選択肢ではありません。実装プロセスで多くの大きな落とし穴に遭遇しました。ここにいくつかあります:
1。フォーカスコントロール
2。データスプライシング
3。スタイルストレージ
4。カーソルの位置
そしてもっと...
幸いなことに、このソリューションは最終的に見つかったので、この実装ソリューションをここで共有し、困っている人々に実装ソリューションを提供します。
1。太字、イタリック、下線、ミッドスコア、ストリケスルー、ハイパーリンク、リファレンススタイル、H1、H2、H3、H4。
2。写真を挿入して削除します
3.テキストを選択して、スタイルをリアルタイムで変更します
4.どこでもスタイルをラインラッピングに保ちます。
5.スタイルを維持するために、2行を1つの行に削除します。
6.コントロールパネルにカーソルを使用して、テキストスタイルをリアルタイムで表示します。
7.任意の位置にスタイルを挿入します
8。最終編集テキストはマークダウンに転送されます(バグがあります〜...)
待って。 。 。
Recyclerviewの実装の場合、キャリッジリターンの対応する操作はモデルを追加するためであるため、キャリッジリターンラインラップと削除には多くの論理処理が必要であり、スタイルインデックスのスプライシングとセグメンテーションも含まれます。要するに、それは大きなピットです。
選択した後、カーソル、スタイル、スタイルをクリアして分割し、スタイルを再作成して割り当てる必要があります。大きなピット、大きなピット。
カーソルが対応するスタイルの文字列に対応する場合、以下のパネルは現在のスタイルをリアルタイムで変更します。間隔の論理的判断を使用して、カーソルとスタイルの間隔で論理的な判断を下す必要があり、ますます多くの落とし穴があります。 。 。
また、多くの複雑なインタラクティブ処理もありますが、ここには表示されません。詳細については、ソースコードを確認できます。
富裕層
このプロジェクトは、豊富なテキストエディターとして、誰もが独自のニーズとインタラクション方法を持っているため、すべてのニーズを満たすことができる豊富なテキストを達成する方法がないため、ここでJitpackに公開されていません。そして、豊富なテキストエディターの相互作用ロジックは実際に複雑であるため、すべての相互作用や状況との互換性を確保することは不可能であるため、ここでは相互作用の状況を実装するために最善を尽くします。
1.編集者のlibを紹介して2.xmlをプロジェクトに紹介して編集者を追加します
<com.study.xuan.editor.widget.Editor
android:id="@+id/editor"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
正常に使用されます。
カプセル化され、richhelperを使用するために使用されるのはとても簡単です
//绑定xml中的Editor
public void attach(Editor editor);
//new 一个Editor
public Editor buildEditor(Context context)
//部分事件回调
public void setCallBack(onEditorEventListener callBack)
//操作面板右侧空白增加自定义布局
public void setMoreOperateLayout(View view)
//异步转义MarkDown
public void toMarkDown()
public interface onEditorCallback {
//行数量变化时
void onLineNumChange(List<RichModel> data);
//点击操作面板的图片添加图片,可以使用自己项目中的图片框架,选中后对应调用editor.addPhoto(List<String> data);方法即可
void onPhotoEvent();
//转义MarkDown的进度回调
void onMarkDownTaskDoing(int progress, int max);
//转义MarkDown成功
void onMarkDownTaskFinished(String markdown);
}
基礎となるアーキテクチャであるグローバルシングルトンは、Richeditorの全体的な機能を実装するのに役立ちます。
実装クラスのパネルビルダーには、2つの実装クラスが含まれています。 fontparambuilderは文字タイプのスタイルを表し、段落は段落タイプのスタイルを表します。 Panleと編集者の間のコミュニケーション方法は、基礎となるRichbuilder SingletonのIpanelを介しています。
アブストラクトエンジニアリングクラスは、外側の層でスパンタイプを作成するために使用されます。その中で、抽象的な工場は3つのスパン工場に分けられています:IcharacterstyleFactory、iParagraphFactory、およびIupDateAppearanceFactoryは、CharatたちFactory(キャラクタースタイルSpan Factory)、ParagraphFactory(Paragraph Style Factory)、および(カスタムファクトリーが実装されていない)に対応しています。
検索戦略は、特定の段落でスパンスタイルを通過および処理するために使用されます。 NormalSearch Implements isearchstrategyと使用を使用します(定期的なトラバーサル処理)
パラメーター管理インターフェイスは、クラスに対応するパラメーターを実装します。クラスは、現在のスタイルとプリ入力スタイルを比較および処理するために使用されます。
Recyclerviewから継承されたエディター実装クラス、アダプターはRichAdapterに対応し、モデルはRichModelに対応します。
入力と削除時のスタイル処理の入力フィルター。
SpanStep1Filter
ファーストレベルのフィルターは、スタイルの追加と混乱を処理するときに、 SPAN_EXCLUSIVE_INCLUSIVEおよびSPAN_EXCLUSIVE_EXCLUSIVEの処理を処理するために使用されます。
spanstep2filter
セカンドレベルのフィルターは、スタイルの作成とメンテナンスを処理し、現在のテキストのすべてのスタイルセットを取得し、対応するスタイルのインデックスを記録し、対応するRichModelで維持するために使用されます。
非同期処理は、データのコンバージョンを対応する変換タイプに処理するために使用されます。
解析
インターフェイスの変換
MarkDownParse
正規表現を使用して、マークダウン構文に変換された論理処理。
マージのスタイル、処理スタイルなどに関連するデータ処理を使用して、データ処理クラス。
パネルは操作パネルを表し、パネルはデフォルトでEditorPanelalphaを使用します。パネルは、リッチビルダーのiPanelを介して実装され、エディターをリンクします。
[2018.3.17]:テキストの行内での豊かなテキスト編集。
[2018.3.19]:複数のテキストの削除を完了し、1行を追加し、前の行の次の行を削除します。そして、スタイルを維持します。
[2018.3.20]:削除の最初の行とインライン入力を含む複数のテキストの削除と追加を完了し、リッチテキストスタイルを段落で動かし続けます。
[2018.3.24]:クリック後に操作バーを完全に同期し、現在のテキストスタイルとオペレーションバースタイルを統合します。
[2018.3.29]:新しいスタイルを挿入する機能を完了し、最初に編集の基本機能を完了します。
[2018.4.09]:パラグラフスタイルの機能を完了します。
[2018.4.11]:Markdown Syntax Escapeの予備完了。
Copyright 2017 [DrownCoder]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.