自定义View来显示多条支付信息

最新推荐文章于 2019-04-16 15:18:38 发布
最新推荐文章于 2019-04-16 15:18:38 发布
阅读量4.5k 收藏 2
点赞数
分类专栏： android开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ytmfdw/article/details/51385419
版权

在做项目开发时，有个这样的需求：

就中间的那个支付明细，要求点击时能收缩，这个功能非常简单，从界面来看，用LinearLayout或TableLayout来做，没啥难度，但是如果是用布局来写的话，那么要写的可多了，这只是列出了几种支付方式，有可能还有更多的，也有可能没这么多，那么用这种方式来写，代码非常啰嗦，维护起来更麻烦，针对这种情况，我采用的是自定义控件来写，动态画出来这些文本，详细代码：

package com.example.viewtest;

import java.util.LinkedHashMap;
import java.util.Map;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Paint.FontMetrics;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * 支付详情自定义控件
 * <p>
 * 传入参数：Map<String,String>
 * <p>
 * key:支付方式,value:支付金额
 * 
 * @author xiec
 *
 */
public class PayDetailView extends View implements OnClickListener {

	Map<String, String> data;
	TextView tv_title;
	String title = "线上支付明细";
	/**
	 * 是否显示详情，标题点击时会切换
	 */
	boolean isShow = true;

	/**
	 * 自己的宽度
	 */
	int width;
	/**
	 * 自己的高度
	 */
	int hight;

	/**
	 * 字体大小　
	 */
	float textSize;

	Resources res;

	/**
	 * 画笔
	 */
	Paint p;
	FontMetrics fm;
	/**
	 * 画笔粗细
	 */
	float penSize = 3f;

	public PayDetailView(Context context) {
		super(context);
		init();
	}

	public PayDetailView(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}

