在使用ImageButton时,图片被缩放的原因及解决方法

在使用ImageButton时,发现图片被缩小,总是不能铺满按钮,一时找不到原因,实在是让人无奈,只能采用笨办法,把图片做的比按钮大,即使缩小了也能铺满按钮。


        后来注意到ndroid工程中有三个目录(drawable-ldpi、drawable-mdpi、drawable-hdpi)都是可以放置图片的,于是尝试了下,把图片在每个路径下都放一份,结果问题解决了。


        原来这与屏幕的精细度相关的,不同设备的LCD精细度(即每英寸的像素点数目)不一样,同样的图片在不同精细度的LCD上显示的效果就可能不一样,应用模块可能需准备不同的图片来适应不同精细度。


        在android工程中,是用图片放置的目录来区分的,三个目录对应的精细度如下:

120: drawable-ldpi

160: drawable-mdpi

240: drawable-hdpi

用户还可以将图片放置drawable目录下,这个默认是对应160精细度的。

三个目录下图片,在不同精细度的LCD上,具体是按怎样的缩放比例显示的,本人也说不清,下面做了测试:

把同一张图片复制几次,在drawable、drawable-ldpi、drawable-mdpi、drawable-hdpi都放置一份,将图片名字分别命名为dpi.png、ldpi.png、mdpi.png、hdpi.png,然后在程序中分别创建几组图片按钮(ImageButton),查看显示效果:



截图中依次是120、160、240三种精细度的模拟器的显示效果,可以看出只有放在与LCD精细度相对应的目录下的图片才能正常显示,不被缩放:

120的模拟器上第二行的图片显示正常,其他的均被缩放

160的模拟器上第一行(drawable目录是对应160的精细度)和第三行的图片显示正常,其他均被缩放

240的模拟器上第四行的图片显示正常,其他均被缩放


       如果应用模块要运行在这几种LCD精细度的设备上,就应该这三个目录下分别放置一份图片,这样才能保证图片显示正常。

另外一种方法,在xml中定义ImageButton时,加上属性android:scaleType="fitXY",这样也可以保证图片与按钮指定的大小一致,但图片因为被缩放,可能会模糊。


代码很简单,主要是布局:

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <LinearLayout 
    	android:orientation="horizontal"
    	android:layout_width="fill_parent"
    	android:layout_height="120px"
    >
    	<ImageButton 
			android:id="@+id/button0"
			android:layout_width="130px"
			android:layout_height="73px"
			android:src="@drawable/dpi"
		/>
		<ImageButton 
			android:id="@+id/button01"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:src="@drawable/dpi"
		/>
		<TextView 
			android:id="@+id/text0"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="@drawable/dpi"
		/>
    </LinearLayout>
    <LinearLayout 
    	android:orientation="horizontal"
    	android:layout_width="fill_parent"
    	android:layout_height="120px"
    >
    	<ImageButton 
			android:id="@+id/button1"
			android:layout_width="130px"
			android:layout_height="73px"
			android:src="@drawable/ldpi"
		/>
		<ImageButton 
			android:id="@+id/button11"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:src="@drawable/ldpi"
		/>
		<TextView 
			android:id="@+id/text1"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="@drawable/ldpi"
		/>
    </LinearLayout>
    <LinearLayout 
    	android:orientation="horizontal"
    	android:layout_width="fill_parent"
    	android:layout_height="120px"
    >
    	<ImageButton 
			android:id="@+id/button2"
			android:layout_width="130px"
			android:layout_height="73px"
			android:src="@drawable/mdpi"
		/>
		<ImageButton 
			android:id="@+id/button21"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:src="@drawable/mdpi"
		/>
		<TextView 
			android:id="@+id/text2"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="@drawable/mdpi"
		/>
    </LinearLayout>
    <LinearLayout 
    	android:orientation="horizontal"
    	android:layout_width="fill_parent"
    	android:layout_height="120px"
    >
    	<ImageButton 
			android:id="@+id/button3"
			android:layout_width="130px"
			android:layout_height="73px"
			android:src="@drawable/hdpi"
		/>
		<ImageButton 
			android:id="@+id/button31"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:src="@drawable/hdpi"
		/>
		<TextView 
			android:id="@+id/text3"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="@drawable/hdpi"
		/>
    </LinearLayout>
</LinearLayout>


阅读更多
个人分类: android
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