Bagaimana cara menambahkan daftar poin ke aplikasi android?


91

Saya telah mencari pertanyaan saya di Google tetapi tidak ada jawaban yang berfungsi. Bagaimana cara menambahkan daftar berpoin ke textview saya.

Jawaban:


189

Sulit untuk dilakukan karena ul / li / ol tidak didukung. Untungnya Anda dapat menggunakan ini sebagai gula sintaksis:

&#8226; foo<br/>
&#8226; bar<br/>
&#8226; baz<br/>

&#8226;adalah entitas html untuk butir daftar lebih banyak pilihan di sini http://www.elizabethcastro.com/html/extras/entities.html

lebih lanjut tentang tag mana yang didukung oleh Mark Murphy (@CommonsWare) http://commonsware.com/blog/Android/2010/05/26/html-tags-supported-by-textview.html Muat dengan Html.fromHtml

((TextView)findViewById(R.id.my_text_view)).setText(Html.fromHtml(myHtmlString));

1
Terima kasih untuk link ke situs commonsware, saya telah mencari sesuatu seperti itu selama beberapa waktu!
Norman H

4
Harap dicatat bahwa jika Anda mendapatkan string dari values ​​/ strings.xml (menggunakan context.getString (R.string.yourstring);), Anda harus membungkusnya dalam CDATA : <string name="string_name"><![CDATA[ &#8226; foo<br /> &#8226; bar... ]]></string>
Quentin S.

5
ini tidak bekerja jika ada lebih dari satu baris dalam butir
peluru

sepertinya ul/ lisekarang didukung stackoverflow.com/questions/9754076/…
hmac

55
  1. browep menjelaskan cara yang bagus melalui HTML. Solusi yang disediakan dengan entitas html dapat bermanfaat. Tapi itu hanya mencakup pelurunya. Jika teks Anda membungkus, indentasi tidak akan benar.

  2. Saya menemukan solusi lain yang menyematkan tampilan web. Itu mungkin cocok untuk beberapa orang, tetapi saya pikir jenisnya berlebihan ... (Sama dengan menggunakan tampilan daftar.)

  3. Saya suka pendekatan kreatif Nelson : D, tetapi tidak memberi Anda kemungkinan untuk menambahkan daftar tak berurutan ke tampilan teks.

  4. Contoh saya tentang daftar tidak berurutan dengan peluru menggunakan BulletSpan

    CharSequence t1 = getText(R.string.xxx1);
    SpannableString s1 = new SpannableString(t1);
    s1.setSpan(new BulletSpan(15), 0, t1.length(), 0);
    CharSequence t2 = getText(R.string.xxx2);
    SpannableString s2 = new SpannableString(t2);
    s2.setSpan(new BulletSpan(15), 0, t2.length(), 0);
    textView.setText(TextUtils.concat(s1, s2));
    

Positif:

  • Butir dengan indentasi yang benar setelah teks dibungkus.
  • Anda dapat menggabungkan teks yang diformat atau tidak diformat dalam satu contoh TextView
  • Anda dapat menentukan dalam konstruktor BulletSpan seberapa besar indentasi seharusnya.

Negatif:

  • Anda harus menyimpan setiap item dari daftar dalam sumber daya string terpisah. Jadi, Anda tidak dapat menentukan daftar Anda senyaman mungkin dalam HTML.

1
Pendekatan ini (ditiru persis) tidak berfungsi pada 2.2. Anda berakhir hanya dengan satu peluru.
Skone

Hai Skone, ini berfungsi di emulator 2.2 dan versi android asli. Saya melihat versi android di mana ruang antara peluru dan teks diabaikan. Tapi peluru masih muncul. Apakah Anda memiliki baris baru di akhir string peluru Anda?
Diego Frehner

Solusi ini tidak berfungsi saat Anda mengubah penspasian baris di textview
Marqs

Cara hebat melakukannya dengan BulletSpan, bekerja dengan sempurna dan sangat mudah!
Moonbloom

7
Kode di atas berfungsi untuk saya !!! Yang harus saya lakukan adalah menambahkan "\ n" di akhir setiap string dalam xml ....
Arhat Baid

38

Saya telah menemukan alternatif .. cukup salin poin ini "•" (ini adalah teks) dan tempelkan di teks tampilan teks Anda, Anda dapat mengubah warna poin dengan mengubah warna teks dan juga semua atribut lain seperti ukuran, lebar tinggi. .. :)

Anda dapat menggunakan jalan pintas untuk mendapatkan poin ini saat mengetik

untuk windows

ALT + 7

untuk Mac

ALT + 8


2
Alt + 7 tidak berfungsi untuk saya (mungkin hanya untuk mac atau linux) tetapi menyalin dan menempelkan • karakter unicode berhasil.
Jon

2
FYI: ALT + 7 hanya akan berfungsi jika keyboard memiliki numpad terpisah.
Aks4125

Jika Anda menempelkan simbol dalam kode, misalnya dalam sebuah string, ingatlah masalah dengan karakter non-ascii dan pengkodean file (coba ubah pengkodean file dari sudut kanan bawah IntelliJ). Lebih baik menggunakan urutan escape yang sesuai (misalnya \ u1234).
Gil Vegliach

Cara untuk pergi !! kehidupan preman!
goonerDroid

2
\ u2022 adalah jawabannya
pengguna2322082

21

Terinspirasi oleh berbagai jawaban di sini, saya membuat kelas Utilitas untuk menjadikannya liner yang mudah . Ini akan membuat daftar berpoin dengan indentasi untuk teks yang dibungkus. Ini memiliki metode untuk menggabungkan string, sumber daya string dan sumber daya array string.

Ini akan membuat CharSequence yang bisa Anda berikan ke TextView. Sebagai contoh:

CharSequence bulletedList = BulletListUtil.makeBulletList("First line", "Second line", "Really long third line that will wrap and indent properly.");
textView.setText(bulletedList);

Semoga bermanfaat. Nikmati.

Catatan: Ini akan menggunakan peluru standar sistem, lingkaran kecil dengan warna yang sama dengan teks. Jika Anda menginginkan poin kustom, pertimbangkan untuk membuat subclass BulletSpan dan menimpanyadrawLeadingMargin() untuk menggambar poin yang Anda inginkan. Lihatlah pada sumber BulletSpan untuk tahu bagaimana cara kerjanya.

public class BulletTextUtil {

/**
 * Returns a CharSequence containing a bulleted and properly indented list.
 *
 * @param leadingMargin In pixels, the space between the left edge of the bullet and the left edge of the text.
 * @param context
 * @param stringArrayResId A resource id pointing to a string array. Each string will be a separate line/bullet-point.
 * @return
 */
public static CharSequence makeBulletListFromStringArrayResource(int leadingMargin, Context context, int stringArrayResId) {
    return makeBulletList(leadingMargin, context.getResources().getStringArray(stringArrayResId));
}

/**
 * Returns a CharSequence containing a bulleted and properly indented list.
 *
 * @param leadingMargin In pixels, the space between the left edge of the bullet and the left edge of the text.
 * @param context
 * @param linesResIds An array of string resource ids. Each string will be a separate line/bullet-point.
 * @return
 */
public static CharSequence makeBulletListFromStringResources(int leadingMargin, Context context, int... linesResIds) {
    int len = linesResIds.length;
    CharSequence[] cslines = new CharSequence[len];
    for (int i = 0; i < len; i++) {
        cslines[i] = context.getString(linesResIds[i]);
    }
    return makeBulletList(leadingMargin, cslines);
}

/**
 * Returns a CharSequence containing a bulleted and properly indented list.
 *
 * @param leadingMargin In pixels, the space between the left edge of the bullet and the left edge of the text.
 * @param lines An array of CharSequences. Each CharSequences will be a separate line/bullet-point.
 * @return
 */
public static CharSequence makeBulletList(int leadingMargin, CharSequence... lines) {
    SpannableStringBuilder sb = new SpannableStringBuilder();
    for (int i = 0; i < lines.length; i++) {
        CharSequence line = lines[i] + (i < lines.length-1 ? "\n" : "");
        Spannable spannable = new SpannableString(line);
        spannable.setSpan(new BulletSpan(leadingMargin), 0, spannable.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        sb.append(spannable);
    }
    return sb;
}

}

Terima kasih tuan! Saya menggunakan fungsi makeBulletList dan berfungsi seperti pesona: D
Aba

Itu mengagumkan! Terima kasih)
kulikovman

10

Sejauh ini, ini yang termudah ..

<string name="bullet_ed_list">\n\u2022 He has been Chairman of CFL Manufacturers Committee of ELCOMA, the All India Association of Lighting Equipment Manufacturers.
\n\u2022 He has been the President of Federation of Industries of India (FII).</string>

8

Ekstensi Kotlin yang siap digunakan

fun List<String>.toBulletedList(): CharSequence {
    return SpannableString(this.joinToString("\n")).apply {
        this@toBulletedList.foldIndexed(0) { index, acc, span ->
            val end = acc + span.length + if (index != this@toBulletedList.size - 1) 1 else 0
            this.setSpan(BulletSpan(16), acc, end, 0)
            end
        }
    }
}

Pemakaian:

val bulletedList = listOf("One", "Two", "Three").toBulletedList()
label.text = bulletedList

Warna dan ukuran:

Untuk mengubah warna atau ukuran poin, gunakan CustomBulletSpan, bukan BulletSpan

package com.fbs.archBase.ui.spans

import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.text.Layout
import android.text.Spanned
import android.text.style.LeadingMarginSpan
import androidx.annotation.ColorInt

class CustomBulletSpan(
        private val bulletRadius: Int = STANDARD_BULLET_RADIUS,
        private val gapWidth: Int = STANDARD_GAP_WIDTH,
        @ColorInt private val circleColor: Int = STANDARD_COLOR
) : LeadingMarginSpan {

    private companion object {
        val STANDARD_BULLET_RADIUS = Screen.dp(2)
        val STANDARD_GAP_WIDTH = Screen.dp(8)
        const val STANDARD_COLOR = Color.BLACK
    }

    private val circlePaint = Paint().apply {
    color = circleColor
        style = Paint.Style.FILL
        isAntiAlias = true
    }

    override fun getLeadingMargin(first: Boolean): Int {
        return 2 * bulletRadius + gapWidth
    }

    override fun drawLeadingMargin(
            canvas: Canvas, paint: Paint, x: Int, dir: Int,
            top: Int, baseline: Int, bottom: Int,
            text: CharSequence, start: Int, end: Int,
            first: Boolean,
            layout: Layout?
    ) {
        if ((text as Spanned).getSpanStart(this) == start) {
            val yPosition = (top + bottom) / 2f
            val xPosition = (x + dir * bulletRadius).toFloat()

            canvas.drawCircle(xPosition, yPosition, bulletRadius.toFloat(), circlePaint)
        }
    }
}

Bisakah Anda mengubah ukuran poin agar sesuai dengan ukuran teks?
nenur

@NoahTanenholtz Anda dapat meningkatkan ukuran peluru dengan mengubah nilai argumen BulletSpan ()
Mikhail Sharin

Oh, saya pikir itu
jaraknya

Spasi ditingkatkan daripada ukuran peluru):
Sumit Shukla

