我的界面設置項View

》前言 :

   當我們接觸的項目多了,我們會發現常常需要反覆操作大量重複代碼;這樣既花去了時間,有對我們的提高不大:簡直可恨極了。
   這樣,我們爲什麼不把這些常用的功能,整理成工具呢。下面就是項目中“我的界面”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="修改密碼" />

》討論:

有些工具沒有貼上,不過應該可以自己解決;還是不懂,可以@我。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章