文本框组件
新建一个project
-
设置文本框内的文本内容
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>
设计视图显示:
-
设置文本框中文本内容的大小、颜色
-
文本大小设置:
android:textSize="27sp"
-
文本内容太多,可以通过设置单行文本框
android:singleLine="true"
省略后面的显示 -
文本颜色设置:
android:textColor="#FF0000"
不知道颜色代码时,可以随机设置一个颜色,然后通过点击左下角的颜色代码小框,来在下面的颜色界面中通过拖动滑动条来选择自己想要的颜色代码:
建议:类似字符串设计,在res>values>colors.xml中添加颜色,然后在布局文件中调用颜色
-
实例:实现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>
运行结果: