Android Learning Road (4) UI コントロールのテキスト ボックス

このセクションで紹介する UI コントロールは次のとおりです: TextView (テキスト ボックス)、テキストを表示するために使用されるコントロールです。また、API ドキュメントを翻訳しているわけではないことを宣言し、属性を 1 つずつ差し引くことはありません。実際の開発で一般的に使用されるものです。はい、馴染みのない属性に遭遇したときに対応する API をクエリできるので便利です。もちろん、各セクションの冒頭に、このセクションに対応する API ドキュメントへのリンクが掲載されます: TextView API

さて、このセクションを始める前に、次の単位を紹介しましょう: dp (ディップ): デバイス非依存ピクセル (デバイス非依存ピクセル). デバイスが異なれば、デバイスのハードウェアに関連する表示効果も異なります。 WVGA、HVGA、QVGA、ピクセルに依存しません。px: ピクセル (ピクセル)。さまざまなデバイスでも同じ表示効果が得られます。一般に、当社の HVGA は 320x480 ピクセルを表し、より多く使用されます。pt: ポイント、長さの標準単位、1pt=1/72 インチ、印刷業界で使用され、非常にシンプルで使いやすい; sp: スケーリングされたピクセル (拡大されたピクセル)。主にテキストサイズに最適なフォント表示に使用されます。

1. 基本属性の詳細な説明:

次の単純なインターフェイスを通じて、最も基本的なプロパティのいくつかを理解してみましょう。

レイアウトコード:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:gravity="center"
    android:background="#8fffad">

    <TextView
        android:id="@+id/txtOne"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:gravity="center"
        android:text="TextView(显示框)"
        android:textColor="#EA5246"
        android:textStyle="bold|italic"
        android:background="#000000"
        android:textSize="18sp" />

</RelativeLayout>

上記の TextView には次のプロパティがあります。

• id: TextView のコンポーネント ID を設定します。ID に従って、Java コードの findViewById() メソッドを通じてオブジェクトを取得し、関連するプロパティを設定するか、RelativeLayout を使用する場合、参照コンポーネントもその ID を使用します。
• layout_width: コンポーネントの幅。通常は、wrap_contentまたはmatch_parent(fill_parent)と書きます。前者は、コントロールによって表示されるコンテンツの大きさ、コントロールのサイズ、後者は、コントロールが配置されている親コンテナを埋めます。 ; もちろん、効果を表示するために、200dp に設定するなど、特定のサイズに設定することもできます。
• layout_height: コンポーネントの高さ。内容は上記と同じです。
• 重力: コントロール内のコンテンツ、TextView のテキスト、ImageView の画像などの配置方向を設定します。
• text: 表示されるテキストの内容を設定します。通常、文字列を string.xml ファイルに書き込み、@String/xxx を通じて対応する文字列の内容を取得します。便宜上、ここでは "" に直接書き込みますが、これはお勧めしませんこのように書いてください！！！
• textColor: フォントの色を設定します。上記と同様、colors.xml リソースによって参照されます。このように直接記述しないでください。
• textStyle: フォント スタイルを設定します。オプションの 3 つの値: normal (効果なし)、bold (太字)、italic (斜体)
• textSize: フォント サイズ。単位は通常 sp!
• 背景: コントロールの背景色。コントロール全体を埋める色として理解でき、画像にすることもできます。

2. 実際の開発例

2.1 影付きの TextView

いくつかの属性が関係します。

• android:shadowColor: 影の色を設定します。shadowRadius と一緒に使用する必要があります。
• android:shadowRadius: 影のぼやけ具合を設定します 0.1に設定するとフォントの色になります 3.0を使用することをお勧めします
• android:shadowDx: 水平方向の影のオフセットを設定します。これは、水平方向で影が始まる横座標の位置です。
• android:shadowDy: 垂直方向の影のオフセットを設定します。これは、垂直方向で影が始まる垂直座標位置です。

レンダリング:

実装コード:

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:shadowColor="#F9F900"
        android:shadowDx="10.0"
        android:shadowDy="10.0"
        android:shadowRadius="3.0"
        android:text="带阴影的TextView"
        android:textColor="#4A4AFF"
        android:textSize="30sp" />

