TShopping

 找回密碼
 註冊
搜索
查看: 450|回復: 0

[教學] 自定义Android带图片的按钮

[複製鏈接]
發表於 2015-1-23 17:46:50 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
前言
现在移动设备的按钮设计讲究大图标小文字,希望用户只要一看到图标便能知道这个按钮是干嘛的,但又要有必要的文字提示,最常见的就数搜索按钮了,上面一个大大的放大镜图标,下面两个字——搜索。
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就不再赘述)
http://blog.csdn.net/lzx_bupt/article/details/5600187
首先,我们编写一个MyImageButton类,继承自LinearLayout

  1. package com.billhoo.study;

  2. import android.content.Context;
  3. import android.widget.ImageView;
  4. import android.widget.LinearLayout;
  5. import android.widget.TextView;

  6. //自定义ImageButton,模拟ImageButton,并在其下方显示文字
  7. //提供Button的部分接口
  8. public class MyImageButton extends LinearLayout {

  9.   public MyImageButton(Context context, int imageResId, int textResId) {
  10.     super(context);

  11.     mButtonImage = new ImageView(context);
  12.     mButtonText = new TextView(context);

  13.     setImageResource(imageResId);
  14.     mButtonImage.setPadding(0, 0, 0, 0);

  15.     setText(textResId);
  16.     setTextColor(0xFF000000);
  17.     mButtonText.setPadding(0, 0, 0, 0);

  18.     //设置本布局的属性
  19.     setClickable(true);  //可点击
  20.     setFocusable(true);  //可聚焦
  21.     setBackgroundResource(android.R.drawable.btn_default);  //布局才用普通按钮的背景
  22.     setOrientation(LinearLayout.VERTICAL);  //垂直布局
  23.      
  24.     //首先添加Image,然后才添加Text
  25.     //添加顺序将会影响布局效果
  26.     addView(mButtonImage);
  27.     addView(mButtonText);
  28.   }

  29.   // ----------------public method-----------------------------
  30.   /*
  31.    * setImageResource方法
  32.    */
  33.   public void setImageResource(int resId) {
  34.     mButtonImage.setImageResource(resId);
  35.   }

  36.   /*
  37.    * setText方法
  38.    */
  39.   public void setText(int resId) {
  40.     mButtonText.setText(resId);
  41.   }

  42.   public void setText(CharSequence buttonText) {
  43.     mButtonText.setText(buttonText);
  44.   }

  45.   /*
  46.    * setTextColor方法
  47.    */
  48.   public void setTextColor(int color) {
  49.     mButtonText.setTextColor(color);
  50.   }

  51.   // ----------------private attribute-----------------------------
  52.   private ImageView mButtonImage = null;
  53.   private TextView mButtonText = null;
  54. }
複製代碼


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


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="vertical" android:layout_width="fill_parent"
  4.     android:layout_height="fill_parent">

  5.     <!-- 这就是我们的“数据管理按钮” -->
  6.     <LinearLayout android:id="@+id/ll_bt_data_config"
  7.         android:layout_width="wrap_content" android:layout_height="wrap_content" />

  8. </LinearLayout>
複製代碼


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


  1. package com.billhoo.study;

  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. import android.view.View;
  5. import android.widget.Button;
  6. import android.widget.LinearLayout;

  7. public class TestActivity extends Activity {
  8.   /** Called when the activity is first created. */
  9.   @Override
  10.   public void onCreate(Bundle savedInstanceState) {
  11.     super.onCreate(savedInstanceState);
  12.     setContentView(R.layout.main);

  13.     btDataConfig = new MyImageButton(this, R.drawable.option, R.string.text);
  14.      
  15.     //获取包裹本按钮的容器
  16.     llbtDataConfig = (LinearLayout) findViewById(R.id.ll_bt_data_config);
  17.      
  18.     //将我们自定义的Button添加进这个容器
  19.     llbtDataConfig.addView(btDataConfig);

  20.     //设置按钮的监听
  21.     btDataConfig.setOnClickListener(new Button.OnClickListener() {
  22.       @Override
  23.       public void onClick(View v) {
  24.         btDataConfig.setText("按钮被点击过了");
  25.       }
  26.     });
  27.   }

  28.   private LinearLayout llbtDataConfig = null;  //main布局中包裹本按钮的容器
  29.   private MyImageButton btDataConfig = null;
  30. }
複製代碼

效果
1.jpg 2.jpg 3.jpg
扩展

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


4.jpg

 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-7 06:12 , Processed in 0.084604 second(s), 25 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表