Android自定义View实现地铁显示牌效果
本文实例为大家分享了Android地铁显示牌的具体代码，供大家参考，具体内容如下
预览效果
目录
SubwayBoardView.java
代码
public class SubwayBoardView extends View {
private Paint bgPaint, tbPaint, centerBgPaint, centerRingPaint, centerCirclePaint, centerCircleRingPaint, noStationPaint, stationPaint, doorPaint;
private TextPaint centerTextPaint, stationTextPaint, currentStationTextPaint, doorTextPaint;
private float barHeight = DensityUtil.dp2Px(getContext(), 20);
private float centerCircleWidth;
private float centerRingWidth;
private float centerCircleRingStrokeWidth = DensityUtil.dp2Px(getContext(), 5);
private float centerRingStrokeWidth = DensityUtil.dp2Px(getContext(), 36);
private float centerCircleRingSweepAngle = 0f;
private ObjectAnimator centerCircleRingAnim;
private List<String> noStationStrs = new ArrayList<>();
private List<String> stationStrs = new ArrayList<>();
private String currentStationStrs = "杭州站";
private Bitmap doorBitmap;
private Camera camera;
public SubwayBoardView(Context context) {
super(context);
initView();
}
public SubwayBoardView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
initView();
}
public SubwayBoardView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView();
}
private void initView() {
//全背景
bgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
bgPaint.setStyle(Paint.Style.FILL);
bgPaint.setColor(Color.parseColor("#85919a"));
//上下边栏
tbPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
tbPaint.setStyle(Paint.Style.FILL);
tbPaint.setColor(Color.parseColor("#c21b2c"));
//中间栏
centerBgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
centerBgPaint.setStyle(Paint.Style.FILL);
centerBgPaint.setColor(Color.parseColor("#92a3d1"));
//中间空白圆环区域
centerRingPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
centerRingPaint.setStyle(Paint.Style.STROKE);
centerRingPaint.setStrokeWidth(centerRingStrokeWidth);
centerRingPaint.setColor(Color.parseColor("#85919a"));
//中间圆
centerCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
centerCirclePaint.setStyle(Paint.Style.FILL);
centerCirclePaint.setColor(Color.parseColor("#c21b2c"));
//中间圆边上的圆环
centerCircleRingPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
centerCircleRingPaint.setStyle(Paint.Style.STROKE);
centerCircleRingPaint.setStrokeWidth(centerCircleRingStrokeWidth);
centerCircleRingPaint.setStrokeCap(Paint.Cap.ROUND);
centerCircleRingPaint.setColor(Color.parseColor("#6e8ca6"));
//中间文字
centerTextPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
centerTextPaint.setStyle(Paint.Style.FILL);
centerTextPaint.setFakeBoldText(true);
centerTextPaint.setColor(Color.parseColor("#333333"));
centerTextPaint.setTextAlign(Paint.Align.CENTER);
centerTextPaint.setShadowLayer(3, 3, 3, Color.parseColor("#6e8ca6"));
centerTextPaint.setTextSize(DensityUtil.sp2px(getContext(), 24));
//未到达的站
noStationPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
noStationPaint.setStyle(Paint.Style.FILL_AND_STROKE);
noStationPaint.setColor(Color.parseColor("#c21b2c"));
//未到站文字
stationTextPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
stationTextPaint.setStyle(Paint.Style.FILL);
stationTextPaint.setColor(Color.parseColor("#333333"));
stationTextPaint.setTextAlign(Paint.Align.CENTER);
stationTextPaint.setShadowLayer(3, 3, 3, Color.parseColor("#6e8ca6"));
stationTextPaint.setTextSize(DensityUtil.sp2px(getContext(), 18));
noStationStrs.add("宁波站");
noStationStrs.add("上虞站");
noStationStrs.add("绍兴站");
//已到达的站
stationPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
stationPaint.setStyle(Paint.Style.FILL_AND_STROKE);
stationPaint.setColor(Color.parseColor("#7586b2"));
stationStrs.add("南京站");
stationStrs.add("苏州站");
stationStrs.add("上海站");
//到站文字
currentStationTextPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
currentStationTextPaint.setStyle(Paint.Style.FILL);
currentStationTextPaint.setFakeBoldText(true);
currentStationTextPaint.setColor(Color.parseColor("#3d5d9a"));
currentStationTextPaint.setTextAlign(Paint.Align.LEFT);
currentStationTextPaint.setTextSize(DensityUtil.sp2px(getContext(), 18));
doorPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
doorBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.open_door);
doorTextPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
doorTextPaint.setStyle(Paint.Style.FILL);
doorTextPaint.setColor(Color.parseColor("#c21b2c"));
doorTextPaint.setTextAlign(Paint.Align.LEFT);
doorTextPaint.setTextSize(DensityUtil.sp2px(getContext(), 14));
camera = new Camera();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = getWidth();
int height = getHeight();
int centerX = width / 2;
int centerY = height / 2;
//计算中间空白圆形宽度
if (0 == centerRingWidth) {
centerRingWidth = (height - DensityUtil.dp2Px(getContext(), 12)) * 1f / 2;
}
//计算中间圆的半径
if (0 == centerCircleWidth) {
centerCircleWidth = centerRingWidth - DensityUtil.dp2Px(getContext(), 8);
}
//背景
canvas.drawRect(0, 0, width, height, bgPaint);
//上下栏
canvas.drawRect(0, 0, width, barHeight, tbPaint);
canvas.drawRect(0, height - barHeight, width, height, tbPaint);
//中间圆环空白区域
canvas.drawCircle(centerX, centerY, centerRingWidth, centerRingPaint);
//中间栏
float centerLineT = barHeight + DensityUtil.dp2Px(getContext(), 10);
float centerLineB = height - barHeight - DensityUtil.dp2Px(getContext(), 10);
canvas.drawRect(0, centerLineT, width, centerLineB, centerBgPaint);
//中间圆
canvas.drawCircle(centerX, centerY, centerCircleWidth, centerCirclePaint);
//中间圆环
if (centerCircleRingSweepAngle > 0) {
canvas.drawArc(centerX - centerCircleWidth - (centerCircleRingStrokeWidth / 2), centerY - centerCircleWidth - (centerCircleRingStrokeWidth / 2), centerX + centerCircleWidth + (centerCircleRingStrokeWidth / 2), centerY + centerCircleWidth + (centerCircleRingStrokeWidth / 2), -90f, centerCircleRingSweepAngle, false, centerCircleRingPaint);
}
//中间文字
Paint.FontMetrics fontMetrics = centerTextPaint.getFontMetrics();
float dx = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
canvas.drawText(currentStationStrs, centerX, centerY + dx, centerTextPaint);
//未到站
float stationStart = DensityUtil.dp2Px(getContext(), 20);
float stationWidth = DensityUtil.dp2Px(getContext(), 40);
float stationPadding = DensityUtil.dp2Px(getContext(), 20);
for (int i = 0; i < noStationStrs.size(); i++) {
canvas.drawPath(getStationView(stationStart + (stationWidth + stationPadding) * i, stationWidth, centerLineT, centerLineB), noStationPaint);
//保存画布
canvas.save();
String stationStr = noStationStrs.get(i);
Paint.FontMetrics fm = stationTextPaint.getFontMetrics();
//文字高度
float fontHeight = (fm.bottom - fm.top) * stationStr.length();
//显示高度
float showHeigth = centerLineB - centerLineT;
//移动画布
canvas.translate(stationStart + (stationWidth + stationPadding) * i + stationWidth / 3, centerLineT + (showHeigth - fontHeight) / 2);
float strWidth = stationTextPaint.measureText(stationStr) / stationStr.length();
StaticLayout staticLayout;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
staticLayout = StaticLayout.Builder.obtain(stationStr, 0, stationStr.length(), stationTextPaint, (int) strWidth).build();
} else {
staticLayout = new StaticLayout(stationStr, stationTextPaint, (int) strWidth, Layout.Alignment.ALIGN_CENTER, 1, 0, true);
}
//绘制
staticLayout.draw(canvas);
//还原画布
canvas.translate(-stationStart + (stationWidth + stationPadding) * i, -centerLineT);
canvas.restore();
}
//已过站
float stationEnd = getWidth() - DensityUtil.dp2Px(getContext(), 20) - stationWidth;
for (int i = 0; i < stationStrs.size(); i++) {
canvas.drawPath(getStationView(stationEnd - (stationWidth + stationPadding) * i, stationWidth, centerLineT, centerLineB), stationPaint);
//保存画布
canvas.save();
String stationStr = noStationStrs.get(i);
Paint.FontMetrics fm = stationTextPaint.getFontMetrics();
//文字高度
float fontHeight = (fm.bottom - fm.top) * stationStr.length();
//显示高度
float showHeigth = centerLineB - centerLineT;
//移动画布
canvas.translate(stationEnd - (stationWidth + stationPadding) * i + stationWidth / 3, centerLineT + (showHeigth - fontHeight) / 2);
float strWidth = stationTextPaint.measureText(stationStr) / stationStr.length();
StaticLayout staticLayout;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
staticLayout = StaticLayout.Builder.obtain(stationStr, 0, stationStr.length(), stationTextPaint, (int) strWidth).build();
} else {
staticLayout = new StaticLayout(stationStr, stationTextPaint, (int) strWidth, Layout.Alignment.ALIGN_CENTER, 1, 0, true);
}
//绘制
staticLayout.draw(canvas);
//还原画布
canvas.translate(-stationStart + (stationWidth + stationPadding) * i, -centerLineT);
canvas.restore();
}
//到达站
String curentStr = "停靠站" + currentStationStrs;
float fontwidth = stationTextPaint.measureText(curentStr) / curentStr.length();
float pointX = centerX - centerRingWidth - fontwidth * 3 - DensityUtil.dp2Px(getContext(), 26);
Paint.FontMetrics fm = stationTextPaint.getFontMetrics();
float pointY = centerLineT + ((centerLineB - centerLineT) - (fm.bottom - fm.top) * 2) / 2;
canvas.save();
canvas.translate(pointX, pointY);
StaticLayout staticLayout;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
staticLayout = StaticLayout.Builder.obtain(curentStr, 0, curentStr.length(), stationTextPaint, (int) (fontwidth * 3)).build();
} else {
staticLayout = new StaticLayout(curentStr, stationTextPaint, (int) (fontwidth * 3), Layout.Alignment.ALIGN_CENTER, 1, 0, true);
}
//绘制
staticLayout.draw(canvas);
canvas.translate(-pointX, -centerLineT);
canvas.restore();
//开门提示
String primt = "注意开门";
float doorTextWidth = doorTextPaint.measureText(primt);
Paint.FontMetrics doorTextFm = doorTextPaint.getFontMetrics();
float doorTextheight = doorTextFm.bottom - doorTextFm.top;
float dy = doorTextheight / 2 - doorTextFm.bottom;
int doorTextLeft = (int) (centerX + centerRingWidth + DensityUtil.dp2Px(getContext(), 26));
Rect rect = new Rect();
rect.left = (int) (doorTextLeft + ((doorTextWidth - doorBitmap.getWidth()) / 2));
rect.top = (int) (centerLineT + ((centerLineB - centerLineT) - (doorBitmap.getHeight() + DensityUtil.dp2Px(getContext(), 6) + + doorTextheight)) / 2);
rect.right = rect.left + doorBitmap.getWidth();
rect.bottom = rect.top + doorBitmap.getHeight();
//旋转
canvas.save();
camera.save();
canvas.translate(rect.left, rect.top);
camera.rotateY(-45);
camera.applyToCanvas(canvas);
canvas.translate(-rect.left, -rect.top);
camera.restore();
canvas.drawBitmap(doorBitmap, null, rect, doorPaint);
canvas.restore();
canvas.drawText(primt, doorTextLeft, rect.bottom + DensityUtil.dp2Px(getContext(), 6) + (doorTextheight / 2) + dy, doorTextPaint);
}
/**
* 获取站信息
*
* @param pl
* @param width
* @param centerLineT
* @param centerLineB
* @return
*/
private Path getStationView(float pl, float width, float centerLineT, float centerLineB) {
float pt = centerLineT;
float pr = pl + width;
float pb = centerLineB;
float r = (pr - pl) / 3;
Path path = new Path();
path.moveTo(pl, pt);
path.lineTo(pr, pt);
path.quadTo(pr - r, pt + (pb - pt) / 2, pr, pb);
path.lineTo(pl, pb);
path.quadTo(pl - r, pt + (pb - pt) / 2, pl, pt);
path.close();
return path;
}
public void setCenterCircleRingSweepAngle(float centerCircleRingSweepAngle) {
this.centerCircleRingSweepAngle = centerCircleRingSweepAngle;
invalidate();
}
/**
* 开始中间圆动画
*/
public void animCenterCircleRing() {
if (null == centerCircleRingAnim) {
centerCircleRingAnim = ObjectAnimator.ofFloat(this, "centerCircleRingSweepAngle", 0f, 360f);
centerCircleRingAnim.setDuration(3000);
centerCircleRingAnim.setInterpolator(new LinearInterpolator());
centerCircleRingAnim.setRepeatCount(ValueAnimator.INFINITE);
centerCircleRingAnim.setRepeatMode(ValueAnimator.RESTART);
}
centerCircleRingAnim.start();
}
/**
* 停止
*/
public void stopAnimCenterCircleRing() {
if (null != centerCircleRingAnim) {
centerCircleRingAnim.cancel();
}
setCenterCircleRingSweepAngle(0);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Android画画板的制作方法
本文实例为大家分享了Android画画板展示的具体代码,供大家参考,具体内容如下 main.xml布局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_w
-
Android实现画板、写字板功能（附源码下载）
前言 本文给大家分享一个使用Android开发写字板功能Dem.简单操作内存中的图像.对图像进行简单的处理.绘制直线.以达到写字板的效果 效果图如下 XML布局代码 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="
-
android实现简单的画画板实例代码
直接看代码,注释都写清楚了 复制代码 代码如下: public class MainActivity extends Activity { private ImageView iv; private Bitmap baseBitmap; private Canvas canvas; private Paint paint; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedIns
-
Android自定义SurfaceView实现画板功能
接触了这么久的View,总不能一直停留在View里,现在开始呢,就要学习一个新的知识点:SurfaceView,实际上SurfaceView与View的原理都差不多,只是效率和渲染方式上,SurfaceView要优于View,这也是我们写这个的原因.今天就看看这个SurfaceView,好了,下面就是今天要说的效果. 界面很简单,就是一个按钮以及一个画板,先看看界面的代码吧 <LinearLayout xmlns:android="http://schemas.android.com/ap
-
Android编程实现画板功能的方法总结【附源码下载】
本文实例讲述了Android编程实现画板功能的方法.分享给大家供大家参考,具体如下: Android实现画板主要有2种方式,一种是用自定义View实现,另一种是通过Canvas类实现.当然自定义View内部也是用的Canvas.第一种方式的思路是,创建一个自定义View(推荐SurfaceView),在自定义View里通过Path对象记录手指滑动的路径调用lineTo()绘制:第二种方式的思路是,先用Canvas绘制一张空的Bitmap,通过ImageView的setImageBitmap()方
-
Android多媒体之画画板开发案例分享
先看看效果: 其实画画板的原理很简单,就是首先记录下按下屏幕的点,然后每移动一下就让这两次移动的点连线,周而复始,图像就由很多条直线构成了. 核心代码 : public class MainActivity extends Activity implements OnClickListener,OnSeekBarChangeListener { private View red_view,green_view,blue_view; //控制画笔颜色的三块区域 private SeekBar se
-
Android自定义View实现地铁显示牌效果
本文实例为大家分享了Android地铁显示牌的具体代码,供大家参考,具体内容如下 预览效果 目录 SubwayBoardView.java 代码 public class SubwayBoardView extends View { private Paint bgPaint, tbPaint, centerBgPaint, centerRingPaint, centerCirclePaint, centerCircleRingPaint, noStationPaint, stationPain
-
Android自定义View实现弹性小球效果
照例先看效果图 自定义代码示例 public class BezierView extends View { Paint paint;//画笔 Path path;//路径 int radius = 50;//圆的半径 int time = 100;//计数时长 int index; int offsetIndex; float viewX, viewY;//图形中心点坐标 float width;//屏幕宽度 float partWidth;//屏幕宽度的1/4 int paddingLeft
-
Android自定义View实现折线图效果
下面就是结果图(每种状态用一个表情图片表示): 一.主页面的布局文件如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height=&quo
-
Android自定义VIew实现卫星菜单效果浅析
一 概述: 最近一直致力于Android自定义VIew的学习,主要在看<android群英传>,还有CSDN博客鸿洋大神和wing大神的一些文章,写的很详细,自己心血来潮,学着写了个实现了类似卫星效果的一个自定义的View,分享到博客上,望各位指点一二.写的比较粗糙,见谅.(因为是在Linux系统下写的,效果图我直接用手机拍的,难看,大家讲究下就看个效果,勿喷). 先来看个效果图,有点不忍直视: 自定义VIew准备: (1)创建继承自View的类; (2)重写构造函数; (3)定义属性. (
-
Android自定义View实现拖拽效果
腾讯QQ有那种红点拖动效果,今天就来实现一个简单的自定义View拖动效果,再回到原处,并非完全仿QQ红点拖动. 先来看一下效果图 简单说一下实现步骤 1.创建一个类继承View 2.绘制出一个小球 3.重写onTouchEvent,来根据手指放下,移动,抬起,来控制小球 4.直接在布局中引用 先贴一张图看下View的坐标系 下面就贴一下代码,最后会给出源码 public class CustomView extends View { private int lastX; private int
-
Android自定义view之围棋动画效果的实现
前言 废话不多说直接开始 老规矩,文章最后有源码 完成效果图 棋子加渐变色 棋子不加渐变色 一.测量 1.获取宽高 @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mWidth = w; mHeight = h; useWidth = mWidth; if (mWidth > mHeight) { useWidth =
-
Android自定义view之3D正方体效果实例
目录 前言 一.小提 二.将传感器改成事件分发机制 三.使用 四.源码 总结 前言 在之前写了一篇关于3D效果的文章,借助传感器展示,有小伙伴问可不可以改成手势滑动操作(事件分发),所以出一篇文章 传感器相关文章链接:Android 3D效果的实现 一.小提 相对于常见的自定义view而言,继承的GLSurfaceView只有两个构造函数.可以理解为没有提供获取自定义属性的方法. public TouchSurfaceView(Context context) { super(context);
-
Android自定义View实现标签流效果
本文实例为大家分享了Android自定义View实现标签流效果的具体代码,供大家参考,具体内容如下 一.概述 Android自定义View实现标签流效果,一行放不下时会自动换行,用户可以自己定义单个标签的样式,可以选中和取消,可以监听单个标签的点击事件,功能还算强大,可以满足大部分开发需求,值得推荐,效果图如下: 二.实现代码 1.自定义View 定义属性文件 <declare-styleable name="FlowTagView"> <attr n
-
Android自定义View实现数字雨效果的全过程
目录 效果图 实现步骤 总结 效果图 在安卓中多种类型的动画,有帧动画.补间动画.属性动画,除此之外,使用自定义的View结合数学公式,就可以绘制出复杂的界面或者动画.这篇文章记录的是仿照黑客帝国的数字雨,来看看效果吧. 实现步骤 准备工作,常量的配置信息 // 文字的颜色值 final int DEFAULT_TEXT_COLOR = Color.argb(255, 0, 255, 70); // 文字大小 final int TEXT_SIZE = 24; // 普通画笔 Paint mPa
-
Android自定义View实现星星评分效果
目录 前言 1.测量与图片的绘制 2.事件的交互与计算 3. 回调处理与自定义属性抽取 后记 前言 在前面的学习中,我们基本了解了一些 Canvas 的绘制,那么这一章我们一起复习一下图片的绘制几种方式,和事件的简单交互方式. 我们从易到难,作为基础的进阶控件,我们从最简单的交互开始,那就自定义一个星星评分的控件吧. 一个 App 必不可少的评论系统打分的控件,可以展示评分,可以点击评分,可以滑动评分.它的实现总体上可以分为以下的步骤: 强制测量大小为我们指定的大小 先绘制Drawable未评分