2.2 境界線付きの TextView:

TextViewの枠線の背景を設定したい場合は、通常の四角形枠線または角丸枠線を選択してください！以下が役立つかもしれません! さらに、TextView は Button などの他の多くのコントロールの親クラスであり、そのような境界線を設定することもできます。実現原理は非常にシンプルで、ShapeDrawable リソース ファイルを自分で書くだけです。次に、TextView が blackgroung をこのドローアブル リソースとして設定します。

ShapeDrawable リソース ファイルのいくつかのノードと属性について簡単に説明します。

• これは背景色を設定するためのものです
• 枠線の太さと枠線の色を設定します。
• <padding androidLbottom = “xdp”…> これはマージンを設定します。
• <corners android:topLeftRadius="10px"...> これは丸い角を設定します。
• これは、グラデーション カラーを設定するためのものです。オプションの属性は次のとおりです。 startColor: 開始カラー endColor: 終了カラー centerColor: 中間の色 angle: 方向角度、0 に等しい場合、左から右へ、次に反時計回りに回転、角度 = 90 度下から上のタイプ: グラデーションのタイプを設定します。

効果図を実現します。

コード：

ステップ 1: 長方形の境界線の Drawable を作成します。

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

    <!-- 设置一个黑色边框 -->
    <stroke android:width="2px" android:color="#000000"/>
    <!-- 渐变 -->
    <gradient
        android:angle="270"
        android:endColor="#C0C0C0"
        android:startColor="#FCD209" />
    <!-- 设置一下边距,让空间大一点 -->
    <padding
        android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp"/>

</shape> 

ステップ 2: 角丸長方形の境界線の Drawable を作成します。

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

    <!-- 设置透明背景色 -->
    <solid android:color="#87CEEB" />

    <!-- 设置一个黑色边框 -->
    <stroke
        android:width="2px"
        android:color="#000000" />
    <!-- 设置四个圆角的半径 -->
    <corners
        android:bottomLeftRadius="10px"
        android:bottomRightRadius="10px"
        android:topLeftRadius="10px"
        android:topRightRadius="10px" />
    <!-- 设置一下边距,让空间大一点 -->
    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />
        
</shape>

ステップ 3: TextView の blackground プロパティを上記の 2 つの Drawable に設定します。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/txtOne"
        android:layout_width="200dp"
        android:layout_height="64dp"
        android:textSize="18sp"
        android:gravity="center"
        android:background="@drawable/txt_rectborder"
        android:text="矩形边框的TextView" />

    <TextView
        android:id="@+id/txtTwo"
        android:layout_width="200dp"
        android:layout_height="64dp"
        android:layout_marginTop="10dp"
        android:textSize="18sp"
        android:gravity="center"
        android:background="@drawable/txt_radiuborder"
        android:text="圆角边框的TextView" />


</LinearLayout>

2.3 画像付き TextView (drawableXxx):

実際の開発では、次の要件に遭遇する可能性があります。

図に示すように、この効果を実現するには、ImageView を使用して画像を表示し、TextView を使用してテキストを表示し、それらを LinearLayout に投入して、このような小さなレイアウトを 4 つ順番に作成します。大きな LinearLayout に配置すると効果は得られますが、少し面倒になりますか? 前に述べたように、レイアウト レベルが少ないほど、パフォーマンスは向上します。drawableXxx を使用すると、上記のプロセスを省略し、ニーズを満たす 4 つの TextView を直接設定できます。

基本的な使い方:

実際に画像設定の中心となるのは、drawableXxx です。drawableTop (上)、drawableButtom (下)、drawableLeft (左)、drawableRight (右) の 4 つの方向に画像を設定できます。さらに、drawablePadding を使用して間の距離を設定することもできます。写真と文字の間隔！

効果画像：（4方向に画像を設定）

実装コード:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    tools:context="com.jay.example.test.MainActivity" >  
  
    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_centerInParent="true"  
        android:drawableTop="@drawable/show1"  
        android:drawableLeft="@drawable/show1"  
        android:drawableRight="@drawable/show1"  
        android:drawableBottom="@drawable/show1"  
        android:drawablePadding="10dp"  
        android:text="张全蛋" />  
  
