仿华为天气预报UI

近来公司事前较少，再来找几个有意思的View练练手，下面是原生华为天气预报界面：

下面是仿的UI交互效果：

**思路：

1.平移画布到View中心，先绘制一个圆弧，绘制中间文字

2.旋转画布，绘制小短线，同时绘制中间的温度和下边的图片

3.确定0摄氏度的位置，确定每日温差之间共覆盖多少角度

4.算出最小温度的起始角，根据cos,sin计算坐标，绘制温度数字。

5.算出最小温度的短线索引，加粗变色绘制。**

1.首先在onMeasure中保证View宽高。

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int wrap_Len = 600;
        int width = measureDimension(wrap_Len, widthMeasureSpec);
        int height = measureDimension(wrap_Len, heightMeasureSpec);
        int len=Math.min(width,height);
        //保证是一个正方形
        setMeasuredDimension(len,len);

    }
    public int measureDimension(int defaultSize, int measureSpec){
        int result;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);
        if(specMode == MeasureSpec.EXACTLY){
            result = specSize;
        }else{
            result = defaultSize;   //UNSPECIFIED
            if(specMode == MeasureSpec.AT_MOST){
                result = Math.min(result, specSize);
            }
        }
        return result;
    }
然后开始平移画布，绘制一个圆弧

        mWidth=getWidth();
        mHeight=getHeight();
        radius=(mWidth-getPaddingLeft()-getPaddingRight())/2;//半径
        canvas.translate(mWidth/2,mHeight/2);

 private void drawArcView(Canvas canvas) {
        RectF mRect=new RectF(-radius,-radius,radius,radius);
        //canvas.drawRect(mRect,mArcPaint);
        canvas.drawArc(mRect,startAngle,sweepAngle,false,mArcPaint);
    }

效果如图：

2.旋转画布，绘制小短线

以一定的角度旋转画布，循环画出短线

private void drawLine(Canvas canvas) {
        canvas.save();
        float angle = (float)sweepAngle/count;//刻度间隔
        canvas.rotate(-270+startAngle);//将起始刻度点旋转到正上方
        for(int i=0;i<=count;i++){
            if(i==0 || i==count){
                mLinePaint.setStrokeWidth(1);
                mLinePaint.setColor(Color.WHITE);
                canvas.drawLine(0,-radius,0,-radius+40,mLinePaint);

            }else if(i>=getStartLineIndex(minTemp,maxTemp) && i<=getEndLineIndex(minTemp,maxTemp)){
                mLinePaint.setStrokeWidth(3);
                mLinePaint.setColor(getRealColor(minTemp,maxTemp));
                canvas.drawLine(0,-radius,0,-radius+30,mLinePaint);

            }else {
                mLinePaint.setStrokeWidth(2);
                mLinePaint.setColor(Color.WHITE);
                canvas.drawLine(0,-radius,0,-radius+30,mLinePaint);
            }

            canvas.rotate(angle);//逆时针旋转
        }
        canvas.restore();
    }

效果如图：

然后绘制中间的温度和下边的图片，并注释掉绘制圆环的方法

 private void drawTextBitmapView(Canvas canvas) {
        mTextPaint.setTextSize(144);
        canvas.drawText(currentTemp+"°",0,0+getTextPaintOffset(mTextPaint),mTextPaint);
        canvas.drawBitmap(bitmap,0-bitmap.getWidth()/2,radius-bitmap.getHeight()/2-30,null);

    }

其中getTextPaintOffset（）函数改变文字的Y坐标偏移量

 public float getTextPaintOffset(Paint paint){
        Paint.FontMetricsInt fontMetrics = paint.getFontMetricsInt();
        return  -fontMetrics.descent+(fontMetrics.bottom-fontMetrics.top)/2;
    }

效果如图：

3.然后确定0摄氏度在圆环中的位置，设为230度的位置为0度

