Android ApiDemos 系列解析【View-ImageView/ImageButton】

本文涉及的产品
云解析DNS,个人版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
简介:




今天来讲一下两个经典的图像组件:ImageButton 和 ImageView 。

第一讲:ImageView
ImageView layout 文件 位于ApiDemos 的位置: ApiDemos/res/layout/image_view_1.xml,源码为:
 
<? xml version="1.0" encoding="utf-8" ?>

< ScrollView  xmlns:android ="http://schemas.android.com/apk/res/android"
    android:layout_width
="fill_parent"
    android:layout_height
="fill_parent" >
    
    
< LinearLayout
        
android:layout_width ="fill_parent"
        android:layout_height
="fill_parent"
        android:orientation
="vertical" >
        
        
<!--  The following four examples use a large image  -->
        
<!--  1. Non-scaled view, for reference  -->
        
< TextView
            
android:layout_width ="fill_parent"
            android:layout_height
="wrap_content"
            android:paddingTop
="10dip"
            android:text
="@string/image_view_large_normal" />
        
< ImageView
            
android:src ="@drawable/sample_1"
            android:adjustViewBounds
="true"
            android:layout_width
="wrap_content"
            android:layout_height
="wrap_content"   />
            
        
<!--  2. Limit to at most 50x50  -->
        
< TextView
            
android:layout_width ="fill_parent"
            android:layout_height
="wrap_content"
            android:paddingTop
="10dip"
            android:text
="@string/image_view_large_at_most" />
        
< ImageView
            
android:src ="@drawable/sample_1"
            android:adjustViewBounds
="true"
            android:maxWidth
="50dip"
            android:maxHeight
="50dip"
            android:layout_width
="wrap_content"
            android:layout_height
="wrap_content"   />

       
<!--  3. Limit to at most 70x70, with 10 pixels of padding all around  -->
        
< TextView
            
android:layout_width ="fill_parent"
            android:layout_height
="wrap_content"
            android:paddingTop
="10dip"
            android:text
="@string/image_view_large_at_most_padded" />
       
< ImageView
            
android:src ="@drawable/sample_1"
            android:background
="#66FFFFFF"
            android:adjustViewBounds
="true"
            android:maxWidth
="70dip"
            android:maxHeight
="70dip"
            android:padding
="10dip"
            android:layout_width
="wrap_content"
            android:layout_height
="wrap_content"   />
            
        
<!--  4. Limit to exactly 70x70, with 10 pixels of padding all around  -->
        
< TextView
            
android:layout_width ="fill_parent"
            android:layout_height
="wrap_content"
            android:paddingTop
="10dip"
            android:text
="@string/image_view_large_exactly_padded" />
        
< ImageView
            
android:src ="@drawable/sample_1"
            android:background
="#66FFFFFF"
            android:scaleType
="centerInside"
            android:padding
="10dip"
            android:layout_width
="70dip"
            android:layout_height
="70dip"   />

        
<!--  Repeating the previous four examples with small image  -->
        
<!--  1. Non-scaled view, for reference  -->
        
< TextView
            
android:layout_width ="fill_parent"
            android:layout_height
="wrap_content"
            android:paddingTop
="10dip"
            android:text
="@string/image_view_small_normal" />
        
< ImageView
            
android:src ="@drawable/stat_happy"
            android:background
="#FFFFFFFF"
            android:adjustViewBounds
="true"
            android:layout_width
="wrap_content"
            android:layout_height
="wrap_content"   />
            
        
<!--  2. Limit to at most 50x50  -->
        
< TextView
            
android:layout_width ="fill_parent"
            android:layout_height
="wrap_content"
            android:paddingTop
="10dip"
            android:text
="@string/image_view_small_at_most" />
        
< ImageView
            
android:src ="@drawable/stat_happy"
            android:background
="#FFFFFFFF"
            android:adjustViewBounds
="true"
            android:maxWidth
="50dip"
            android:maxHeight
="50dip"
            android:layout_width
="wrap_content"
            android:layout_height
="wrap_content"   />

       
<!--  3. Limit to at most 70x70, with 10 pixels of padding all around  -->
        
< TextView
            
android:layout_width ="fill_parent"
            android:layout_height
="wrap_content"
            android:paddingTop
="10dip"
            android:text
="@string/image_view_small_at_most_padded" />
        
< ImageView
            
android:src ="@drawable/stat_happy"
            android:background
="#FFFFFFFF"
            android:adjustViewBounds
="true"
            android:maxWidth
="70dip"
            android:maxHeight
="70dip"
            android:padding
="10dip"
            android:layout_width
="wrap_content"
            android:layout_height
="wrap_content"   />
            
        
<!--  4. Limit to exactly 70x70, with 10 pixels of padding all around  -->
        
< TextView
            
android:layout_width ="fill_parent"
            android:layout_height
