Android development-Android common components-TextView text box

04 Common components

4.1  TextView

• TextView ( text box ) , a control used to display text.

• The font size of the text is in sp:
• sp: scaled pixels ( enlarged pixels ) . Mainly used for font display. Text common attributes:

attribute name	effect
id	Set a component id for TextView, according to the id, we can pass in Java code The findViewById() method gets the object, and then sets the relevant properties
layout_width	Width of the component
layout_height	component height
gravity	Set the alignment direction of the content in the control, text in TextView, pictures in ImageView, etc.
text	Set the displayed text content, generally we write the string into the string.xml file, and then get the corresponding string content through @String/xxx
textColor	Set the font color, as above, referenced by the colors.xml resource
textStyle	Set the font style, three optional values: normal (no effect), bold (bold), italic (italic)
textSize	font size, the unit is usually sp
background	The background color of the control can be understood as the color that fills the entire control, which can be a picture
autoLink	Identify link type (web, email, phone ,map ,none, all)

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/Gridlayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="4"
    android:orientation="horizontal"
    android:rowCount="6">

    <TextView
        android:id="@+id/textview"
        android:layout_width="300dp"
        android:layout_height="400dp"
        android:gravity="center"    //文本中内容的对齐方向
        android:text="这是一个textView文本框"
        android:textColor="#d2364c"
        android:textStyle="italic"    //字体风格：斜体
        android:textSize="20sp"
        android:background="#ffffcc"
        android:autoLink="web"    //识别链接类型
        />

</GridLayout>

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/Gridlayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="4"
    android:orientation="horizontal"
    android:rowCount="6">

    <TextView
        android:id="@+id/textview"
        android:layout_width="300dp"
        android:layout_height="400dp"
        android:gravity="center"
        android:text="www.baidu.com"
        android:textColor="#d2364c"
        android:textStyle="italic"
        android:textSize="20sp"
        android:background="#ffffcc"
        android:autoLink="web"
        />

</GridLayout>

• • 　　Text content and color are written into resource files (beneficial to code maintenance and reuse)
  • 

    color.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="purple_200">#FFBB86FC</color>
        <color name="purple_500">#FF6200EE</color>
        <color name="purple_700">#FF3700B3</color>
        <color name="teal_200">#FF03DAC5</color>
        <color name="teal_700">#FF018786</color>
        <color name="black">#FF000000</color>
        <color name="white">#FFFFFFFF</color>
    </resources>
    

     string.xml:

    <resources>
        <string name="app_name">My Application</string>
        <string name="textview">www.baidu.com</string>
    </resources>
    

     text_view.xml:

  • <?xml version="1.0" encoding="utf-8"?>
    <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/Gridlayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:columnCount="4"
        android:orientation="horizontal"
        android:rowCount="6">
    
        <TextView
            android:id="@+id/textview"
            android:layout_width="300dp"
            android:layout_height="400dp"
            android:gravity="center"
            android:text="@string/app_name"
            android:textColor="@color/purple_200"
            android:textStyle="italic"
            android:textSize="20sp"
            android:background="#ffffcc"
            android:autoLink="web"
            />
    
    </GridLayout>
    

     

• text set border
  • 　　Implementation principle:

　　　　　　编写一个ShapeDrawable的资源文件！然后TextView将 background 设置为这个drawable 资源即可

• • 　　ShapeDrawable的资源文件
    • 　　　　<solid android:color = "xxx"> 这个是设置背景颜色的
    • 　　　　<stroke android:width = "xdp" android:color="xxx"> 这个是设置边框的粗细,以及边框颜色的
    • 　　　　<padding androidLbottom = "xdp"...> 这个是设置边距的
    • 　　　　<corners android:topLeftRadius="10px"...> 这个是设置圆角的
    • 　　　　<gradient> 这个是设置渐变色的,可选属性有:
      • startColor:起始颜色
      • endColor:结束颜色
      • centerColor:中间颜色
      • angle:方向角度,等于0时,从左到右,然后逆时针方向转,当angle = 90度时从下往上
      • type:设置渐变的类型
    • 编写矩形边框的Drawable：

 shape_bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <!-- 设置一个黑色边框 -->
    <stroke android:width="40px" 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>

text_view.xml:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/Gridlayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="4"
    android:orientation="horizontal"
    android:rowCount="6">

    <TextView
        android:id="@+id/textview"
        android:layout_width="300dp"
        android:layout_height="400dp"
        android:gravity="center"
        android:text="@string/app_name"
        android:textColor="@color/purple_200"
        android:textStyle="italic"
        android:textSize="20sp"
        android:background="@drawable/shape_bg"
        android:autoLink="web"
        />

</GridLayout>

 

• • • • 　　　　　　编写圆角矩形边框的Drawable

 shape_bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 设置透明背景色 -->
    <solid android:color="#87CEEB" />
    <!-- 设置一个黑色边框 -->
    <stroke
        android:width="40px"
        android:color="#000000" />
    <!-- 设置四个圆角的半径 -->
    <corners
        android:bottomLeftRadius="50px"
        android:bottomRightRadius="50px"
        android:topLeftRadius="50px"
        android:topRightRadius="50px" />
    <!-- 设置一下边距,让空间大一点 -->
    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />
</shape>

 

 text_view.xml同上。

• 带图片(drawableXxx)的TextView

属性名	作用
android:drawableLeft	文本左边设置图片
android:drawableRight	文本右边设置图片
android:drawableBottom	文本下边设置图片
android:drawableTop	文本上边设置图片

• • 　　应用场景

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/Gridlayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:columnCount="4"
    android:orientation="horizontal"
    android:background="#fcfcfc">

    <TextView
        android:id="@+id/textview1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnWeight="1"
        android:gravity="center"
        android:text="微信"
        android:textSize="25sp"
        android:drawableTop="@mipmap/weixin"
        />
    <TextView
        android:id="@+id/textview2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnWeight="1"
        android:gravity="center"
        android:text="通讯录"
        android:textSize="25sp"
        android:drawableTop="@mipmap/tongxunlu"
        />
    <TextView
        android:id="@+id/textview3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnWeight="1"
        android:gravity="center"
        android:text="发现"
        android:textSize="25sp"
        android:drawableTop="@mipmap/faxian"
        />
    <TextView
        android:id="@+id/textview4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnWeight="1"
        android:gravity="center"
        android:text="我"
        android:textSize="25sp"
        android:textColor="#00CC00"
        android:drawableTop="@mipmap/wode"

        />

</GridLayout>