@SumitShukla terima kasih atas komentarnya. Saya baru saja menambahkan BulletCustomSpan untuk kustomisasi warna dan ukuran
Mikhail Sharin

4

Opsi yang saya gunakan adalah mengatur drawable peluru menggunakan gaya.

<style name="Text.Bullet">
    <item name="android:background">@drawable/bullet</item>
    <item name="android:paddingLeft">10dp</item>
</style>

Pemakaian:

<TextView android:id="@+id/tx_hdr" 
android:text="Item 1" style="@style/Text.Bullet" />

Saya baru saja mengambil gambar peluru kecil dari web untuk digambar. Tata Letak Grafis di Eclipse menunjukkan grafik yang terbentang di bawah teks ... agak jauh dari yang saya inginkan.
JohnK

1
Saya pikir maksudnyaandroid:drawableLeft=
Blundell

4

menggunakan TextView sederhana dengan drawable majemuk. Sebagai contoh

<TextView     
    android:text="Sample text"
    android:drawableLeft="@drawable/bulletimage" >
</TextView>

3

Berikut solusi lain, tidak persis menambahkan daftar ke satu textview, tapi saya kira tujuannya sama. Ini menggunakan TableLayout, yang hanya membutuhkan XML dan sangat sederhana untuk daftar kecil yang dipesan atau tidak berurutan. Di bawah ini, contoh kode yang saya gunakan untuk ini, bukan sebaris kode di Java.

