android自定义控件——MessageItem

好久没更新了，最近换了份工作，好多东西要学习，也就没抽出时间写博客了。

今天是八月最后一天了，给大家介绍一个新的控件——MessageItemM

先来看一下效果图：

我们可以动态设置左侧的图标，标题，内容，也可以使其成一行，以及右侧的数量提示，或者设置图片来提示新加的功能等，下面我们来看一下具体实现

只有一个类文件 MessageItemM.java

  1 package com.landptf.controls;
  2 
  3 import android.content.Context;
  4 import android.graphics.Bitmap;
  5 import android.graphics.Color;
  6 import android.graphics.drawable.Drawable;
  7 import android.graphics.drawable.GradientDrawable;
  8 import android.text.TextUtils.TruncateAt;
  9 import android.util.AttributeSet;
 10 import android.util.TypedValue;
 11 import android.view.MotionEvent;
 12 import android.view.View;
 13 import android.widget.ImageView;
 14 import android.widget.RelativeLayout;
 15 import android.widget.TextView;
 16 
 17 /** 
 18 * @ClassName: MessageItemM 
 19 * @Description: the messages or notes item
 20 * @author landptf
 21 * @date 2015-8-25 下午11:33:24  
 22 */ 
 23 public class MessageItemM extends RelativeLayout {
 24     private static final int VIEW_IVICON_ID = 0x0001;
 25     private static final int VIEW_TVTITLE_ID = 0x0002;
 26     private static final int VIEW_TVCONTENT_ID = 0x0003;
 27     private static final int VIEW_BTMTIP_ID = 0x0004;
 28     private static final int VIEW_IVEXPAND_ID = 0x0005;
 29     
 30     private Context context;
 31     private OnClickListener onClickListener = null;
 32     
 33     /*view control*/
 34     private ImageView ivIcon;
 35     private TextView tvTitle;
 36     private TextView tvContent;
 37     private ButtonM btmTip;
 38     private ImageView ivExpand;
 39     
 40     public interface OnClickListener{
 41         public void onClick(View v);
 42     }
 43     
 44     public void setOnClickListener(OnClickListener onClickListener){
 45         this.onClickListener = onClickListener;
 46     }
 47 
 48     public MessageItemM(Context context) {
 49         this(context, null);
 50     }
 51     
 52     public MessageItemM(Context context, AttributeSet attrs) {
 53         this(context, attrs, 0);
 54     }
 55 
 56     public MessageItemM(Context context, AttributeSet attrs, int defStyle) {
 57         super(context, attrs, defStyle);
 58         this.context = context;
 59         setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
 60         setBackgroundColor(android.graphics.Color.WHITE);
 61         setOnTouchListener(new OnTouchListener() {
 62             @Override
 63             public boolean onTouch(View arg0, MotionEvent event) {
 64                 //setColor(event.getAction());
 65                 return false;
 66             }
 67         });
 68         setOnClickListener(new android.view.View.OnClickListener() {
 69             @Override
 70             public void onClick(View v) {
 71                 if (onClickListener != null) {
 72                     onClickListener.onClick(v);
 73                 }
 74             }
 75         });
 76         initView();
 77     }
 78     
 79     private void initView() {
 80         ivIcon = new ImageView(context);
 81         ivIcon.setId(VIEW_IVICON_ID);
 82         RelativeLayout.LayoutParams lp=new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
 83         lp.addRule(RelativeLayout.CENTER_VERTICAL);
 84         lp.setMargins(10, 5, 10, 5);
 85         ivIcon.setLayoutParams(lp);
 86         
 87         tvTitle = new TextView(context);
 88         tvTitle.setId(VIEW_TVTITLE_ID);
 89         lp=new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
 90         lp.addRule(RelativeLayout.RIGHT_OF, ivIcon.getId());
 91         lp.setMargins(0, 5, 0, 5);
 92         tvTitle.setTextSize(16);
 93         tvTitle.setTextColor(Color.parseColor("#696969"));
 94         tvTitle.setLayoutParams(lp);
 95         
 96         ivExpand = new ImageView(context);
 97         ivExpand.setId(VIEW_IVEXPAND_ID);
 98         lp=new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
 99         lp.addRule(RelativeLayout.CENTER_VERTICAL);
100         lp.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
101         lp.rightMargin = 10;
102         ivExpand.setLayoutParams(lp);
103         
104         btmTip = new ButtonM(context);
105         btmTip.setId(VIEW_BTMTIP_ID);
106         btmTip.setShape(GradientDrawable.OVAL);
107         btmTip.setFillet(true);
108         btmTip.setTextColori(android.graphics.Color.WHITE);
109         btmTip.setTextSize(14);
110         btmTip.setShape(GradientDrawable.OVAL);
111         btmTip.setRadius(15);
112         /*back color is red*/
113         btmTip.setBackColor(Color.parseColor("#ff0000"));
114         lp=new RelativeLayout.LayoutParams(dp2px(context,32),dp2px(context,32));
115         lp.addRule(RelativeLayout.CENTER_VERTICAL);
116         lp.addRule(RelativeLayout.LEFT_OF, ivExpand.getId());
117         lp.rightMargin = 5;
118         btmTip.setLayoutParams(lp);
119         
120         tvContent = new TextView(context);
121         tvContent.setId(VIEW_TVCONTENT_ID);
122         lp=new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
123         lp.addRule(RelativeLayout.LEFT_OF, btmTip.getId());
124         lp.addRule(RelativeLayout.RIGHT_OF, ivIcon.getId());
125         lp.addRule(RelativeLayout.BELOW, tvTitle.getId());
126         lp.rightMargin = 10;
127         lp.bottomMargin = 5;
128         tvContent.setTextSize(18);
129         tvContent.setTextColor(getResources().getColor(android.R.color.black));
130         tvContent.setLayoutParams(lp);
131         /* When the length of the text is more than one line, then the end of"..." */
132         tvContent.setSingleLine();
133         tvContent.setEllipsize(TruncateAt.END);
134         
135         addView(ivIcon);
136         addView(tvTitle);
137         addView(tvContent);
138         addView(btmTip);
139         addView(ivExpand);
140     }
141     
142     /**
143      * set icon vith drawable
144      * @param drawable
145      */
146     public void setImageDrawableIcon(Drawable drawable){
147         ivIcon.setImageDrawable(drawable);
148     }
149     
150     /**
151      * set icon with resId
152      * @param resId
153      */
154     public void setImageResourceIcon(int resId){
155         ivIcon.setImageResource(resId);
156     }
157     
158     /**
159      * set icon with bitmap
160      * @param bitmap
161      */
162     public void setImageBitmapIcon(Bitmap bitmap){
163         ivIcon.setImageBitmap(bitmap);
164     }
165     
166     /**
167      * set the title show state that change the tvContent position 
168      * @param visible
169      */
170     public void setVisibleTitle(Boolean visible){
171         RelativeLayout.LayoutParams lp;
172         if (visible) {
173             tvTitle.setVisibility(View.VISIBLE);
174             lp=new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
175             lp.addRule(RelativeLayout.LEFT_OF, btmTip.getId());
176             lp.addRule(RelativeLayout.RIGHT_OF, ivIcon.getId());
177             lp.addRule(RelativeLayout.BELOW, tvTitle.getId());
178             lp.rightMargin = 5;
179             lp.bottomMargin = 5;
180             tvContent.setLayoutParams(lp);
181         }else {
182             tvTitle.setVisibility(View.GONE);
183             lp=new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
184             lp.addRule(RelativeLayout.LEFT_OF, btmTip.getId());
185             lp.addRule(RelativeLayout.RIGHT_OF, ivIcon.getId());
186             lp.addRule(RelativeLayout.CENTER_VERTICAL);
187             tvContent.setLayoutParams(lp);
188         }
189     } 
190     
191     /**
192      * set text to the title 
193      * @param title
194      */
195     public void setTextTitle(String title){
196         tvTitle.setText(title);
197     }
198     
199     /**
200      * set text to the content
201      * @param content
202      */
203     public void setTextContent(String content){
204         tvContent.setText(content);
205     }
206     
207     /**
208      * set text to the Tip
209      * @param tip
210      */
211     public void setTextTip(String tip){
212         btmTip.setText(tip);
213     }
214     
215     /**
216      * set Tip backgroundResource with resId
217      * @param resId
218      */
219     public void setImageResourceTip(int resId){
220         btmTip.setBackGroundImage(resId);
221     }
222     
223     /**
224      * set visible to the Tip
225      * @param visible
226      */
227     public void setVisibleTip(Boolean visible){
228         btmTip.setVisibility(visible ? View.VISIBLE : View.GONE);
229     }
230     
231     /**
232      * set expand vith drawable
233      * @param drawable
234      */
235     public void setImageDrawableExpand(Drawable drawable){
236         ivExpand.setImageDrawable(drawable);
237     }
238     
239     /**
240      * set expand with resId
241      * @param resId
242      */
243     public void setImageResourceExpand(int resId){
244         ivExpand.setImageResource(resId);
245     }
246     
247     /**
248      * set expand with bitmap
249      * @param bitmap
250      */
251     public void setImageBitmapExpand(Bitmap bitmap){
252         ivExpand.setImageBitmap(bitmap);
253     }
254     
255     /**
256      * set visible to the expand
257      * @param visible
258      */
259     public void setVisibleExpand(Boolean visible){
260         ivExpand.setVisibility(visible ? View.VISIBLE : View.GONE);
261     }
262     
263     
264     private int dp2px(Context context, float dpVal) {
265         return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
266                 dpVal, context.getResources().getDisplayMetrics());
267     }
268     
269 
270 }

