Android：UI笔记

一.常用控件。

1.TextView

TextView用来在界面上显示一段文本信息。

布局文件代码：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

    <TextView

        android:id="@+id/text_view"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:gravity="center"

        android:textSize="24sp"

        android:textColor="#00ff00"

        android:text="This is TextView" />

</LinearLayout>

gravity="center"  来指定文字的对齐方式，可选值有top、bottom、left、right、center等，可以用“|”来同时指定多个值。

textSize="24sp"   用来指定字体的大小。

textColor="#00ff00"   用来指定字体的颜色。

效果图：

2.Button。

指定一个按钮控件，可以在点击的时候触发事件。

布局文件代码：

<Button

        android:id="@+id/button"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="Button" />

java代码。

public class MainActivity extends Activity {

    protected void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);

         setContentView(R.layout.layout);

         Button button = (Button) findViewById(R.id.button);

         button.setOnClickListener(new OnClickListener() {

             @Override

             public void onClick(View v) {

                 Toast.makeText(MainActivity.this, "点击了我！", Toast.LENGTH_SHORT).show();

             }

         });

    }

}

点击的时候系统触发button中的事件，然后使用函数回调机制，调用重新书写的onClick函数，输出文字“你点击了我！”.

效果图：

3.EditText>

该空间允许用户在控件里输入文字和编辑内容，并且可以在程序中对这些内容进行处理。

布局代码：

<EditText

        android:id="@+id/edit_text"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:hint="Type something here"

        android:maxLines="2"/>

hint：这里可以预先显示一段文本用来提示。

maxLines：限制EditText最大行数，这里限制最大行数为2，超过两行时，文本会向上滚动。

效果图：

4.ImageView。

ImageView用于在界面上展示图片。

布局代码：

<ImageView

        android:id="@+id/image_view"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:src="@drawable/run"/>

src="@drawable/ic_launcher "   通过@drawable/run ， 引用run图片在界面上输出。

图片放到res目录中的drawable下即可，使用的时候不要加后缀名。

可以在java代码中，得到ImageView的对象，然后使用setImageResource(R.drawable.xxx); 更换成xxx另一张图片。

效果图：

5.ProgressBar。

ProgressBar用来在界面上显示一个进度条，表示我们的程序正在加载一些数据。

布局代码：

<ProgressBar

        android:id="@+id/progress_bar"

        android:layout_width="match_parent"

        android:layout_height="wrap_content" />

可以显示一个圆形的进度条。

效果图：

所有的控件有visibility属性，可选值有三种：visible、invisible、gone。visible表示空间是可见的，这个值时默认值，不指定visible时控件都是可见的；invisible表示控件不可见，但是依然占据着原来的位置和大小；gone表示控件不可见并且不再占据认可屏幕空间。

这里定义一个Button控件，并使其被点击的时候显示或者隐藏ProgressBar控件。

java代码：

public class MainActivity extends Activity {

    protected void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);

         setContentView(R.layout.layout);

         Button button = (Button) findViewById(R.id.button);

         button.setOnClickListener(new OnClickListener() {

             @Override

             public void onClick(View v) {

                 ProgressBar progressBar = (ProgressBar) findViewById(R.id.progress_bar);

                 if(progressBar.getVisibility() == View.GONE) {

                     progressBar.setVisibility(View.VISIBLE);

                 } else {

                     progressBar.setVisibility(View.GONE);

                 }

             }

         });

    }

}

也可以使用style修改ProgressBar的样式。

布局代码：

<ProgressBar

        android:id="@+id/progress_bar"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        style="?android:attr/progressBarStyleHorizontal"

        android:max="100" />

通过style指定ProgressBar为水平进度条，max代表进度条的最大值。

通过java代码使Button每次每点击时在原有进度条加上10作为新的进度。

public class MainActivity extends Activity {

    protected void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);

         setContentView(R.layout.layout);

         Button button = (Button) findViewById(R.id.button);

         button.setOnClickListener(new OnClickListener() {

             @Override

             public void onClick(View v) {

                 ProgressBar progressBar = (ProgressBar) findViewById(R.id.progress_bar);

                 int progress = progressBar.getProgress();

                 progress = progress + 10;

                 progressBar.setProgress(progress);

             }

         });

    }

}

效果图：

6.AlertDialog。

