》前言 :
當我們接觸的項目多了,我們會發現常常需要反覆操作大量重複代碼;這樣既花去了時間,有對我們的提高不大:簡直可恨極了。
這樣,我們爲什麼不把這些常用的功能,整理成工具呢。下面就是項目中“我的界面”item的自定義控件。
(我的開發工具包:`[toolKit](https://github.com/JustinKvin/toolKit)`)
》效果 :
》Item控件
/**
* Created by Kvin on 2016/1/5.
*/
public class ItemLinearLayout extends LinearLayout {
//set Paint
private Paint paint;
//line type
public static final int TYPE_FILL = 0;
public static final int TYPE_NOT = 1;
public static final int TYPE_DOUBLE = 2;
private int lineType;
private int leftPic;
private int rightPic;
private String txt;
//左右邊距及leftText與content文本間距
private int marginLeft;
private int marginRight;
private int marginGap;
private float txtSize;
private int txtColor;
private int lineColor;
private ImageView imgLeft;
private ImageView imgRight;
private TextView content;
public ItemLinearLayout(Context context) {
super(context);
}
public ItemLinearLayout(Context context, AttributeSet attrs) {
super(context, attrs);
initView(context, attrs);
}
private void initView(Context context, AttributeSet attrs) {
setWillNotDraw(false);//call onDraw() Method
//loading XML attributes
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ItemLinearLayout);
leftPic = typedArray.getResourceId(R.styleable.ItemLinearLayout_leftImg, -2);
rightPic = typedArray.getResourceId(R.styleable.ItemLinearLayout_rightImg, -2);
txtColor=typedArray.getColor(R.styleable.ItemLinearLayout_txtColor, Color.BLACK);
lineColor=typedArray.getColor(R.styleable.ItemLinearLayout_lineColor, Color.GRAY);
txt = typedArray.getString(R.styleable.ItemLinearLayout_txt);
marginLeft = typedArray.getDimensionPixelSize(R.styleable.ItemLinearLayout_marginLeft, 5);
marginRight = typedArray.getDimensionPixelSize(R.styleable.ItemLinearLayout_marginRight, 5);
marginGap = typedArray.getDimensionPixelSize(R.styleable.ItemLinearLayout_marginGap, 5);
lineType = typedArray.getInt(R.styleable.ItemLinearLayout_lineType, -2);
txtSize = typedArray.getDimension(R.styleable.ItemLinearLayout_txtSize, 5);
typedArray.recycle();
//add widgets to ViewGroup
this.setOrientation(HORIZONTAL);
imgLeft = new ImageView(context);
imgLeft.setImageResource(leftPic);
LayoutParams p1 = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
p1.setMargins(marginLeft, 0, 0, 0);
imgLeft.setLayoutParams(p1);
this.addView(imgLeft);
content = new TextView(context);
content.setTextColor(txtColor);
content.setText(txt);
content.setTextSize(TypedValue.COMPLEX_UNIT_PX, txtSize);//attention to the unit of txtSize
LayoutParams p2 = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
p2.setMargins(marginGap, 0, 0, 0);
content.setLayoutParams(p2);
//content.setCompoundDrawables(null, null, getResources().getDrawable(R.mipmap.mine_next_icon), null);
this.addView(content);
DisplayMetrics metrics = MetricsUtils.winMetrics(context);//get Screen Metrics
imgRight = new ImageView(context);
imgRight.setImageResource(rightPic);
LayoutParams p3 = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
this.addView(imgRight);
int m = metrics.widthPixels - marginRight - marginGap - marginLeft - MetricsUtils.conMetrics(imgLeft).getMeasuredWidth() - MetricsUtils.conMetrics(content).getMeasuredWidth() - MetricsUtils.conMetrics(imgRight).getMeasuredWidth();
p3.setMargins(m, 0, 0, 0);
//p3.setMarginEnd(marginRight);
imgRight.setLayoutParams(p3);
//init paint
paint = new Paint();//use to draw line
paint.setColor(lineColor);
paint.setStrokeWidth(3);
}
public ItemLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView(context, attrs);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawLine(canvas, lineType);
}
//draw line
private void drawLine(Canvas canvas, int lineType) {
int startX = -1;
if (lineType == TYPE_FILL) {
startX = 1;
} else if (lineType == TYPE_NOT) {
startX = marginLeft + marginGap + MetricsUtils.conMetrics(imgLeft).getMeasuredWidth();
} else if (lineType == TYPE_DOUBLE) {
startX = 1;
canvas.drawLine(startX, 1, getWidth() - 1, 1, paint);
}
canvas.drawLine(startX, getHeight() - 1, getWidth() - 1, getHeight() - 1, paint);
}
}
》屬性:
<!-- ItemLinearLayout attribute-->
<declare-styleable name="ItemLinearLayout">
<attr name="leftImg" format="reference" />
<attr name="rightImg" format="reference" />
<attr name="txt" format="string" />
<attr name="txtSize" format="dimension" />
<attr name="txtColor" format="reference" />
<attr name="lineColor" format="reference" />
<attr name="marginLeft" format="dimension" />
<attr name="marginRight" format="dimension" />
<attr name="marginGap" format="dimension" />
<attr name="lineType">
<flag name="typeFill" value="0" />
<flag name="typeNot" value="1" />
<flag name="typeDouble" value="2" />
</attr>
</declare-styleable>
》用法樣式:
<com.kvin.chatme.widgets.ItemLinearLayout
android:clickable="true"
android:background="@drawable/item_selector"
android:layout_width="match_parent"
android:layout_height="@dimen/info_item_height"
android:gravity="center_vertical"
android:id="@+id/changePassword"
app:marginGap="10dp"
app:marginLeft="10dp"
app:marginRight="5dp"
app:txtSize="12sp"
app:txtColor="@color/white"
app:leftImg="@mipmap/change_password_icon"
app:rightImg="@mipmap/mine_next_icon"
app:lineType="typeNot"
app:txt="修改密碼" />
》討論:
有些工具沒有貼上,不過應該可以自己解決;還是不懂,可以@我。