计算圆环中230度的X，y坐标。

  //根据角获得X坐标  R*cos&+getTextPaintOffset(mTextPaint)-off
    private float getCosX(int Angle){

        return (float) (radius*Math.cos(Angle*Math.PI/180))+getTextPaintOffset(mTextPaint);
    }
    private float getSinY(int Angle){

        return (float)(radius*Math.sin(Angle*Math.PI/180))+getTextPaintOffset(mTextPaint);
    }

因为平移的坐标系，此时要根据象限决定偏移量的正负

private float getRealCosX(int Angle,int off,boolean outoff){
        if(!outoff){
            off=-off;
        }
        if(getCosX(Angle)<0){
            return getCosX(Angle)-off;
        }else{
            return getCosX(Angle)+off;
        }
    }
    private float getRealSinY(int Angle,int off,boolean outoff){
        if(!outoff){
            off=-off;
        }
        if(getSinY(Angle)<0){
            return getSinY(Angle)-off;
        }else{
            return getSinY(Angle)+off;
        }
    }

有了正确的X,Y坐标即可绘制出文字。有了0摄氏度的位置就能确定当天温度范围的具体角。

//根据当天温度范围获得扇形开始角。
    private int getStartAngle(int minTemp,int maxTemp){
        int startFgAngle=0;
        if(minTemp>=maxTemp){
            Log.e("ws","getStartAngle---?fail");
            return startFgAngle;
        }
        if(minTemp<=0){
            startFgAngle=ocAngle - (0 - minTemp)*fgAngle/(maxTemp-minTemp);
        }else{
            startFgAngle=ocAngle+(minTemp-0)*fgAngle/(maxTemp-minTemp);
        }
        //边界 start
        if(startFgAngle<=startAngle){//如果开始角小于startAngle，防止过边界
            startFgAngle=startAngle+10;
        }else if((startFgAngle+fgAngle)>=(startAngle+sweepAngle)){//如果结束角大于(startAngle+sweepAngle)
            startFgAngle =startAngle+sweepAngle-20-fgAngle;
        }
        //边界 end
        return startFgAngle;
    }

求出具体角后就可以确定X，Y坐标了

   private void drawTempLineView(Canvas canvas) {
        mTextPaint.setTextSize(24);
        canvas.drawText("0°C",getRealCosX(ocAngle,offset,true),getRealSinY(ocAngle,offset,true),mTextPaint);//固定0度的位置

        int startTempAngle=getStartAngle(minTemp,maxTemp);
       /* if(startTempAngle<=startAngle){//如果开始角小于startAngle，防止过边界
            startTempAngle=startAngle+10;
        }else if((startTempAngle+fgAngle)>=(startAngle+sweepAngle)){//如果结束角大于(startAngle+sweepAngle)
            startTempAngle =startAngle+sweepAngle-20-fgAngle;
        }*/
        canvas.drawText(minTemp + "°", getRealCosX(startTempAngle, offset,true), getRealSinY(startTempAngle, offset,true), mTextPaint);
        canvas.drawText(maxTemp + "°", getRealCosX(startTempAngle+fgAngle, offset,true), getRealSinY(startTempAngle+fgAngle, offset,true), mTextPaint);

       // int circleAngle = startTempAngle+(currentTemp-minTemp)*fgAngle/(maxTemp-minTemp);
       // mPointPaint.setColor(getRealColor(minTemp,maxTemp));
        //canvas.drawCircle(getRealCosX(circleAngle,50,false),getRealSinY(circleAngle,50,false),7,mPointPaint);
    }

然后就是要绘制这段温度范围的线颜色，以及当前温度的点

绘制点：

int circleAngle = startTempAngle+(currentTemp-minTemp)*fgAngle/(maxTemp-minTemp);
        mPointPaint.setColor(getRealColor(minTemp,maxTemp));
        canvas.drawCircle(getRealCosX(circleAngle,50,false),getRealSinY(circleAngle,50,false),7,mPointPaint);

绘制当天温度范围的线，即在drawLine方法中加上

