Định dạng html chuỗi Android

Có một số tình huống khi một người cần hiển thị văn bản có định dạng phong phú trong ứng dụng, chẳng hạn như đối với ứng dụng blog hoặc ứng dụng như Quora nhưng chức năng sẵn có của Android không cho phép hiển thị hình ảnh nội tuyến theo mặc định, hơn nữa, chúng hiển thị đường màu xanh xấu xí cho . Đây là giải pháp đơn giản để hiển thị HTML trong TextView cùng với hình ảnh trong Android. Lưu ý rằng chúng tôi sẽ triển khai dự án này bằng ngôn ngữ Kotlin trong Android. Dưới đây là ảnh chụp màn hình demo của ứng dụng

điều kiện tiên quyết

• Kiến thức cơ bản về thư viện Coroutines
• Kiến thức cơ bản về thư viện Picasso

Tiếp cận

Bước 1. Tạo một dự án mới

Để tạo dự án mới trong Android Studio, vui lòng tham khảo Cách tạo/Bắt đầu dự án mới trong Android Studio . Lưu ý chọn Kotlin làm ngôn ngữ lập trình.

Bước 2. Thiết lập dự án trước khi mã hóa

• Thêm một số màu trong bảng màu. tập tin xml. Màu sắc ở đây là dành cho Kiểu dáng blockquote. Bạn có thể tự do lựa chọn màu sắc khác nhau

xml version="1.0" encoding="utf-8"?>

012

3_______105 6=8952

3_______105 6=xml7952

3_______105 6=version6version752

3______105 6==5=652

=912

• Đi xây dựng. lớp (Mô-đun. app) và thêm phần phụ thuộc sau

// Picasso library to downloading images 
implementation 'com.squareup.picasso:picasso:2.71828'
// Coroutines dependency to put the downloading 
process in background thread implementation 
'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.3.9'

Bước 3. Làm việc với Activity_main. tập tin xml

Trong hoạt động sau đây_main. xml, chúng tôi đã thêm các tiện ích sau

• EditText nơi người dùng sẽ nhập văn bản HTML,
• Nút để kích hoạt một sự kiện để hiển thị văn bản HTML,
• ScrollView để cuộn mượt mà,
• TextView để hiển thị HTML sau khi xử lý đầu vào

hoạt động_chính. xml

xml version="1.0" encoding="utf-8"?>

0encoding2

3encoding4=encoding6

3encoding8==0

3______42==4

3______46____4=8

3____80==8

3"utf-8"4______4"utf-8"6

3______88=____902

?>2

?>2

3____95

?>6?>7

3____1000

0102=04

01=6____408

01"utf-8"0____412

0114=16

0118=20

0122=24

0126=24 29

?>2

3____132

3____1035

0102=16

01=6____443

01"utf-8"0____447

0149=51

0153____424

0126=24 29

?>2

3____163

3____1066

01=6____408

01"utf-8"0____408

0176="utf-8"6

0180______424

0153____424

0122=24

0192____4042

?>2

0198

99xml00

010xml03

xml0402=xml07

xml04=6==8

xml04"utf-8"0____4=82

01=9____2032

xml21

3____4966____12

?>2

=9encoding22

Giao diện người dùng đầu ra

Bước 4. Tạo lớp Kotlin ImageGetter. kt

Tạo một lớp sẽ tải xuống các hình ảnh có trong thẻ img. Dưới đây là ImageGetter hoàn chỉnh. tập tin kt. Hiểu mã hoàn chỉnh bằng cách tham khảo các nhận xét tương ứng bên trong mã.  

ImageGetter. kt

xml30 xml31

xml30 xml33

xml30 xml35

xml30 xml37

xml30 xml39

xml30 xml41

xml30 xml43

xml30 xml45

xml30 xml47

xml30 xml49

xml30 xml51

xml30 xml53

?>2

xml55

xml56 xml57

3____259 xml60

3____259 xml63

xml64

?>2

3____267

3____269

3____271

01xml73____274xml75

?>2

01xml78

01xml80

xml04xml82

?>2

xml84xml85