Positif:

  • Anda dapat meletakkan apa pun yang Anda suka di baris tabel, tidak harus dalam bentuk textview
  • Anda dapat menggunakannya untuk membuat daftar berpoin dan bernomor atau apa pun
  • Anda dapat menentukan indentasi menggunakan padding atau layout_weight

Negatif:

  • membosankan untuk daftar yang sangat panjang (kecuali Anda menggunakan editor teks licik dengan regex)
  • setiap item daftar disimpan sebagai sumber daya string terpisah

        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
    
            >
    
            <TextView
                style="@style/helpPagePointsStyle"
                android:layout_weight="0.2"
                android:text="1." />
    
            <TextView
                style="@style/helpPagePointsStyle"
                android:layout_weight="3"
                android:text="@string/help_points1" />
        </TableRow>
    
        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            >
            <TextView
                style="@style/helpPagePointsStyle"
                android:layout_weight="0.2"
                android:text="2." />
    
            <TextView
                style="@style/helpPagePointsStyle"
                android:layout_weight="3"
                android:text="@string/help_points2" />
        </TableRow>
        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            >
            <TextView
                style="@style/helpPagePointsStyle"
                android:layout_weight="0.2"
                android:text="3." />
            <TextView
                style="@style/helpPagePointsStyle"
                android:layout_weight="3"
                android:text="@string/help_points3" />
        </TableRow>
    
    
    </TableLayout>
    

