构建用户界面 Android 应用中一些常用的小部件

1. TextView 显示文本信息

<TextView
  android:id="@+id/textOne"
  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" />

id：为TextView设置一个组件id，根据id，我们可以在Java代码中通过findViewById()的方法获取到该对象，然后进行相关属性的设置，又或者使用RelativeLayout时，参考组件用的也是id！
layout_width：组件的宽度，一般写：**wrap_content**或者**match_parent(fill_parent)**，前者是控件显示的内容多大，控件就多大，而后者会填满该控件所在的父容器；当然也可以设置成特定的大小，比如我这里为了显示效果，设置成了200dp。
layout_height：组件的高度，内容同上。
gravity：设置控件中内容的对齐方向，TextView中是文字，ImageView中是图片等等。
text：设置显示的文本内容，一般我们是把字符串写到string.xml文件中，然后通过@String/xxx取得对应的字符串内容的，这里为了方便我直接就写到""里，不建议这样写！！！
textColor：设置字体颜色，同上，通过colors.xml资源来引用，别直接这样写！
textStyle：设置字体风格，三个可选值：**normal**(无效果)，**bold**(加粗)，**italic**(斜体)
textSize：字体大小，单位一般是用sp！
background：控件的背景颜色，可以理解为填充整个控件的颜色，可以是图片哦！

2. EditText 文本编辑

<EditText 
    android:id="@+id/editOne"
    android:layout_width="match_parent"   
    android:layout_height="wrap_content"   
    android:text="TypeHere"
    android:textColor="#EA5246"
    android:textStyle="bold|italic"
    android:textSize="18sp" 
    android:hint="Type"
    android:gravity="center" > 
    <requestFocus />
</EditText>

android:hint="默认提示文本"
android:textColorHint="#95A1AA"
<requestFocus />  //获取焦点
android:minLines="3"  //设置最小行的行数
android:maxLines="3"  //设置最大行的行数

android:singleLine="true" //实现单行输入不换行

android:textScaleX="1.5"    //设置字与字的水平间隔
android:textScaleY="1.5"    //设置字与字的垂直间隔
    
android:paddingTop = "5dp"  //组件内文字和组件边框的距离

3. Button 普通按钮

<Button
  android:id="@+id/btnOne"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="@drawable/ic_launcher"
  android:text="按钮"/>

4. ImageButton 图片按钮

<ImageButton
  android:id="@+id/imageButton"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:src="@drawable/ic_launcher"
  />

5. ToggleButton 开关按钮

<ToggleButton
  android:id="@+id/toggleButton"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:checked="true"  //将按钮设置为ON状态
  android:textOff="关闭声音"
  android:textOn="打开声音" />

6. RadioButton 单旋钮，选中之后不能取消

<RadioButton
  android:id="@+id/btnMan"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="男"
  android:checked="true"/>

7. RadioGroup 单选按钮组

<RadioGroup
  android:id="@+id/radioGroup"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:orientation="horizontal">
  
  <RadioButton
    android:id="@+id/btnMan"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="男"
    android:checked="true"/>
  
  <RadioButton
    android:id="@+id/btnWoman"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="女"/>
</RadioGroup>

8. CheckBox 复选框，选中后可以取消

<CheckBox
  android:id="@+id/checkBox0"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:checked="true"
  android:text="唱歌" />

9. Spinner 下拉列表

<Spinner
  android:id="@+id/spin_one"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:entries="@array/data"
  android:prompt="@string/spin_title"
  android:spinnerMode="dropdown" />

//在res/values下编写一个：myarrays.xml的文件
<string-array name="data">
  <item>帅哥</item>
  <item>美女</item>
  <item>大神</item>
</string-array>

10. ListView 显示列表，可以垂直滚动

<ListView
  android:id="@+id/list_view"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:entries="@array/data" >
</ListView>

11. ImageView 显示图像

<ImageView
  android:id="@+id/imageView1"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@drawable/ic_launcher" />

<ImageView
  android:id="@+id/imageView2"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@drawable/map" />

12. ScrollView 垂直滚动布局