xml84xml87

xml84xml89

?>2

xml84xml92

xml84xml94

xml84xml96______297

?>2

xml84version00

xml84version02

xml84version04

version05version06

xml84version08

xml84version10______311version12version13version14

xml84version16

xml84version18version11version12version13version14

xml84version24

version05version26

xml84version28

xml04version28

01version28

01version34 version35

3____328

?>2

3____340

3______342xml56 version44

01version46

01xml59 version49xml74

?>2

01version53

xml04version55

01version28

?>2

01version60

xml04version62version63

01version28

3____328

?>2

3____370

3____372

01version74

version28

Ghi chú. Ta có thể thay đổi chiều cao, rộng của hình ảnh theo ý muốn của mình trong hàm getDrawable() .

Bước 5. Làm việc với MainActivity. tập tin kt

• Tạo Trình nghe nhấp chuột cho nút bên trong phương thức onCreate() .

Hoạt động chủ yêu. kt

xml56 version77

3____379

_______101____381____382

01version84

?>2

01version87

01version89

01version91

01version93

01version95

01version97

xml04version99 =00

xml84=02

xml04version28

01version28

3____328

version28

• Tạo hàm displayHtml() mà bạn vừa gọi bên trong trình xử lý nhấp chuột.

Ghi chú. Kotlin có nhập Tổng hợp, do đó không cần lưu trữ tham chiếu đến các chế độ xem trong một biến và chúng tôi sẽ làm tương tự cho tất cả các chế độ xem khác

Kotlin

xml59 =11

=12

=13=14

=13=16

=13

=13=19

=13=21

=22=23

_______422____425____274xml75

01

_______413____430

=13=32

=33

=13=35

=13=37

_______438____328

• Vì vậy, bây giờ công việc Hình ảnh đã hoàn tất, bây giờ nó sẽ tải hình ảnh. Dưới đây là mã hoàn chỉnh cho MainActivity. tập tin kt

Kotlin

xml30 =41

xml30 =43

xml30 =45

xml30 =47

xml30 =49

?>2

xml56 version77

3____379

_______101____381____382

01version84

?>2

01version87

01version89

01=66

01=68

01version95

01version97

xml04version99 =00

xml84=02

xml04version28

01version28

3____328

?>2

3____259 =11

01=14

01=16

?>2

01=19

01=96

xml04=98xml74xml75

?>2

01=30

01=32

?>2

01=35

01=37

3____328

version28

• Bây giờ hãy xem nó hoạt động như thế nào. Sử dụng HTML của một trang web khác. Ở đây chúng tôi đã sử dụng trang web sau của bài báo GFG. Lấy tệp chuỗi HTML từ đây

Ghi chú. Hãy nhớ rằng nhập văn bản HTML bên trong EditText và sau đó nhấp vào nút “HIỂN THỊ HTML”

đầu ra

Các hình ảnh hiện đang tải nhưng bạn có thể thấy, đối với phần blockquote, có một dòng màu xanh xấu xí đơn giản. Bây giờ chúng tôi sẽ khắc phục điều đó.  

Bước 6. Tạo một lớp Kotlin QuoteSpanClass. kt

Tạo một Lớp Kotlin có tên là QuoteSpanClass và thêm đoạn mã sau vào tệp này

QuoteSpanLớp. kt

xml30 xml35

xml30 "1.0"17

xml30 "1.0"19

xml30 "1.0"21

xml30 "1.0"23

?>2

xml56 "1.0"26

3____259 "1.0"29

3____259 "1.0"32

3____259 "1.0"35

3____259 "1.0"38

"1.0"39

"1.0"40

3____542

3____544

01version34 "1.0"47

3____328

?>2

3____552

3____554

01"1.0"56

01____558

01____560

01"1.0"62

01____564

01"1.0"66

01____568

01____570

01____572

01____574

01____576

01____578

3____580

?>2

01____583

01____585

01____587

01____589

?>2

01"1.0"92

01____594

01____596

01"1.0"98

01encoding00

3____328

?>2

3____605

01"1.0"56

01____558

01encoding11