AlertDialog可以在当前的界面弹出一个对话框，这个对话框是置顶于所有界面元素之上的，能够屏蔽掉其他控件的交互能力。

AlertDialog控件不需要使用布局代码来实现，直接在java代码中写入即可。

java代码：

public class MainActivity extends Activity {

    protected void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);

         setContentView(R.layout.layout);

         Button button = (Button) findViewById(R.id.button);

         button.setOnClickListener(new OnClickListener() {

             @Override

             public void onClick(View v) {

                 AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);

                 dialog.setTitle("This is Dialog");

                 dialog.setMessage("Something important");

                 dialog.setCancelable(false);

                 dialog.setPositiveButton("OK",new DialogInterface.OnClickListener() {

                      @Override

                      public void onClick(DialogInterface dialog, int which) {

                          // TODO Auto-generated method stub

                      }

                 });

                 dialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {

                      @Override

                      public void onClick(DialogInterface dialog, int which) {

                          // TODO Auto-generated method stub

                      }

                 });

                 dialog.show();

             }

         });

    }

}

这里使用Button控件，使其再被点击的时候出现AlertDialog控件，定义一个AlertDialog.Builder 类型的对象，参数传入当前活动的上下文，然后分别使用setTitle、setMessage、setCancelable来设置标题、信息、是否可以通过back键退出（false不可退出、true可以退出），然后设置setPositiveButton（确定）和setNegativeButton（取消），写入相应的代码即可。也可以使用setNeutralButton设置其他的内容。最后通过show() 将控件显示出来。

效果图：

7.ProgressDialog。

ProgressDialog与AlertDialog类似，不过会在对话框中显示一个进度条。

同样的不需要布局代码，直接java代码即可实现：

public class MainActivity extends Activity {

    protected void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);

         setContentView(R.layout.layout);

         Button button = (Button) findViewById(R.id.button);

         button.setOnClickListener(new OnClickListener() {

             @Override

             public void onClick(View v) {

                 ProgressDialog progressDialog = new ProgressDialog(MainActivity.this);

                 progressDialog.setTitle("This is ProgressDialog");

                 progressDialog.setMessage("Loading...");

                 progressDialog.setCancelable(true);

                 progressDialog.show();

             }

         });

    }

}

使用的方法与上述的AlertDialog类似。可以使用dismiss()方法关闭对话框。（AlertDialog也可以通过dismiss方法关闭，因为AlertDialog和ProgressDialog都是继承Dialog，而dismiss是在Dialog中的。）

效果图：

二.四种布局。

1.LinearLayout。

LinearLayout又称线性布局。

布局代码：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

    <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Button" />

    <Button

        android:id="@+id/button2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Button" />

    <Button

        android:id="@+id/button3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Button" />

</LinearLayout>

通过<LinearLayout></LinearLayout> 声明这个布局是线性布局的，同时使用 android:orientation="vertical"   指定排列方向是垂直排列。不指定的时候是水平的。

效果图：

当然，也可以指定水平排列，修改指定值为：horizontal 即可。

效果图：

对于其中的控件，可以通过指定的属性来对其对其排列。

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="horizontal" >

    <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="top"

        android:text="Button" />

    <Button

        android:id="@+id/button2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center_vertical"

        android:text="Button" />

    <Button

        android:id="@+id/button3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="bottom"

        android:text="Button" />

</LinearLayout>

可以通过设置控件的：layout_gravity 属性来控制控件的对齐方式。（上述的gravity是对文字的对齐方式设置的，这里是针对布局对控件对齐方式进行设置的）

注意：

如果使用 android:orientation="vertical" 规定布局为垂直排列使，控件所有有关垂直方向上的属性值都失去效果，只能设置水平方向上的对齐方式（可选值为：left、right、center_horizontal、fill_horizontal 等）。

如果使用 android:orientation="horizontal" 规定布局为水平排列使，控件所有有关水平方向上的属性值都失去效果，只能设置垂直方向上的对齐方式（可选值为： top、bottom、center_vertical、fill_vertical 等）。

因为orientation的优先级高于控件的对其方式，所以当orientation设置完成时，控件的的该方向上的对齐方式均无效。

