Android自定义View在不同分辨率设备下，出现不兼容。求助！

Question

    各位大神，我的问题是这样子的：我制作了一个很简单View，是用来画折线图的。就是墨迹天气的气温折线图。
    然后我的view是基于480*800的分辨率下设计的。每个point、line都是找好了坐标点的，然后效果挺好的。并且还做了温度自适应的功能，防止温度值超出view的四周界限。于是我以为大功告成，要提交的时候，我突然反应过来，我是基于480*800的，那么就肯定会有兼容性的问题存在。于是我就在320*480和1280*800下测试，结果都是令人失望的。
    我于是去查看网上的方法，说的都是自动适应的。
    我的问题便出来了：
    1.我设计的view里面的点线都是用px，因为画板里面的方法中定位一个point用的都是px去确定位置。换不成dp的单位；
    2.我不想为每一个分辨率做一个新的view，这是十分费时费力的。我将效果图还有工程都全部拷贝上来。请大神给些指导。或者帮我实现一下，然后我在研究。这是在480*800下的效果：
这是在1280*800下的效果：
很明显看见1280*800的整个版面都缩在一块上了。后来xml的布局文件我加上权重后，可以不满。可是折线图的view，就是无法整体变大。效果如下：这张我有做一点点的修改，但是还是可以看出低温折线图还是缩在一块。接下来我把代码拷贝上来：
首先是xml布局：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/www"
    android:orientation="vertical" >    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="25dip"
        android:orientation="horizontal" >        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:text="温度趋势图"
            android:textColor="#FFFFFF" />
    </RelativeLayout>    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="30dip"
        android:layout_gravity="center"
        android:orientation="horizontal"
        android:textColor="#FFFFFF" >        <TextView
            android:id="@+id/Sun"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dip"
            android:layout_weight="1"
            android:text="周日 |"
            android:textColor="#FFFFFF" />        <TextView
            android:id="@+id/Mon"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dip"
            android:layout_weight="1"
            android:text="周一 |"
            android:textColor="#FFFFFF" />        <TextView
            android:id="@+id/Tues"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dip"
            android:layout_weight="1"
            android:text="周二 |"
            android:textColor="#FFFFFF" />        <TextView
            android:id="@+id/Wed"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dip"
            android:layout_weight="1"
            android:text="周三 |"
            android:textColor="#FFFFFF" />        <TextView
            android:id="@+id/Thur"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dip"
            android:layout_weight="1"
            android:text="周四 |"
            android:textColor="#FFFFFF" />        <TextView
            android:id="@+id/Fri"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dip"
            android:layout_weight="1"
            android:text="周五 |"
            android:textColor="#FFFFFF" />        <TextView
            android:id="@+id/Sat"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dip"
            android:layout_weight="1"
            android:text="周六 "
            android:textColor="#FFFFFF" />
    </LinearLayout>    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="25dip"
        android:layout_gravity="center"
        android:orientation="horizontal"
        android:textColor="#FFFFFF" >        <TextView
            android:id="@+id/one"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginLeft="20dip"
            android:text="晴"
            android:textColor="#FFFFFF" />        <TextView
            android:id="@+id/two"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dip"
            android:text="晴"
            android:textColor="#FFFFFF" />        <TextView
            android:id="@+id/three"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dip"
            android:text="晴"
            android:textColor="#FFFFFF" />        <TextView
            android:id="@+id/four"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dip"
            android:text="晴"
            android:textColor="#FFFFFF" />        <TextView
            android:id="@+id/five"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dip"
            android:text="晴"
            android:textColor="#FFFFFF" />        <TextView
            android:id="@+id/six"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dip"
            android:text="晴"
            android:textColor="#FFFFFF" />        <TextView
            android:id="@+id/seven"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dip"
            android:text="晴"
            android:textColor="#FFFFFF" />
    </LinearLayout>    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >        <com.example.weathertrend.TrendView
            android:layout_width="wrap_content"
            android:layout_height="344dip" >
        </com.example.weathertrend.TrendView>
    </LinearLayout>
Android自定义view不兼容分辨率不同

Answer 1

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="25dip"
        android:orientation="horizontal" >        <TextView
            android:id="@+id/onenigth"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginLeft="20dip"
            android:text="晴"
            android:textColor="#FFFFFF" />        <TextView
            android:id="@+id/twonigth"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dip"
            android:text="晴"
            android:textColor="#FFFFFF" />        <TextView
            android:id="@+id/threenigth"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dip"
            android:text="晴"
            android:textColor="#FFFFFF" />        <TextView
            android:id="@+id/fournigth"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dip"
            android:text="晴"
            android:textColor="#FFFFFF" />        <TextView
            android:id="@+id/fivenigth"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dip"
            android:text="晴"
            android:textColor="#FFFFFF" />        <TextView
            android:id="@+id/sixnigth"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dip"
            android:text="晴"
            android:textColor="#FFFFFF" />        <TextView
            android:id="@+id/sevennigth"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dip"
            android:text="晴"
            android:textColor="#FFFFFF" />
    </LinearLayout>    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="25dip"
        android:orientation="horizontal"
        android:textColor="#FFFFFF" >        <TextView
            android:id="@+id/onetime"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginLeft="20dip"
            android:text="01/18"
            android:textColor="#FFFFFF" />        <TextView
            android:id="@+id/twotime"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dip"
            android:text="01/19"
            android:textColor="#FFFFFF" />        <TextView
            android:id="@+id/threetime"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dip"
            android:text="01/20"
            android:textColor="#FFFFFF" />        <TextView
            android:id="@+id/fourtime"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dip"
            android:text="01/21"
            android:textColor="#FFFFFF" />        <TextView
            android:id="@+id/fivetime"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dip"
            android:text="01/22"
            android:textColor="#FFFFFF" />        <TextView
            android:id="@+id/sixtime"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dip"
            android:text="01/23"
            android:textColor="#FFFFFF" />        <TextView
            android:id="@+id/seventime"
            android:layout_width="40dip"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dip"
            android:text="01/24"
            android:textColor="#FFFFFF" />
    </LinearLayout></LinearLayout>

