New UI-带图片(drawableXxx)的TextView

New UI-带图片(drawableXxx)的TextView

 ——转载请注明出处:coder-pig,欢迎转载,请勿用于商业用途!

小猪Android开发交流群已建立,欢迎大家加入,无论是新手,菜鸟,大神都可以,小猪一个人的

力量毕竟是有限的,写出来的东西肯定会有很多纰漏不足,欢迎大家指出,集思广益,让小猪的博文

更加的详尽,帮到更多的人,O(∩_∩)O谢谢!

小猪Android开发交流群:小猪Android开发交流群群号:421858269

新Android UI实例大全目录:http://blog.csdn.net/coder_pig/article/details/42145907

本节引言:

在实际开发的时候我们可能会遇到这种情况：

一个小图片+一个文字,然后放在一个LinearLayout中,这样需要4个LinearLayout,很明显

很浪费,这个时候我们就可以用到一个drawableTop来设置一个带图片的TextView!

本节正文:

1.基本用法:

设置图片的核心其实就是:drawableXxx;可以设置四个方向的图片:

drawableTop(上),drawableButtom(下),drawableLeft(左),drawableRight(右)

另外,你也可以使用drawablePadding来设置图片与文字间的间距:drawablePadding

这里演示下:

[html]   view plain  copy  print ?

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     tools:context="com.jay.example.test.MainActivity" >  
6.   
7.     <TextView  
8.         android:layout_width="wrap_content"  
9.         android:layout_height="wrap_content"  
10.         android:layout_centerInParent="true"  
11.         android:drawableTop="@drawable/show1"  
12.         android:drawableLeft="@drawable/show1"  
13.         android:drawableRight="@drawable/show1"  
14.         android:drawableBottom="@drawable/show1"  
15.         android:drawablePadding="10dp"  
16.         android:text="张全蛋" />  
17.   
18. </RelativeLayout>  

运行截图:

另外,还有一个问得比较多的一个问题就是:

2.如何来设置这个drawable的大小?

是不能直接在xml进行设置的,这就需要我们在Java代码中来进行修改了:

Java代码示例如下:

[java]   view plain  copy  print ?

1. package com.jay.example.test;  
2.   
3. import android.app.Activity;  
4. import android.graphics.drawable.Drawable;  
5. import android.os.Bundle;  
6. import android.widget.TextView;  
7.   
8. public class MainActivity extends Activity {  
9.   
10.     private TextView txtZQD;  
11.   
12.     @Override  
13.     protected void onCreate(Bundle savedInstanceState) {  
14.         super.onCreate(savedInstanceState);  
15.         setContentView(R.layout.activity_main);  
16.         txtZQD = (TextView) findViewById(R.id.txtZQD);  
17.         Drawable[] drawable = txtZQD.getCompoundDrawables();  
18.         // 数组下表0~3,依次是:左上右下  
19.         drawable[1].setBounds(100, 0, 200, 200);  
20.         txtZQD.setCompoundDrawables(drawable[0], drawable[1], drawable[2],  
21.                 drawable[3]);  
22.     }  
23. }  

看下效果先:

代码分析:

①Drawable[] drawable = txtZQD.getCompoundDrawables( );

获得四个不同方向上的图片资源,数组元素依次是:左上右下的图片

②drawable[1].setBounds(100, 0, 200, 200);
接着获得资源后,可以调用setBounds设置左上右下坐标点,比如这里设置了代表的是:

长是:从离文字最左边开始100dp处到200dp处

宽是:从文字上方0dp处往上延伸200dp!

③txtZQD.setCompoundDrawables(drawable[0], drawable[1], drawable[2],
drawable[3]);

为TextView重新设置drawable数组!没有图片可以用null代替哦!

再接着就是

3..9图片的问题

在Java代码中为TextView设置Drawable的代码如下:

[java]   view plain  copy  print ?

1. Drawable top = getResources().getDrawable(R.drawable.ic);   
2. top.setBounds(0, 20, top.getMinimumWidth(),top.getMinimumHeight() + 20);   
3. view.setCompoundDrawables(top, null,null, null);   

最后再分享一个

4.将png转换为bitmap的方法吧:

[java]   view plain  copy  print ?

1. //Drawable转换为Bitmap的方法  
2.     public static Bitmap drawableToBitmap(Drawable drawable) {  
3.                  
4.             Bitmap bitmap = Bitmap  
5.                             .createBitmap(  
6.                                             drawable.getIntrinsicWidth(),  
7.                                             drawable.getIntrinsicHeight(),  
8.                                             drawable.getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888  
9.                                                             : Bitmap.Config.RGB_565);  
10.             Canvas canvas = new Canvas(bitmap);  
11.             //canvas.setBitmap(bitmap);  
12.             drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());  
13.             drawable.draw(canvas);  
14.             return bitmap;  
15.     }  

好了,关于TextView设置不同方向的Drawable就介绍到这里~