	private void init() {
		res = getResources();
		setBackgroundColor(res.getColor(R.color.white));
		textSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX,
				res.getDimension(R.dimen.textsize_middle),
				res.getDisplayMetrics());
		p = new Paint();
		p.setAntiAlias(true);// 设置抗锯齿F
		p.setStrokeWidth(penSize);
		p.setTextAlign(Paint.Align.LEFT);
		p.setTextSize(textSize);
		fm = p.getFontMetrics();
		data = new LinkedHashMap<String, String>();
		LogUtils.d("init width=" + width);
		this.setOnClickListener(this);
	}

	/**
	 * 设置数据
	 * 
	 * @param map
	 */
	public void setData(Map<String, String> map) {
		// 设置数据
		data.clear();
		if (map != null) {
			// String[] tmp = new String[map.size()];
			// map.keySet().toArray(tmp);
			// LogUtils.d(Arrays.toString(tmp));
			data.putAll(map);
		}
		// 重绘
		invalidate();
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		ViewGroup parent = (ViewGroup) getParent();
		width = parent.getMeasuredWidth();
		// 计算控件高度，根据数据来算
		hight = (int) (textSize * 2);
		if (data != null && data.size() > 0 && isShow) {
			hight += (data.keySet().size() + 1) * textSize * 2;
		}
		setMeasuredDimension(width, hight);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		LogUtils.d("onDraw isShow:" + isShow);
		drawTitle(canvas, isShow, p);
		if (isShow) {
			// 画值
			drawCotent(canvas, data, p);
		}
	}

	/**
	 * 画支付详情
	 * 
	 * @param data
	 *            数据
	 * @param p
	 *            画笔
	 */
	private void drawCotent(Canvas canvas, Map<String, String> data, Paint p) {
		if (data != null && data.size() > 0) {
			int size = data.size();
			float[] pts = new float[8 + size * 4];
			// 画框
			int ptsLen = pts.length;
			LogUtils.d("data size=" + size);
			LogUtils.d("pts size=" + ptsLen);
			// 竖线
			pts[0] = (width - penSize) / 2;
			pts[1] = textSize * 2;
			pts[2] = (width - penSize) / 2;
			pts[3] = hight;
			pts[4] = 0;
			pts[5] = textSize * 4;
			pts[6] = width;
			pts[7] = textSize * 4;
			// 是否是左边
			for (int i = 8; i < ptsLen; i += 4) {
				pts[i] = 0;
				pts[i + 1] = textSize * (i / 4 + 1) * 2;
				pts[i + 2] = width;
				pts[i + 3] = textSize * (i / 4 + 1) * 2;
			}
			p.setColor(res.getColor(R.color.black_90));
			canvas.drawLines(pts, p);
			// 头部
			// 支付方式
			float tmp = getTextlen(p, "支付方式");
			p.setColor(res.getColor(R.color.main_color));
			// 设置粗体
			Typeface font = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD);
			p.setTypeface(font);
			float d_x = (width / 2 - tmp) / 2;
			float d_y = textSize * 2
					+ (textSize - fm.descent + (fm.bottom - fm.top) / 2);
			canvas.drawText("支付方式", d_x, d_y, p);
			tmp = getTextlen(p, "金额");
			d_x = (int) (width / 2 + ((width / 2 - tmp) / 2));
			canvas.drawText("金额", d_x, d_y, p);
			size = data.keySet().size();
			String[] payway = new String[size];
			data.keySet().toArray(payway);
			// size = payway.length;
			font = Typeface.create(Typeface.SANS_SERIF, Typeface.NORMAL);
			p.setTypeface(font);
			for (int i = 0; i < size; i++) {
				// 每种支付方式都画出来
				p.setColor(res.getColor(R.color.black));
				tmp = getTextlen(p, payway[i]);
				d_x = (width / 2 - tmp) / 2;
				d_y = (textSize * (2 + i) * 2)
						+ (textSize - fm.descent + (fm.bottom - fm.top) / 2);
				canvas.drawText(payway[i], d_x, d_y, p);
				p.setColor(res.getColor(R.color.tab_spinner_color));
				String value = data.get(payway[i]);
				tmp = getTextlen(p, value);
				d_x = (int) (width / 2 + ((width / 2 - tmp) / 2));
				canvas.drawText(value, d_x, d_y, p);

			}
		}
	}

	// 画标题
	private void drawTitle(Canvas canvas, boolean isShow, Paint p) {
		LogUtils.d("drawTitle isShow:" + isShow);
		Resources res = getResources();

		p.setColor(res.getColor(R.color.msdcolorbg));// 设置红色
		p.setStyle(Paint.Style.FILL);// 设置填满
		// 画矩形
		canvas.drawRect(0, 0, width, textSize * 2, p);// 长方形
		p.setColor(res.getColor(R.color.white));
		// 画右边箭头
		drawArrow(canvas, isShow, p);
		// 计算文字长度
		float textlen = getTextlen(p, title);
		float d_x = (width - textlen) / 2;
		float d_y = textSize - fm.descent + (fm.bottom - fm.top) / 2;
		canvas.drawText(title, d_x, d_y, p);

	}

	/**
	 * 画右上角箭头
	 * 
	 * @param canvas
	 * @param isShow
	 * @param p
	 */
	private void drawArrow(Canvas canvas, boolean isShow, Paint p) {
		float size = textSize;
		float d_x = width - size - size / 2;
		float d_y = textSize / 2;
		// 大小固定在80px
		// {x0,y0,x1,y1,x2,y2},总共四个点，八个坐标
		float[] pts = new float[8];
		if (isShow) {
			// 向下箭头
			pts[0] = d_x;
			pts[1] = d_y;
			pts[2] = d_x + size / 2;
			pts[3] = d_y + size / 2;
			pts[4] = d_x + size / 2;
			pts[5] = d_y + size / 2;
			pts[6] = d_x + size;
			pts[7] = d_y;
		} else {
			// 向上箭头
			pts[0] = d_x;
			pts[1] = d_y + size / 2;
			pts[2] = d_x + size / 2;
			pts[3] = d_y;
			pts[4] = d_x + size / 2;
			pts[5] = d_y;
			pts[6] = d_x + size;
			pts[7] = d_y + size / 2;
		}
		canvas.drawLines(pts, p);

	}

	/**
	 * 计算文本长度
	 * 
	 * @param p
	 * @param text
	 * @return
	 */
	private float getTextlen(Paint p, String text) {
		if (text == null) {
			return 0;
		}
		return p.measureText(text);
	}

	@Override
	public void onClick(View v) {
		// 单击时隐藏支付详情
		LogUtils.d("onClick isShow=" + isShow);
		isShow = !isShow;
		// invalidate();
		requestLayout();
	}

}