Answer 2

然后是我的view设计：qushi.java
package com.example.weathertest1;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.Paint.Style;import android.util.AttributeSet;import android.view.View;/*
 * 这是一个模仿墨迹天气的温度趋势图。
 * 其中：
 * 1.该view是在分辨率为480*344下计算的
 * 2.view距离lift是40px
 * 3.每个point的间距是65px
 * 4.每個溫度是等份20px(后期实现动态分配)
 * */
public class TrendView extends View { private Paint mPaint;
private Paint mPointPaint;
private Paint mTextPaint;
private Paint mLinePaint;
private Paint mbackLinePaint; private Context mContext; static int[] topTem;
static int[] lowTem;
static int topCha = 0;// 用于调整折线图因为温度值不同，导致图像的不美观。(高温)
static int lowCha = 0;// 用于低温的调节 public TrendView(Context context) { super(context); } public TrendView(Context context, AttributeSet attr) { super(context, attr); } @Override
protected void onDraw(Canvas canvas) { // TODO Auto-generated method stub super.onDraw(canvas); mPaint = new Paint(); mbackLinePaint = new Paint();
mbackLinePaint.setColor(Color.WHITE); mPointPaint = new Paint();
mPointPaint.setAntiAlias(true);
mPointPaint.setColor(Color.WHITE); mLinePaint = new Paint();
mLinePaint.setColor(Color.YELLOW);
mLinePaint.setAntiAlias(true);
mLinePaint.setStrokeWidth(3);
mLinePaint.setStyle(Style.FILL); mTextPaint = new Paint();
mTextPaint.setAntiAlias(true);
mTextPaint.setColor(Color.WHITE);
mTextPaint.setTextSize(22F);// 设置温度值的字体大小 Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.ww0);
// for (int i = 20; i < 440; i += 65) {
// canvas.drawBitmap(bitmap, i, 0f, mPaint); // }
// bitmap = BitmapFactory.decodeResource(getResources(),
// R.drawable.ww1);
// for (int i = 20; i < 440; i += 65) {
// canvas.drawBitmap(bitmap, i, 400f, mPaint); // }
int[] topTem = new int[] { 3, 6, 8, 7, 3, 4, 6 };
int[] lowTem = new int[] { -2, -2, 2, -1, -3, -2, -2 };
int top = 10;
int low = -10;
float space = 0f;
float space1 = 0f;
int temspace = 300 / 30;// 等分10px，这样就有30个温度值。 // 更改参数space、space1的加减程度可以实现对曲线的美观调节
for (int i = 0; i < topTem.length; i++) {
space = (top - topTem[i] + topCha) * temspace;// 调节参数
if (i != topTem.length - 1) {
// 增加图片
bitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.ww2);
canvas.drawBitmap(bitmap, 50 + 100 * i, 45 + space, mPaint);// Y轴从45px开始
// 添加温度数值
space1 = (top - topTem[i + 1] + topCha) * temspace;// 调节参数
canvas.drawText(topTem[i] + "°", 50 + 100 * i, 110 + space,
mTextPaint);
canvas.drawLine(50 + 100 * i, 120 + space, 150 + 100 * i,
120 + space1, mLinePaint);
canvas.drawCircle(50 + 100 * i, 120 + space, 5, mPointPaint);
canvas.drawCircle(50 + 100 * (i + 1), 120 + space1, 5,
mPointPaint);
} else {
bitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.ww5);
canvas.drawBitmap(bitmap, 50 + 100 * i, 45 + space, mPaint);// Y轴从45px开始 canvas.drawText(topTem[i] + "°", 50 + 100 * i, 110 + space,
mTextPaint);
} } // 计算夜晚温度的显示位置
for (int i = 0; i < lowTem.length; i++) {
space = (top - lowTem[i] + lowCha) * temspace;// 调节参数
if (i != lowTem.length - 1) {
//
bitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.ww1);
canvas.drawBitmap(bitmap, 22 + 65 * i, 155 + space, mPaint);// Y轴从155dp开始 space1 = (top - lowTem[i + 1] + lowCha) * temspace;// 调节参数
canvas.drawText(lowTem[i] + "°", 30 + 65 * i, 150 + space,
mTextPaint);
canvas.drawLine(40 + 65 * i, 120 + space, 105 + 65 * i,
120 + space1, mLinePaint);
canvas.drawCircle(40 + 65 * i, 120 + space, 5, mPointPaint);
canvas.drawCircle(40 + 65 * (i + 1), 120 + space1, 5,
mPointPaint);
} else {
bitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.ww3);
canvas.drawBitmap(bitmap, 22 + 65 * i, 155 + space, mPaint);// Y轴从155dp开始 canvas.drawText(lowTem[i] + "°", 30 + 65 * i, 150 + space,
mTextPaint);
} } }}

Answer 3

先获取屏幕分辨率，然后除以7后传递给trendView，将65px改成根据不同分辨率的动态数据试试

Answer 4

为什么是除以7？我后来的实现方法是，按480与800的比，然后每个参数乘以这个系数比。也就是整体按比例放大。效果还行，只是要新建一个trendView。

Answer 5

我知道要用dp，可是canvas的api中的方法所使用的都是px单位。并且我也不知道各个密度比。