Value	Description
top	Put the object at the top of its container, not changing its size.  将对象放在其容器的顶部，不改变其大小.
bottom	Put the object at the bottom of its container, not changing its size.  将对象放在其容器的底部，不改变其大小.
left	Put the object at the left edge of its container, not changing its size.  将对象放在其容器的左侧，不改变其大小.
right	Put the object at the right edge of its container, not changing its size.  将对象放在其容器的右侧，不改变其大小.
center_vertical	Place object in the vertical center of its container, not changing its size.  将对象纵向居中，不改变其大小.  垂直对齐方式：垂直方向上居中对齐。
fill_vertical	Grow the vertical size of the object if needed so it completely fills its container.  必要的时候增加对象的纵向大小，以完全充满其容器.  垂直方向填充
center_horizontal	Place object in the horizontal center of its container, not changing its size.  将对象横向居中，不改变其大小.  水平对齐方式：水平方向上居中对齐
fill_horizontal	Grow the horizontal size of the object if needed so it completely fills its container.  必要的时候增加对象的横向大小，以完全充满其容器.  水平方向填充
center	Place the object in the center of its container in both the vertical and horizontal axis, not changing its size.  将对象横纵居中，不改变其大小.
fill	Grow the horizontal and vertical size of the object if needed so it completely fills its container. This is the default.  必要的时候增加对象的横纵向大小，以完全充满其容器.
clip_vertical	Additional option that can be set to have the top and/or bottom edges of the child clipped to its container’s bounds. The clip is based on the vertical gravity: a top gravity clips the bottom edge, a bottom gravity clips the top edge, and neither clips both edges.  附加选项，用于按照容器的边来剪切对象的顶部和/或底部的内容. 剪切基于其纵向对齐设置：顶部对齐时，剪切底部；底部对齐时剪切顶部；除此之外剪切顶部和底部. 垂直方向裁剪
clip_horizontal	Additional option that can be set to have the left and/or right edges of the child clipped to its container’s bounds. The clip is based on the horizontal gravity: a left gravity clips the right edge, a right gravity clips the left edge, and neither clips both edges.  附加选项，用于按照容器的边来剪切对象的左侧和/或右侧的内容. 剪切基于其横向对齐设置：左侧对齐时，剪切右侧；右侧对齐时剪切左侧；除此之外剪切左侧和右侧. 水平方向裁剪

layout_weight 来设置控件的长度。

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="horizontal" >

    <EditText

        android:id="@+id/input"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_weight="1"

        android:hint="Type something"/>

    <Button

        android:id="@+id/button1"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_weight="1"

        android:text="Button" />

</LinearLayout>

这里将layout_width 设置为了0dp，但是这里的数值不影响控件的显示，因为此时的控件是由下面的layout_weight 控制的。

效果图：

这里是将所有控件的layout_weight 的值加起来，然后计算各自控件所占的比例，这里是先计算所有的weight值时：1+1=2，然后计算EditView的宽度为：1/2，然后计算Button的宽度：1/2，得到的各自控件的宽度。

若果将布局代码修改如下：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="horizontal" >

    <EditText

        android:id="@+id/input"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_weight="1"

        android:hint="Type something"/>

    <Button

        android:id="@+id/button1"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_weight="1"

        android:text="Button" />

    <Button

        android:id="@+id/button2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Button" />

        />

</LinearLayout>

在后面再加上一个Button控件，这时的效果图如下：

可以看到，也是按照EditView、Button、Button 放置的，但是在最右边留置了一个Button的位置，然后在剩下的屏幕空间在平均分割给EditView和第一个Button的宽度。

2.RealativeLayout。

相对布局。

相对父布局的控件布局：

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_alignParentTop="true"

        android:text="Button" />

    <Button

        android:id="@+id/button2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentRight="true"

        android:layout_alignParentTop="true"

        android:text="Button" />

        />

     <Button

        android:id="@+id/button3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerInParent="true"

        android:text="Button" />

     <Button

        android:id="@+id/button4"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_alignParentBottom="true"

        android:text="Button" />

     <Button

        android:id="@+id/button5"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentRight="true"

        android:layout_alignParentBottom="true"

        android:text="Button" />

</RelativeLayout>

效果图：

相对于控件的布局：

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerInParent="true"

        android:text="Button" />

    <Button

        android:id="@+id/button2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_above="@id/button1"

        android:layout_toLeftOf="@id/button1"

        android:text="Button" />

        />

     <Button

        android:id="@+id/button3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_above="@id/button1"

        android:layout_toRightOf="@id/button1"

        android:text="Button" />

     <Button

        android:id="@+id/button4"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@id/button1"

        android:layout_toLeftOf="@id/button1"

        android:text="Button" />

     <Button

        android:id="@+id/button5"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@id/button1"

        android:layout_toRightOf="@id/button1"

        android:text="Button" />