<ScrollView
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:scrollbars="horizontal" >
  
  <LinearLayout
    android:layout_width="500sp"
    android:layout_height="match_parent"
    android:orientation="vertical" >
  
  <ImageView
    android:layout_width="500sp"
    android:layout_height="wrap_content"
    android:src="@drawable/map" />
  
  <ImageView
    android:layout_width="500sp"
    android:layout_height="wrap_content"
    android:src="@drawable/map" />
  
  <ImageView
    android:layout_width="500sp"
    android:layout_height="wrap_content"
    android:src="@drawable/map" />
  
  <ImageView
    android:layout_width="500sp"
    android:layout_height="wrap_content"
    android:src="@drawable/map" />
  </LinearLayout>
</ScrollView>

13. WebView 显示网页

//添加网络权限
<uses-permission android:name="android.permission.INTERNET" />
    
<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />



//在activity
public class MainActivity extends Activity {
    WebView webView;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        
        webView = (WebView) findViewById(R.id.webview);
        //加载网页链接
        webView.loadUrl("https://www.baidu.com");
    }
}

二、视图组

1. 线性布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="horizontal" >
  
  <TextView
    android:id="@+id/textOne"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:layout_weight="0"
    android:background="#000000"
    android:text="Text1"
    android:textColor="#EA5246"
    android:textSize="18sp"
    android:textStyle="bold|italic" />
  
  <TextView
    android:id="@+id/textTwo"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:background="#00aa00"
    android:text="Text2"
    android:textColor="#EA5246"
    android:textSize="18sp"
    android:textStyle="bold|italic" />
  
  <TextView
    android:id="@+id/text3"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:layout_weight="2"
    android:background="#000000"
    android:text="Text3"
    android:textColor="#EA5246"
    android:textSize="18sp"
    android:textStyle="bold|italic" />
  
  <TextView
    android:id="@+id/text4"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:layout_weight="3"
    android:background="#00aa00"
    android:text="Text4"
    android:textColor="#EA5246"
    android:textSize="18sp"
    android:textStyle="bold|italic" />

</LinearLayout>

2.表格布局

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/TableLayout1"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:stretchColumns="0" >
  
  <TableRow>
  
    <TextView
      android:id="@+id/row1_text0"
      android:padding="3dip"
      android:text="row1-text0" />
    
    <TextView
      android:id="@+id/row1_text1"
      android:padding="3dip"
      android:text="row1-text1" />
    </TableRow>
  
  
  <TableRow>
  
  <TextView
    android:id="@+id/row2_text0"
    android:padding="3dip"
    android:text="row2-text0" />
  
  <TextView
    android:id="@+id/row2_text1"
    android:padding="3dip"
    android:text="row2-text1" />
  
  <TextView
    android:id="@+id/row2_text3"
    android:padding="3dip"
    android:text="row2-text3" />
  </TableRow>
  
  <View
    android:layout_height="2dip"
    android:background="#FF909090" />
  
  <TableRow>
  
  <TextView
    android:id="@+id/row3_text0"
    android:padding="3dip"
    android:text="row3-text0" />
  
  <TextView
    android:id="@+id/row3_text1"
    android:padding="3dip"
    android:text="row3-text1" />
  </TableRow>

</TableLayout>

android:stretchColumns="0"  //设置第一列为可拉伸列,让该列填满这一行所有的剩余空间
android:collapseColumns="0,2" //隐藏第一与第三列
android:shrinkColumns="1" //设置第二个列为可收缩列

3.框架布局

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/FrameLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:foreground="@drawable/ic_launcher" >

    <TextView
        android:id="@+id/text1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#FF6143" />

   <TextView
        android:id="@+id/text2"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_gravity="bottom"
        android:background="#7BFE00" />

    <TextView
        android:id="@+id/text3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#FFFF00" />

</FrameLayout>

4.相对布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/RelativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Enter your name :"
        android:textSize="20dip" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="16dp"
        android:ems="10" >

        <requestFocus />
    </EditText>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editText1"
        android:layout_toLeftOf="@+id/button2"
        android:text="Cancel" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button1"
        android:layout_alignBottom="@+id/button1"
        android:layout_alignParentRight="true"
        android:layout_marginRight="20dp"
        android:text="Save" />

</RelativeLayout>

5.绝对布局

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="0px"
        android:layout_y="0px"
        android:text="按钮1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="200dp"
        android:layout_y="6dp"
        android:text="按钮3" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="1dp"
        android:layout_y="142dp"
        android:text="按钮2" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="199dp"
        android:layout_y="142dp"
        android:text="按钮4" />

</AbsoluteLayout>