下面对一些地方作补充：

首先，支付方式是不固定的，在解析完成后，以Map<String,String>的形式传给这个View:

	/**
	 * 设置数据
	 * 
	 * @param map
	 */
	public void setData(Map<String, String> map) {
		// 设置数据
		data.clear();
		if (map != null) {
			// String[] tmp = new String[map.size()];
			// map.keySet().toArray(tmp);
			// LogUtils.d(Arrays.toString(tmp));
			data.putAll(map);
		}
		// 重绘
		invalidate();
	}

当收到Map数据后，先清下原数据，再加载数据，再重新绘制界面，会调用 onDraw方法，这里Map采用的是 LinkedHashMap
，使用LinkedHashMap目的是使传入的Map按顺序来画出来。

重点是在onDraw方法，

@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		LogUtils.d("onDraw isShow:" + isShow);
		drawTitle(canvas, isShow, p);
		if (isShow) {
			// 画值
			drawCotent(canvas, data, p);
		}
	}
这个方法里很简单，首先是画标题，再看下是否要画内容区域（有个收缩功能），如果是缩的状态，就不用往下走了。 isShow这个变量在点击的时候进行切换 

@Override
	public void onClick(View v) {
		// 单击时隐藏支付详情
		LogUtils.d("onClick isShow=" + isShow);
		isShow = !isShow;
		// invalidate();
		requestLayout();
	}

点击时，要求重新布局:requestLayout();

重新布局的时候会重新计算控件的大小(onMeasure())，并重新绘制界面，关于控件的大小计算，我这里的宽，用的是父布局的宽：

　　ViewGroup parent = (ViewGroup) getParent();
        width = parent.getMeasuredWidth();

要注意一下，getParent()要强转成ViewGroup。关键是高度的计算：

　　// 计算控件高度，根据数据来算
        hight = (int) (textSize * 2);
        if (data != null && data.size() > 0 && isShow) {
            hight += (data.keySet().size() + 1) * textSize * 2;
        }
        setMeasuredDimension(width, hight);

我这里高度计算是根据传入的Map的大小来算的，首先头部高度是固定的，我用的是２倍的字体大小，字体大小是从dime中获取的

textSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX,
                res.getDimension(R.dimen.textsize_middle),
                res.getDisplayMetrics());

关键是setMeasuredDimension方法，使用重新布局时控件大小重新布局。

再回到onDraw方法来，drawTitle方法是画头部，即　　　线上支付明细

记住一条：在onDraw方法中，不要用new来新建对象，不然会有警告：onDraw会常调用，在这里用new来create对象，内存会使用比较多。

drawTitle代码就不贴了，上面有，只是简单说一下，有几个问题需要注意：

一、文字居中，

canvas.drawText有四个参数，特别是第二个参数和第三个参数，是决定这个文本从哪个地方开始写的，

// 计算文字长度
        float textlen = getTextlen(p, title);
        float d_x = (width - textlen) / 2;
        float d_y = textSize - fm.descent + (fm.bottom - fm.top) / 2;
        canvas.drawText(title, d_x, d_y, p);

居中的方法：(总长度-文本长度)/2

