当前位置：文档之家› 自定义Android带图片的按钮

自定义Android带图片的按钮

自定义Android带图片的按钮
自定义Android带图片的按钮

自定义Android带图片的按钮

前言

现在移动设备的按钮设计讲究大图标小文字，希望用户只要一看到图标便能知道这个按钮是干嘛的，但又要有必要的文字提示，最常见的就数搜索按钮了，上面一个大大的放大镜图标，下面两个字——搜索。

Bill最近也在做具有这种效果的按钮，过程总是曲折的，不过结果总是美好滴~现在Bill把其做法分享给大家，希望对还不会的朋友有所帮助。

先看看bill曲折的过程吧，也许里面就有你的影子：

最开始以为直接利用Android控件ImageButton即可完事，谁知事不如人料，ImageButton 只能显示图片，并不能对其添加文字，此想法不攻自破。

于是我想到了直接用Button，但是Button的文字却是显示在图片内部，并不能达到我的需求。放弃。

懒人总有懒人的办法，我可以直接在图片下方PS需要的文字嘛，然后把P好的图片放进ImageButton就好了。此法十分简单好用。但是，一旦我们需要改变文字，或者我要把文字显示在图片顶部而不是底部怎么办？此法虽简单，却缺乏可变性。放弃。

这就是所谓的“一钮三折”了~

那么，有没有一种方法既能够拥有Button的效果，又能够实现Button显示的自定义呢？

答案是肯定的，接下来，bill将一步一步详细解释这个按钮的制作过程。

思路

首先，我们来看一下这个按钮的实现思路。有一种思维方式叫做“out of box”，也就是鼓励大家跳出固定思维模式以寻求新的突破。但是在“跳出箱子”之前，我们必须首先知道困住我们思维的“箱子”是什么。

在这里，这个箱子就是“按钮”。我们一直在想，如何去实现这个“按钮”，怎么才能让“按钮”显示出图片，然后在图片下面还显示一行字。我们就在“按钮”这个箱子里纠结。

但实际上，当我们发现所谓的“按钮”其实就是一个View的时候，一切就变得简单了。

它只不过是一个可点击、可设置监听、可显示文字或者图片的View而已。那么我们就跳出Android给我们设置的这个箱子，自己重新造一个具有我们需要的功能和外观的View 不就OK了？

经过分析，上述按钮效果实际上就是一个布局，一个最简单不过的垂直线性布局，上部分是一个ImageView，下部分是一个TextView，这个布局可点击、可设置监听。

我们首先要编写自己的ImageButton类，然后在主布局文件中为我们自定义的Button

编写布局，最后在Activity中调用我们自定义ImageButton即可。

那么接下来我们就一起来实现这个简单的LinearLayout。

编码实现自己的ImageButton

在编写我们自己的ImageButton之前，如果读者并不清楚如何在一个静态的xml布局文件中动态地加载子布局，请先阅读下面的博文（此文言简意赅，已经写得很清楚了，bill就不再赘述）

https://www.doczj.com/doc/7f107046.html,/lzx_bupt/article/details/5600187首先，我们编写一个MyImageButton类，继承自LinearLayout

1.package com.billhoo.study;

2.

3.import android.content.Context;

4.import android.widget.ImageView;

5.import android.widget.LinearLayout;

6.import android.widget.TextView;

7.

8.//自定义ImageButton，模拟ImageButton，并在其下方显示文字

9.//提供Button的部分接口

10.public class MyImageButton extends LinearLayout {

11.

12. public MyImageButton(Context context, int imageResId, int textResI

d) {

13. super(context);

14.

15. mButtonImage = new ImageView(context);

16. mButtonText = new TextView(context);

17.

18. setImageResource(imageResId);

19. mButtonImage.setPadding(0, 0, 0, 0);

20.

21. setText(textResId);

22. setTextColor(0xFF000000);

23. mButtonText.setPadding(0, 0, 0, 0);

24.

25. //设置本布局的属性

26. setClickable(true); //可点击

27. setFocusable(true); //可聚焦

28. setBackgroundResource(android.R.drawable.btn_default); //布局才

用普通按钮的背景

29. setOrientation(LinearLayout.VERTICAL); //垂直布局

30.

31. //首先添加Image，然后才添加Text

32. //添加顺序将会影响布局效果

33. addView(mButtonImage);

34. addView(mButtonText);

35. }

36.

37. // ----------------public method-----------------------------

38. /*

39. * setImageResource方法

40. */

41. public void setImageResource(int resId) {

42. mButtonImage.setImageResource(resId);

43. }

44.

45. /*

46. * setText方法

47. */

48. public void setText(int resId) {

49. mButtonText.setText(resId);

50. }

51.

52. public void setText(CharSequence buttonText) {

53. mButtonText.setText(buttonText);

54. }

55.

56. /*

57. * setTextColor方法

58. */

59. public void setTextColor(int color) {

60. mButtonText.setTextColor(color);

61. }

62.

63. // ----------------private attribute-----------------------------

64. private ImageView mButtonImage = null;

65. private TextView mButtonText = null;

66.}

