Github地址：美食分享平台，欢迎star和fork

注：本文只设计个人信息界面的设计，不包括活动和后台逻辑。活动设计和后台可以参见Android开发(4)：个人信息修改个人信息，修改头像设计

效果图

思路

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

标题栏其他界面也可能用到，可以直接设计成一个widget

头像栏，因为方形图片会很不好看，这个圆形头像也可以设计成一个widget

信息栏目的格式都很大同小异，如果单独设计会增加很多重复代码，那么也设计成一个widget。

文件目录

新建widget文件夹，然后新建三个Java类。标题栏(TitleLayout)，圆形头像(RoundImageView)，信息栏(ItemGroup)

设计

1. 标题栏

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

layout：

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 = (ImageView) bar_title.findViewById(R.id.iv_backward);

tv_title = (TextView) bar_title.findViewById(R.id.tv_title);

tv_forward = (TextView) bar_title.findViewById(R.id.tv_forward);

//设置监听器

//如果点击back则结束活动

iv_backward.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

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

}

});

}

}

头像栏

头像栏一般不需要改动了，直接用就可以了

圆形头像类：

public class RoundImageView extends AppCompatImageView {

public RoundImageView(Context context, AttributeSet attrs) {

super(context, attrs);

init();

}

public RoundImageView(Context context) {

super(context);

init();

}

private final RectF roundRect = new RectF();

private float rect_adius = 90;

private final Paint maskPaint = new Paint();

private final Paint zonePaint = new Paint();

private void init() {

maskPaint.setAntiAlias(true);

maskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

maskPaint.setFilterBitmap(true);

zonePaint.setAntiAlias(true);

zonePaint.setColor(Color.WHITE);

zonePaint.setFilterBitmap(true);

float density = getResources().getDisplayMetrics().density;

rect_adius = rect_adius * density;

}

public void setRectAdius(float adius) {

rect_adius = adius;

invalidate();

}

@Override

protected void onLayout(boolean changed, int left, int top, int right,

int bottom) {

super.onLayout(changed, left, top, right, bottom);

int w = getWidth();

int h = getHeight();

roundRect.set(0, 0, w, h);

}

@Override

public void draw(Canvas canvas) {

canvas.saveLayer(roundRect, zonePaint, Canvas.ALL_SAVE_FLAG);

canvas.drawRoundRect(roundRect, rect_adius, rect_adius, zonePaint);

//

canvas.saveLayer(roundRect, maskPaint, Canvas.ALL_SAVE_FLAG);

super.draw(canvas);

canvas.restore();

}

}

信息栏

信息是按照一个ItemGroup类完成，可以通过app:来修改属性，这部分代码也一般不需要修改。可以定义的属性可以阅读代码或者查看博客Android编辑信息界面，组合控件的封装

首先是每个栏(item)是界面：

实现的ItemGroup

public class ItemGroup extends FrameLayout{

private LinearLayout itemGroupLayout; //组合控件的布局

private TextView titleTv; //标题

private TextView contentEdt; //输入框

private ImageView jtRightIv; //向右的箭头

public TextView getContentEdt() {

return contentEdt;

}

public ItemGroup(@NonNull Context context) {

super(context);

initView(context);

}

public ItemGroup(@NonNull Context context, @Nullable AttributeSet attrs) {

super(context, attrs);

initView(context);

initAttrs(context, attrs);

}

public ItemGroup(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) {

super(context, attrs, defStyleAttr);

initView(context);

initAttrs(context,attrs);

}

//初始化View

private void initView(Context context) {

View view = LayoutInflater.from(context).inflate(R.layout.item_group_layout, null);

itemGroupLayout = (LinearLayout) view.findViewById(R.id.item_group_layout);

titleTv = (TextView) view.findViewById(R.id.title_tv);

contentEdt = (TextView) view.findViewById(R.id.content_edt);

jtRightIv = (ImageView) view.findViewById(R.id.jt_right_iv);

addView(view); //把自定义的这个组合控件的布局加入到当前FramLayout

}

/**

* 初始化相关属性，引入相关属性

*

* @param context

* @param attrs

*/

private void initAttrs(Context context, AttributeSet attrs) {

//标题的默认字体颜色

int defaultTitleColor = context.getResources().getColor(R.color.gray3);

//输入框的默认字体颜色

int defaultEdtColor = context.getResources().getColor(R.color.black0);

//输入框的默认的提示内容的字体颜色

int defaultHintColor = context.getResources().getColor(R.color.gray9);

TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ItemGroup);

String title = typedArray.getString(R.styleable.ItemGroup_title);

float paddingLeft = typedArray.getDimension(R.styleable.ItemGroup_paddingLeft, 15);

float paddingRight = typedArray.getDimension(R.styleable.ItemGroup_paddingRight, 15);

float paddingTop = typedArray.getDimension(R.styleable.ItemGroup_paddingTop, 5);

float paddingBottom = typedArray.getDimension(R.styleable.ItemGroup_paddingTop, 5);

float titleSize = typedArray.getDimension(R.styleable.ItemGroup_title_size, 15);

int titleColor = typedArray.getColor(R.styleable.ItemGroup_title_color, defaultTitleColor);

String content = typedArray.getString(R.styleable.ItemGroup_edt_content);

float contentSize = typedArray.getDimension(R.styleable.ItemGroup_edt_text_size, 13);

int contentColor = typedArray.getColor(R.styleable.ItemGroup_edt_text_color, defaultEdtColor);

String hintContent = typedArray.getString(R.styleable.ItemGroup_edt_hint_content);

int hintColor = typedArray.getColor(R.styleable.ItemGroup_edt_hint_text_color, defaultHintColor);

//默认输入框可以编辑

boolean isEditable = typedArray.getBoolean(R.styleable.ItemGroup_isEditable, true);

//向右的箭头图标是否可见，默认可见

boolean showJtIcon = typedArray.getBoolean(R.styleable.ItemGroup_jt_visible, true);

typedArray.recycle();

//设置数据

//设置item的内边距

itemGroupLayout.setPadding((int) paddingLeft, (int) paddingTop, (int) paddingRight, (int) paddingBottom);

titleTv.setText(title);

titleTv.setTextSize(titleSize);

titleTv.setTextColor(titleColor);

contentEdt.setText(content);

contentEdt.setTextSize(contentSize);

contentEdt.setTextColor(contentColor);

contentEdt.setHint(hintContent);

contentEdt.setHintTextColor(hintColor);

// contentEdt.setFocusable(isEditable); //设置输入框是否可以编辑

// contentEdt.setClickable(true);

// contentEdt.setKeyListener(null);

jtRightIv.setVisibility(showJtIcon ? View.VISIBLE : View.GONE); //设置向右的箭头图标是否可见

}

}

组装

完成上述的前置工作，我们就可以通过上面的组件进行界面的编辑了。

结构大概如下：

我的代码示例：

参考链接

Android实现圆形Imageview，带白色边框