文本长度的获取：

ps：这里的Paint参数，最好是全局的，不然会出现计算出来的文本长度与预期的不一样，原因就是Paint使用的不是同一个对象

/**
	 * 计算文本长度
	 * 
	 * @param p
	 * @param text
	 * @return
	 */
	private float getTextlen(Paint p, String text) {
		if (text == null) {
			return 0;
		}
		return p.measureText(text);
	}
还有一个d_y的计算（可以理解成文本的y轴），Android比较坑的是：这个文本的y轴，有点难理解，drawText画文本是基于baseLine来画的，什么是baseLine?见下图：

因此，这个d_y不能像d_x那样计算，得用FontMetrics来计算，计算方法：

fm = p.getFontMetrics();//获取FontMetrice对象，根据Paint对象来获取

float d_y = textSize - fm.descent + (fm.bottom - fm.top) / 2;

//控件的高度-fm.descent+(fm.bottom - fm.top) / 2;


写完头部文本后，再画上一个箭头（其实就是两条线段组成，利用drawLine方法，参数是一个float[]数组，这个一维数据{x0,y0,x1,y1,x2,y2,x3,y3....}，这有两条线段，所以得要8个坐标）：

/**
	 * 画右上角箭头
	 * 
	 * @param canvas
	 * @param isShow
	 * @param p
	 */
	private void drawArrow(Canvas canvas, boolean isShow, Paint p) {
		float size = textSize;
		float d_x = width - size - size / 2;
		float d_y = textSize / 2;
		// 大小固定在80px
		// {x0,y0,x1,y1,x2,y2},总共四个点，八个坐标
		float[] pts = new float[8];
		if (isShow) {
			// 向下箭头
			pts[0] = d_x;
			pts[1] = d_y;
			pts[2] = d_x + size / 2;
			pts[3] = d_y + size / 2;
			pts[4] = d_x + size / 2;
			pts[5] = d_y + size / 2;
			pts[6] = d_x + size;
			pts[7] = d_y;
		} else {
			// 向上箭头
			pts[0] = d_x;
			pts[1] = d_y + size / 2;
			pts[2] = d_x + size / 2;
			pts[3] = d_y;
			pts[4] = d_x + size / 2;
			pts[5] = d_y;
			pts[6] = d_x + size;
			pts[7] = d_y + size / 2;
		}
		canvas.drawLines(pts, p);

	}

画完头部，再根据isShow来画Content:

内容区域分两部分来画：

黑线组成的框和文字部分，

先画框：框是由线段组成，根据data.size来决定有多少条横线，竖线就一条，用float[]数组来存组成线段的点的坐标。

int size = data.size();
			float[] pts = new float[8 + size * 4];
			// 画框
			int ptsLen = pts.length;
			LogUtils.d("data size=" + size);
			LogUtils.d("pts size=" + ptsLen);
			// 竖线
			pts[0] = (width - penSize) / 2;
			pts[1] = textSize * 2;
			pts[2] = (width - penSize) / 2;
			pts[3] = hight;
			pts[4] = 0;
			pts[5] = textSize * 4;
			pts[6] = width;
			pts[7] = textSize * 4;
			// 是否是左边
			for (int i = 8; i < ptsLen; i += 4) {
				pts[i] = 0;
				pts[i + 1] = textSize * (i / 4 + 1) * 2;
				pts[i + 2] = width;
				pts[i + 3] = textSize * (i / 4 + 1) * 2;
			}
			p.setColor(res.getColor(R.color.black_90));
			canvas.drawLines(pts, p);


画完线后，再写文本，这里需要注意的就是文本的坐标，d_x,d_y的计算，d_x好说，关键是d_y的值，详情见代码注释， 

