软件也要拼脸蛋——UI 开发的点点滴滴

1.如何编写程序界面

Android Studio 和 Eclipse

使用拖放控件的方式来编写布局，并能在视图上直接修改控件的属性

2.常用控件的使用方法

Android 提供了大量的 UI 控件，合理地使用这些控件就可以非常轻松地编写出相当不错的界面

2.1TextView

Android 中所有的控件都具有这两个属性

android:layout_width 和 android:layout_height 指定了控件的宽度和高度

可选值有 3 种：match_parent、fill_parent 和 wrap_content

match_parent 表示让当前 控件的大小和父布局的大小一样

wrap_content 表示 让当前控件的大小能够刚好包含住里面的内容

android:text 指定 TextView 中显示的文本内容

android:gravity指定文字的对齐方式    可选值有 top、bottom、left、right、 center 等

可以用“|”来同时指定多个值，这里我们指定的 center，效果等同于 center_vertical|center_horizontal，表示文字在垂直和水平方向都居中对齐

android:textSize 属性可以指定文字的大小

android:textColor 属性可以指 定文字的颜色

2.2Button

程序用于和用户进行交互的一个重要控件

id    layout_width    layout_heigth    text

textAllCaps="false" 大小写

Button button = (Button) findViewById(R.id.button); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // 在此处添加逻辑 } })

2.3EditText

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

android:id="@+id/edit_text" android:layout_width="match_parent" android:layout_height="wrap_content"基础设置

android:hint="Type something here“   提示内容

android:maxLines=”2“   解决输入内容过长问题   表示两行

通过 findViewById()方法得到 EditText的实例，然后在按钮的点击事件里调用 EditText 的 getText()方法获取到输入的内容，再调用 toString()方法转换成字符串，最后还是老方法， 使用 Toast 将输入的内容显示出来

2.4ImageView

ImageView 是用于在界面上展示图片的一个控件

图片通常都是放在以“drawable”开头的目录下

由于这个目录没有指定具体的分辨率，所以一 般不使用它来放置图片。这里我们在 res 目录下新建一个 drawable-xhdpi 目录

src    指定图片

2.5ProgressBar

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

android:visibility    invisible 表示控件不可见， 但是它仍然占据着原来的位置和大小，可以理解成控件变成透明状态了。gone 则表示控件不仅 不可见，而且不再占用任何屏幕空间

可以通过代码来设置控件的可见性，使用的是 setVisibility()方法，可以传入 View.VISIBLE、View.INVISIBLE 和 View.GONE

style 属性可 以将它指定成水平进度条

通过 android:max 属性给进度条设置一个最大值，然后 在代码中动态地更改进度条的进度

2.6AlertDialog

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

通过 AlertDialog.Builder 创建一个 AlertDialog 的实例，然后可以为这个对话框设置标题、 内容、可否用 Back 键关闭对话框等属性，接下来调用 setPositiveButton()方法为对话框设置 确定按钮的点击事件，调用 setNegativeButton()方法设置取消按钮的点击事件，最后调用 show()方法将对话框显示出来

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

dialog.setTitle    dialog.setMessage   dialog.setCancelable   dialog.setPositiveButton

2.7ProgressDialog

ProgressDialog 和 AlertDialog 有点类似不同的是，ProgressDialog 会在对话框中显示一个进度条

ProgressDialog progressDialog = new ProgressDialog (MainActivity.this); progressDialog.setTitle("This is ProgressDialog"); progressDialog.setMessage("Loading..."); progressDialog.setCancelable(true); progressDialog.show();

构建出一个 ProgressDialog 对象，然后同样可以设置标题、内容、 可否取消等属性，最后也是通过调用 show()方法

在 setCancelable()中传入了 false，表示 ProgressDialog 是不能通过 Back 键 取消掉的

3详解4种基本布局

布局是一种可用于放置很多控件的 容器，它可以按照一定的规律调整内部控件的位置

3.1线性布局

LinearLayout 又称作线性布局    布局会将它所包含的控件在线性方向上依次排列

android:orientation       vertical在垂直方向排列     horizontal在水平方向上排列

排列方向是 horizontal  宽度不能 指定为 match_parent

排列方向是 vertical   高度不能指定为 match_parent

top   center_vertical    bottom

android:layout_weight 使用比例的方式来指定控件的大小，它在手机屏幕的适配性方面可以起到非常重要的作用

 android:layout_weight 属性，此时控件的宽度就 不应该再由 android:layout_width 来决定

