好久没更新了，最近换了份工作，好多东西要学习，也就没抽出时间写博客了。
今天是八月最后一天了，给大家介绍一个新的控件——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
时间： 2024-10-25 08:56:41