Android UI编程（View、ViewGroup类、按钮、TextView、EditText）

1、View和ViewGroup类

Android中所有的UI元素都是使用View和ViewGroup类的对象建立的。

View：将一些信息绘制在屏幕上可以与用户产生交互

Viewgroup：包含多个View和Viewgroup的容器，用来定义UI布局

2、按钮

（1）方式一：

配置：

 <Button 
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

在类中调用Button并为之设置属性：

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button button =(Button)findViewById(R.id.btn);
        button.setText("取消");
        Log.v("info", "onCreate");
    }

（2）方式二：

配置文件中设置：

    <Button 
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:text="确定" />

在类中不再进行设置：

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button button =(Button)findViewById(R.id.btn);
        Log.v("info", "onCreate");
    }

这两种方式实现的效果是相同的，但是，第二种方式能够实现解耦的功能。

（3）按钮实现流程：

3、文本框（TextView）

（1）属性：

自动检测：

android：auto Text

setKeyListener（KeyListener）

文本信息下部显示内容：

drawableButtom

setCompoundDrawablesWithIntrinsicBounds

是否可编辑：

editable

字体设置：

fontFamily

文本框为空时显示的提示：

hint

对齐方式：

gravity

输入法：

inputMethod

文本的格式：

inputType

多少行内容：

lines

设置文本：

text

外观：

textAppearance

颜色：

textColor

大小：

textSize

返回行数：

getLine

（2）布局代码：

<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:orientation="vertical"
    tools:context=".ImageWidgetActivity" >
    <!-- 第一个内嵌布局为线性布局，控件横向摆放 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        <!-- 第一个内嵌布局中的第一个控件为TextView，用于显示文本信息 -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:text="图片" 
            android:textColor="#ff00ff"/>    
        <!-- 第一个内嵌布局中的第二个控件为ImageView，用于显示图片 -->
        <ImageView
            android:id="@+id/iv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>
    <!-- 第二个内嵌布局为线性布局，控件横向摆放 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
    <!-- 第二个内嵌布局中的第一个控件为TextView，用于显示文本信息 -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:text="图片按钮" 
            android:textColor="#ff00aa" />
    <!-- 第二个内嵌布局中的第二个控件为ImageView，用于显示图片按钮 -->
        <ImageButton
            android:id="@+id/ib"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right" />
    </LinearLayout>
    
     <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView   
        android:layout_width="200dp"
        android:layout_height="40dp"
        android:background="#000000"
        android:textColor="#ff00ff"
        android:text="我是一个文本框！！"
        />

    </LinearLayout>
    
    
    
    
    <!--最外面的线性布局内嵌控件为TextView，用于显示文本信息 -->
    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    
</LinearLayout>

 4、编辑框（EditText）

（1）常用属性：

普通文本：

text

所有字母大写：

textCapCharcters

每个单词首字母大写：

textCapWords

多行输入：

textMultiLine

（2）效果演示：

    <EditText
        android:id="@+id/et"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:hint="请输入用户名"
        android:textColorHint="#ff00ff"
        android:selectAllOnFocus="true"
        android:inputType="text" />

5、练习（第三周）

（1）要实现的效果：

 （2）完整代码：

<TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="用户名：" 
         android:textColor="#ff00ff"
         android:layout_marginTop="128dp"
         android:layout_marginLeft="128dp"
         />  
        
        <EditText
            android:id="@+id/et"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:hint="请输入用户名"
            android:layout_gravity="right"
            android:textColorHint="#ff00ff"
            android:selectAllOnFocus="true"
            android:inputType="text"
            android:layout_marginTop="120dp"
            android:layout_marginLeft="178dp"
            />
  
    
   
    <TextView
        android:id="@+id/tv"
        android:text="密码：" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
         android:textColor="#ff00ff"
        android:layout_marginTop="170dp"
        android:layout_marginLeft="128dp"
        />
    
      <EditText
        android:id="@+id/et"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:hint="请输入密码"
        android:layout_gravity="right"
        android:textColorHint="#ff00ff"
        android:selectAllOnFocus="true"
        android:inputType="textPassword"
        android:layout_marginTop="160dp"
        android:layout_marginLeft="178dp"
        />
    
    
    
    <Button
        android:id="@+id/bt_ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="确认" 
        android:layout_marginTop="223dp"
        android:layout_marginLeft="138dp"
        />

    <Button
        android:id="@+id/bt_clear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="223dp"
        android:layout_marginLeft="218dp"
        android:text="清除" />

（3）分析：

TextView：显示文本内容

EditText：文本框

调整显示的位置：

 android:layout_marginTop="160dp"
 android:layout_marginLeft="178dp"

设置字体颜色：

android:textColor="#ff00ff"

设置输入框文本的格式：

android:inputType="text"