dp 是 Android 中用于指定控件大小、间距等属性的单位

android:layout_weight 属性的值指定为 1，这表示 EditText 和 Button 将在水平方向平分宽度

（原理： 系统会先把 LinearLayout 下所有控件指定的 layout_weight 值相加，得到一个总值， 然后每个控件所占大小的比例就是用该控件的 layout_weight 值除以刚才算出的总值 ）

3.2相对布局

RelativeLayout 又称作相对布局           通过相对定位的方式让控件出现在布局的任何位 置

android:layout_alignParentLeft、左边

android:layout_alignParentTop、上边

android:layout_alignParentRight、右边

android:layout_ alignParentBottom、下面

android:layout_centerInParent    中间

android:layout_above  控件位于另一个控件的上方

android: layout_below  控件位于另一个控件的下方

android:layout_toLeftOf   控件位于另一个控件的左侧

android:layout_toRightOf   控件位于另一个控件 的右侧

3.3帧布局

FrameLayout 又称作帧布局

这种布局没有方便的定位方式，所有的控件都会默认摆放在布局的左上角

layout_gravity 属性来指定控件在布局中的 对齐方式，

3.4百分比布局

只有 LinearLayout 支持使用 layout_weight 属性来实现按比例指定控件大小的功能，其他两种布局都不支持

直接指 定控件在布局中所占的百分比

layout_gravity     上|下|左|右

layout_widthPercent   宽度指定百分之

layout_heightPercent  的高度指定百分之

4.创建自定义控件

所有控件都是直接或间接继承自 View 的    布局都是直接 或间接继承自 ViewGroup

ViewGroup 则是一种特殊的 View，它可以包含很多子 View 和子 ViewGroup，是一个用于放置控件和布局的容器

4.1引入布局

android: background 用于为布局或控件指定一个背景    可以使用颜色或图片来进行填充

android:layout_margin  指定控件在上下左右方向上偏移的距离

也可以使用 android:layout_marginLeft 或 android:layout_marginTop 等属性来单独指定控件在某个方向上偏移的距

include 语句将标题栏布局引入进来离

getSupportActionBar()方法来获得 ActionBar 的实例，然后再调用 ActionBar 的 hide()方法将标题栏隐藏起来

4.2创建自定义控件

public class TitleLayout extends LinearLayout { public TitleLayout(Context context, AttributeSet attrs) { super(context, attrs); LayoutInflater.from(context).inflate(R.layout.title, this); } }

LayoutInflater 的 from()方法可以构建出一个 LayoutInflater 对 象，然后调用 inflate()方法就可以动态加载一个布局文件，inflate()方法id，布局

添加自定义控件和添加普通控件指明控件的完整类名，包名在这里是不可以省略的

是通过findViewById()方法得到按钮的实例，然后分别调用setOnClickListener() 方法给两个按钮注册了点击事件

5.最常用的控件——ListView

5.1ListView的简单用法

ListView 指定一个 id，然后将宽度和高度 都设置为 match_parent，这样 ListView 也就占满了整个布局的空间

ListView 是用于展示大量数据的

ArrayAdapter 有多个构造函数的重载

提供的数据都是字符串，因此将 ArrayAdapter 的泛型指定为 String，然后在 ArrayAdapter 的构造函数中依次传入当前上下文、 ListView 子项布局的 id，以及要适配的数据

android.R.layout.simple_ list_item_1 作为 ListView 子项布局的 id，这是一个 Android 内置的布局文件，里面只有一个 TextView，可用于简单地显示一段文本

5.2定制ListView的界面

新建类，创建参数生成方法

定义ImageView 用于显示水果的图片，又定义了一个 TextView 用于显示水果的名称，并让 TextView 在垂直方向上居中显示

创建一个自定义的适配器将泛型指定为 Fruit 类 

完成适配器代码

main中  添加了一个 initFruits()方法，用于初始化所有的水果数据

Fruit 类 的构造函数中将水果的名字和对应的图片 id 传入，然后把创建好的对象添加到水果列表中

onCreate()方法中创建了 FruitAdapter 对象，并将 FruitAdapter 作为适配器传递给 ListView

5.3提升ListView的运行效率

getView()方法中还有一个 convertView 参数，这个参数用于将之前加 载好的布局进行缓存，以便之后可以进行重用

在 getView()方法中进行了判断，如果 convertView 为 null，则使用 LayoutInflater 去加载布局，如果不为 null 则直接对 convertView 进行重用。这样就大大提 高了 ListView 的运行效率

