web-dev-qa-db-ja.com

箇条書きリストをAndroidアプリケーションに追加するには?

質問をグーグルで検索しましたが、有効な回答が提供されていません。テキストビューに箇条書きリストを追加するにはどうすればよいですか。

85
user590849

Ul/li/olはサポートされていないため、実行するのは困難です。幸いなことに、これを構文糖として使用できます。

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

&#8226;はリストの箇条書きのhtmlエンティティです。その他の選択肢はこちら http://www.elizabethcastro.com/html/extras/entities.html

サポートされているタグの詳細については、Mark Murphy(@CommonsWare)が提供しています http://commonsware.com/blog/Android/2010/05/26/html-tags-supported-by-textview.html Html.fromHtmlでロードします

((TextView)findViewById(R.id.my_text_view)).setText(Html.fromHtml(myHtmlString));
178
browep
  1. browepがHTML経由でNiceを説明しました。 htmlエンティティで提供されるソリューションは有用です。ただし、箇条書きのみが含まれます。テキストが折り返されると、インデントが正しくなくなります。

  2. Webビューを埋め込む他のソリューションを見つけました。これは一部の人にとっては適切かもしれませんが、その種のやり過ぎだと思います...(リストビューを使用する場合も同じです。)

  3. Nelsonの創造的アプローチ :Dが好きですが、テキストビューに順不同リストを追加する可能性はありません。

  4. 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));
    

ポジティブ:

  • テキストが折り返された後の正しいインデントの箇条書き。
  • TextViewの1つのインスタンスで、他のフォーマットされたテキストまたはフォーマットされていないテキストを組み合わせることができます。
  • BulletSpanコンストラクターでインデントの大きさを定義できます。

負:

  • リストのすべてのアイテムを個別の文字列リソースに保存する必要があります。だから、あなたはあなたがHTMLでできる方法を快適にあなたのリストを定義することはできません。
53
Diego Frehner

私は別の方法を見つけました。この箇条書き "•"(テキスト)をコピーして、テキストビューのテキストに貼り付けてください。 .. :)

入力中にショートカットを使用してこの箇条書きを取得できます

窓用

ALT + 7

mac用

ALT + 8

32
Ishtiaq

ここでのさまざまな答えに触発されて、これを簡単な1つのライナーにするためにUtilityクラスを作成しました。これにより、折り返されたテキストのインデント付きの箇条書きリストが作成されます。文字列、文字列リソース、文字列配列リソースを組み合わせるためのメソッドがあります。

TextViewに渡すことができるCharSequenceを作成します。例えば:

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

役に立てば幸いです。楽しい。

注:これには、システム標準の箇条書き、テキストと同じ色の小さな円が使用されます。カスタムの箇条書きが必要な場合は、 BulletSpan をサブクラス化し、そのdrawLeadingMargin()をオーバーライドして、必要な箇条書きを描画することを検討してください。 BulletSpan source を見て、どのように機能するかを確認してください。

_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;
}

}
_
21
cottonBallPaws

これがはるかに簡単です。

<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>
6
Amit Tumkur

複合ドロウアブルでシンプルなTextViewを使用します。例えば

<TextView     
    Android:text="Sample text"
    Android:drawableLeft="@drawable/bulletimage" >
</TextView>
4
Nouman Hanif

私が使用したオプションは、スタイルを使用して描画可能な弾丸を設定することでした。

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

使用法:

<TextView Android:id="@+id/tx_hdr" 
Android:text="Item 1" style="@style/Text.Bullet" />
4
Nelson Ramirez

リストを1つのテキストビューに正確に追加するのではなく、別のソリューションがありますが、目標は同じだと思います。 XMLのみを必要とするTableLayoutを使用しており、小さな順序付きリストまたは順序なしリストの場合は非常に簡単です。以下に、Javaのコード行ではなく、これに使用したサンプルコードを示します。

ポジティブ:

  • あなたはテーブルの行に好きなものを置くことができ、テキストビューである必要はありません
  • あなたはそれを使って箇条書きと番号付きリストなどを作成することができます
  • paddingまたはlayout_weightを使用してインデントを定義できます

負:

  • 非常に長いリストの場合は退屈です(正規表現でcraftなテキストエディターを使用しない限り)
  • すべてのリストアイテムは個別の文字列リソースとして保存されます

        <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>
    

そしてスタイル:

<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>
3
dorsz

完全にやり過ぎて、カスタムテキストビューを作成しました。

次のように使用します。

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

そしてコード:

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);
    }

}
2
Blundell

以下は、各項目の前にヘッダーとタブがある箇条書きリストです。

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
Maksim Dmitriev

これが最も簡単な方法であることがわかり、xmlViewにあるtextViewをそのままにして、次のJavaコードを使用します。

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

箇条書きリストは、<ul>および<li>文字列リソース内のタグ。

使用しないでくださいsetText(Html.fromHtml(string))で文字列をコードに設定します!通常、xmlで文字列を設定するか、setText(string)を使用します。

例えば:

strings.xmlファイル

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


layout.xmlファイル

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


次の結果が生成されます。

  • 最初 項目
  • アイテム2


次のようなタグがサポートされています(文字列リソースに直接埋め込まれています):

  • <a>(属性「href」をサポート)
  • <注釈>
  • <b>
  • <ビッグ>
  • <font>(属性として「height」、「size」、「fgcolor」、「bicolor」の整数をサポート)
  • <i>
  • <li>
  • <マーキー>
  • <小>
  • <ストライク>
  • <サブ>
  • <sup>
  • <tt>
  • <u>
0
Abhishek

箇条書きリストを作成するための2つのオプションは次のとおりです。

  • html(ul、ol)を使用してリストを作成し、htmlをWebViewにロードします
  • データをListViewにロードし、リストアイテムレイアウトのテキストビューの左のドロアブルを、箇条書きに適した画像に設定します。

オプション1が最も簡単です。

0
Robby Pond

すぐに使用できるKotlin拡張機能

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

使用法:

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

欠落しているHTMLタグをサポートする別の方法は、 here のように適切に置き換えることです。

0