="wrap_content"
            android:paddingTop
="10dip"
            android:text
="@string/image_view_small_exactly_padded" />
        
< ImageView
            
android:src ="@drawable/stat_happy"
            android:background
="#FFFFFFFF"
            android:scaleType
="centerInside"
            android:padding
="10dip"
            android:layout_width
="70dip"
            android:layout_height
="70dip"   />

 
    
</ LinearLayout >
</ ScrollView >
 
  • ScrollView   子节点只允许一个View 视图,如果有多于一个子节点将会报错;
  • android:paddingTop 与上节点边距的填充;
  • android:adjustViewBounds 如果设置为true 图像将自动调整自己的宽主;
  • android:maxWidth 设置图像的最大高;
  • android:maxHeight 设置图像的最大高;
  • android:scaleType  控制如何调整图像大小或者移动范围,以配合ImageView 的大小。下面是 scaleType 所支持的类型:
    Constant Value Description
    matrix 0
    fitXY 1
    fitStart 2
    fitCenter 3
    fitEnd 4
    center 5
    centerCrop 6
    centerInside 7
  • android:padding 设置上、下、左、右的填充
 
ImageView java 文件 位于ApiDemos 的位置: ApiDemos/src/com.example.android.apis.view/ImageView1,源码为:
 


package  com.example.android.apis.view;

import  android.app.Activity;
import  android.os.Bundle;

import  com.example.android.apis.R;


/**
 * Demonstrates setting size constraints on {
@link  android.widget.ImageView}
 *
 
*/
public   class  ImageView1  extends  Activity {
    
    @Override
    
public   void  onCreate(Bundle savedInstanceState) {
        
super .onCreate(savedInstanceState);
        setContentView(R.layout.image_view_1);
    }
}
 
 
在这里,无须多讲此类。
运行效果图如下:
扩展 LinearLayout
看上图效果和代码,ImgeView 始终跟着一个TextView ,从代码角度上有点不雅观,那如何改变它呢?一步一步跟着我做吧。
  • 1、第一步,新建一个包
    com.terry.Ext 做为组件扩展包
  • 2、第二步,新建一个类
    imageViewExt.java 做为组件扩展类
  • 3、第三步,使此类继承 LinearLayout 布局
    public class imageViewExt extends LinearLayout
  • 4、第四步,在构造函数中通过参数判断传进来的值做逻辑,具体代码后如下:
    package  com.terry.Ext;

    import  android.content.Context;
    import  android.graphics.drawable.Drawable;
    import  android.util.AttributeSet;
    import  android.view.LayoutInflater;
    import  android.widget.ImageView;
    import  android.widget.LinearLayout;
    import  android.widget.TextView;

    public   class  imageViewExt  extends  LinearLayout {

        
    private  TextView tv;
        
    private  String labelText;
        
    private   int  FontSize;
        
    private  String Position;
        
    private  Drawable bitmap;
        
    private  ImageView iv;

        
    public  imageViewExt(Context context, AttributeSet attrs) {
            
    super (context, attrs);
            
    //  TODO Auto-generated constructor stub
             int  resourceid;
            resourceid 
    =  attrs.getAttributeResourceValue( null " labelText " 0 );
            
    if  (resourceid  ==   0 ) {
                labelText 
    =  attrs.getAttributeValue( null " labelText " );
            } 
    else  {
                labelText 
    =  getResources().getString(resourceid);
            }
            
    if  (labelText  ==   null ) {
                labelText 
    =   " 默认 " ;
            }
            resourceid 
    =  attrs.getAttributeResourceValue( null " imgSrc " 0 );
            
    if  (resourceid  >   0 ) {
                bitmap 
    =  getResources().getDrawable(resourceid);
            } 
    else  {
                
    throw   new  RuntimeException( " 图像资源为空 " );
            }
            resourceid 
    =  attrs.getAttributeResourceValue( null " FontSize " 0 );
            
    if  (resourceid  ==   0 ) {
                FontSize 
    =  attrs.getAttributeIntValue( null " FontSize " 12 );
            } 
    else  {
                FontSize 
    =  getResources().getInteger(resourceid);
            }

            resourceid 
    =  attrs.getAttributeResourceValue( null " Position " 0 );
            
    if  (resourceid  ==   0 ) {
                Position 
    =  attrs.getAttributeValue( null " Position " );
            } 
    else  {
                Position 
    =  getResources().getString(resourceid);
            }
            
    if  (Position  ==   null ) {
                Position 
    =   " left " ;
            }

            String infService 
    =  Context.LAYOUT_INFLATER_SERVICE;
            LayoutInflater li 
    =  (LayoutInflater) context
                    .getSystemService(infService);
            
    if  ( " left " .equals(Position)) {
                li.inflate(com.terry.R.layout.image_horizontal, 
    this );
            } 
    else   if  ( " top " .equals(Position)) {
                li.inflate(com.terry.R.layout.image_vertical, 
    this );
            } 
    else  {
                
    throw   new  RuntimeException( " 必须为top 和left 属性 " );
            }
            tv 
    =  (TextView) findViewById(com.terry.R.id.TextView01);
            iv 
    =  (ImageView) findViewById(com.terry.R.id.imageview1);
            iv.setImageDrawable(bitmap);
            tv.setTextSize((
    float ) FontSize);

            tv.setText(labelText);

        }

    }
     
    上面通过传进来的资源做判断,先假设传进来的是资源ID,然后判断最后加载不同的XML来布局文件,两个XML文件代码如下:
     
    <? xml version="1.0" encoding="UTF-8" ?>
    < LinearLayout  android:id ="@+id/LinearLayout01"
        android:layout_width
    ="fill_parent"  android:layout_height ="fill_parent"
        xmlns:android
    ="http://schemas.android.com/apk/res/android" >

        
    < TextView  android:id ="@+id/TextView01"  android:layout_width ="wrap_content"
            android:layout_height
    ="wrap_content" ></ TextView >
        
    < ImageView  android:layout_width ="wrap_content"  android:id ="@+id/imageview1"
            android:layout_height
    ="wrap_content" ></ ImageView >
    </ LinearLayout >
     
     
    <? xml version="1.0" encoding="UTF-8" ?>
    < LinearLayout  android:id ="@+id/LinearLayout01"
        android:orientation
    ="vertical"  android:layout_width ="fill_parent"
        android:layout_height
    ="fill_parent"  xmlns:android ="http://schemas.android.com/apk/res/android" >
        
    < TextView  android:id ="@+id/TextView01"  android:layout_width ="wrap_content"
            android:layout_height
    ="wrap_content" ></ TextView >
        
    < ImageView  android:layout_width ="wrap_content"  android:id ="@+id/imageview1"
            android:layout_height
    ="wrap_content" ></ ImageView >
    </ LinearLayout >
     
  • 5、在XML中使用刚扩展的视图 imageViewExt,代码片段如下:
    < com.terry.Ext.imageViewExt  android:id ="@+id/img"
                android:clickable
    ="true"  android:layout_width ="wrap_content"
                labelText
    ="封装ImageExt"  imgSrc ="@drawable/stat_happy"  Position ="top"
                android:layout_height
    ="wrap_content" >
            
    </ com.terry.Ext.imageViewExt >
     
    Tip: com.terry.Ext.imageViewExt 此句为你的包名加你的扩展视图名称。效果如下:

    在这里你可以通过设置Position 调整图片和文本的位置这就是一个简单扩展组件的DEMO 当然,要扩展还会涉及到动态设置获取还有事件监听等内容,这些我们以后慢慢摸索。