// 头部
			// 支付方式
			float tmp = getTextlen(p, "支付方式");
			p.setColor(res.getColor(R.color.main_color));
			// 设置粗体
			Typeface font = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD);
			p.setTypeface(font);
			float d_x = (width / 2 - tmp) / 2;
			float d_y = textSize * 2
					+ (textSize - fm.descent + (fm.bottom - fm.top) / 2);
			canvas.drawText("支付方式", d_x, d_y, p);
			tmp = getTextlen(p, "金额");
			d_x = (int) (width / 2 + ((width / 2 - tmp) / 2));
			canvas.drawText("金额", d_x, d_y, p);
			size = data.keySet().size();
			String[] payway = new String[size];
			data.keySet().toArray(payway);
			// size = payway.length;
			font = Typeface.create(Typeface.SANS_SERIF, Typeface.NORMAL);
			p.setTypeface(font);
			for (int i = 0; i < size; i++) {
				// 每种支付方式都画出来
				p.setColor(res.getColor(R.color.black));
				tmp = getTextlen(p, payway[i]);
				d_x = (width / 2 - tmp) / 2;
				d_y = (textSize * (2 + i) * 2)
						+ (textSize - fm.descent + (fm.bottom - fm.top) / 2);
				canvas.drawText(payway[i], d_x, d_y, p);
				p.setColor(res.getColor(R.color.tab_spinner_color));
				String value = data.get(payway[i]);
				tmp = getTextlen(p, value);
				d_x = (int) (width / 2 + ((width / 2 - tmp) / 2));
				canvas.drawText(value, d_x, d_y, p);

			}

基本情况就这样

源码下载：http://download.csdn.net/detail/ytmfdw/9518286


