Καλώς ήρθατε σε αυτόν τον περιεκτικό οδηγό για το Jetpack Compose Text! Το Jetpack Compose έφερε επανάσταση στον τρόπο που σκεφτόμαστε την ανάπτυξη διεπαφής χρήστη στο Android. Με μια πιο διαισθητική και λειτουργική προσέγγιση, προσφέρει ένα ευρύ φάσμα εργαλείων για τη διαχείριση και το στυλ κειμένου.
Είτε είστε έμπειρος προγραμματιστής είτε μόλις ξεκινάτε, αυτός ο οδηγός θα σας καθοδηγήσει στις πολλές πτυχές της διαχείρισης κειμένου στο Jetpack Compose.
Βασική εμφάνιση κειμένου
Το κείμενο είναι ουσιαστικό μέρος οποιασδήποτε εφαρμογής. Στο Jetpack Compose, η εμφάνιση βασικού κειμένου είναι τόσο απλή όσο η χρήση του Text συνθετικό:
@Composable
fun TextExample() {
Text("Hello, Jetpack Compose!")
}Αυτός ο κώδικας θα αποδώσει ένα απλό κείμενο στην οθόνη.
Εμφάνιση μεταβλητών εντός κειμένου
Μερικές φορές, χρειάζεται να εμφανίσετε δυναμικά δεδομένα. Για παράδειγμα, είσοδος χρήστη ή δεδομένα που λαμβάνονται από έναν διακομιστή. Στο Compose, μπορείτε εύκολα να ενσωματώσετε μεταβλητές στο κείμενο:
@Composable
fun TextExample() {
val name = "Rashid"
Text("Hello, $name!")
}Αυτό θα εμφανίσει: “Γεια σου, Rashid!”
Εμφάνιση αριθμού σε κείμενο
Η εμφάνιση αριθμών λειτουργεί παρόμοια με την εμφάνιση μεταβλητών. Εάν έχετε έναν ακέραιο ή ένα float, μπορείτε να το ενσωματώσετε απρόσκοπτα:
@Composable
fun TextExample() {
val score = 99
Text("Your score is: $score")
}Αυτό εμφανίζει: “Η βαθμολογία σας είναι: 99”
Εμφάνιση κειμένου από τον πόρο
Συνιστάται η εμφάνιση κειμένου από πόρους συμβολοσειρών αντί για σκληρή κωδικοποίηση. Λάβετε res > values > strings.xml και προσθέστε ένα κείμενο όπως δίνεται παρακάτω.
<resources>
<string name="app_name">My Application</string>
<string name="hello_world">Hello World!</string>
</resources>Στη συνέχεια, μπορείτε να εμφανίσετε αυτήν τη συμβολοσειρά ως κείμενο.
@Composable
fun TextExample() {
Text(stringResource(R.string.hello_world))
}Γραμματοσειρά κειμένου
Γραμματοσειρές συστήματος
Το Jetpack Compose παρέχει προεπιλεγμένη υποστήριξη για γραμματοσειρές συστήματος. Η χρήση αυτών είναι απλή και εξασφαλίζει συνέπεια με το σχεδιασμό της πλατφόρμας:
@Composable
fun TextExample() {
Text("Using System Font", style = TextStyle.Default)
}Με αυτό, το κείμενό σας θα υιοθετήσει το προεπιλεγμένο στυλ γραμματοσειράς του συστήματος Android.
Αλλαγή μεγέθους γραμματοσειράς
Η προσαρμογή του μεγέθους της γραμματοσειράς είναι απαραίτητη για την αναγνωσιμότητα και το σχεδιασμό:
@Composable
fun TextExample() {
Text("Bigger Font", fontSize = 20.sp)
}Χρησιμοποιώντας την sp Η μονάδα διασφαλίζει ότι το κείμενο κλιμακώνεται σύμφωνα με τις προτιμήσεις του χρήστη και τις ρυθμίσεις της συσκευής.
Προσαρμοσμένες γραμματοσειρές
Για να ξεχωρίσετε την εφαρμογή σας, ίσως θέλετε να χρησιμοποιήσετε μια προσαρμοσμένη γραμματοσειρά. Πρώτα, τοποθετήστε το αρχείο γραμματοσειράς σας (π.χ. .ttf ή .otf) στο res/font/ Ευρετήριο. Στη συνέχεια, χρησιμοποιήστε το στη Σύνθεση:
val customFont = FontFamily(Font(R.font.your_custom_font))
Text("Custom Font Style", fontFamily = customFont)Αυτό θα αποδώσει το κείμενο με την προσαρμοσμένη γραμματοσειρά που έχετε επιλέξει.
Στυλ γραμματοσειράς
Πλάγιο κείμενο
Το να δώσετε έμφαση σε συγκεκριμένα μέρη του κειμένου σας μπορεί να επιτευχθεί με πλάγιους χαρακτήρες:
Text("This is italic text", fontStyle = FontStyle.Italic)ο FontStyle Η ιδιότητα καθιστά εύκολη την απόδοση κειμένου με πλάγια γράμματα στην οθόνη.
Εντονο Κείμενο
Για μεγαλύτερη έμφαση ή επισήμανση βασικών πληροφοριών, η έντονη γραφή είναι η λύση:
Text("This is bold text", fontWeight = FontWeight.Bold)Με FontWeightμπορείτε αβίαστα να κάνετε το κείμενό σας τολμηρό.
Υπογράμμιση κειμένου
Η υπογράμμιση είναι ένας άλλος αποτελεσματικός τρόπος για να τονίσετε ή να τραβήξετε την προσοχή:
Text("Underlined text", textDecoration = TextDecoration.Underline)ο TextDecoration Το κατάλυμα προσφέρει μια σουίτα διακοσμητικών χαρακτηριστικών, όπως υπογράμμιση.
Διαγραμμένο κείμενο
Για να υποδηλώσετε ξεπερασμένες πληροφορίες ή να εμφανίσετε μια διαγραμμένη επιλογή, μια διαγραφή είναι χρήσιμη:
Text("Strikethrough text", textDecoration = TextDecoration.LineThrough)Απλώς χρησιμοποιήστε το LineThrough επιλογή του TextDecoration για να επιτευχθεί αυτό το αποτέλεσμα.
Χρώμα γραμματοσειράς
Τα χρώματα μπορούν να βοηθήσουν στη μετάδοση της διάθεσης, της σημασίας ή της κατηγοριοποίησης:
Text("Colored text", color = Color.Red)Με την color παράμετρο, μπορείτε εύκολα να επιλέξετε από μια ποικιλία χρωμάτων.
Κείμενο κλίσης
Για πιο δυναμική εμφάνιση, εφαρμόστε μια διαβάθμιση στο κείμενό σας:
@OptIn (ExperimentalTextApi::class)
@Composable
fun TextExample() {
Text(
fontSize = 30.sp,
text = ("This text has a beautiful gradient color. Just Check it!"),
style = TextStyle(
brush = Brush.linearGradient(
colors = listOf(Color.Magenta, Color.Cyan)
)
)
)
}Η χρήση ενός πινέλου ντεγκραντέ προσθέτει αίσθηση στο κειμενικό σας περιεχόμενο.
Οικογένεια γραμματοσειρών
Το Jetpack Compose επιτρέπει προσαρμογές όπως οι σειρές για διαφορετικές επιλογές σχεδίασης:
Text("Serif text", fontFamily = FontFamily.Serif)Επιλέξτε από τα Serif, SansSerif, Monospace και άλλα για να ταιριάζει με το σχεδιαστικό σας όραμα.
Βάρος γραμματοσειράς
Πέρα από την έντονη γραφή, μπορείτε να επιλέξετε από μια σειρά βαρών γραμματοσειράς:
Text("Light text", fontWeight = FontWeight.Light)Από UltraLight προς την Blackυπάρχει ένα βάρος για κάθε ανάγκη.
Σκιά κειμένου
Οι σκιές είναι ένας πολύ καλός τρόπος για να δώσετε βάθος στο κείμενό σας, κάνοντάς το να ξεχωρίζει σε διάφορα φόντο. Με το Jetpack Compose, η προσθήκη μιας σκιάς στο κείμενό σας είναι εύκολη.
@Composable
fun TextExample() {
val offset = Offset(5.0f, 10.0f)
Text(
text = "Hello world!",
style = TextStyle(
fontSize = 24.sp,
shadow = Shadow(
color = Color.Gray, offset = offset, blurRadius = 3f
)
)
)
}Στον παραπάνω κώδικα, Offset που καθορίζει την οριζόντια και κάθετη απόσταση της σκιάς από το κείμενο. εφαρμόζουμε μια σκιά χρησιμοποιώντας το Shadow τάξη και α blurRadius που μαλακώνει τις άκρες της σκιάς.
Αδιαφάνεια κειμένου
Η αδιαφάνεια μπορεί να παίξει σημαντικό ρόλο στη σχεδίαση κειμένου, ειδικά όταν θέλετε να δημιουργήσετε ιεραρχία ή να συνδυάσετε διακριτικά κείμενο με το φόντο του. Η προσαρμογή της αδιαφάνειας του κειμένου στο Jetpack Compose είναι απλή.
Σκέψου τα ακόλουθα:
Text(
text = "Semi-Transparent Text",
color = Color.Red.copy(alpha = 0.5f)
)Για να ρυθμίσουμε την αδιαφάνεια, χρησιμοποιούμε το color ιδιοκτησία με το copy λειτουργία ενεργοποιημένη Color.Red. ο alpha παράμετρος εντός copy ορίζει το επίπεδο διαφάνειας.
Ένα άλφα του 1f σημαίνει πλήρως αδιαφανές, ενώ 0f είναι πλήρως διαφανές. Εδώ, το έχουμε ρυθμίσει 0.5fκάνοντας το κείμενό μας ημιδιαφανές.
Κείμενο φόντο
Τα φόντο διαδραματίζουν καθοριστικό ρόλο στην επισήμανση του κειμένου και στο να το κάνουν πιο ευανάγνωστο σε διαφορετικά σκηνικά. Στο Jetpack Compose, μπορούμε εύκολα να αντιστοιχίσουμε φόντο στο κείμενό σας.
@Composable
fun TextExample() {
Text(
text = "Highlighted Text",
style = TextStyle(
fontSize = 24.sp,
background = Color.Yellow
)
)
}Στα πλαίσια TextStyleυπάρχει το background ιδιοκτησία. Εδώ, επιλέξαμε Color.yellow για να δώσουμε στο κείμενό μας ένα κίτρινο φόντο.
Συνδυάστε στυλ
Ο συνδυασμός στυλ είναι ένας ισχυρός τρόπος για να δημιουργήσετε ξεχωριστά και εκφραστικά σχέδια κειμένων. Με το Jetpack Compose, η μίξη διαφόρων χαρακτηριστικών κειμένου είναι τόσο διαισθητική όσο και αποτελεσματική.
Συνδυάστε στυλ γραμματοσειράς
Ας ξεκινήσουμε συνδυάζοντας βασικά στυλ γραμματοσειράς, όπως έντονη και πλάγια γραφή:
Text(
"Bold & Italic Text",
fontWeight = FontWeight.Bold,
fontStyle = FontStyle.Italic
)Αυτό έχει ως αποτέλεσμα το κείμενο που είναι και τολμηρό και πλάγιο, ιδανικό για να τραβήξει την προσοχή.
Πολλαπλά στυλ σε κείμενο
Στο Jetpack Compose, μπορεί να θέλετε να διαμορφώσετε διαφορετικά μέρη του κειμένου σας σε ένα μοναδικό στυλ Text συνθετικός. Αυτό μπορεί να επιτευχθεί χρησιμοποιώντας ένα AnnotatedStringπου είναι ουσιαστικά ένα κορδόνι που μπορεί να στολιστεί με ποικίλα στυλ.
Για τη δημιουργία ενός AnnotatedString με πολλαπλά στυλ, το buildAnnotatedString ο οικοδόμος είναι χρήσιμος.
@Composable
fun TextExample() {
Text(
buildAnnotatedString {
withStyle(style = SpanStyle(color = Color.Blue)) {
append("H")
}
append("ello ")
withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
append("W")
}
append("orld")
},
fontSize = 40.sp,
)
}Μέσα στον οικοδόμο, withStyle μας επιτρέπει να εφαρμόσουμε ένα συγκεκριμένο SpanStyle σε ένα μέρος του κειμένου.
Το αποτέλεσμα? Το κείμενό μας θα εμφανίζεται ως “H” με μπλε χρώμα, ακολουθούμενο από “ello” και στη συνέχεια “W” με έντονο κόκκινο, τελειώνοντας με “orld”.
Ο συνδυασμός πολλαπλών στυλ με αυτόν τον τρόπο σάς επιτρέπει να δημιουργήσετε πιο ελκυστικές και ενημερωτικές διεπαφές με κείμενο.
Πολλαπλές διακοσμήσεις
Γιατί να περιοριστείτε σε μια μόνο διακόσμηση κειμένου όταν μπορείτε να έχετε περισσότερα;
Text(
"Underlined & Strikethrough",
textDecoration = TextDecoration.combine(listOf(TextDecoration.Underline, TextDecoration.LineThrough))
)Εδώ, συνδυάσαμε την υπογράμμιση με μια διαγράμμιση, δημιουργώντας ένα μοναδικό οπτικό υπόβαθρο.
Ευθυγράμμιση κειμένου
Η στοίχιση κειμένου καθορίζει τη διάταξη του κειμένου σε σχέση με ένα σημείο αναφοράς ή μια γραμμή. Η σωστή ευθυγράμμιση βελτιώνει την αναγνωσιμότητα και την αισθητική εμφάνιση. Το Jetpack Compose παρέχει ευέλικτα εργαλεία για να επιτύχετε την επιθυμητή ευθυγράμμιση κειμένου με ευκολία.
Αριστερή στοίχιση
Από προεπιλογή, το κείμενο στο Jetpack Compose είναι αριστερή στοίχιση. Ξεκινά από την αριστερή άκρη και μετακινείται προς τα δεξιά:
Text("This is left-aligned text", textAlign = TextAlign.Left)Η αριστερή στοίχιση είναι τυπική για το περισσότερο γραπτό περιεχόμενο, ειδικά σε γλώσσες από αριστερά προς τα δεξιά.
Ευθυγράμμιση στο κέντρο
Για τίτλους ή όταν θέλετε να επιστήσετε την προσοχή σε συγκεκριμένο κείμενο, η στοίχιση στο κέντρο είναι ιδανική:
Text("Centered Text", textAlign = TextAlign.Center)Το κείμενο θα είναι τέλεια κεντραρισμένο σε σχέση με το κοντέινερ του.
Δεξιά στοίχιση
Η δεξιά στοίχιση είναι ιδιαίτερα χρήσιμη για γλώσσες που διαβάζονται από δεξιά προς τα αριστερά ή για συγκεκριμένες επιλογές σχεδίασης:
Text("Right-aligned Text", textAlign = TextAlign.Right)Το κείμενο ξεκινά από τη δεξιά άκρη και εκτείνεται προς τα αριστερά.
Δικαιολογήστε την ευθυγράμμιση
Για πιο ομοιόμορφη εμφάνιση, ειδικά σε μεγαλύτερα τμήματα κειμένου, μπορείτε να επιλέξετε τη στοίχιση αιτιολογίας. Αυτό εξασφαλίζει ομοιόμορφη απόσταση μεταξύ των λέξεων, κάνοντας ευθεία τόσο την αριστερή όσο και τη δεξιά άκρη:
Text("This is a sample justified text. It ensures that both edges align neatly.", textAlign = TextAlign.Justify)Είναι σημαντικό να επιλέξετε μια στοίχιση που να συμπληρώνει το περιεχόμενο και τη σχεδίαση της εφαρμογής σας. Θυμηθείτε, ενώ η ευθυγράμμιση συμβάλλει στην αισθητική, η αναγνωσιμότητα πρέπει πάντα να είναι η προτεραιότητα.
Διάστιχο κειμένου
Η αποτελεσματική απόσταση κειμένου μπορεί να βελτιώσει δραματικά την αναγνωσιμότητα και τη συνολική εμφάνιση του περιεχομένου της εφαρμογής σας. Το Jetpack Compose προσφέρει μια σουίτα εργαλείων για να βοηθήσει τους προγραμματιστές να συντονίσουν με ακρίβεια την απόσταση, διασφαλίζοντας ότι το κείμενο παρουσιάζεται καθαρά και ελκυστικά.
Διάστιχο
Η προσαρμογή του διαστήματος μεταξύ των γραμμών μπορεί να βοηθήσει στη βελτίωση της ροής και της αναγνωσιμότητας των παραγράφων:
Text("This is a sample text with\nmultiple lines.", lineHeight = 28.sp)Με τη χρήση του lineHeight ιδιότητα, μπορείτε να ορίσετε ένα συγκεκριμένο ύψος για κάθε γραμμή, το οποίο περιλαμβάνει το ύψος του κειμένου και το διάστημα πάνω και κάτω από αυτό.
Διάστιχο γραμμάτων
Για να τροποποιήσετε το διάστημα μεταξύ των μεμονωμένων χαρακτήρων, χρησιμοποιήστε διάστιχο:
Text("Spaced Out Text", letterSpacing = 1.5.sp)Με την letterSpacing ιδιότητα, οι χαρακτήρες του κειμένου θα έχουν αυξημένο χώρο μεταξύ τους, γεγονός που μπορεί να δημιουργήσει μια χαρακτηριστική εμφάνιση ή να βελτιώσει την αναγνωσιμότητα σε ορισμένες γραμματοσειρές.
Κατά την προσαρμογή του διαστήματος κειμένου, να θυμάστε πάντα την εμπειρία χρήστη. Η υπερβολική ή η υπολειπόμενη απόσταση μπορεί να μειώσει την αναγνωσιμότητα. Η δοκιμή σε διάφορες συσκευές και μεγέθη οθόνης θα σας βοηθήσει να επιτύχετε την τέλεια ισορροπία.
Όριο γραμμής κειμένου και περικοπή
Η διαχείριση της εμφάνισης μακροσκελούς περιεχομένου κειμένου είναι ζωτικής σημασίας για τη διατήρηση μιας καθαρής και φιλικής προς τον χρήστη διεπαφής. Το Jetpack Compose παρέχει απλές μεθόδους για τον περιορισμό των γραμμών και την περικοπή κειμένου, διασφαλίζοντας ότι η διεπαφή χρήστη σας παραμένει τακτοποιημένη και οι αναγνώστες δεν καταπονούνται.
Όριο γραμμής
Μπορείτε εύκολα να ορίσετε έναν μέγιστο αριθμό γραμμών που θα καταλαμβάνει το κείμενό σας. Αυτό είναι ιδιαίτερα χρήσιμο για προεπισκοπήσεις ή σύντομα αποσπάσματα:
Text("This is a long piece of text that may not fit within two lines. Yiu have to check how this text is gonna end finally. See the difference", maxLines = 2)Ρυθμίζοντας το maxLines ιδιότητα, το κείμενο θα αποκοπεί μετά τον καθορισμένο αριθμό γραμμών, διασφαλίζοντας ότι δεν κυριαρχεί στην οθόνη.
Περικοπή κειμένου
Όταν περιορίζετε γραμμές, μπορεί επίσης να θέλετε να υποδείξετε στον χρήστη ότι υπάρχει περισσότερο περιεχόμενο από αυτό που είναι ορατό αυτήν τη στιγμή. Η περικοπή είναι χρήσιμη εδώ:
Text("This is a long piece of text that may not fit within two lines. Yiu have to check how this text is gonna end finally. See the difference", maxLines = 2, overflow = TextOverflow.Ellipsis)Με την TextOverflow.Ellipsis αξία για το overflow ιδιοκτησία, οποιοδήποτε κείμενο υπερβαίνει το maxLines θα αντικατασταθεί με έλλειψη (...), σηματοδοτώντας στους χρήστες ότι το περιεχόμενο συνεχίζεται.
Επιλογή κειμένου
Σε διαδραστικές διεπαφές, η δυνατότητα στους χρήστες να επιλέγουν κείμενο μπορεί να βελτιώσει τη λειτουργικότητα, βοηθώντας σε εργασίες όπως η αντιγραφή, η κοινή χρήση ή η αναζήτηση πληροφοριών. Το Jetpack Compose απλοποιεί τη διαδικασία ενεργοποίησης της επιλογής κειμένου, εξασφαλίζοντας ταυτόχρονα χρηστικότητα και απρόσκοπτη εμπειρία χρήστη.
Βασική επιλογή κειμένου
Για να κάνετε το κείμενο επιλέξιμο στο Jetpack Compose, τυλίξτε το Text συνθετικός μέσα σε α SelectionContainer:
@Composable
fun TextExample() {
SelectionContainer {
Text("This is a selectable text")
}
}
Με την SelectionContainer, οποιοδήποτε κείμενο μέσα γίνεται επιλέξιμο. Οι χρήστες μπορούν να πατήσουν και να σύρουν για να επιλέξουν συγκεκριμένα τμήματα του κειμένου, όπως θα έκαναν στο εγγενές Android.
Η παροχή επιλογής κειμένου όχι μόνο ενισχύει τη διαδραστικότητα, αλλά διασφαλίζει επίσης ότι οι χρήστες μπορούν να αλληλεπιδράσουν με το περιεχόμενο πιο αποτελεσματικά. Να λαμβάνετε πάντα υπόψη το πλαίσιο και να διασφαλίζετε ότι η επιλογή κειμένου βελτιώνει, αντί να διαταράσσει, την εμπειρία χρήστη.
Περίγραμμα κειμένου
Τα περιγράμματα μπορούν να παίξουν καθοριστικό ρόλο στην ανάδειξη συγκεκριμένων τμημάτων του κειμένου ή στην προσθήκη ενός διακοσμητικού στοιχείου. Στο Jetpack Compose, έχετε την ευελιξία να προσθέσετε περιγράμματα στο κείμενό σας, διασφαλίζοντας ότι ξεχωρίζει ή ευθυγραμμίζεται με το θέμα του σχεδιασμού σας.
Βασικό περίγραμμα κειμένου
Η προσθήκη ενός απλού περιγράμματος γύρω από το κείμενό σας γίνεται εύκολα με τη χρήση του Modifier.border:
@Composable
fun TextExample() {
Column {
Text(
text = "Text with Border",
modifier = Modifier.border(1.dp, Color.Red, shape = RoundedCornerShape(4.dp))
)
}
}Στο παραπάνω παράδειγμα, το κείμενο θα περιβάλλεται από ένα κόκκινο περίγραμμα του 1.dp πάχος. Οι γωνίες του περιγράμματος είναι ελαφρώς στρογγυλεμένες με α 4.dp ακτίνα κύκλου.
Συνδυάστε με padding
Για να βεβαιωθείτε ότι το κείμενό σας δεν βρίσκεται πολύ κοντά στο περίγραμμά του, χρησιμοποιήστε padding:
@Composable
fun TextExample() {
Column {
Text(
text = "Text with Border",
modifier = Modifier
.border(1.dp, Color.Red, shape = RoundedCornerShape(4.dp))
.padding(8.dp)
)
}
}ο Modifier.padding εξασφαλίζει ένα κενό μεταξύ του κειμένου και του περιγράμματός του, ενισχύοντας τη σαφήνεια και την αισθητική.
Η προσεκτική χρήση περιγραμμάτων μπορεί να δώσει έμφαση σε σημαντικές πληροφορίες, να βελτιώσει την αισθητική ή να καθοδηγήσει την προσοχή των χρηστών. Ωστόσο, είναι σημαντικό να διασφαλιστεί ότι τα περιγράμματα συμπληρώνουν τη συνολική σχεδίαση και δεν επισκιάζουν το κύριο περιεχόμενο.
Η πλοήγηση κειμένου στο Jetpack Compose είναι ταυτόχρονα διασκεδαστική και πρακτική. Αυτός ο οδηγός έχει δείξει πόσο εύκολο είναι το στυλ, η προσαρμογή και η διαχείριση κειμένου στις εφαρμογές σας. Να θυμάστε, ενώ ο σχεδιασμός είναι απαραίτητος, έχετε πάντα στο μυαλό σας τους χρήστες σας. Ευχαριστώ για την ανάγνωση!
