Android UI编程之自定义控件初步(上)——ImageButton
来源:互联网 发布:好用的眼部精华 知乎 编辑:程序博客网 时间:2024/06/03 12:35
概述:
我想我们在使用一些App的时候,应该不会出现一些“裸控件”的吧。除非是一些系统中的软件,那是为了保持风格的一致性,做出的一些权衡。我这里并非是在指责Android原生的控件不好看,说实在的,我很喜欢Android的一些原生控件。只是有些时候为了风格的一致性,就不得不去花些功夫在美工上。这于美工这一点,我对某讯的产品的确欣赏。下面就让我们开始一点一点学习Android UI编程中的自定义控件。
分析:
自定义控件就点像堆积木,并给它涂上颜色,和功能说明。下面就让我们用一个例子来逐一地简单讨论一下。
示例分析:
效果图展示:
本示例将选取ImageButton来做一个简单地分析。下面先来看看运行效果图:
搭建基本雏形:
对于雏形,首先要做的是积木的选择。我们选择的是一个ImageView和一个TextView,上下摆放,然后用一个约束将其绑定在一起。如下所示的代码片段:
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center_vertical" android:orientation="vertical" > <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:paddingBottom="5dip" android:paddingTop="5dip" android:src="@drawable/right_icon" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="5dp" android:text="确定" android:textColor="#000000" /></LinearLayout>上面的代码只能让我们得到一个如上所示的中间方形图和下方的文本以及紧贴在这两者边缘的一个约束。
外观设计和功能添加:
外观设计:
现在我们就要进行颜色分配和功能说明了,它被实现在Java代码中了。如下关键代码:
/** * 设置图片资源 */ public void setImageResource(int resId) { imageView.setImageResource(resId); } /** * 设置显示的文字 */ public void setTextViewText(String text) { textView.setText(text); }
功能添加:
而对于此我们仅仅只是让这个“Button”更好看了一些罢了。于是我们现在还要做另外一件事。例如点击后要有一些指定的、绑定死的、使用这个控件所必然会进行的操作。其实和上面的加外套是一个性质。如下关键代码:@Override public void setOnClickListener(OnClickListener l) { auxiliaryFunction(); super.setOnClickListener(l); } protected void auxiliaryFunction() { Log.i("TAG", "log message."); }
上面添加的额外功能,我们可以在Log日志中查看是否有真的完成。
public class ImageButton extends LinearLayout { private ImageView imageView; private TextView textView; public ImageButton(Context context) { super(context); } public ImageButton(Context context, AttributeSet attrs) { super(context, attrs); LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); inflater.inflate(R.layout.image_button, this); imageView = (ImageView) findViewById(R.id.imageView1); textView = (TextView) findViewById(R.id.textView1); } /** * 设置图片资源 */ public void setImageResource(int resId) { imageView.setImageResource(resId); } /** * 设置显示的文字 */ public void setTextViewText(String text) { textView.setText(text); } @Override public void setOnClickListener(OnClickListener l) { auxiliaryFunction(); super.setOnClickListener(l); } protected void auxiliaryFunction() { Log.i("TAG", "log message."); }}
使用分析:
1.xml代码中的使用
这里只是有一点需要注意,我们要指明自定义控件的完整路径,如下:
<com.demo.customview.imagebutton.widgets.ImageButton android:id="@+id/btn_right" android:layout_width="150dp" android:layout_height="150dp" android:background="@drawable/custom_button" />
2.动作效果配置
对于Button的动作也就是触摸、按下和抬起,对于这三个动作效果的配置需要在res包下的drawable文件夹中去创建(没有这个文件夹就新建一个)。如下代码:
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/button_unpress_background" android:state_focused="true" android:state_pressed="false"></item> <item android:drawable="@drawable/button_pressed_background" android:state_pressed="true"></item> <item android:drawable="@drawable/button_unpress_background" android:state_focused="false" android:state_pressed="false"></item></selector>
3.Java代码中的使用
在Java代码的使用与Button无异,如下:
public class MainActivity extends Activity { private ImageButton mImageBtn1; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mImageBtn1 = (ImageButton) this.findViewById(R.id.btn_right); mImageBtn1.setTextViewText("确定"); mImageBtn1.setImageResource(R.drawable.right_icon); mImageBtn1.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { Toast.makeText(getApplicationContext(), "点击确定", 0).show(); } }); }}
源码分享:
对于以上的分析,我想大家应该也已经完成了一个很漂亮的自定义控件。不过也有可能因为本人讲解得不够清楚,致使你没有实现想要的效果,在此也分享了本人的源代码。如下连接:
http://download.csdn.net/detail/u013761665/8408209
- Android UI编程之自定义控件初步(上)——ImageButton
- Android UI编程之自定义控件初步(下)——CustomEditText
- Android02--Android之UI控件ImageView+ImageButton
- Android UI设计——ImageView和ImageButton控件
- Android UI 设计——ImageView 和 ImageButton 控件
- Android UI基础——ImageView&ImageButton控件
- 一步一步学android控件(之九) —— ImageButton
- Android开发基础——UI——基础控件(imageView,imageButton)
- Android中UI控件的详细介绍(七)——ImageButton
- Android自学初步——自定义View(1)之创建初步——Android,UI 绘制
- Android UI编程之自定义控件——可高亮显示的TextView
- c#自定义控件——ImageButton
- 自定义控件 — 创建Checkable ImageButton
- Android 基本UI(二)—Button、ImageButton
- Android 控件开发之ImageButton
- Android 控件开发之ImageButton
- Android 控件之ImageButton、ImageView
- Android自定义控件初步之基本知识
- Hive 研发笔记---LEFT JOIN 中的坑
- Java枚举和注解
- EBS业务学习之应付INVOICE类型
- Linux GCC常用命令
- [QT][?] Found unsuitable Qt version "5.0.2" from /usr/bin/qmake, this code requires Qt 4.x
- Android UI编程之自定义控件初步(上)——ImageButton
- 客户相关概念介绍
- 添加行间距时设置字体
- 【设计模式】抽象工厂模式
- U3D基本方法
- 单例模式
- 百度基础地图Android SDK应用demo--便民服务
- android清除缓存
- IOS开发之----NSURL