01encoding13

01____564

01"1.0"66

01____568

01____570

01____572

01____574

01encoding27

3____580

01____585

01encoding33

?>2

01encoding36

01encoding38

01encoding00

3____328

version28

Bước 7. Làm việc với MainActivity. tập tin kt

• Vì QuoteSpanClass đã được tạo, đã đến lúc sử dụng lớp này trong MainActivity. kt, nhưng trước đó bạn cần tạo một hàm để phân tích các thẻ blockquote và vẽ lề và nền bằng QuoteSpanClass

Hoạt động chủ yêu. kt

xml59 encoding45

encoding46

=38encoding48

=13encoding50encoding51encoding52encoding53encoding54xml56encoding56

?>2

=38encoding59 encoding60

=38encoding46

3____664

3____666

3____668

3____670

_______433____672

encoding73"1.0"26

version05encoding76

version05encoding78version62encoding80

version05encoding82

version05encoding78version62encoding86

version05encoding88

version05encoding90

xml84encoding92

xml84encoding94

xml04xml75

01encoding98

_______438____328

• Và cuối cùng, hãy gọi hàm này từ hàm displayHtml() trước khi đặt văn bản cho html_viewer. Dưới đây là mã hoàn chỉnh cho MainActivity. tập tin kt.

Kotlin

xml30 =41

xml30 =04

xml30 =43

xml30 =08

xml30 =45

xml30 =12

xml30 =47

xml30 =49

?>2

xml56 version77

3____379

_______101____381____382

01version84

?>2

01version87

01version89

01=33

01=35

01version95

01version97

xml04version99 =00

xml84=02

xml04version28

01version28

3____328

?>2

3____259 =11

01=14

01=16

?>2

01=19

01=96

xml04=98xml74xml75

?>2

01=70

?>2

01=35

01=37

?>2

01=30

01=32

?>2

3____328

?>2

3____259 =87

3____646

01=91

xml04encoding50encoding51encoding52encoding53encoding54xml56encoding56

?>2

01encoding59 "utf-8"03

01encoding46

xml04encoding64

xml04encoding66

xml04encoding68

xml04encoding70

xml04encoding72

xml84"1.0"26

version05encoding76

version05encoding78version62"utf-8"23

version05encoding82

version05encoding78version62encoding86

version05encoding88

version05encoding90

xml84encoding92

xml84encoding94

xml04xml75

01version28

3____328

version28

đầu ra

Bây giờ hãy xem những thay đổi trong màn hình đầu ra

Ghi chú. Người ta có thể thay đổi Màu dải, màu nền, độ rộng dải mà bạn chọn trong hàm replaceQuoteSpans và làm đẹp nó

Làm cách nào để hiển thị chuỗi HTML trong Android?

htmlToTextView. setText(HtmlCompat. fromHtml(htmlText, 0)); Trong đoạn mã trên, chúng tôi đang lấy dữ liệu HTML từ fromHtml() và thêm vào chế độ xem văn bản bằng cách sử dụng setText().

Làm cách nào để phân tích cú pháp văn bản HTML trong Android?

Ví dụ này minh họa cách tôi phân tích cú pháp HTML trong android. Bước 1 – Tạo một dự án mới trong Android Studio, đi tới Tệp ⇒ Dự án mới và điền vào tất cả các chi tiết cần thiết để tạo một dự án mới. Bước 2 − Thêm đoạn mã sau vào res/layout/activity_main. xml .

Làm cách nào để chuyển đổi HTML thành chuỗi trong Android?

từHtml(mHtmlString). toString() textView .

Làm cách nào để sử dụng mã HTML trong Android?

Phương pháp 1. Bước 1. Để thêm một tệp HTML cục bộ vào dự án Android của bạn, phải có một thư mục nội dung trong đó . Để tạo thư mục nội dung trong studio Android, trước tiên hãy mở dự án của bạn ở chế độ Android như trong hình bên dưới. Bước 2. Truy cập ứng dụng > nhấp chuột phải > Mới > Thư mục > Thư mục nội dung và tạo thư mục nội dung.