学习进度条

Android UI设计与Material组件应用总结

今日学习时间：2小时
今日代码量：300行
今日博客：1篇（Android Material Design组件应用实践）

一、核心知识点

1. Material Design组件应用

<!-- 卡片式布局实现 -->
<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="16dp"
    app:cardElevation="8dp">
    
    <!-- 内部布局内容 -->
</androidx.cardview.widget.CardView>

<!-- Material按钮样式 -->
<com.google.android.material.button.MaterialButton
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:backgroundTint="#93D8EC"
    android:textColor="#FFFFFF"
    android:elevation="4dp"/>

2. 输入框优化设计

<!-- Material Design文本输入框 -->
<com.google.android.material.textfield.TextInputLayout
    android:hint="PSP阶段"
    app:boxStrokeColor="#2196F3"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    
    <com.google.android.material.textfield.TextInputEditText
        android:inputType="textMultiLine"
        android:minLines="3"/>
</com.google.android.material.textfield.TextInputLayout>

3. 布局管理器对比使用

<!-- ConstraintLayout示例 -->
<androidx.constraintlayout.widget.ConstraintLayout>
    <View
        app:layout_constraintTop_toBottomOf="@id/view1"
        app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

<!-- LinearLayout示例 -->
<LinearLayout
    android:orientation="vertical"
    android:weightSum="2">
    
    <Button android:layout_weight="1"/>
    <Button android:layout_weight="1"/>
</LinearLayout>

二、使用技术

1. Material组件库：

   • CardView实现卡片式设计
   • TextInputLayout增强输入框体验
   • MaterialButton统一按钮样式

2. 布局管理器：

   • ConstraintLayout复杂布局
   • LinearLayout简单线性布局
   • 权重(weight)分配空间

3. UI设计技巧：

   • 阴影效果(elevation)
   • 圆角设计(cardCornerRadius)
   • 渐变背景(gradient_background)

4. 输入类型控制：

   • textMultiLine多行文本
   • number数字输入
   • textUri网址输入

三、设计规范要点

1. 间距系统：

   android:layout_marginTop="24dp"
   android:padding="16dp"
   

2. 字体层次：

   android:textSize="32sp"  <!-- 标题 -->
   android:textSize="16sp"  <!-- 正文 -->
   

3. 颜色应用：

   android:backgroundTint="#93D8EC"  <!-- 主色调 -->
   android:textColor="#FFFFFF"       <!-- 文字反色 -->
   

4. 交互反馈：

   android:elevation="4dp"  <!-- 按下效果 -->
   

四、今日成果

1. 完成了4种不同功能的界面设计
2. 统一应用了Material Design规范
3. 实现了响应式布局适配
4. 优化了表单输入体验

遇到的问题：

1. 多行文本对齐问题（解决：添加gravity="top"属性）
2. 阴影效果不明显（解决：调整shadowDx/shadowDy值）
3. 权重布局计算异常（解决：明确设置weightSum）

解决方案：

1. 使用CardView提升视觉层次
2. TextInputLayout增强表单可用性
3. 统一设计语言保持一致性

收获

1. 掌握了Material Design核心组件用法
2. 理解了不同布局管理器的适用场景
3. 学会了构建专业级UI的设计规范
4. 认识到细节处理对用户体验的重要性
5. 积累了界面开发的实用技巧