web-dev-qa-db-fra.com

Comment afficher du texte HTML dans Android tout en détectant les clics sur des phrases spécifiques et la position de défilement?

Je reçois un mur de texte HTML brut du serveur et je dois le restituer dans mon application, mais ce n'est pas tout. 

Je dois également détecter les clics sur des phrases spécifiques dans le texte. Les phrases sont définies par deux nombres: le nombre de mots commençant par la phrase et le mot compté par la fin (par exemple de Word 10 à Word 15).

Mon intuition dit que je pourrais probablement instrumenter le code HTML avec des liens ou du code JavaScript en fonction de phrases spécifiées, puis écouter les clics sur ces liens. Cependant, je ne suis pas sûr de savoir comment obtenir ce type de fonctionnalité dans Android.

De plus, je dois également pouvoir observer et manipuler par programmation la position de défilement dans le texte HTML affiché. Par exemple, je devrai comprendre quand une phrase spécifique est déplacée de l'écran.

Je suppose que j'ai trois questions étroitement liées:

  1. Quelle vue dois-je utiliser pour obtenir la fonctionnalité ci-dessus (TextView, WebView, autre)?
  2. Comment puis-je écouter des clics sur des parties spécifiques du HTML?
  3. Comment puis-je observer et manipuler la position de défilement?

Merci

androidhtml
12
Vasiliy
  1. WebView est un moyen rapide de le faire.
  2. Vous pouvez mapper une fonction Java/Kotlin à la fonction JavaScript sur la page Web pour suivre les clics.
  3. Encore une fois en utilisant jQuery simple, vous pouvez y parvenir.

Voir: slymax web view

4
2324

Je pense que vous pouvez le faire en utilisant cette méthode: 1.) Vous devez obtenir tous les liens à partir du texte HTML que vous avez. Donc, pour ce faire, utilisez cette méthode:

 public static ArrayList<String> extractUrls(String text) {
    ArrayList<String> containedUrls = new ArrayList<>();
    String urlRegex = "((https?|ftp|Gopher|telnet|file):((//)|(\\\\))+[\\w\\d:#@%/;$()~_?\\+-=\\\\\\.&]*)";
    Pattern pattern = Pattern.compile(urlRegex, Pattern.CASE_INSENSITIVE);
    Matcher urlMatcher = pattern.matcher(text);

    while (urlMatcher.find()) {
        containedUrls.add(text.substring(urlMatcher.start(0),
                urlMatcher.end(0)));
    }
    return containedUrls;
}

Il retournera une ArrayList of URLs. Maintenant, vous devez convertir les données HTML en texte lisible par l'homme: Pour ce faire, utilisez:

public void HtmlToString(final String data) {
    Thread thread = new Thread(new Runnable() {
        @Override
        public void run() {
            final String s = String.valueOf(Html.fromHtml(data));
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    processData(s);
                }
            });
        }
    });
    thread.start();
}
void processData(String s){
// Do whatever you want to do
}

Nous faisons ce travail sur un autre fil . Maintenant, vous avez du texte ainsi que des liens, faites ce que vous voulez avec ceci . Maintenant si vous voulez faire plus de travail dessus, vous pouvez le faire en remplaçant liens que vous obtenez dans la liste de tableau avec un code spécial que vous pouvez utiliser comme espace réservé comme:

for(int i = 0; i < urlArray.size();i++){
    yourData.replace(urlArray.get(i),"<<<YOURSPECIALCODE>>>");       
}

Maintenant, vous pouvez casser vos données en utilisant votre code spécial pour obtenir les pauses à la place des URL. Pour faire ça :

ArrayList<String> dataArray = new ArrayList<>(yourData.split("<<<YOURSPECIALCODE>>>"));

Maintenant, vous pouvez utiliser ces deux tableaux pour afficher en fonction de vos besoins

En tant que maintenant, vous pouvez affecter différentes vues de texte à différentes données et leur attribuer setOnClick Listeners très facilement.

J'espère que ça peut aider!

Je vous remercie

2
Ankush

Je suppose que pour votre cas d'utilisation, la vue idéale serait WebView. 

Il est plus facile de gérer HTML dans une vue Web plutôt que TextView.

TextView vous oblige à utiliser des étendues pour gérer le contenu HTML, ce qui est un peu difficile comparé à la gestion de HTML dans une WebView.

Et également pour surveiller le comportement de défilement, nous pouvons utiliser l'événement de défilement d'un élément dans une vue Web, ce qui facilite la gestion du comportement de défilement d'éléments individuels.

Donc, pour rendre certaines parties du texte cliquables, utilisez l'extrait de code ci-dessous (Kotlin),

val htmlString = "<div>Handling the click near the specified indices</div>"
        val document = Jsoup.parse(htmlString)
        document.outputSettings().prettyPrint(false)
        var plaintext = document.body().text()
        plaintext = plaintext.replaceRange(13,18, "<a href='https://www.google.com'>${plaintext.substring(13, 18)}</a>")
        document.body().html(plaintext)

Utilisez Jsoup library pour analyser le contenu HTML . L'extrait de code ci-dessus rend la sous-chaîne indexée cliquable et le dirige vers www.google.com. Vous pouvez également y ajouter d'autres événements.

Ensuite, pour vérifier si un élément est visible à l’écran, vous pouvez avoir une fonction javascript comme:

function isElementVisible(element)
{
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();
    
  var elemTop = $(element).offset().top;
  var elemBottom = elemTop + $(element).height();
    
  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

qui prend l'élément et renvoie true si l'élément est visible à l'écran ou false si l'élément n'est pas visible.

2
Saikrishna Rajaraman

Si vous envisagez d’utiliser TextView (je préférerais si le contenu n’est pas censé être rendu au format HTML complet, utilisez WebView sinon) et utilisez Clickable span dans le contenu du texte pour rendre des zones spécifiques cliquables. Vous pouvez gérer le clic sur des zones individuelles et effectuer les actions requises dans le gestionnaire de clics. Vous devez écrire plusieurs CustomClickableSpan classés en fonction du nombre de zones cliquables que vous souhaitez gérer.

2
Rahul Shukla

Vous pouvez le faire avec SpannableString - trouvez toutes les balises de lien dans votre texte html et définissez spannable là où vous en avez besoin (par exemple, pour chaque balise intermédiaire: SPANNABLE STRING). 

Suivez cette rubrique, créez vos chaînes pouvant être espacées et affichez-les dans TextView. Ce n'est pas si difficile :) 

Android: ClickableSpan dans TextView cliquable

0
DennyDog