第二讲:ImageButton
ImageButton layout 文件 位于ApiDemos 的位置: ApiDemos/res/layout/image_button_1.xml,源码为:
< LinearLayout  xmlns:android ="http://schemas.android.com/apk/res/android"
    android:layout_width
="fill_parent"
    android:layout_height
="fill_parent"
    android:orientation
="vertical" >

    
< ImageButton
        
android:layout_width ="100dip"
        android:layout_height
="50dip"
        android:src
="@android:drawable/sym_action_call"   />
        
       
< ImageButton
        
android:layout_width ="wrap_content"
        android:layout_height
="wrap_content"
        android:src
="@android:drawable/sym_action_chat"   />     
        
       
< ImageButton
        
android:layout_width ="wrap_content"
        android:layout_height
="wrap_content"
        android:src
="@android:drawable/sym_action_email"   />     
</ LinearLayout >
 
其中: android:src ="@android:drawable/sym_action_chat" 此字样的文字为调用系统内置icon ,系统图标大全可点击如下: 图标大全
 
ImageButton java 文件 位于ApiDemos 的位置: ApiDemos/src/com.example.android.apis.view/ImageButton1,源码为:
 
ExpandedBlockStart.gif
 

package  com.example.android.apis.view;

import  android.app.Activity;
import  android.os.Bundle; 


import  com.example.android.apis.R;


public   class  ImageButton1  extends  Activity {
    
    @Override
    
public   void  onCreate(Bundle savedInstanceState) {
        
super .onCreate(savedInstanceState);
        setContentView(R.layout.image_button_1); 
    }
}
 
由于只是加载内容,这里不做介绍,运行效果如下:
 