更加丰富的功能大家可以继续扩展
接下来编写测试类，包含一个java文件和一个xml布局

MessageItemMTest.java

 1 package landptf.test;
 2 
 3 import com.landptf.controls.MessageItemM;
 4 
 5 import landptf.control.R;
 6 import android.app.Activity;
 7 import android.os.Bundle;
 8 
 9 /** 
10 * @ClassName: MessageItemMTest 
11 * @Description: MessageItemM测试类
12 * @author landptf
13 * @date 2015-8-31 下午11:20:57  
14 */ 
15 public class MessageItemMTest extends Activity{
16     //定义四个控件
17     //只为演示效果，实际使用中如果项目比较多而且不固定，应该使用ListView
18     private MessageItemM mimMine;
19     private MessageItemM mimComment;
20     private MessageItemM mimGood;
21     private MessageItemM mimSystem;
22     @Override
23     protected void onCreate(Bundle savedInstanceState) {
24         super.onCreate(savedInstanceState);
25         setContentView(R.layout.activity_messageitemm);
26         initView();
27     }
28 
29     private void initView() {
30         mimMine = (MessageItemM) findViewById(R.id.mimMine);
31         //设置左侧图标
32         mimMine.setImageResourceIcon(R.drawable.icon_message_aite);
33         //设置内容
34         mimMine.setTextContent("@我的");
35         //隐藏标题，使内容独占一行，并且垂直居中
36         mimMine.setVisibleTitle(false);
37         //设置未读信息数量
38         mimMine.setTextTip("3");
39         //设置右侧展开图标提示
40         mimMine.setImageResourceExpand(R.drawable.icon_message_expand);
41         
42         mimComment = (MessageItemM) findViewById(R.id.mimComment);
43         mimComment.setImageResourceIcon(R.drawable.icon_message_comment);
44         mimComment.setTextContent("评论");
45         mimComment.setVisibleTitle(false);
46         //设置右侧提示图标
47         mimComment.setImageResourceTip(R.drawable.icon_message_new);
48         mimComment.setImageResourceExpand(R.drawable.icon_message_expand);
49         
50         mimGood = (MessageItemM) findViewById(R.id.mimGood);
51         mimGood.setImageResourceIcon(R.drawable.icon_message_good);
52         mimGood.setTextContent("赞");
53         mimGood.setVisibleTitle(false);
54         //隐藏右侧提示图标
55         mimGood.setVisibleTip(false);
56         mimGood.setImageResourceExpand(R.drawable.icon_message_expand);
57         
58         mimSystem = (MessageItemM) findViewById(R.id.mimSystem);
59         mimSystem.setImageResourceIcon(R.drawable.icon_message_system);
60         //设置标题内容
61         mimSystem.setTextTitle("系统消息");
62         mimSystem.setTextContent("通知：XXX定于明天凌晨2：00 -- 6:00升级维护，因此给您带来的不便我们深表歉意！");
63         mimSystem.setVisibleTip(false);
64         mimSystem.setImageResourceExpand(R.drawable.icon_message_expand);
65     }
66 
67 }