每次在 getView()方法中还是会调用 View 的 findViewById()方法来获取一次控件的实例

借助一个 ViewHolder 来对这部分性能进行优化

5.4ListView的点击事件

使用 setOnItemClickListener()方法为 ListView 注册了一个监听器，当 用户点击了 ListView 中的任何一个子项时，就会回调 onItemClick()方法。在这个方法中可以 通过 position 参数判断出用户点击的是哪一个子项，然后获取到相应的水果，并通过 Toast 将 水果的名字显示出来

6.更强大的滚动控件——RecyclerView

ListView需要一些技巧来提升它的运行效率

使用 RecyclerView 这个控件，首先需要在项目的 build.gradle 中添加相应的依赖库

定义了一个内部类 ViewHolder，ViewHolder 要继承自 RecyclerView.ViewHolder

ViewHolder 的构造函数中要传入一个 View 参数，这个参数通常就是 RecyclerView 子项的最外

层布局，那么我们就可以通过 findViewById()方法来获取到布局中的 ImageView 和 TextView

FruitAdapter 中也有一个构造函数，这个方法用于把要展示的数据源传进来， 并赋值给一个全局变量 mFruitList

重写 onCreateViewHolder()、onBindViewHolder()和 getItemCount()

onCreateViewHolder()方法是用于创建 ViewHolder 实例  将 fruit_item 布局加载 进来，然后创建一个 ViewHolder 实例    把加载出来的布局传入到构造函数当中，最后将 ViewHolder 的实例返回

onBindViewHolder()方法是用于对 RecyclerView 子项的数据进行赋值 的，通过 position 参数得到当前项的 Fruit 实例，然后再将数据设置到 ViewHolder 的 ImageView 和 TextView 当中

getItemCount()它用于告诉 RecyclerView 一共有多少子项

initFruits()    初始化所有的水果数据    LinearLayoutManager 是线性布局

onCreate()获取到 RecyclerView 的实例

创建了一个 LinearLayoutManager 设置到 RecyclerView 当中

创建了 FruitAdapter 的实例，并将水果数据传入到 FruitAdapter 的构造函数中， 最后调用 RecyclerView 的 setAdapter()方法来完成适配器设置

6.2实现横向滚动和瀑布流布局

横向滚动    该把 fruit_item 里的元素改成垂直排列

调用 LinearLayoutManager 的 setOrientation()方法来 设置布局的排列方向，默认是纵向排列的，我们传入 LinearLayoutManager.HORIZONTAL 表示 让布局横行排列

GridLayoutManager 和 StaggeredGridLayoutManager 这两种内置的布局排列方式

GridLayoutManager 可以用于实现网格 布局，StaggeredGridLayoutManager 可以用于实现瀑布流布局

6.3RecyclerView的点击事件

RecyclerView 也必须要能响应点击事件

修改了 ViewHolder，在 ViewHolder 中添加了 fruitView 变量来保存子项最外层 布局的实例，然后在 onCreateViewHolder()方法中注册点击事件

分别为最外层 布局和 ImageView 都注册了点击事件，RecyclerView 的强大之处也在这里，它可以轻松实现子项 中任意控件或布局的点击事件

7.编写界面的最佳实践

7.1制作Nice-Patch图片

分别为最外层 布局和 ImageView 都注册了点击事件，RecyclerView 的强大之处也在这里，它可以轻松实现子项 中任意控件或布局的点击事件

用鼠标在图片的边缘拖动就可以进行绘制了，按住 Shift 键拖动可以进行擦除

保存，重新运行

7.2编写精美的聊天界面

RecyclerView 用于显示聊天的消息内容，又放置了一个 EditText 用于输入消息，还放置了一个 Button 用于发送消息

然后定义消息的实体类

类中只有两个字段，content 表示消息的内容，type 表示消息的类型。其中消息类型 有两个值可选，TYPE_RECEIVED 表示这是一条收到的消息，TYPE_SENT 表示这是一条发出的 消息

在 initMsgs()方法中我们先初始化了几条数据用于在 RecyclerView 中显示。然后在发送按 钮的点击事件里获取了 EditText 中的内容，如果内容不为空字符串则创建出一个新的 Msg 对象， 并把它添加到 msgList 列表中去

之后又调用了适配器的 notifyItemInserted()方法，用于通 知列表有新的数据插入，这样新增的一条消息才能够在 RecyclerView 中显示。接着调用 RecyclerView 的 scrollToPosition()方法将显示的数据定位

调用 EditText 的 setText()方法将输入的内容清空