Android开发（3）：个人信息界面设计

最新推荐文章于 2024-08-22 12:39:53 发布

陈陈陈小航

最新推荐文章于 2024-08-22 12:39:53 发布

阅读量2.9w

点赞数 32

分类专栏： Android 文章标签： android 移动开发 android studio

本文链接：https://blog.csdn.net/qq_36328643/article/details/104379956

版权

这篇博客主要介绍了如何设计Android应用中的个人信息界面，包括标题栏、圆形头像栏和信息栏的设计。通过将这些组件封装为独立的widgets，减少代码重复。内容涵盖了文件目录结构、各组件的布局代码以及界面组装过程。

摘要由CSDN通过智能技术生成

Github地址：美食分享平台，欢迎star和fork
注：本文只设计个人信息界面的设计，不包括活动和后台逻辑。活动设计和后台可以参见Android开发（4）：个人信息修改个人信息，修改头像设计

效果图

在这里插入图片描述

思路

这个界面可以分为三个部分：标题栏，头像栏，其他信息栏。

标题栏其他界面也可能用到，可以直接设计成一个widget
头像栏，因为方形图片会很不好看，这个圆形头像也可以设计成一个widget
信息栏目的格式都很大同小异，如果单独设计会增加很多重复代码，那么也设计成一个widget。

文件目录

新建widget文件夹，然后新建三个Java类。标题栏（TitleLayout），圆形头像（RoundImageView），信息栏（ItemGroup）
在这里插入图片描述

设计

1. 标题栏

标题栏可以根据自己喜欢的样式修改
layout：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_titlebar"
    android:layout_width="match_parent"
    android:layout_height="52dp"
    android:background="@android:color/white">

    <ImageView
        android:id="@+id/iv_backward"
        android:layout_width="60dp"
        android:layout_height="match_parent"
        android:ellipsize="none"
        android:layout_gravity="center"
        android:singleLine="true"
        android:src="@drawable/arrow_back" />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:ellipsize="marquee"
        android:gravity="center_horizontal|center"
        android:singleLine="true"
        android:text="标题栏"
        android:textColor="@android:color/black"
        android:textSize="20dp" />

    <TextView
        android:id="@+id/tv_forward"
        android:layout_width="60dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:ellipsize="end"
        android:gravity="center"
        android:paddingRight="5dp"
        android:singleLine="true"
        android:text="保存"
        android:textColor="@android:color/black"
        android:textSize="18dp"/>

</LinearLayout>

TitleLayout：

public class TitleLayout extends LinearLayout {
    private ImageView iv_backward;
    private TextView tv_title, tv_forward;

    public TitleLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        LinearLayout bar_title = (LinearLayout) LayoutInflater.from(context).inflate(R.layout.bar_title, this);
        iv_backward