dan gaya:

<style name="helpPagePointsStyle">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:gravity">left</item>
</style>

2

Berikut adalah daftar berpoin dengan header dan tab di depan setiap item.

public class BulletListBuilder {

    private static final String SPACE = " ";
    private static final String BULLET_SYMBOL = "&#8226";
    private static final String EOL = System.getProperty("line.separator");
    private static final String TAB = "\t";

    private BulletListBuilder() {

    }

    public static String getBulletList(String header, String []items) {
        StringBuilder listBuilder = new StringBuilder();
        if (header != null && !header.isEmpty()) {
            listBuilder.append(header + EOL + EOL);
        }
        if (items != null && items.length != 0) {
            for (String item : items) {
                Spanned formattedItem = Html.fromHtml(BULLET_SYMBOL + SPACE + item);
                listBuilder.append(TAB + formattedItem + EOL);
            }
        }
        return listBuilder.toString();
    }

}

2

Benar-benar berlebihan dan membuat tampilan teks kustom.

Gunakan seperti ini:

<com.blundell.BulletTextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="--bullet 1 --bullet two --bullet three --bullet four" />

dan kode:

package com.blundell;

import android.content.Context;
import android.text.Html;
import android.util.AttributeSet;
import android.widget.TextView;

public class BulletTextView extends TextView {
    private static final String SPLITTER_CHAR = "--";
    private static final String NEWLINE_CHAR = "<br/>";
    private static final String HTML_BULLETPOINT = "&#8226;";

    public BulletTextView(Context context, AttributeSet attrs) {
        this(context, attrs, android.R.attr.textViewStyle);
    }

    public BulletTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        checkForBulletPointSplitter();
    }

    private void checkForBulletPointSplitter() {
        String text = (String) getText();
        if (text.contains(SPLITTER_CHAR)) {
            injectBulletPoints(text);
        }
    }

    private void injectBulletPoints(String text) {
        String newLinedText = addNewLinesBetweenBullets(text);
        String htmlBulletText = addBulletPoints(newLinedText);
        setText(Html.fromHtml(htmlBulletText));
    }

    private String addNewLinesBetweenBullets(String text) {
        String newLinedText = text.replace(SPLITTER_CHAR, NEWLINE_CHAR + SPLITTER_CHAR);
        newLinedText = newLinedText.replaceFirst(NEWLINE_CHAR, "");
        return newLinedText;
    }

    private String addBulletPoints(String newLinedText) {
        return newLinedText.replace(SPLITTER_CHAR, HTML_BULLETPOINT);
    }

}

Bagaimana kita bisa meningkatkan ukuran peluru dan jaraknya?
Sumit Shukla

Contoh ini menggunakan &#8226;Anda harus memilih simbol lain fsymbols.com/signs/bullet-point
Blundell

1