</RelativeLayout> 

いくつかの問題: この方法で設定したドローアブルは、それ自体ではサイズを設定できず、XML で直接設定できないため、Java コードを変更する必要があることがわかります。

サンプルコードは次のとおりです。

package com.jay.example.test;  
  
import android.app.Activity;  
import android.graphics.drawable.Drawable;  
import android.os.Bundle;  
import android.widget.TextView;  
  
public class MainActivity extends Activity {  
    private TextView txtZQD;  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        txtZQD = (TextView) findViewById(R.id.txtZQD);  
        Drawable[] drawable = txtZQD.getCompoundDrawables();  
        // 数组下表0~3,依次是:左上右下  
        drawable[1].setBounds(100, 0, 200, 200);  
        txtZQD.setCompoundDrawables(drawable[0], drawable[1], drawable[2],  
                drawable[3]);  
    }  
} 

ランニング効果図：

コード分​​析:

• ①Drawable[]drawable = txtZQD.getCompoundDrawables( ); 画像リソースを4方向から取得し、配列要素は左上と右下の画像になります。
• ②drawable[1].setBounds(100, 0, 200, 200); 次に、リソースを取得した後、setBounds を呼び出して左上と右下の座標点を設定します。テキストの左端から 100dp 200dp までの幅は、テキストの上の 0dp から 200dp 伸ばします。
• ③txtZQD.setCompoundDrawables(drawable[0],drawable[1],drawable[2],drawable[3]); TextView の描画可能な配列をリセットします!どの画像も null に置き換えることはできません! PS:さらに、次からもわかります。上記 Java コードで setCompoundDrawables を直接呼び出して、TextView の画像を設定できます。

2.4 autoLink 属性を使用してリンク タイプを識別する

テキスト内に URL、電子メール、電話番号、地図がある場合、autoLink 属性を設定できます。テキストの対応する部分をクリックすると、数字の文字列などのデフォルトの APP にジャンプできます。をクリックし、ダイヤル インターフェイスにジャンプします。

レンダリングを見てください。

all はすべてが含まれていて、プロトコル ヘッダーが自動的に認識されることを意味します~ Java コードで setAutoLinkMask(Linkify.ALL) を呼び出すことができます; 現時点では、プロトコル ヘッダーを記述する必要はなく、オートリンクはそれを自動的に認識します。ただし、この TextView も設定する必要があります: setMovementMethod(LinkMovementMethod.getInstance ()); そうしないと、クリックしても効果がありません。

2.5 TextView で HTML を再生する

タイトルのように、TextView には通常のテキストを表示するだけでなく、HTML に似たタグがいくつか定義されており、これらのタグを使用して TextView にさまざまなフォントの色、サイズ、フォントを表示させたり、画像やリンクなどを表示したりすることもできます。HTML でいくつかのタグを使用するだけでよく、さらに android.text.HTML クラスのサポートを使用するだけで、上記の機能を完了できます。

PS: もちろん、すべてのタグがサポートされているわけではありません。一般的に次のタグが使用されます。

• ：色とフォントを設定します。
• : フォントサイズを設定します
• : フォントサイズを小さく設定します
• : 斜体太字
• ：接続URL
• ：写真

setText を直接設定しても意味がありません。Html.fromHtml() メソッドを呼び出して文字列を CharSequence インターフェイスに変換してから設定する必要があります。それに応じて設定する必要がある場合は、TextView に設定する必要があります。次のメソッドを呼び出します: Java setMovementMethod (LinkMovementMethod.getInstance())

それでは、コードを書いて試してみます。

1) テキストとハイパーリンクのタグをテストする

package jay.com.example.textviewdemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.Html;
import android.text.method.LinkMovementMethod;
import android.text.util.Linkify;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TextView t1 = (TextView)findViewById(R.id.txtOne);
        String s1 = "<font color='blue'><b>百度一下，你就知道~：</b></font><br>";
        s1 += "<a href = 'http://www.baidu.com'>百度</a>";
        t1.setText(Html.fromHtml(s1));
        t1.setMovementMethod(LinkMovementMethod.getInstance());
    }
}

ランニング効果図：

さぁ、テストも終わりましたよ～