else if(i>=getStartLineIndex(minTemp,maxTemp) && i<=getEndLineIndex(minTemp,maxTemp)){
                mLinePaint.setStrokeWidth(3);
                mLinePaint.setColor(getRealColor(minTemp,maxTemp));
                canvas.drawLine(0,-radius,0,-radius+30,mLinePaint);

//根据当天温度范围获取开始短线的索引
   private int getStartLineIndex(int minTemp,int maxTemp){
       return  (getStartAngle(minTemp,maxTemp)-startAngle)/(sweepAngle/count);
   }
    private int getEndLineIndex(int minTemp,int maxTemp){
        return  (getStartAngle(minTemp,maxTemp)-startAngle)/(sweepAngle/count)+fgAngle/(sweepAngle/count);
    }
    //根据温度返回颜色值
    public int getRealColor(int minTemp,int maxTemp){
       if(maxTemp<=0){
         return Color.parseColor("#00008B");//深海蓝
       }else if(minTemp<=0 && maxTemp>0){
           return Color.parseColor("#4169E1");//黄君兰
       }else if(minTemp>0 && minTemp<15 ){
           return Color.parseColor("#40E0D0");//宝石绿
       }else if(minTemp>=15 && minTemp<25){
           return Color.parseColor("#00FF00");//酸橙绿
       }else if(minTemp>=25 &&minTemp<30){
           return Color.parseColor("#FFD700");//金色
       }else  if(minTemp>=30){
           return Color.parseColor("#CD5C5C");//印度红
       }

        return Color.parseColor("#00FF00");//酸橙绿;
    }

最终效果图



import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

/**
 * Created by ws on 2017/2/25.
 */

public class NowHwWeatherView extends View {

    private Paint mArcPaint;
    private Paint mLinePaint;
    private Paint mTextPaint;
    private Paint mPointPaint;

    private float mWidth;
    private float mHeight;
    private float radius;//半径

    private int startAngle;//圆弧开始角
    private int sweepAngle;//圆弧总角度数
    private int count;//圆弧被分的份数

    private int currentTemp;//当前温度
    private int maxTemp;
    private int minTemp;
    private Bitmap bitmap;
    private int ocAngle;//0度初始角
    private int fgAngle;//总覆盖的角
    private int offset;

    public NowHwWeatherView(Context context) {
        this(context,null);
    }

    public NowHwWeatherView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public NowHwWeatherView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        init(context);
    }

    private void init(Context context) {
        initPaint();

        startAngle=120;
        sweepAngle=300;
        count=60;//刻度份数

        currentTemp=26;
        maxTemp=27;
        minTemp=20;
        bitmap= BitmapFactory.decodeResource(context.getResources(), R.drawable.w16);
        ocAngle=230;
        fgAngle=90;
        offset=22;
    }

    private void initPaint() {
        mArcPaint=new Paint();
        mArcPaint.setColor(Color.WHITE);
        mArcPaint.setStrokeWidth(2);
        mArcPaint.setStyle(Paint.Style.STROKE);
        mArcPaint.setAntiAlias(true);

        mLinePaint=new Paint();
        mLinePaint.setColor(Color.WHITE);
        mLinePaint.setStrokeWidth(2);
        mLinePaint.setStyle(Paint.Style.STROKE);
        mLinePaint.setAntiAlias(true);

        mTextPaint=new TextPaint();
        mTextPaint.setColor(Color.WHITE);
        mTextPaint.setStrokeWidth(4);
        mTextPaint.setAntiAlias(true);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
        mTextPaint.setTextSize(144);

        mPointPaint=new Paint();
        mPointPaint.setColor(Color.WHITE);
        mPointPaint.setStrokeWidth(2);
        mPointPaint.setStyle(Paint.Style.FILL);
        mPointPaint.setAntiAlias(true);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int wrap_Len = 600;
        int width = measureDimension(wrap_Len, widthMeasureSpec);
        int height = measureDimension(wrap_Len, heightMeasureSpec);
        int len=Math.min(width,height);
        //保证是一个正方形
        setMeasuredDimension(len,len);

    }
    public int measureDimension(int defaultSize, int measureSpec){
        int result;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);
        if(specMode == MeasureSpec.EXACTLY){
            result = specSize;
        }else{
            result = defaultSize;   //UNSPECIFIED
            if(specMode == MeasureSpec.AT_MOST){
                result = Math.min(result, specSize);
            }
        }
        return result;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mWidth=getWidth();
        mHeight=getHeight();
        radius=(mWidth-getPaddingLeft()-getPaddingRight())/2;//半径
        canvas.translate(mWidth/2,mHeight/2);

        //drawArcView(canvas);//画圆环
        drawLine(canvas);//画短线
        drawTextBitmapView(canvas);//画中间的温度和下边的图片
        drawTempLineView(canvas);//画动态温度

    }

    private void drawTempLineView(Canvas canvas) {
        mTextPaint.setTextSize(24);
        //canvas.drawText("0°C",getRealCosX(ocAngle,offset,true),getRealSinY(ocAngle,offset,true),mTextPaint);//固定0度的位置

        int startTempAngle=getStartAngle(minTemp,maxTemp);
       /* if(startTempAngle<=startAngle){//如果开始角小于startAngle，防止过边界
            startTempAngle=startAngle+10;
        }else if((startTempAngle+fgAngle)>=(startAngle+sweepAngle)){//如果结束角大于(startAngle+sweepAngle)
            startTempAngle =startAngle+sweepAngle-20-fgAngle;
        }*/
        canvas.drawText(minTemp + "°", getRealCosX(startTempAngle, offset,true), getRealSinY(startTempAngle, offset,true), mTextPaint);
        canvas.drawText(maxTemp + "°", getRealCosX(startTempAngle+fgAngle, offset,true), getRealSinY(startTempAngle+fgAngle, offset,true), mTextPaint);

        int circleAngle = startTempAngle+(currentTemp-minTemp)*fgAngle/(maxTemp-minTemp);
        mPointPaint.setColor(getRealColor(minTemp,maxTemp));
        canvas.drawCircle(getRealCosX(circleAngle,50,false),getRealSinY(circleAngle,50,false),7,mPointPaint);
    }

    private void drawArcView(Canvas canvas) {
        RectF mRect=new RectF(-radius,-radius,radius,radius);
        //canvas.drawRect(mRect,mArcPaint);
        canvas.drawArc(mRect,startAngle,sweepAngle,false,mArcPaint);
    }

    private void drawLine(Canvas canvas) {
        canvas.save();
        float angle = (float)sweepAngle/count;//刻度间隔
        canvas.rotate(-270+startAngle);//将起始刻度点旋转到正上方
        for(int i=0;i<=count;i++){
            if(i==0 || i==count){
                mLinePaint.setStrokeWidth(1);
                mLinePaint.setColor(Color.WHITE);
                canvas.drawLine(0,-radius,0,-radius+40,mLinePaint);

            }else if(i>=getStartLineIndex(minTemp,maxTemp) && i<=getEndLineIndex(minTemp,maxTemp)){
                mLinePaint.setStrokeWidth(3);
                mLinePaint.setColor(getRealColor(minTemp,maxTemp));
                canvas.drawLine(0,-radius,0,-radius+30,mLinePaint);

            }else {
                mLinePaint.setStrokeWidth(2);
                mLinePaint.setColor(Color.WHITE);
                canvas.drawLine(0,-radius,0,-radius+30,mLinePaint);
            }

            canvas.rotate(angle);//逆时针旋转
        }
        canvas.restore();
    }
    private void drawTextBitmapView(Canvas canvas) {
        mTextPaint.setTextSize(144);
        canvas.drawText(currentTemp+"°",0,0+getTextPaintOffset(mTextPaint),mTextPaint);
        canvas.drawBitmap(bitmap,0-bitmap.getWidth()/2,radius-bitmap.getHeight()/2-30,null);

    }

    public float getTextPaintOffset(Paint paint){
        Paint.FontMetricsInt fontMetrics = paint.getFontMetricsInt();
        return  -fontMetrics.descent+(fontMetrics.bottom-fontMetrics.top)/2;
    }
    //根据角获得X坐标  R*cos&+getTextPaintOffset(mTextPaint)-off
    private float getCosX(int Angle){

        return (float) (radius*Math.cos(Angle*Math.PI/180))+getTextPaintOffset(mTextPaint);
    }
    private float getSinY(int Angle){

        return (float)(radius*Math.sin(Angle*Math.PI/180))+getTextPaintOffset(mTextPaint);
    }
    //根据象限加一个偏移量
    private float getRealCosX(int Angle,int off,boolean outoff){
        if(!outoff){
            off=-off;
        }
        if(getCosX(Angle)<0){
            return getCosX(Angle)-off;
        }else{
            return getCosX(Angle)+off;
        }
    }
    private float getRealSinY(int Angle,int off,boolean outoff){
        if(!outoff){
            off=-off;
        }
        if(getSinY(Angle)<0){
            return getSinY(Angle)-off;
        }else{
            return getSinY(Angle)+off;
        }
    }
    //根据当天温度范围获得扇形开始角。
    private int getStartAngle(int minTemp,int maxTemp){
        int startFgAngle=0;
        if(minTemp>=maxTemp){
            Log.e("ws","getStartAngle---?fail");
            return startFgAngle;
        }
        if(minTemp<=0){
            startFgAngle=ocAngle - (0 - minTemp)*fgAngle/(maxTemp-minTemp);
        }else{
            startFgAngle=ocAngle+(minTemp-0)*fgAngle/(maxTemp-minTemp);
        }
        //边界 start
        if(startFgAngle<=startAngle){//如果开始角小于startAngle，防止过边界
            startFgAngle=startAngle+10;
        }else if((startFgAngle+fgAngle)>=(startAngle+sweepAngle)){//如果结束角大于(startAngle+sweepAngle)
            startFgAngle =startAngle+sweepAngle-20-fgAngle;
        }
        //边界 end
        return startFgAngle;
    }
    //根据当天温度范围获取开始短线的索引
   private int getStartLineIndex(int minTemp,int maxTemp){
       return  (getStartAngle(minTemp,maxTemp)-startAngle)/(sweepAngle/count);
   }
    private int getEndLineIndex(int minTemp,int maxTemp){
        return  (getStartAngle(minTemp,maxTemp)-startAngle)/(sweepAngle/count)+fgAngle/(sweepAngle/count);
    }
    //根据温度返回颜色值
    public int getRealColor(int minTemp,int maxTemp){
       if(maxTemp<=0){
         return Color.parseColor("#00008B");//深海蓝
       }else if(minTemp<=0 && maxTemp>0){
           return Color.parseColor("#4169E1");//黄君兰
       }else if(minTemp>0 && minTemp<15 ){
           return Color.parseColor("#40E0D0");//宝石绿
       }else if(minTemp>=15 && minTemp<25){
           return Color.parseColor("#00FF00");//酸橙绿
       }else if(minTemp>=25 &&minTemp<30){
           return Color.parseColor("#FFD700");//金色
       }else  if(minTemp>=30){
           return Color.parseColor("#CD5C5C");//印度红
       }

        return Color.parseColor("#00FF00");//酸橙绿;
    }

    public void setBitmap(Bitmap mBitmap){
        this.bitmap=mBitmap;
        invalidate();
     }
}
时间： 2024-04-20 01:41:56