Saya menemukan ini sebagai cara termudah, biarkan textView seperti di file xml dan gunakan kode java berikut. itu bekerja dengan sangat baik untuk saya.

private static final String BULLET_SYMBOL = "&#8226";

@Override
protected void onCreate(Bundle savedInstanceState) 
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_tutorial);

    TextView tv = (TextView) findViewById(R.id.yourTextView);

    tv.setText("To perform this exercise you will need the following: "
                        + System.getProperty("line.separator")//this takes you to the next Line
                        + System.getProperty("line.separator")
                        + Html.fromHtml(BULLET_SYMBOL + " Bed")
                        + System.getProperty("line.separator")
                        + Html.fromHtml(BULLET_SYMBOL + " Pillow"));
}

1

Daftar berbutir dapat dibuat dengan sederhana menggunakan tag <ul>dan <li>di sumber daya string.

JANGAN GUNAKAN setText (Html.fromHtml (string)) untuk menyetel string dalam kode! Cukup setel string secara normal dalam xml atau dengan menggunakan setText ( string ).

Misalnya:

file strings.xml

<string name="str1">
    <ul>
        <li><i>first</i> item</li>
        <li>item 2</li>
    </ul>
</string>


file layout.xml

<TextView
    android:text="@string/str1"
/>


Ini akan menghasilkan hasil sebagai berikut:

  • item pertama
  • item 2


Tag berikut didukung seperti ini (langsung disematkan di sumber daya string):

  • <a> (mendukung atribut "href")
  • <annotation>
  • <b>
  • <big>
  • <font> (mendukung atribut "height", "size", "fgcolor" dan "bicolor", sebagai bilangan bulat)
  • <i>
  • <li>
  • <marquee>
  • <small>
  • <strike>
  • <sub>
  • <sup>
  • <tt>
  • <u>

Anda tidak memerlukan<ul>
Blundell

5
Tidak bekerja. Tag html yang didukung hanya <b>, <i> dan <u>. developer.android.com/guide/topics/resources/…
Wooff

Bekerja dengan sempurna untuk saya! Satu-satunya hal yang harus saya lakukan agar semuanya berjalan adalah \ n di awal setiap baris. yaitu\n<ul><li>a</li> \n<li>b</li> \n<li>c</li></ul>
Jack T

1

Karena single line textAnda cukup menggunakan drawable:

<TextView
    android:id="@+id/txtData"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableStart="@drawable/draw_bullet_list"
    android:drawablePadding="@dimen/padding_8dp"
    android:text="Hello"
    android:textColor="@color/colorBlack" />

draw_bullet_list.xml :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorAccent" />

    <size
        android:width="12dp"
        android:height="12dp" />

</shape>

Anda dapat mengubah shape, size, colorberdasarkan pada kebutuhan Anda.


0

Dua opsi yang Anda miliki untuk melakukan daftar berpoin adalah

  • buat daftar menggunakan html (ul, ol) dan muat html ke WebView
  • Muat data ke dalam ListView dan setel drawable kiri tampilan teks Anda dalam tata letak item daftar, ke gambar yang sesuai untuk poin tersebut.

Opsi 1 adalah yang termudah.



0

Jika Anda ingin membuat daftar peluru dengan struktur editText.

Saya mendapat manfaat dari referensi ini

Anda bisa menggunakan peluru ini

           EditText  edtNoteContent = findViewById(R.id.editText_description_note);            

        edtNoteContent.addTextChangedListener(new TextWatcher(){
            @Override
            public void afterTextChanged(Editable e) {

            }
            @Override
            public void beforeTextChanged(CharSequence arg0, int arg1, int arg2, int arg3) {

            }
            @Override
            public void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter)
            {
                if (lengthAfter > lengthBefore) {
                    if (text.toString().length() == 1) {
                        text = "◎ " + text;
                        edtNoteContent.setText(text);
                        edtNoteContent.setSelection(edtNoteContent.getText().length());
                    }
                    if (text.toString().endsWith("\n")) {
                        text = text.toString().replace("\n", "\n◎ ");
                        text = text.toString().replace("◎ ◎", "◎");
                        edtNoteContent.setText(text);
                        edtNoteContent.setSelection(edtNoteContent.getText().length());
                    }
                }
            }
        });
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.