使用XML为ImageButton做交互事件
有看过上篇文章的朋友肯定知道如何为按钮做按下弹起图片交互的事件操作,由于ImageButton 是一个变型的Button 故它在事件上也是跟有Button 的点击或者Touch事件,但是ImageView 并不是TextView 的子类,故它并不支持settext的方法或者指定文本,如果需要使其有支持文本功能,建议有二:A,不使用ImageButton 支持使用Button ,Button 可使用BackGround做图片并加文字 ;B,扩展组件,在onDraw 事件里面为ImageButton 画文字 ,具体可参照上边代码。
那么如何才能使用XML为ImageButton 做图片切换的交互呢?看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/button_pressed"   />   
    
< item  state_focused ="true"  android:drawable ="@drawable/button_focused"   />   
    
<!--   <item android:drawable="@drawable/icon" />  default  -->

</ selector >
然后设置ImageButton 的SRC 图片路径:
< ImageButton  android:id ="@+id/ImageButton01"  android:src ="@drawable/my_image"
        android:layout_width
="wrap_content"  android:layout_height ="wrap_content" >
    
</ ImageButton >
Tip:XML文件必须于res/drawable 中的任意文件夹,代表该XML为图像XML文件索引。
假如真需要使用JAVA编码来实现也可以,具体你可以参照上篇博文: Android ApiDemo 系列解析【View->Button】
运行效果如下:



 本文转自 terry_龙 51CTO博客,原文链接:http://blog.51cto.com/terryblog/364963,如需转载请自行联系原作者


相关文章
|
10天前
|
Java 调度 Android开发
深入解析Android应用开发中的响应式编程与RxJava应用
在现代Android应用开发中,响应式编程及其核心框架RxJava正逐渐成为开发者的首选。本文将深入探讨响应式编程的基本概念、RxJava的核心特性以及如何在Android应用中利用RxJava提升代码的可读性和性能。 【7月更文挑战第7天】
|
1月前
|
XML 存储 JSON
51. 【Android教程】JSON 数据解析
51. 【Android教程】JSON 数据解析
36 2
|
6天前
|
开发工具 Android开发 Swift
安卓与iOS开发环境的差异性解析
【7月更文挑战第11天】在移动应用开发的广阔天地中,安卓与iOS两大阵营各据一方,它们的开发环境差异如同东西方文化的差异一样鲜明。本文将深入探讨这两个平台在开发工具、编程语言、用户界面设计以及系统架构等方面的不同,旨在为开发者提供一个清晰的对比视角,帮助他们根据项目需求和个人偏好选择最合适的开发路径。
|
25天前
|
前端开发 JavaScript 测试技术
安卓应用开发中的架构模式解析
【6月更文挑战第21天】在软件开发领域,架构模式是设计优雅、高效、可维护应用程序的基石。本文深入探讨了安卓应用开发中常见的架构模式,包括MVC、MVP、MVVM和Clean Architecture,旨在为开发者提供一个清晰的指导,帮助他们选择最适合自己项目的架构风格。通过对比分析这些架构模式的特点、优势以及适用场景,文章揭示了如何根据项目需求和团队能力来采用恰当的架构模式,以实现代码的可维护性、可扩展性和可测试性。
31 7
|
25天前
|
Java 开发工具 Android开发
安卓与iOS开发差异解析
【6月更文挑战第21天】本文旨在深入探讨安卓和iOS两大移动操作系统在应用开发过程中的主要差异。通过对比分析,揭示各自的设计哲学、编程语言选择、用户界面构建、性能优化策略以及发布流程的异同。文章将提供开发者视角下的实用信息,帮助他们更好地理解各自平台的特点和挑战,从而做出更明智的开发决策。
|
1月前
|
搜索推荐 Android开发 iOS开发
深入解析安卓与iOS操作系统的异同
安卓和iOS是目前两大主流移动操作系统,它们分别代表了开放性和封闭性的设计理念。本文将从系统架构、用户界面、应用生态等方面深入探讨安卓和iOS之间的异同,帮助读者更好地理解这两个操作系统的特点和优势。
51 3
|
1月前
|
XML Java Android开发
15. 【Android教程】按钮 Button/ImageButton
15. 【Android教程】按钮 Button/ImageButton
21 2
|
1月前
|
XML 存储 JavaScript
50. 【Android教程】xml 数据解析
50. 【Android教程】xml 数据解析
23 1
|
1月前
|
XML Java Android开发
04. 【Android教程】Android 工程解析及使用
04. 【Android教程】Android 工程解析及使用
21 0
04. 【Android教程】Android 工程解析及使用
|
2月前
|
缓存 Java Android开发
构建高效的Android应用:内存优化策略解析
【5月更文挑战第25天】在移动开发领域,性能优化一直是一个不断探讨和精进的课题。特别是对于资源受限的Android设备来说,合理的内存管理直接关系到应用的流畅度和用户体验。本文深入分析了Android内存管理的机制,并提出了几种实用的内存优化技巧。通过代码示例和实践案例,我们旨在帮助开发者识别和解决内存瓶颈,从而提升应用性能。

推荐镜像

更多