Android UI 之 我的页面 圆形图片+通用item封装（简化代码量）
本文出自：http://blog.csdn.net/dt235201314/article/details/76885747
一丶效果演示
二丶功能点技术点
1.圆形图片，mitmap图片处理，canvas绘图
2.通用item封装，三种形式，一句话替代繁琐布局和重复代码
三丶核心代码讲解
1.圆形图片
/** **/ public class CircleImageView extends AppCompatImageView { private Paint paint ; public CircleImageView(Context context) { this(context,null); } public CircleImageView(Context context, AttributeSet attrs) { this(context, attrs,0); } public CircleImageView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); paint = new Paint(); } /** * 绘制圆形图片 * @author caizhiming */ @Override protected void onDraw(Canvas canvas) { Drawable drawable = getDrawable(); if (null != drawable) { Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap(); Bitmap b = getCircleBitmap(bitmap, 14); final Rect rectSrc = new Rect(0, 0, b.getWidth(), b.getHeight()); final Rect rectDest = new Rect(0,0,getWidth(),getHeight()); paint.reset(); canvas.drawBitmap(b, rectSrc, rectDest, paint); } else { super.onDraw(canvas); } } /** * 获取圆形图片方法 * @param bitmap * @param pixels * @return Bitmap * @author caizhiming */ private Bitmap getCircleBitmap(Bitmap bitmap, int pixels) { Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(output); final int color = 0xff424242; final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight()); paint.setAntiAlias(true); canvas.drawARGB(0, 0, 0, 0); paint.setColor(color); int x = bitmap.getWidth(); canvas.drawCircle(x / 2, x / 2, x / 2, paint); paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); canvas.drawBitmap(bitmap, rect, rect, paint); return output; } } xml直接使用即可* author : JinBiao * CSDN : http://my.csdn.net/DT235201314 * time : 2017/08/07 * desc : 自定义圆形图片 * version: 1.0 *
android:id="@+id/iv_mine_avatar"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="64dp"
android:scaleType="centerCrop"
android:src="@drawable/mine_me"/> 我的页面通常是几个或者几种类似的item布局跳转
图中红框封装效果
我的页面item常见功能分析
1.固定的图片文字箭头（光是这个不封装的话可见代码量之多）
2.点击跳转功能
3.view的间隔线设置
4.带输入框的item
封装的item代码，方法讲解见注释
/** * Created by chaohx on 2017/7/20. */ public class MyOneLineView extends LinearLayout { /** * 上下分割线，默认隐藏上面分割线 */ private View dividerTop, dividerBottom; /** * 最外层容器 */ private LinearLayout llRoot; /** * 最左边的Icon */ private ImageView ivLeftIcon; /** * 中间的文字内容 */ private TextView tvTextContent; /** * 中间的输入框 */ private EditText editContent; /** * 右边的文字 */ private TextView tvRightText; /** * 右边的icon 通常是箭头 */ private ImageView ivRightIcon; /** * 整个一行被点击 */ public static interface OnRootClickListener { void onRootClick(View view); } /** * 右边箭头的点击事件 */ public static interface OnArrowClickListener { void onArrowClick(View view); } public MyOneLineView(Context context) { super(context); } public MyOneLineView(Context context, AttributeSet attrs) { super(context, attrs); } /** * 初始化各个控件 */ public MyOneLineView init() { LayoutInflater.from(getContext()).inflate(R.layout.layout_my_one_line, this, true); llRoot = (LinearLayout) findViewById(R.id.ll_root); dividerTop = findViewById(R.id.divider_top); dividerBottom = findViewById(R.id.divider_bottom); ivLeftIcon = (ImageView) findViewById(R.id.iv_left_icon); tvTextContent = (TextView) findViewById(R.id.tv_text_content); editContent = (EditText) findViewById(R.id.edit_content); tvRightText = (TextView) findViewById(R.id.tv_right_text); ivRightIcon = (ImageView) findViewById(R.id.iv_right_icon); return this; } /** * 文字 + 箭头 * * @param textContent * @return */ public MyOneLineView init(String textContent) { init(); setTextContent(textContent); showEdit(false); setRightText(""); showLeftIcon(false); return this; } /** * 默认情况下的样子 icon + 文字 + 右箭头 + 下分割线 * * @param iconRes icon图片 * @param textContent 文字内容 */ public MyOneLineView init(int iconRes, String textContent) { init(); showDivider(false, true); setLeftIcon(iconRes); setTextContent(textContent); showEdit(false); setRightText(""); showArrow(true); return this; } /** * 我的页面每一行 icon + 文字 + 右箭头（显示/不显示） + 右箭头左边的文字（显示/不显示）+ 下分割线 * * @param iconRes icon图片 * @param textContent 文字内容 */ public MyOneLineView initMine(int iconRes, String textContent, String textRight, boolean showArrow) { init(iconRes, textContent); setRightText(textRight); showArrow(showArrow); return this; } /** * icon + 文字 + edit + 下分割线 * * @return */ public MyOneLineView initItemWidthEdit(int iconRes, String textContent, String editHint) { init(iconRes, textContent); showEdit(true); setEditHint(editHint); showArrow(false); return this; } //---------------------下面是对每个部分的一些设置 上面是应用中常用场景封装-----------------------// /** * 设置root的paddingTop 与 PaddingBottom 从而控制整体的行高 * paddingLeft 与 paddingRight 保持默认 20dp */ public MyOneLineView setRootPaddingTopBottom(int paddintTop, int paddintBottom) { llRoot.setPadding(DensityUtils.dp2px(getContext(), 20), DensityUtils.dp2px(getContext(), paddintTop), DensityUtils.dp2px(getContext(), 20), DensityUtils.dp2px(getContext(), paddintBottom)); return this; } /** * 设置root的paddingLeft 与 PaddingRight 从而控制整体的行高 *使用MineFragment* paddingTop 与 paddingBottom 保持默认 15dp */ public MyOneLineView setRootPaddingLeftRight(int paddintTop, int paddintRight) { llRoot.setPadding(DensityUtils.dp2px(getContext(), paddintTop), DensityUtils.dp2px(getContext(), 15), DensityUtils.dp2px(getContext(), paddintRight), DensityUtils.dp2px(getContext(), 15)); return this; } /** * 设置上下分割线的显示情况 * * @return */ public MyOneLineView showDivider(Boolean showDividerTop, Boolean showDivderBottom) { if (showDividerTop) { dividerTop.setVisibility(VISIBLE); } else { dividerTop.setVisibility(GONE); } if (showDivderBottom) { dividerBottom.setVisibility(VISIBLE); } else { dividerBottom.setVisibility(GONE); } return this; } /** * 设置上分割线的颜色 * * @return */ public MyOneLineView setDividerTopColor(int dividerTopColorRes) { dividerTop.setBackgroundColor(getResources().getColor(dividerTopColorRes)); return this; } /** * 设置上分割线的高度 * * @return */ public MyOneLineView setDividerTopHigiht(int dividerTopHigihtDp) { ViewGroup.LayoutParams layoutParams = dividerTop.getLayoutParams(); layoutParams.height = DensityUtils.dp2px(getContext(), dividerTopHigihtDp); dividerTop.setLayoutParams(layoutParams); return this; } /** * 设置下分割线的颜色 * * @return */ public MyOneLineView setDividerBottomColor(int dividerBottomColorRes) { dividerBottom.setBackgroundColor(getResources().getColor(dividerBottomColorRes)); return this; } /** * 设置上分割线的高度 * * @return */ public MyOneLineView setDividerBottomHigiht(int dividerBottomHigihtDp) { ViewGroup.LayoutParams layoutParams = dividerBottom.getLayoutParams(); layoutParams.height = DensityUtils.dp2px(getContext(), dividerBottomHigihtDp); dividerBottom.setLayoutParams(layoutParams); return this; } /** * 设置左边Icon * * @param iconRes */ public MyOneLineView setLeftIcon(int iconRes) { ivLeftIcon.setImageResource(iconRes); return this; } /** * 设置左边Icon显示与否 * * @param showLeftIcon */ public MyOneLineView showLeftIcon(boolean showLeftIcon) { if (showLeftIcon) { ivLeftIcon.setVisibility(VISIBLE); } else { ivLeftIcon.setVisibility(GONE); } return this; } /** * 设置右边Icon 以及Icon的宽高 */ public MyOneLineView setLeftIconSize(int widthDp, int heightDp) { ViewGroup.LayoutParams layoutParams = ivLeftIcon.getLayoutParams(); layoutParams.width = DensityUtils.dp2px(getContext(), widthDp); layoutParams.height = DensityUtils.dp2px(getContext(), heightDp); ivLeftIcon.setLayoutParams(layoutParams); return this; } /** * 设置中间的文字内容 * * @param textContent * @return */ public MyOneLineView setTextContent(String textContent) { tvTextContent.setText(textContent); return this; } /** * 设置中间的文字颜色 * * @return */ public MyOneLineView setTextContentColor(int colorRes) { tvTextContent.setTextColor(getResources().getColor(colorRes)); return this; } /** * 设置中间的文字大小 * * @return */ public MyOneLineView setTextContentSize(int textSizeSp) { tvTextContent.setTextSize(textSizeSp); return this; } /** * 设置右边文字内容 * * @return */ public MyOneLineView setRightText(String rightText) { tvRightText.setText(rightText); return this; } /** * 设置右边文字颜色 * * @return */ public MyOneLineView setRightTextColor(int colorRes) { tvRightText.setTextColor(getResources().getColor(colorRes)); return this; } /** * 设置右边文字大小 * * @return */ public MyOneLineView setRightTextSize(int textSize) { tvRightText.setTextSize(textSize); return this; } /** * 设置右箭头的显示与不显示 * * @param showArrow */ public MyOneLineView showArrow(boolean showArrow) { if (showArrow) { ivRightIcon.setVisibility(VISIBLE); } else { ivRightIcon.setVisibility(GONE); } return this; } /** * 获取右边icon */ public MyOneLineView setIvRightIcon(int iconRes) { ivRightIcon.setImageResource(iconRes); return this; } /** * 获取右边icon */ public ImageView getIvRightIcon() { return ivRightIcon; } /** * 设置中间的输入框显示与否 * * @param showEdit * @return */ public MyOneLineView showEdit(boolean showEdit) { if (showEdit) { editContent.setVisibility(VISIBLE); } else { editContent.setVisibility(GONE); } return this; } /** * 设置中间的输入框 是否可输入 * * @param editable * @return */ public MyOneLineView setEditable(boolean editable) { editContent.setFocusable(editable); return this; } /** * 设置中间的输入框hint内容 * * @param showEditHint * @return */ public MyOneLineView setEditHint(String showEditHint) { editContent.setHint(showEditHint); return this; } /** * 设置中间的输入框内容 * * @param s * @return */ public MyOneLineView setEditContent(String s) { editContent.setText(s); return this; } /** * 获取Edit输入的内容 * * @param s * @return */ public String getEditContent(String s) { return String.valueOf(editContent.getText()); } /** * 设置 edit 颜色 * * @param colorRes * @return */ public MyOneLineView setEditColor(int colorRes) { editContent.setTextColor(getResources().getColor(colorRes)); return this; } /** * 设置 edit 字体大小 * * @param editSizeSp * @return */ public MyOneLineView setEditSize(int editSizeSp) { editContent.setTextSize(editSizeSp); return this; } //----------------------下面是一些点击事件 public MyOneLineView setOnRootClickListener(final OnRootClickListener onRootClickListener, final int tag) { llRoot.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { llRoot.setTag(tag); onRootClickListener.onRootClick(llRoot); } }); return this; } public MyOneLineView setOnArrowClickListener(final OnArrowClickListener onArrowClickListener, final int tag) { ivRightIcon.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { ivRightIcon.setTag(tag); onArrowClickListener.onArrowClick(ivRightIcon); } }); return this; } }
/** * 我的页面，圆形图片+封装通用item */ public class MineFragment extends Fragment implements MyOneLineView.OnRootClickListener, MyOneLineView.OnArrowClickListener { LinearLayout ll_mine_item; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.mine_fragment, container, false); } @Override public void onActivityCreated(@Nullable Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); initView(); } public void initView(){ ll_mine_item = (LinearLayout) getActivity().findViewById(R.id.ll_mine_item); //使用示例，通过Java代码来创建MyOnelineView //icon + 文字 + 箭头 ll_mine_item.addView(new MyOneLineView(getActivity()) .initMine(R.mipmap.mine_about_icon, "我的CSDN博客", "技术博文", true) .setOnRootClickListener(this, 1)); ll_mine_item.addView(new MyOneLineView(getActivity()) .initMine(R.mipmap.mine_about_icon, "我的简书", "技术问 + 感想", true) .setOnRootClickListener(this, 2)); ll_mine_item.addView(new MyOneLineView(getActivity()) .initMine(R.mipmap.mine_about_icon, "我的GitHub", "", true) .setOnRootClickListener(this, 3)); ll_mine_item.addView(new MyOneLineView(getActivity()) .initMine(R.mipmap.mine_about_icon, "关于APP", "规划中", true) .setDividerTopColor(R.color.gray2) .showDivider(true,true) .setDividerTopHigiht(10) .setOnRootClickListener(this, 4)); ll_mine_item.addView(new MyOneLineView(getActivity()) .initMine(R.mipmap.mine_version_update_icon, "版本更新", "规划中", true) .setOnRootClickListener(this, 5)); ll_mine_item.addView(new MyOneLineView(getActivity()) .initMine(R.mipmap.mine_account_setting_icon, "账户设置", "规划中", true) .setOnRootClickListener(this, 6)); // //icon + 文字 + 文字 + 箭头 // ll_mine_item.addView(new MyOneLineView(getActivity()) // .initMine(R.mipmap.ic_launcher, "第二行", "第二行", true) // .setOnArrowClickListener(this, 2)); // //icon + 文字 + 输入框 // ll_mine_item.addView(new MyOneLineView(getActivity()) // .initItemWidthEdit(R.mipmap.ic_launcher, "第三行", "这是一个输入框") // .setRootPaddingTopBottom(20, 20)); } @Override public void onRootClick(View view) { switch ((int) view.getTag()) { case 1: WebViewActivity.startWebViewActivity(getActivity(),"http://my.csdn.net/dt235201314"); break; case 2: WebViewActivity.startWebViewActivity(getActivity(),"http://www.jianshu.com/u/905c7de5ae83"); break; case 3: WebViewActivity.startWebViewActivity(getActivity(),"https://github.com/JinBoy23520"); break; case 4: Toast.makeText(getActivity(), "规划中", Toast.LENGTH_SHORT).show(); break; case 5: Toast.makeText(getActivity(), "规划中", Toast.LENGTH_SHORT).show(); break; case 6: Toast.makeText(getActivity(), "规划中", Toast.LENGTH_SHORT).show(); break; } } @Override public void onArrowClick(View view) { } }详细封装思想及操作参看文章：
（item封装参文章）http://www.jianshu.com/p/9fa393aa1406
四丶总结
1.java OOP 思想封装使代码跟简洁
2.setTag的形式添加区分点击时间
3.DensityUtils封装的工具类，用于dp sp 与px 的转换
五丶源码下载
欢迎关注我的博客及微信公众号
源码下载记得顺便Star哦~
下载链接：https://github.com/JinBoy23520/CoderToDeveloperByTCLer