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

vaecer 2013-05-24 10:13:32

各位大神，我的问题是这样子的：我制作了一个很简单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>

...全文

386 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

vaecer 2013-06-25

打赏
举报

引用 4 楼 DrSmart 的回复:

你这个单位不对，都是像素当然要出问题了，乘以密度才对

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

vaecer 2013-06-25

打赏
举报

引用 3 楼 Lily1017155026 的回复:

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

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

DrSmart 2013-06-24

打赏
举报

你这个单位不对，都是像素当然要出问题了，乘以密度才对

雨中的jasmine 2013-06-24

打赏
举报

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

vaecer 2013-05-24

打赏
举报

然后是我的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);
			}

		}

	}

}

vaecer 2013-05-24