第三组UI组件:ImageView及其子类
imageView 继承了View组件,它能显示任何drawable对象,除此之外,ImageView还派生出了ImageButton、ZoomButton等组件,ImageView支持的xml属性也适用于ImageButton、ZoomButton。
一、ImageView支持的xml属性
xml属性 | 方法 | 说明 |
---|---|---|
android:adjustViewBounds | setAdjustViewBounds(boolean) | 设置ImageView是否调整自己的边界来保持显示图片的长宽比 |
android:cropToPadding | setCropToPadding(boolean) | 如果属性值为true,该组件会被裁剪到保留ImageView的padding |
android:maxHeight | setMaxHeight(int) | 设置ImageView的最大高度 |
android:maxWidth | setMaxWidth(int) | 设置ImageView的最大宽度 |
android:scaleType | setScaleType(ImageView.ScaleType) | 设置所显示的图片如何缩放以使用Imageview的大小 |
android:src | setImageResource(int) | 设置ImageView所显示的drawable对象的ID |
android:scaleType属性支持的属性值有
- matrix :使用matrix方式进行缩放
- fitXY :对图片横向纵向独立缩放以适应ImageView,图片的横纵比可能会改变
- fitStart:保持横向比缩放,直到图片完全显示在ImageView中,缩放完后图片显示在ImageView的左上角
- fitCenter:保持横向比缩放,直到图片完全显示在ImageView中,缩放完后图片显示在ImageView的中央
- fitEnd:保持横向比缩放,直到图片完全显示在ImageView中,缩放完后图片显示在ImageView的右下角
- center:把图片放在ImageView中央,不进行缩放
- centerCrop:保持横向比缩放,使得图片完全覆盖ImageView
- centerInside:保持横向比缩放,使得ImageView完全显示该图片
为了控制ImageView显示的图片,ImageView提供了如下方法
- setImageBitmap(Bitmap bm):使用位图设置ImageView显示的图片
- setImageDrawable(Drawable drawable):使用Drawable对象设置ImageView显示的图片
- setImageResource(int resld):使用图片资源ID设置ImageView显示的图片
- setImageURI(Uri uri):使用图片的URI设置ImageView显示的图片
实例:图片浏览器
- app/src/main/res/layout/mian_layout.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:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn1"
android:background="@drawable/bg_color"
android:text="模糊"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn2"
android:background="@drawable/bg_color"
android:text="清晰"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn3"
android:background="@drawable/bg_color"
android:text="下一张"/>
</LinearLayout>
<!--保持横纵比例缩放图片,并把图片放在中间-->
<ImageView
android:layout_width="wrap_content"
android:layout_height="300dp"
android:id="@+id/img1"
android:src="@drawable/bike"
android:scaleType="fitCenter"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center_horizontal">
<ImageView
android:layout_width="150dp"
android:layout_height="120dp"
android:id="@+id/img2"
android:background="#00f"
android:layout_margin="10dp"/>
<TextView
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="图片的alpha值为250"
android:id="@+id/message"/>
</LinearLayout>
</LinearLayout>
- app/java/com/example/MainActivity.java
public class MainActivity extends Activity {
//定义图片数组
int[] images=new int[]{
R.drawable.bike,
R.drawable.catong,
R.drawable.hill,
R.drawable.house,
R.drawable.lake
};
//定义默认显示的图片
int currentImag=0;
//定义初始透明度
int alpha=225;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final Button dim=(Button)findViewById(R.id.btn1);
final Button clear=(Button)findViewById(R.id.btn2);
final Button next =(Button)findViewById(R.id.btn3);
final ImageView image1=(ImageView)findViewById(R.id.img1);
final ImageView image2=(ImageView)findViewById(R.id.img2);
final TextView text = (TextView) findViewById(R.id.message);
//定义切换图片的监听
next.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
image1.setImageResource(images[++currentImag%images.length]);
}
});
//定义改变图片透明度的监听
dim.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
alpha+=20;
if (alpha<=225){
image1.setImageAlpha(alpha);
text.setText("此时图片的alpha值为:" + alpha);
}
}
});
clear.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
alpha-=20;
if(alpha>=0) {
image1.setImageAlpha(alpha);
text.setText("此时图片的alpha值为:" + alpha);
}
}
});
//为image1设置监听事件,当发生触摸事件时,部分图片显示在image2中
image1.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
BitmapDrawable bitmapDrawable=(BitmapDrawable)image1.getDrawable();
//获取第一个图片显示框中的位图
Bitmap bitmap=bitmapDrawable.getBitmap();
//bitMap图片实际大小与第一个ImageView的缩放比例
double scale=1.0*bitmap.getHeight()/image1.getHeight();
//获取需要显示的图片的开始点
int x=(int)(event.getX()*scale);
int y=(int)(event.getY()*scale);
if(x+120>bitmap.getWidth()){
x=bitmap.getWidth()-120;
}
if (y+120>bitmap.getWidth()){
y=bitmap.getHeight()-120;
}
//显示图片指定的区域
image2.setImageBitmap(Bitmap.createBitmap(bitmap,x,y,120,120));
image2.setImageAlpha(alpha);
return false;
}
});
}
}
二、ImageButton和ZoomButton
ImageButton和Button的区别在于,Button生成的按钮显示文字,而ImageButton显示图片。ImageButton还派生出了ZoomButton,ZoomButton可以代表放大、缩小两个按钮,Android默认提供了btn_minus、btn_plus两个Drawable资源,只要为ZoomButton的android:src属性分别指定btn_minus、btn_plus,即可实现放大缩小按钮。
Android还提供了ZoomControl组件,该组件相当于同时包含了方法缩小按钮,并允许分别为他们设置监听。
实例:可变按钮
- app/src/main/res/layout/mian_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/menu1"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/btn_selector"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_horizontal"
android:layout_margin="10sp">
<ZoomButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/btn_plus"/>
<ZoomButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/btn_minus"/>
</LinearLayout>
<ZoomControls
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"/>
</LinearLayout>
- app/src/main/res/drawable/btn_select.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="@drawable/menu4"/>
<item android:state_pressed="false"
android:drawable="@drawable/menu5"/>
</selector>
三、QuickContactBadge
QuickContactBadge继承了ImageView,也可以通过设置android:src属性指定它显示的图片,该图片可以关联手机中的联系人,当用户单击该图片时,系统会打开相应联系人的联系方式界面。
为了让QuickContactBadge与特定联系人联系,android提供了一下方法:
- assignContactFormEmail(String email,boolean lazyLookup):将该图片关联到指定Email地址对应的联系人
- assignContactFormPhone(String phoneNumber,boolean lazyLookup):将该图片关联到指定电话号码对应的联系人
- assignContactUri(Uri contact uri):将该图片关联到指定Uri对应的联系人
实例:图片与联系人关联
- app/src/main/res/layout/mian_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top"
android:background="@color/color1">
<QuickContactBadge
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/badge"
android:src="@drawable/contanct"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我的偶像"
android:textSize="16dp"/>
</LinearLayout>
- app/java/com/example/MainActivity.java
public class QuickContactBadgeTest extends Activity{
QuickContactBadge badge;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.quickcontactbadge_test);
badge=(QuickContactBadge)findViewById(R.id.badge);
badge.assignContactFromPhone("17865166639",false);
}