文本框组件

文本框组件

新建一个project

1. 设置文本框内的文本内容

   Android推荐使用字符串资源，而不是直接写死：
   android:text="Hello World!"

   字符串资源位置：res>values>strings.xml
   默认自动生成的代码如下：

   <resources>
       <string name="app_name">Consistent</string>
   </resources>
   
   

   可以向里面添加字符串资源如<string name="demo1">奋斗</string>：

   <resources>
       <string name="app_name">Consistent</string>
   
       <string name="demo1">奋斗</string>
   
   </resources>
   
   

   设置好之后可以在布局文件中引用刚设置好的字符串资源：

   <?xml version="1.0" encoding="utf-8"?>
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:id="@+id/activity_main"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:paddingBottom="@dimen/activity_vertical_margin"
       android:paddingLeft="@dimen/activity_horizontal_margin"
       android:paddingRight="@dimen/activity_horizontal_margin"
       android:paddingTop="@dimen/activity_vertical_margin"
       tools:context="com.example.hahaha.consistent.MainActivity">
   
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           
           android:text="@string/demo1"  # 引用上面设置的“奋斗”字符串资源
           />
   </RelativeLayout>
   
   

   设计视图显示：
   

2. 设置文本框中文本内容的大小、颜色

• 文本大小设置：android:textSize="27sp"

• 文本内容太多，可以通过设置单行文本框android:singleLine="true"省略后面的显示

• 

• 文本颜色设置：android:textColor="#FF0000"

  不知道颜色代码时，可以随机设置一个颜色，然后通过点击左下角的颜色代码小框，来在下面的颜色界面中通过拖动滑动条来选择自己想要的颜色代码：

  
  建议：类似字符串设计，在res>values>colors.xml中添加颜色，然后在布局文件中调用颜色

3. 实例：实现QQ手机聊天列表页面

   在project中新建一个module：

   
   将聊天框背景提前放如res>drawable中，
   res>layout>activity_main.xml

   <?xml version="1.0" encoding="utf-8"?>
   <GridLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:id="@+id/activity_main"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:paddingBottom="@dimen/activity_vertical_margin"
       android:paddingLeft="@dimen/activity_horizontal_margin"
       android:paddingRight="@dimen/activity_horizontal_margin"
       android:paddingTop="@dimen/activity_vertical_margin"
   
       android:background="@mipmap/chatbg" # 聊天背景
   
       tools:context="com.example.qqlist.MainActivity">
   
   	# 第一个文本框
       <TextView
           android:id="@+id/text1"
           android:text="嗨喽！早上好！"
           android:background="@drawable/chat1"
           android:textColor="#FFFFFF"
           android:textSize="18sp"
           android:layout_gravity="end"
           android:layout_columnSpan="4"
           android:layout_row="0"
           android:layout_column="1"
           android:layout_marginRight="5dp"
           android:layout_marginBottom="20dp"
       />
       # 第一个头像
       <ImageView
           android:id="@+id/imageview1"
           android:src="@mipmap/t1"
           android:layout_row="0"
           android:layout_column="5"
           />
   
   	# 第2个头像
       <ImageView
           android:id="@+id/imageview2"
           android:src="@mipmap/t2"
           android:layout_row="1"
           android:layout_column="0"
           />
        # 第2个文本框
       <TextView
           android:id="@+id/text2"
           android:text="你好呀！我们一块去上课吧！"
           android:textColor="#FFFFFF"
           android:textSize="18sp"
           android:background="@drawable/chat2"
           android:layout_row="1"
           android:layout_marginBottom="20dp"
           />
   
   	# # 第3个文本框
       <TextView
           android:id="@+id/text3"
           android:text="我们在哪个教室上课？"
           android:background="@drawable/chat1"
           android:textSize="18sp"
           android:textColor="#FFFFFF"
           android:layout_gravity="end"
           android:layout_columnSpan="4"
           android:layout_row="2"
           android:layout_column="1"
           android:layout_marginRight="5dp"
           android:layout_marginBottom="20dp"
           />
          ## 第3个头像
       <ImageView
           android:id="@+id/imageview3"
           android:src="@mipmap/t1"
           android:layout_row="2"
           android:layout_column="5"
           />
   
   	# # 第4个头像
       <ImageView
           android:id="@+id/imageview4"
           android:src="@mipmap/t2"
           android:layout_row="3"
           android:layout_column="0"
           />
          # # 第4个文本框
       <TextView
           android:id="@+id/text4"
           android:text="那我们一会买完早饭一块去教室。"
           android:textColor="#FFFFFF"
           android:background="@drawable/chat2"
           android:textSize="18sp"
           android:layout_row="3"
           android:layout_marginBottom="20dp"
           />
   
   # # 第5个文本框
       <TextView
           android:id="@+id/text5"
           android:text="好的好的！一会教室见！！"
           android:background="@drawable/chat1"
           android:textSize="18sp"
           android:textColor="#FFFFFF"
           android:layout_gravity="end"
           android:layout_columnSpan="4"
           android:layout_row="4"
           android:layout_column="1"
           android:layout_marginRight="5dp"
           android:layout_marginBottom="20dp"
           />
         # # 第5个头像
       <ImageView
           android:id="@+id/imageview5"
           android:src="@mipmap/t1"
           android:layout_row="4"
           android:layout_column="5"
       />
   
   </GridLayout>
   
   

   运行结果：