4.1 UI基础视图层次与LayoutParams在Android中用户界面由视图View和视图组ViewGroup组成。View是所有UI组件的基类比如Button、TextView都是View的子类。ViewGroup则是一个容器它可以包含多个View或其他的ViewGroup用于管理子视图的布局。视图树的概念一个Activity的界面就是一棵视图树根节点通常是一个ViewGroup如ConstraintLayout、LinearLayout等子节点可以是ViewGroup或View。setContentView(R.layout.activity_main)就是将布局文件解析成这棵视图树并附加到Activity的窗口上。LayoutParams布局参数每个子视图都需要告诉父容器自己应该如何被放置。LayoutParams就是用于存储这些信息的对象比如宽度、高度、边距等。在XML中我们通过android:layout_width和android:layout_height来指定常用的值有match_parent填满父容器的可用空间。wrap_content根据视图的内容自适应大小。具体数值如100dp指定固定的尺寸dp是密度无关像素保证在不同屏幕密度下物理大小一致。边距margin与内边距paddingmargin视图与外部其他视图的距离。padding视图内部内容与视图边界的距离。4.2 常用布局详解布局是ViewGroup的子类负责管理子视图的排列方式。Android提供了多种布局每种都有其适用场景。4.2.1 LinearLayout线性布局LinearLayout将其子视图按水平或垂直方向排列。它是最简单、最常用的布局之一。基本属性android:orientation方向horizontal或vertical。android:gravity控制子视图在布局中的对齐方式如center、right、bottom等。android:layout_weight权重用于按比例分配剩余空间。示例水平线性布局带权重xmlLinearLayout android:layout_widthmatch_parent android:layout_heightwrap_content android:orientationhorizontal Button android:layout_width0dp android:layout_heightwrap_content android:layout_weight1 android:text按钮1 / Button android:layout_width0dp android:layout_heightwrap_content android:layout_weight2 android:text按钮2 / Button android:layout_widthwrap_content android:layout_heightwrap_content android:text按钮3 / /LinearLayout解释按钮1和按钮2的宽度为0dp并分别设置权重1和2它们将按1:2的比例分配剩余空间总宽度减去按钮3的宽度。按钮3宽度为wrap_content占据其内容所需的空间。注意当在水平LinearLayout中使用权重时子视图的宽度应设置为0dp垂直方向同理高度为0dp否则权重可能不会按预期工作。4.2.2 RelativeLayout相对布局RelativeLayout允许子视图相对于父布局或兄弟视图进行定位。它非常灵活但嵌套过多时可能降低性能。常用属性以相对于父布局为例android:layout_alignParentTop是否与父布局顶部对齐。android:layout_alignParentBottomandroid:layout_alignParentLeftandroid:layout_alignParentRightandroid:layout_centerInParent在父布局中居中。相对于其他视图android:layout_toRightOfid/view_id位于指定视图的右侧。android:layout_toLeftOfandroid:layout_aboveandroid:layout_belowandroid:layout_alignTop与指定视图顶部对齐。等等。示例xmlRelativeLayout android:layout_widthmatch_parent android:layout_heightmatch_parent TextView android:idid/title android:layout_widthwrap_content android:layout_heightwrap_content android:text标题 android:layout_centerHorizontaltrue android:layout_marginTop20dp / Button android:idid/button_ok android:layout_widthwrap_content android:layout_heightwrap_content android:text确定 android:layout_belowid/title android:layout_centerHorizontaltrue android:layout_marginTop20dp / Button android:idid/button_cancel android:layout_widthwrap_content android:layout_heightwrap_content android:text取消 android:layout_toLeftOfid/button_ok android:layout_alignTopid/button_ok android:layout_marginRight20dp / /RelativeLayout4.2.3 ConstraintLayout约束布局ConstraintLayout是Google推荐的灵活布局它通过约束关系来定位子视图几乎可以实现所有其他布局的功能同时保持视图层级扁平化有利于性能。基本约束每个视图都需要设置水平方向和垂直方向的约束否则在预览时会出现警告除非指定具体位置。常见的约束属性app:layout_constraintLeft_toLeftOfparent左边缘与父容器左边缘对齐。app:layout_constraintRight_toRightOfparent右边缘与父容器右边缘对齐。app:layout_constraintTop_toTopOfparentapp:layout_constraintBottom_toBottomOfparentapp:layout_constraintLeft_toRightOfid/other_view左边缘位于其他视图的右侧。等等。偏移量通过app:layout_constraintHorizontal_bias和app:layout_constraintVertical_bias调整位置。例如一个视图同时约束到父布局左右两边并且宽度为固定值bias可以控制它在水平方向上的偏移比例0~1默认0.5居中。链Chain将多个视图在水平或垂直方向上形成一组可以通过权重分配空间类似LinearLayout的权重。示例简单的居中TextViewxmlTextView android:layout_widthwrap_content android:layout_heightwrap_content android:textHello ConstraintLayout! app:layout_constraintLeft_toLeftOfparent app:layout_constraintRight_toRightOfparent app:layout_constraintTop_toTopOfparent app:layout_constraintBottom_toBottomOfparent /示例两个按钮水平排列间距16dp整体居中xmlButton android:idid/button_a android:layout_widthwrap_content android:layout_heightwrap_content android:text按钮A app:layout_constraintLeft_toLeftOfparent app:layout_constraintRight_toLeftOfid/button_b app:layout_constraintTop_toTopOfparent app:layout_constraintBottom_toBottomOfparent android:layout_marginRight8dp / Button android:idid/button_b android:layout_widthwrap_content android:layout_heightwrap_content android:text按钮B app:layout_constraintLeft_toRightOfid/button_a app:layout_constraintRight_toRightOfparent app:layout_constraintTop_toTopOfparent app:layout_constraintBottom_toBottomOfparent android:layout_marginLeft8dp /这里通过layout_marginRight和layout_marginLeft实现了间距。ConstraintLayout还提供了很多高级特性比如Guideline辅助线、Barrier屏障、Group组等我们将在后续专门讲解。4.2.4 其他布局简介FrameLayout最简单的布局所有子视图都默认放置在左上角后添加的视图会覆盖前面的视图。常用于Fragment容器、叠加效果等。GridLayout网格布局将子视图放置在一个网格中类似表格。TableLayout表格布局以行和列的方式组织视图但在现代开发中较少使用。4.3 常用控件详解控件View是用户直接交互的元素。我们逐一介绍最常用的控件及其核心属性和用法。4.3.1 TextView文本显示TextView是最简单的控件用于显示文本。除了基本属性外还有一些高级属性android:textSize文字大小单位常用sp缩放无关像素。android:textColor文字颜色。android:textStyle样式如bold粗体、italic斜体。android:maxLines最大行数超出部分用省略号。android:ellipsize省略号位置如end、middle、start。android:autoLink自动识别链接、电话、邮箱等如web、phone、email、all。android:drawableLeft/drawableRight等在文本左侧/右侧显示图片。示例xmlTextView android:layout_widthmatch_parent android:layout_heightwrap_content android:text这是一段非常长的文本需要被截断并显示省略号因为可能超出显示区域所以我们要使用maxLines和ellipsize属性来控制 android:maxLines2 android:ellipsizeend android:textSize16sp android:textColor#333333 android:autoLinkweb android:drawableLeftdrawable/ic_launcher android:drawablePadding8dp /4.3.2 EditText文本输入EditText继承自TextView允许用户输入和编辑文本。常用属性android:hint输入提示。android:inputType输入类型如text普通文本、textPassword密码、number数字、phone电话号码等。设置合适的inputType会调出对应的虚拟键盘。android:maxLength最大字符数。android:lines/android:minLines设置行数。android:singleLine是否单行已废弃推荐用android:maxLines1。监听文本变化javaEditText editText findViewById(R.id.edit_text); editText.addTextChangedListener(new TextWatcher() { Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { } Override public void onTextChanged(CharSequence s, int start, int before, int count) { // 实时获取输入内容 } Override public void afterTextChanged(Editable s) { } });4.3.3 Button按钮与 ImageButtonButton用于触发操作可以设置文本和背景。ImageButton是按钮的图片版本没有文本属性。常用属性android:onClick在Activity中指定一个公共方法名点击时调用。例如android:onClickonButtonClick然后在Activity中定义public void onButtonClick(View view)。注意使用onClick属性时方法必须是public void参数为View。自定义按钮样式通过android:background可以设置颜色、形状、选择器selector等实现点击效果。示例带selector的按钮需要在res/drawable中定义XML文件xml!-- res/drawable/button_selector.xml -- selector xmlns:androidhttp://schemas.android.com/apk/res/android item android:state_pressedtrue android:drawablecolor/colorPressed / item android:drawablecolor/colorNormal / /selector然后在按钮的background属性中引用该文件。4.3.4 ImageView图片显示ImageView用于显示图片支持本地资源、文件、网络图片需借助第三方库。核心属性android:src设置图片资源。android:scaleType图片缩放类型常用值center保持原尺寸居中不缩放。centerCrop保持比例缩放使图片完全覆盖视图可能裁剪部分区域。centerInside保持比例缩放使图片完全显示在视图内。fitXY拉伸图片填满视图可能变形。android:adjustViewBounds是否根据图片宽高比调整视图边界常与maxWidth/maxHeight配合使用。示例xmlImageView android:layout_width100dp android:layout_height100dp android:srcdrawable/sample_image android:scaleTypecenterCrop /加载网络图片推荐使用Glide或Picasso。例如Glide的用法需添加依赖javaGlide.with(context).load(https://example.com/image.jpg).into(imageView);4.3.5 CheckBox复选框与 RadioButton单选按钮CheckBox用于多选RadioButton用于单选通常需要配合RadioGroup使用。CheckBox示例xmlCheckBox android:idid/cb_agree android:layout_widthwrap_content android:layout_heightwrap_content android:text我同意用户协议 /在Java中可以通过setOnCheckedChangeListener监听状态变化。RadioGroup与RadioButtonxmlRadioGroup android:idid/rg_gender android:layout_widthwrap_content android:layout_heightwrap_content android:orientationvertical RadioButton android:idid/rb_male android:layout_widthwrap_content android:layout_heightwrap_content android:text男 / RadioButton android:idid/rb_female android:layout_widthwrap_content android:layout_heightwrap_content android:text女 / /RadioGroup通过RadioGroup.setOnCheckedChangeListener获取选中的RadioButton的id。4.3.6 ProgressBar进度条ProgressBar用于显示进度有两种风格圆形默认和水平。圆形ProgressBarxmlProgressBar android:layout_widthwrap_content android:layout_heightwrap_content /默认是无限循环的圆圈常用于加载指示。水平ProgressBarxmlProgressBar android:idid/progress_horizontal styleandroid:style/Widget.ProgressBar.Horizontal android:layout_widthmatch_parent android:layout_heightwrap_content android:max100 android:progress0 /在代码中调用setProgress()更新进度。4.3.7 ScrollView滚动视图当内容超出屏幕高度时可以使用ScrollView使其可以滚动。注意ScrollView只能包含一个直接子视图通常是一个LinearLayout或其他布局。xmlScrollView android:layout_widthmatch_parent android:layout_heightmatch_parent LinearLayout android:layout_widthmatch_parent android:layout_heightwrap_content android:orientationvertical !-- 大量内容 -- TextView ... / TextView ... / !-- ... -- /LinearLayout /ScrollView4.4 列表控件ListView与RecyclerView列表是移动应用最常见的UI模式之一。Android提供了ListView传统和RecyclerView现代、强大两种主要方式。4.4.1 ListView的基本使用ListView通过适配器Adapter将数据源与列表项视图关联起来。步骤在布局中添加ListView。准备数据如字符串数组或集合。创建适配器常用ArrayAdapter或自定义BaseAdapter。将适配器设置给ListView。示例简单的字符串列表xmlListView android:idid/listview android:layout_widthmatch_parent android:layout_heightmatch_parent /javaListView listView findViewById(R.id.listview); String[] data {Apple, Banana, Orange, Watermelon, Pear, Grape, Strawberry}; ArrayAdapterString adapter new ArrayAdapter(this, android.R.layout.simple_list_item_1, data); listView.setAdapter(adapter); listView.setOnItemClickListener(new AdapterView.OnItemClickListener() { Override public void onItemClick(AdapterView? parent, View view, int position, long id) { String item data[position]; Toast.makeText(MainActivity.this, 点击了 item, Toast.LENGTH_SHORT).show(); } });自定义列表项如果需要更复杂的布局可以创建自定义适配器继承BaseAdapter并重写getCount()、getItem()、getItemId()和getView()方法。在getView()中通常会使用ViewHolder模式优化性能避免重复findViewById。4.4.2 RecyclerView——现代列表之王RecyclerView是Android 5.0引入的相比ListView它更灵活、性能更好强制使用ViewHolder模式并提供了布局管理器LayoutManager、动画、分隔线等强大功能。使用RecyclerView的步骤添加依赖在build.gradleapp模块中添加groovyimplementation androidx.recyclerview:recyclerview:1.3.2在布局中添加RecyclerViewxmlandroidx.recyclerview.widget.RecyclerView android:idid/recyclerView android:layout_widthmatch_parent android:layout_heightmatch_parent /创建列表项布局例如item_contact.xmlxmlLinearLayout xmlns:androidhttp://schemas.android.com/apk/res/android android:layout_widthmatch_parent android:layout_heightwrap_content android:orientationhorizontal android:padding16dp ImageView android:idid/iv_avatar android:layout_width48dp android:layout_height48dp android:srcdrawable/ic_launcher_round / LinearLayout android:layout_width0dp android:layout_heightwrap_content android:layout_weight1 android:layout_marginStart16dp android:orientationvertical TextView android:idid/tv_name android:layout_widthwrap_content android:layout_heightwrap_content android:textSize18sp android:textColor#333 / TextView android:idid/tv_phone android:layout_widthwrap_content android:layout_heightwrap_content android:textSize14sp android:textColor#999 / /LinearLayout /LinearLayout创建数据模型类如Contact.javajavapublic class Contact { private String name; private String phone; private int avatarResId; public Contact(String name, String phone, int avatarResId) { this.name name; this.phone phone; this.avatarResId avatarResId; } // getters and setters... }创建ViewHolder类javapublic class ContactViewHolder extends RecyclerView.ViewHolder { ImageView ivAvatar; TextView tvName, tvPhone; public ContactViewHolder(NonNull View itemView) { super(itemView); ivAvatar itemView.findViewById(R.id.iv_avatar); tvName itemView.findViewById(R.id.tv_name); tvPhone itemView.findViewById(R.id.tv_phone); } }创建适配器javapublic class ContactAdapter extends RecyclerView.AdapterContactViewHolder { private ListContact contactList; private OnItemClickListener listener; public interface OnItemClickListener { void onItemClick(int position); } public void setOnItemClickListener(OnItemClickListener listener) { this.listener listener; } public ContactAdapter(ListContact contactList) { this.contactList contactList; } NonNull Override public ContactViewHolder onCreateViewHolder(NonNull ViewGroup parent, int viewType) { View view LayoutInflater.from(parent.getContext()).inflate(R.layout.item_contact, parent, false); return new ContactViewHolder(view); } Override public void onBindViewHolder(NonNull ContactViewHolder holder, int position) { Contact contact contactList.get(position); holder.ivAvatar.setImageResource(contact.getAvatarResId()); holder.tvName.setText(contact.getName()); holder.tvPhone.setText(contact.getPhone()); holder.itemView.setOnClickListener(v - { if (listener ! null) { listener.onItemClick(position); } }); } Override public int getItemCount() { return contactList.size(); } }在Activity中使用RecyclerViewjavaRecyclerView recyclerView findViewById(R.id.recyclerView); recyclerView.setLayoutManager(new LinearLayoutManager(this)); // 线性布局 // 也可以使用 GridLayoutManager 或 StaggeredGridLayoutManager ListContact contacts new ArrayList(); contacts.add(new Contact(张三, 13812345678, R.drawable.avatar1)); contacts.add(new Contact(李四, 13987654321, R.drawable.avatar2)); // ... 添加更多数据 ContactAdapter adapter new ContactAdapter(contacts); recyclerView.setAdapter(adapter); adapter.setOnItemClickListener(position - { Contact contact contacts.get(position); Toast.makeText(this, 点击了 contact.getName(), Toast.LENGTH_SHORT).show(); });RecyclerView的优势强制使用ViewHolder性能更好。内置多种布局管理器线性、网格、瀑布流。支持添加ItemDecoration如分割线。支持ItemAnimator增删改的动画。支持部分刷新。4.4.3 RecyclerView的常用补充添加分割线可以继承RecyclerView.ItemDecoration自定义或者使用DividerItemDecoration需导入material库。添加点击和长按事件通常在onBindViewHolder中为itemView设置监听。多类型布局通过重写getItemViewType()并在onCreateViewHolder中根据类型创建不同的ViewHolder。4.5 综合实战构建一个联系人列表让我们将所学内容整合起来创建一个简单的联系人列表应用。功能包括使用RecyclerView展示联系人头像、姓名、电话。点击列表项弹出Toast显示联系人姓名。添加一个浮动按钮FloatingActionButton点击后添加新的联系人简化起见添加固定的测试数据。步骤创建项目添加RecyclerView依赖和Material Design库用于FloatingActionButtongroovyimplementation androidx.recyclerview:recyclerview:1.3.2 implementation com.google.android.material:material:1.9.0在activity_main.xml中使用CoordinatorLayout包裹RecyclerView和FloatingActionButton实现Snackbar等效果xmlandroidx.coordinatorlayout.widget.CoordinatorLayout android:layout_widthmatch_parent android:layout_heightmatch_parent androidx.recyclerview.widget.RecyclerView android:idid/recyclerView android:layout_widthmatch_parent android:layout_heightmatch_parent / com.google.android.material.floatingactionbutton.FloatingActionButton android:idid/fab android:layout_widthwrap_content android:layout_heightwrap_content android:layout_gravitybottom|end android:layout_margin16dp android:srcandroid:drawable/ic_input_add / /androidx.coordinatorlayout.widget.CoordinatorLayout创建Contact数据类和ContactAdapter如上所述。在MainActivity中初始化RecyclerView和FAB实现添加功能javapublic class MainActivity extends AppCompatActivity { private RecyclerView recyclerView; private ContactAdapter adapter; private ListContact contactList new ArrayList(); Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 准备初始数据 contactList.add(new Contact(张三, 13812345678, R.drawable.avatar1)); contactList.add(new Contact(李四, 13987654321, R.drawable.avatar2)); contactList.add(new Contact(王五, 13512345678, R.drawable.avatar3)); recyclerView findViewById(R.id.recyclerView); recyclerView.setLayoutManager(new LinearLayoutManager(this)); adapter new ContactAdapter(contactList); recyclerView.setAdapter(adapter); // 设置点击事件 adapter.setOnItemClickListener(position - { Contact contact contactList.get(position); Toast.makeText(MainActivity.this, 点击了 contact.getName(), Toast.LENGTH_SHORT).show(); }); // 添加按钮 FloatingActionButton fab findViewById(R.id.fab); fab.setOnClickListener(v - { // 添加一个新联系人示例数据 int newId contactList.size() 1; Contact newContact new Contact(新用户 newId, 10086, R.drawable.ic_launcher_round); contactList.add(newContact); adapter.notifyItemInserted(contactList.size() - 1); recyclerView.smoothScrollToPosition(contactList.size() - 1); }); } }运行应用你将看到联系人列表点击FAB可以动态添加新联系人列表自动滚动到底部并显示Snackbar可自行添加。4.6 小结与下篇预告在本篇中我们系统地学习了Android UI开发的基础知识视图层次与布局参数的概念。常用布局LinearLayout、RelativeLayout、ConstraintLayout 的特性和使用场景。常用控件TextView、EditText、Button、ImageView、CheckBox、RadioButton、ProgressBar、ScrollView 的核心属性和用法。列表控件ListView 的基本用法和 RecyclerView 的完整使用流程包括适配器、ViewHolder、布局管理器、点击事件等。通过一个联系人列表的实战将所学知识串联起来。掌握这些内容后你已经能够构建丰富、交互性强的用户界面。UI 的世界远不止这些还包括动画、自定义视图、Material Design 组件、ConstraintLayout 的高级特性等我们将在后续篇章中深入探讨。下一篇预告我们将进入数据持久化领域学习如何在 Android 中保存和读取数据。我们会详细介绍 SharedPreferences轻量级键值对存储、文件存储内部/外部存储、SQLite 数据库使用 Room 库以及如何管理应用的设置和用户数据。敬请期待