ytmfdw
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Android自定义View实现BMI指数条
01-05
考虑到这个view的特殊性，最后采用的是自定义的view来完成的。 1.页面布局： <LinearLayout android:layout_width=fill_parent android:layout_height=100dp android:layout_marginLeft=5dp android:layout...
微信小程序使用web-view内嵌H5网页,并调用微信小程序支付
热门推荐
凌风的博客
07-10 5万+
前言：
小程序web-view支付完整流程
Phor的博客
04-16 2044
小程序的web-view中页面发起支付： 该小程序的执行代码主要是引入web-view: 被引入的服务器页面：/pay.html 支付模板 微信支付 } 这个被引入的页面上的按钮：触发后带着订单支付参数跳转到小程序的支付逻辑页面（注意：是跳转到了小程序的支付页面） 小程序的web-view中页面发起支付：/page...
微信小程序web-view支付开发说明，附支付demo
weixin_30547797的博客
04-23 280
我们项目已在公众号上线，目前开发小程序，目标是直接采用web-view，不需要再开发一次，但是小程序的web-view不支持微信支付，只能通过跳回小程序调用小程序支付的API,我写了demo。发起微信支付：wx.requestPayment(OBJECT)示例代码： wx.requestPayment({ 'timeStamp': '', 'nonceStr': ''...
MVP+OKhttp，拦截器+Rxjava+RecyclerView 全选反选，隐藏，显示切换标题
IT666DHW的博客
11-22 502
全选反选，隐藏，显示切换标题                 效果图                                             点击完成显示，点击编辑隐藏，点击全选可全选   首先先导入依赖 [html] view plain copy compil
Android自定义View实现等级滑动条的实例
01-20
Android自定义View实现等级滑动条的实例 实现效果图： 思路： 首先绘制直线，然后等分直线绘制点； 绘制点的时候把X值存到集合中。 然后绘制背景图片，以及图片上的数字。 点击事件down的时候，换小图片为...
Android自定义View系列之Path绘制仿支付宝支付成功动画
01-05
前言 使用支付宝付款时，我们可以看到成功或者失败都会有个动画提示，如果我们需要做这样的效果的话，当然，你可以让设计师给你做个GIF，但是我们知道图像比较耗内存的，我们自己可以用代码实现还是代码实现好点吧。...
Android 自定义view仿支付宝咻一咻功能
08-31
支付宝上有一个咻一咻的功能,就是点击图片后四周有水波纹的这种效果,今天就通过本文给大家分享实现此功能的思路及实例代码，一起看看吧
Android自定义view，实现多画面播放器
11-29
Android自定义view，实现多画面播放器，可以通过设置参数来设置画面个数，双击某个画面可以全屏显示这个画面，并暂停其他画面的播放，可以通过左滑或右滑来播放上一个或下一个视频
微信小程序前端支付代码
moyan的博客
06-06 2599
&lt;view bindtap ="requestPayment"&gt;&lt;/view&gt;// pages/paysrue/paysrue.jsPage({ /** * 页面的初始数据 */ data: { openid: '', order_id: '', paperId: '' }, requestPayment: function(){ v...
实现动画暂停播放
ytmfdw的专栏
04-18 6340
想要实现的功能是：单击动画控件时，能暂停/播放 功能非常简单，但实现起来却没想像中的那么简单，如果不用android的动画，而是自己用线程开始动画，这种方式可以实现，但不推荐 我这里采用的是ObjectAnimator动画，至于这个动画的使用教程，请自行查阅相关资料 ObjectAnimator动画中，有三个方法：         objAnim.start();        
智能电视局域网手机遥控实现
ytmfdw的专栏
02-03 3809
好久没写博客了，今天来写一篇之前实现过的，算是温故而知新吧。         先说下功能：在局域网内，手机来遥控智能电视，都是基于Android系统的，有些手机自带红外线功能，可以不用网络连接，此处不讨论         （此文只讨论手机端实现）        手机与TV之前通过局域网通信，先要建立Socket连接，但手机怎么知道电视的 IP呢？         解决方案有多种，如果只有一
ApkTool原码修改记录
ytmfdw的专栏
05-15 3741
转载请注明：本文源自http://blog.csdn.net/ytmfdw 本人在反编译一个apk时，发现在反编译时总是报错： Exception in thread "main" java.lang.ClassCastException: brut.androlib.res.data.value.ResStringValue cannot be cast to brut.andr
android锁屏
ytmfdw的专栏
04-20 1927
（基于framework 目录下） 一、base/policy/src/com/android/internal/policy/impl/PhoneWindowManager.java       开机执行到：systemReady()方法，调用  mKeyguardMediator.onSystemReady();开始锁屏      修改是否锁屏           public voi
仿淘宝ViewPager左滑加载详情界面
ytmfdw的专栏
01-02 1884
先看效果：
写一个jar来批量处理签名apk
ytmfdw的专栏
04-15 1773
众所周知，给apk进行签名，使用 jarsigner -verbose -keystore android.keystore -signedjar 签名后.apk 待签名.apk  命令 这是有android.keystore文件时，给apk签名，签名时，要输入密码 还有一种情况，就是有platform.pk8和platform.x509.pem这两个文件时，给apk签名（让a
融云与greenDao冲突解决办法
ytmfdw的专栏
05-13 1470
请尊重原创 在做即时通讯开发时，用融云来做，同时数据库使用了greenDao框架，那么问题来了，融云内部内置了greenDao数据库，如果项目中再导入greenDao.jar包时，就会报错，解决办法是：去掉自己导入的greenDao.jar包，这个时候新问题又来了，那些使用greendao-generator自动生成的数据库文件全报错了，报错原因是构造方法不匹配。融云使用的文件加入了参数
自定义scroll-view滚动条
最新发布
10-12
要自定义scroll-view滚动条，可以通过设置scrollbar的样式来实现。具体步骤如下： 1. 在CSS中设置scrollbar的样式，例如： ``` ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background-color: #f1f1f1; } ::-webkit-scrollbar-thumb { background-color: #888; border-radius: 5px; } ``` 2. 在需要添加滚动条的元素上添加样式： ``` overflow-y: scroll; ``` 这样就可以自定义scroll-view滚动条了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ytmfdw

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值