然后在main布局中为我们自定义的Button写xml布局，注意，我们的“按钮”实际上是一个线性布局，因此xml中应该写LinearLayout而不是Button或者ImageButton

1.

2.

3. android:orientation="vertical" android:layout_width="fill_parent

"

4. android:layout_height="fill_parent">

5.

6.

7.

8. android:layout_width="wrap_content" android:layout_height="w

rap_content" />

9.

10.

最后，在Activity中为我们自定义的按钮设置监听

1.package com.billhoo.study;

2.

3.import android.app.Activity;

4.import android.os.Bundle;

5.import android.view.View;

6.import android.widget.Button;

7.import android.widget.LinearLayout;

8.

9.public class TestActivity extends Activity {

10. /** Called when the activity is first created. */

11. @Override

12. public void onCreate(Bundle savedInstanceState) {

13. super.onCreate(savedInstanceState);

14. setContentView(https://www.doczj.com/doc/7f107046.html,yout.main);

15.

16. btDataConfig = new MyImageButton(this, R.drawable.option, R.stri

ng.text);

17.

18. //获取包裹本按钮的容器

19. llbtDataConfig = (LinearLayout) findViewById(R.id.ll_bt_data_con

fig);

20.

21. //将我们自定义的Button添加进这个容器

22. llbtDataConfig.addView(btDataConfig);

23.

24. //设置按钮的监听

25. btDataConfig.setOnClickListener(new Button.OnClickListener() {

26. @Override

27. public void onClick(View v) {

28. btDataConfig.setText("按钮被点击过了");

29. }

30. });

31. }

32.

33. private LinearLayout llbtDataConfig = null; //main布局中包裹本按钮的

容器

34. private MyImageButton btDataConfig = null;

35.}

效果

扩展

大家还可以自己扩展这个类的功能，比如可以设置文字的环绕位置，大小控制等等

android 自定义圆角头像以及使用declare-styleable进行配置属性解析

android 自定义圆角头像以及使用declare-styleable进行配置属性解析由于最新项目中正在检查UI是否与效果图匹配，结果关于联系人模块给的默认图片是四角稍带弧度的圆角，而我们截取的图片是正方形的，现在要给应用统一替换。应用中既用到大圆角头像（即整个头像是圆的）又用到四角稍带弧度的圆角头像，封装一下以便重用。以下直接见代码 [java] view plain copy 在CODE上查看代码片派生到我的代码片 package com.test.demo; import com.test.demo.R; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.BitmapShader; import android.graphics.Canvas; import android.graphics.Matrix; import android.graphics.Paint; import android.graphics.RectF; import android.graphics.Shader.TileMode; import android.graphics.drawable.BitmapDrawable; import android.graphics.drawable.Drawable; import android.os.Bundle; import android.os.Parcelable; import android.util.AttributeSet; import android.util.Log; import android.util.TypedValue; import android.widget.ImageView; /** * 圆角imageview */ public class RoundImageView extends ImageView { private static final String TAG = "RoundImageView"; /** * 图片的类型，圆形or圆角 */ private int type; public static final int TYPE_CIRCLE = 0; public static final int TYPE_ROUND = 1; /** * 圆角大小的默认值

Android开发规范参考文档

Android开发参考文档 一、Android编码规范 1. java代码中不出现中文，最多注释中可以出现中文.xml代码中注释 2. 成员变量，局部变量、静态成员变量命名、常量(宏)命名 1). 成员变量: activity中的成员变量以m开头，后面的单词首字母大写（如Button mBackButton; String mName）；实体类和自定义View的成员变量可以不以m开头（如ImageView imageView，String name）， 2）. 局部变量命名：只能包含字母，组合变量单词首字母出第一个外，都为大写，其他字母都为小写 3）. 常量(宏)命名: 只能包含字母和_，字母全部大写，单词之间用_隔开UMENG_APP_KEY 3. Application命名 项目名称+App，如SlimApp,里面可以存放全局变量，但是杜绝存放过大的实体对象4. activity和其中的view变量命名 activity命名模式为：逻辑名称+Activity view命名模式为：逻辑名称+View 建议：如果layout文件很复杂，建议将layout分成多个模块，每个模块定义一个moduleViewHolder，其成员变量包含所属view 5. layout及其id命名规则 layout命名模式：activity_逻辑名称，或者把对应的activity的名字用“_”把单词分开。

命名模式为：view缩写_模块名称_view的逻辑名称, 用单词首字母进行缩写 view的缩写详情如下 LayoutView：lv RelativeView:rv TextView:tv ImageView:iv ImageButton:ib Button:btn 6. strings.xml中的 1）. id命名模式： activity名称_功能模块名称_逻辑名称/activity名称_逻辑名称/common_逻辑名称，strings.xml中，使用activity名称注释，将文件内容区分开来 2). strings.xml中使用%1$s实现字符串的通配,合起来写 7. drawable中的图片命名 命名模式：activity名称_逻辑名称/common_逻辑名称/ic_逻辑名称 (逻辑名称: 这是一个什么样的图片，展示功能是什么) 8. styles.xml 将layout中不断重现的style提炼出通用的style通用组件，放到styles.xml中； 9. 使用layer-list和selector，主要是View onCclick onTouch等事件界面反映

android毕业设计(论文)开题报告

毕业设计(论文) 开题报告 题目___________________________ 学院___________________________ 专业及班级___________________________ 姓名___________________________ 学号___________________________ 指导教师 ___________________________ 日期 ___________________________

西安科技大学毕业设计(论文)开题报告

二、主要研究(设计)内容、研究（设计）思路及工作方法或工作流程 设计内容：基于Android平台下实现理货员的功能：精耕拜访，销售机会，拜访效果，门店销量查询，待办事项，数据维护：队列信息，基础信息，地图下载。 设计思路及工作方法： 1.精耕拜访： (1)初始进入该页面，系统会自动获取该理货员的本日拜访的门店及路线。 (2)下方地图会自动定位目前理货员的位置。 (3)点击门店的具体门店名称，在右边会显示该门店的联系人，电话，及地址，并且地图 会自动切换定位以该门店为中心。 (4)点击地图上的+可实现地图局部放大。-可实现地图的放小。 (5)如已拜访的门店，点击进入可以调去历史拜访数据。如未拜访的门店，点击进入可以新增该拜访记录。 (6)如理货员在拜访期间，发现门店已经有卖而目前系统中无记录的情况，则可以通过扫 描SKU的条形码，系统会自动匹配该SKU的信息给理货员。 匹配顺序：连锁总店—区域管理—基本SKU信息 补充说明： (1)公司动态内容，为了显示保乐力加集团的整体形象，有必要对公司的动态进行展示。 要包括集团的光辉历程，门店信息，集团的促销信息等。 (2)在陈列信息栏中，有其它途径过来的回应确认，可以一栏展示在上半部。如该理货员 需要发起确认，也可以通过点击发起确认进行提出。发起确认的需要销售员进行审核并且 分发。 (3)陈列报告，为显示每次理货员必须处理的门店信息记录及图片等。 (4)在陈列信息栏中，有其它途径过来的回应确认，可以一栏展示在上半部。如该理货员需要发起确认，也可以通过点击发起确认进行提出。发起确认的需要销售员进行审核并且分发。 (5)价格显示，系统会自动带出竞品信息。罗列在下半部。理货员在进行拜访期间，可以对本身的SKU及竞品的价格进行登记。主要登记内容：零售价格，促销价格及促销期间。信息采集完毕，可以供后台进行统计分析。 (7)在陈列信息栏中，有其它途径过来的回应确认，可以一栏展示在上半部。如该理货员需要发起确认，也可以通过点击发起确认进行提出。发起确认的需要销售员进行审核并且分发。 (7)库存信息，主要记录SKU的库存数量。 (8)上半部为助销申请内容，主要是对一些礼品的申请。 (9)订单处理，为新增订单，退货内容及换货内容的跟踪。 2.销售机会： (1)打开销售机会界面，会自动定位目前的门店列表。 (2)用户可以输入门店名称查询具体的门店信息及地图位置。

Android图片处理工具类(圆角,压缩)

Android图片处理工具类（圆角，压缩） 工作中用到的图片处理工具类，简单写下来，以便备用！ public class BitmapUtils { /** * 图像背景圆角处理 * bitmap要处理的图片 roundPx 图片弯角的圆度一般是5到10之间 */ public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, float roundPx) { // 创建与原图大小一样的bitmap文件，Config.ARGB_8888根据情况可以改用其它的 Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Config.ARGB_8888); // 实例画布，绘制的bitmap将保存至output中 Canvas canvas = new Canvas(output); final int color = 0xff424242;//写自己需要的颜色值 final Paint paint = new Paint(); final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight()); final RectF rectF = new RectF(rect); paint.setAntiAlias(true);

canvas.drawARGB(0, 0, 0, 0); paint.setColor(color); canvas.drawRoundRect(rectF, roundPx, roundPx, paint); paint.setXfermode(new PorterDuffXfermode(android.graphics.PorterDuff.Mode.SRC_IN)); canvas.drawBitmap(bitmap, rect, rect, paint); bitmap.recycle(); bitmap = null; return output; } /** * bitmap缩放 * width要缩放的宽度 height要缩放的高度 */ public static Bitmap getBitmapDeflation(Bitmap bitmap, int width, int height, boolean recycle) { if (null == bitmap) { return null;

Android平台我的日记设计文档

Android平台我的日记 设计文档 项目名称：mydiray 项目结构示意： 阶段任务名称（一）布局的设计 开始时间: 结束时间: 设计者: 梁凌旭 一、本次任务完成的功能 1、各控件的显示 二、最终功能及效果 三、涉及知识点介绍 四、代码设计 activity_main.xml:

android:layout_centerHorizontal="true" android:layout_marginTop="88dp" android:text="@string/wo" android:textSize="35sp"/>

相关文档 最新文档