</RelativeLayout>

效果图：

3.FrameLayout。

所有的控件都在左上角。

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    <Button

        android:id="@+id/button"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Button" />

    <ImageView

        android:id="@+id/image"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:src="@drawable/ic_launcher"   />

</FrameLayout>

效果图：

4.TableLayout。

以表格的方式排列控件。

<?xml version="1.0" encoding="utf-8"?>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:stretchColumns="1" >

    <TableRow >

        <TextView

            android:layout_height="wrap_content"

            android:text="Account:"   />

        <EditText

            android:id="@+id/account"

            android:layout_height="wrap_content"

            android:hint="Input your account"   />

    </TableRow>

    <TableRow >

        <TextView

            android:layout_height="wrap_content"

            android:text="Password:"   />

        <EditText

            android:id="@+id/password"

            android:layout_height="wrap_content"

            android:inputType="textPassword"   />

    </TableRow>

    <TableRow >

        <Button

            android:id="@+id/login"

            android:layout_height="wrap_content"

            android:layout_span="2"

            android:text="Login"   />

    </TableRow>

</TableLayout>

<TableRow>代表表格的一行，然后里边定义了两个控件，表示两列。

最后的第三行，使用layout_span="2" 让Button控件占据两列。

最上面的stretchColumns  属性，使列表拉伸从而占满整个屏幕的宽度，这里的属性值是一，代表让第二列拉伸开来。

效果图：

三.自定义控件。

1.引入布局。

<include layout="@layout/title" />

在布局中使用include 可以将另一个布局文件加载进来。

2.自定义控件。

MainActivity.java代码：

public class MainActivity extends Activity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);

         requestWindowFeature(Window.FEATURE_NO_TITLE);

         setContentView(R.layout.activity_main);

    }

}

在主活动中，依然是加载了activity_main布局。

activity_main布局代码：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    <com.example.uicustomviews.TitleLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        ></com.example.uicustomviews.TitleLayout>

</LinearLayout>

但是在activity_main 中，引入了自定义的一个控件，TitleLayout ，这个是自定义的，需要用java代码来实现。使用这个控件的时候需要将包名和类名都写全。

TitleLayout.java代码：

package com.example.uicustomviews;

import android.app.Activity;

import android.content.Context;

import android.util.AttributeSet;

import android.view.LayoutInflater;

import android.widget.Button;

import android.widget.LinearLayout;

import android.widget.Toast;

import android.view.*;

public class TitleLayout extends LinearLayout {

    public TitleLayout(Context context, AttributeSet attrs) {

         super(context,attrs);

        LayoutInflater.from(context).inflate(R.layout.title, this);

         Button titleBack = (Button) findViewById(R.id.title_back);

         Button titleEdit = (Button) findViewById(R.id.title_edit);

         titleBack.setOnClickListener(new OnClickListener() {

             @Override

             public void onClick(View v) {

                 ((Activity) getContext()).finish();

             }

         });

         titleEdit.setOnClickListener(new OnClickListener() {

             @Override

             public void onClick(View v) {

                 Toast.makeText(getContext(), "You Click Edit !", Toast.LENGTH_SHORT).show();

             }

         });

    }

}

这里是自定义控件的代码，继承了LinearLayout类，然后使用构造函数初始化父类，使用LayoutInflater.from（）方法可以构建出一个LayoutInflater的对象（官方API： Obtains the LayoutInflater from the given context.），再调用inflate（）方法就可以动态的加载一个布局文件，inflate第一个参数是要加载布局文件的id，第二个参数是给加载好的布局再添加一个父布局。

title布局代码：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:background="@drawable/title" >

    <Button

        android:id="@+id/title_back"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:layout_margin="5dip"

        android:background="@drawable/back" />

    <TextView

        android:id="@+id/title_text"

        android:layout_width="0dip"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:layout_weight="1"

        android:gravity="center"

        android:text="Hello!"/>

    <Button

        android:id="@+id/title_edit"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:background="@drawable/edit"  />

</LinearLayout>

这里就是对title布局的一些修改，加入一些图片之类的排版。

效果图：