2) src タグをテストし、画像を挿入します。

ランニング効果図を見てください。

次に、実装コードを見てみましょう。実装コードは少し複雑で、リフレクションが使用されています (ちなみに、ドローアブル ディレクトリにアイコン画像を配置することを忘れないでください)。

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TextView t1 = (TextView) findViewById(R.id.txtOne);
        String s1 = "图片：<img src = 'icon'/><br>";
        t1.setText(Html.fromHtml(s1, new Html.ImageGetter() {
            @Override
            public Drawable getDrawable(String source) {
                Drawable draw = null;
                try {
                    Field field = R.drawable.class.getField(source);
                    int resourceId = Integer.parseInt(field.get(null).toString());
                    draw = getResources().getDrawable(resourceId);
                    draw.setBounds(0, 0, draw.getIntrinsicWidth(), draw.getIntrinsicHeight());
                } catch (Exception e) {
                    e.printStackTrace();
                }
                return draw;
            }
        }, null));
    }
}

画像にハイパーリンクを追加したり、画像をクリックしてこのようにジャンプしたりすることもできます。

2.6 SpannableString&SpannableStringBuilder カスタム テキスト

TextView のスタイルをカスタマイズできる上記の HTML に加えて、SpannableString と SpannableStringBuilder を使用して行うこともできます。この 2 つの違い: 前者は不変テキスト用、後者は可変テキスト用です。ここでは説明のみします。前者と後者 興味のある方はぜひ本文をチェックしてみてください！

SpannableString が使用できる API は次のとおりです。

• BackgroundColorSpan の背景色
• ClickableSpan テキストはクリック可能であり、クリック イベントがあります。
• ForegroundColorSpan テキストの色 (前景色)
• MaskFilterSpan 変更エフェクト (ブラー (BlurMaskFilter)、レリーフ (EmbossMaskFilter) など)
• MetricAffectingSpan 親クラス、通常は使用されません
• RasterizerSpan ラスター効果
• 取り消し線スパン取り消し線 (ダッシュ内)
• SuggestionSpan はプレースホルダーと同等です
• 下線スパン下線
• AbsoluteSizeSpan 絶対サイズ (テキストフォント)
• DynamicDrawableSpan は、テキストのベースラインまたは下部の配置に基づいて画像を設定します。
• 画像スパン画像
• RelativeSizeSpan 相対サイズ (テキスト フォント)
• ReplacementSpan 親クラス、通常は使用されません
• ScaleXSpan は、X 軸に基づいてスケールします。
• StyleSpan フォント スタイル: 太字、斜体など。
• SubscriptSpan 添え字 (数式が使用されます)
• SuperscriptSpan 上付き文字 (数式が使用されます)
• TextAppearanceSpan テキストの外観 (フォント、サイズ、スタイル、色を含む)
• TypefaceSpan テキスト フォント
• URLスパンテキストハイパーリンク

まあ、かなりたくさんありますが、これが最も単純な例です。他のパラメータは Baidu と Google から呼び出すことができます~ 1) 最も単純な例: ランニング効果図:

実装コード:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TextView t1 = (TextView) findViewById(R.id.txtOne);
        TextView t2 = (TextView) findViewById(R.id.txtTwo);

        SpannableString span = new SpannableString("红色打电话斜体删除线绿色下划线图片:.");
        //1.设置背景色,setSpan时需要指定的flag,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE(前后都不包括)
        span.setSpan(new ForegroundColorSpan(Color.RED), 0, 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        //2.用超链接标记文本
        span.setSpan(new URLSpan("tel:4155551212"), 2, 5, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        //3.用样式标记文本（斜体）
        span.setSpan(new StyleSpan(Typeface.BOLD_ITALIC), 5, 7, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        //4.用删除线标记文本
        span.setSpan(new StrikethroughSpan(), 7, 10, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        //5.用下划线标记文本
        span.setSpan(new UnderlineSpan(), 10, 16, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        //6.用颜色标记
        span.setSpan(new ForegroundColorSpan(Color.GREEN), 10, 13,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        //7.//获取Drawable资源
        Drawable d = getResources().getDrawable(R.drawable.icon);
        d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
        //8.创建ImageSpan,然后用ImageSpan来替换文本
        ImageSpan imgspan = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
        span.setSpan(imgspan, 18, 19, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
        t1.setText(span);
    }
}

2) クリック可能な TextView の一部を実現します。QQ Zone や WeChat Moments をプレイしたことのある友人は次のことに慣れていると思います。対応するユーザーをクリックして入力すると、ユーザー関連の情報が表示されます。

次の効果を実現する簡単な例を書いてみましょう。

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TextView t1 = (TextView) findViewById(R.id.txtOne);

        StringBuilder sb = new StringBuilder();
        for (int i = 0; i < 20; i++) {
            sb.append("好友" + i + "，");
        }

        String likeUsers = sb.substring(0, sb.lastIndexOf("，")).toString();
        t1.setMovementMethod(LinkMovementMethod.getInstance());
        t1.setText(addClickPart(likeUsers), TextView.BufferType.SPANNABLE);
    }

    //定义一个点击每个部分文字的处理方法
    private SpannableStringBuilder addClickPart(String str) {
        //赞的图标，这里没有素材，就找个笑脸代替下~
        ImageSpan imgspan = new ImageSpan(MainActivity.this, R.drawable.ic_widget_face);
        SpannableString spanStr = new SpannableString("p.");
        spanStr.setSpan(imgspan, 0, 1, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);

        //创建一个SpannableStringBuilder对象，连接多个字符串
        SpannableStringBuilder ssb = new SpannableStringBuilder(spanStr);
        ssb.append(str);
        String[] likeUsers = str.split("，");
        if (likeUsers.length > 0) {
            for (int i = 0; i < likeUsers.length; i++) {
                final String name = likeUsers[i];
                final int start = str.indexOf(name) + spanStr.length();
                ssb.setSpan(new ClickableSpan() {
                    @Override
                    public void onClick(View widget) {
                        Toast.makeText(MainActivity.this, name,
                                Toast.LENGTH_SHORT).show();
                    }

                    @Override
                    public void updateDrawState(TextPaint ds) {
                        super.updateDrawState(ds);
                        //删除下划线，设置字体颜色为蓝色
                        ds.setColor(Color.BLUE);
                        ds.setUnderlineText(false);
                    }
                },start,start + name.length(),0);
            }
        }
    return ssb.append("等" + likeUsers.length + "个人觉得很赞");
    }
}

ランニング効果図：

実際、核心は ClickableSpan の設定です。Qzone_{コメントを書いた人をいじったり、自分でコメントを書いたりすることができます。}

2.7 マーキー効果を実現するTextView

マーキーとは簡単に言うと、Webのようなものです。文字列がぐるぐるとスクロールし続けるものです。それでは導入効果図を見てみましょう、一目でわかりますよ～

効果図を実現します。

コード：

<TextView
        android:id="@+id/txtOne"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:singleLine="true"
        android:ellipsize="marquee"
        android:marqueeRepeatLimit="marquee_forever"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:text="你整天说着日了狗日了狗，但是你却没有来，呵呵呵呵呵呵呵呵呵呵~"/>

2.8 TextView の単語間隔と行間隔を設定する

通常ドキュメントを書くときと同じように、次の行または単語間のスペースを植字して設定する必要があります。Android の TextView は次のように設定することもできます。

単語の間隔:

android:textScaleX: 水平方向のフォントのスケーリングを制御します。デフォルト値は 1.0f で、 float Java
の値は setScaleX(2.0f)です。

行間: Android システムの TextView は、デフォルトで中国語を表示する場合、各行の行間を保つために比較的コンパクトになります。

android:lineSpacingExtra: 「3dp」などの行間隔を設定します android:lineSpacingMultiplier: 「1.2」などの行間隔の倍数を設定します

Java コードは setLineSpacing メソッドによって設定できます。

2.9 ワードラップ

自動行折り返しは android:singleLine によって設定され、デフォルトは false です。

自動的にラップする必要がある場合は、以下を使用できます。

android:singleLine = “false”

折り返さずに 1 行で表示したい場合は、以下を使用できます。

android:singleLine = “true”

さらに、maxLines 属性を追加するだけで、複数行を無限に表示するように設定することもできます。