仿华为天气预报UI的相关文章

Android控件：高仿微信主UI

高仿微信主UI 之前在Android组件:Fragment切换后保存状态 一文中讲到了Fragment切换后,是如何保存原来的状态的,最重要的就是用add方法取代现在各种教程常见的replace方法.然而我发现有不少App都貌似采用ViewPager + Fragment来做主UI的.于是在Android组件:Fragment切换后保存状态 的基础上加入了ViewPager,看了下微信界面,要高仿就尽力模仿到最像,所以也把ActionBar也修改成微信的样子. 先上一张效果图: 布局 我知道微信

仿JD商城UI布局达到90%——Android源码

仿JD商城UI布局达到90% 仿JD商城UI布局达到90% 下载地址:http://www.devstore.cn/code/info/1063.html 运行截图:     热门源码下载: 高仿京东商城 Android快速开发不可或缺的11个工具类 Android快速开发框架LoonAndroid Android应用源码比较不错的新闻客户端 版权声明:本文为博主原创文章,未经博主允许不得转载.

仿易信UI设计

  大家好,这是前段时间仿易信Android客户端UI做的一个小程序,资源就是易信客户端里面找的,作为练手学习之用,希望大家喜欢! 首先是第一次使用的导航页面,效果图: 主要是处理当手左右滑动时小圆点也跟随切换的问题,这个页面的逻辑代码如下: public class WelcomeActivity extends Activity{ ViewPager mPager; MyAdapter myAdapter; List<View> views=new ArrayList<View>

android自定义View之(六)------高仿华为荣耀3C的圆形刻度比例图(ShowPercentView)

为什么写这篇文章: 显示当前的容量所占的比例,表现当前计划的进度,一般都会采用百分比的方式,而图形显示,以其一目了然的直观性和赏心悦目的美观形成为了我们的当然的首选. 在图形表示百分比的方法中,我们有用画圆的圆形进度条的方法<<android自定义View之(二)------简单进度条显示样例篇>>,也有用画弧形的进度条的方法<<android自定义View之(三)------视频音量调控样例>>,今天看到华为荣耀3C的一个界面: 个人觉得这个表示比例的圆形

Android 高仿华为手机Tab页滑动导航效果

首先带大家看一下实现效果,用了两种实现方式: 1.基于LinearLayout实现,导航栏不可响应手指滑动 2.基于HorizontalScrollView实现,导航栏可响应手指滑动 实现方式虽然不一样,但是使用的是一样的,因为我接口封装的一模一样,下面看实现效果. 基于LinearLayout的实现: 基于HorizontalScrollView的实现: 两者效果一样,区别就在于导航条可否随用户操作滑动. 下面只说明LinearLayout实现,HorizontalScrollView仅仅是套

Android仿华为天气绘制刻度盘

效果图 可以看到这个自定义控件结合了颜色渐变.动态绘制刻度.动态水球效果.接下来我们就来看看这个效果是如何一步一步实现的. 开始自定义控件 和很多自定义控件方式一样需要去基础某种View或者某种ViewGroup 我这里选择的是View,如下所示: public class HuaWeiView extends View { /** * 用来初始化画笔等 * @param context * @param attrs */ public HuaWeiView(Context context, @

仿写及比较标哥的iOS时钟动画

一.前言 以前看各种绚丽的UI特效动画代码,采用的方法是会先运行一篇,然后直接去看实现代码.初学时抱着瞻仰的态度去接触,去认识,是没有错的.但是在了解了像素.动画渲染机制,CoreAnimation API,推导过二维.三维的仿射矩阵之后,我们可以改变阅读UI动画博文或者是源码的方式了. Talk is cheap, show me the code——Linus Torvalds. 大量的仿写:一定一定要多写——叶孤城__ 在CodeReview线下大会上的发言. 最近安居客.猿题库.蘑菇街.

高仿QQ源码下载 （android前端+JAVA后台+spark&lt;windows版聊天&gt;）方便集成到自己系统

 A openfire (XMPP+开源源码); B android前端源码(仿QQ高大上UI); C JAVA后台源码(UI高大上HTML5);  Dspark(windows版);  系统主要实现为:JAVA后台(springmvc+mybaits)+openfire(xmpp推送)+android(asmark+ActiveAndroid+async-http+universal-image-loader)+spark(windows版);  android前端 1.集成Activie

盘点2014不容错过的UI源码

好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适.简单.自由.充分体现软件的定位和特点.有没有想要的效果还没有实现的,这里有现成的UI源码哦,需要的拿去. QQ v4.7.0全新UI 本源码不过多介绍,如其名,众所周知QQ v4.7.0全新UI http://www.devstore.cn/code/info/400.html ?? 仿微米网Android客户端全部UI 仿微米网Android客户端全部UI包含首页,发布,个人中心,圈子,群主,联系人. http://www.d