activity_messageitemm.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:background="#EBEBEB"
 6     android:orientation="vertical" >
 7 
 8     <ScrollView
 9         android:layout_width="match_parent"
10         android:layout_height="wrap_content" >
11 
12         <LinearLayout
13             android:layout_width="match_parent"
14             android:layout_height="wrap_content"
15             android:background="#EBEBEB"
16             android:orientation="vertical" >
17 
18             <com.landptf.controls.MessageItemM
19                 android:id="@+id/mimMine"
20                 android:layout_width="match_parent"
21                 android:layout_height="60dp" >
22             </com.landptf.controls.MessageItemM>
23 
24             <View
25                 android:layout_width="match_parent"
26                 android:layout_height="1dp"
27                 android:layout_marginLeft="10dp"
28                 android:layout_marginRight="10dp"
29                 android:background="#EBEBEB" />
30 
31             <com.landptf.controls.MessageItemM
32                 android:id="@+id/mimComment"
33                 android:layout_width="match_parent"
34                 android:layout_height="60dp" >
35             </com.landptf.controls.MessageItemM>
36 
37             <View
38                 android:layout_width="match_parent"
39                 android:layout_height="1dp"
40                 android:layout_marginLeft="10dp"
41                 android:layout_marginRight="10dp"
42                 android:background="#EBEBEB" />
43 
44             <com.landptf.controls.MessageItemM
45                 android:id="@+id/mimGood"
46                 android:layout_width="match_parent"
47                 android:layout_height="60dp" >
48             </com.landptf.controls.MessageItemM>
49 
50             <View
51                 android:layout_width="match_parent"
52                 android:layout_height="10dp"
53                 android:background="#EBEBEB" />
54 
55             <com.landptf.controls.MessageItemM
56                 android:id="@+id/mimSystem"
57                 android:layout_width="match_parent"
58                 android:layout_height="60dp" >
59             </com.landptf.controls.MessageItemM>
60         </LinearLayout>
61     </ScrollView>
62 </LinearLayout>

最后和大家分享一个矢量图制作网站：http://iconfont.cn/
个人觉得还不错，终于解决了我不会PS的Bug