Android开发小知识3—自定义View

前言

当android系统的UI不能满足我们的设计或需求时,我们就需要自定义view来实现我们的目的,今天打算总结一下自定义view的几种常见方式。在此之前,学习了http://www.cnblogs.com/jiayongji/p/5560806.html 。受益良多,本文有参考其中的内容。

三种方式

自定义控件的实现有三种方式:组合控件、自绘控件和继承控件。下面将分别对这三种方式进行介绍。

组合控件

组合控件,即将本有的控件组合起来使用,形成新的控件。下面给大家介绍一种标题组合控件。

1、布局文件,可以在这个地方将控件组合起来使用,形成新的控件。




    

    

    

2、创建一个类CustomTitleView ,继承自RelativeLayout:

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
 
public class CustomTitleView extends RelativeLayout {

    private ImageView back;
    private TextView title;
    private TextView rightText;
    private TitleListener listener;

    public CustomTitleView(Context context) {
        this(context, null);
    }

    public CustomTitleView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomTitleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        View.inflate(context, R.layout.view_title, this);
        initView();
        setEvent();
    }

    public void setTitleData(String titleText) {
        title.setText(titleText);
    }

    public void setListener(TitleListener listener) {
        this.listener = listener;
    }

    private void initView() {
        back = (ImageView) findViewById(R.id.back);
        title = (TextView) findViewById(R.id.title_text);
        rightText = (TextView) findViewById(R.id.right_text);

    }

    private void setEvent() {
        back.setOnClickListener(v -> listener.onBack());
        rightText.setOnClickListener(v -> listener.onRight());
    }

    public interface TitleListener {
        void onBack();

        void onRight();
    }
}

3、以上,我们的组合控件View就已经完成,使用也很方便,如下:

 title = (CustomTitleView) findViewById(R.id.title);
        title.setTitleData("TEST");
        title.setListener(new CustomTitleView.TitleListener() {
            @Override
            public void onBack() {
                finish();
            }

            @Override
            public void onRight() {
                //no-op
            }
        });

4、运行效果如下:


Android开发小知识3—自定义View_第1张图片
组合控件

继承控件

继承控件就是,继承已有的控件,保留需要的功能,引入新的特性。这种自定义方法是最常见,使用最广泛的。比如说自定义Dialog等。

1、创建dialog的布局文件




    

    

        

        

        

        

            

2、创建CustomDialog类,继承自Dialog,并实现需要的一些接口。

public class LikeIosDialog extends Dialog {

    public LikeIosDialog(Context context, int theme) {
        super(context, theme);
    }

    public void onDismiss() {
        if (isShowing()) {
            dismiss();
        }
    }

    public static class Builder {
        private Button leftButton;
        private Button rightButton;
        private TextView dialogTitle;
        private TextView dialogContent;
        private View lineVertical;

        private String message;
        private String title;
        private String leftButtonText;
        private String rightButtonText;
        private View.OnClickListener leftButtonClickListener;
        private View.OnClickListener rightButtonClickListener;
        private boolean isSingle = false;

        private View layout;
        private LikeIosDialog dialog;

        public Builder(Context context) {
            dialog = new LikeIosDialog(context, R.style.Dialog);
            LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            layout = inflater.inflate(R.layout.layout_dialog, null);
            dialog.addContentView(layout, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
            dialog.setContentView(layout);
            dialog.setCancelable(true);
            dialog.setCanceledOnTouchOutside(false);
        }

        public LikeIosDialog createDialog() {
            initView();
            setText();
            setEvent();
            return dialog;
        }

        private void initView() {
            leftButton = (Button) layout.findViewById(R.id.left_button);
            rightButton = (Button) layout.findViewById(R.id.right_button);
            dialogContent = (TextView) layout.findViewById(R.id.dialog_content);
            dialogTitle = (TextView) layout.findViewById(R.id.dialog_title);
            lineVertical = layout.findViewById(R.id.line_vertical);
        }

        private void setText() {
            if (isSingle) {
                leftButton.setVisibility(View.GONE);
                lineVertical.setVisibility(View.GONE);
            } else {
                leftButton.setVisibility(View.VISIBLE);
                lineVertical.setVisibility(View.VISIBLE);
            }
            dialogContent.setText(message);
            leftButton.setText(leftButtonText);
            rightButton.setText(rightButtonText);
            dialogTitle.setText(title);
        }

        private void setEvent() {
            leftButton.setOnClickListener(leftButtonClickListener);
            rightButton.setOnClickListener(rightButtonClickListener);
        }

        public Builder setMessage(String message) {
            this.message = message;
            return this;
        }

        public Builder setTitle(String title) {
            this.title = title;
            return this;
        }

        public Builder setLeftButton(String leftButtonText, View.OnClickListener leftButtonClickListener) {
            this.leftButtonText = leftButtonText;
            this.leftButtonClickListener = leftButtonClickListener;
            return this;
        }

        public Builder setRightButton(String rightButtonText, View.OnClickListener rightButtonClickListener) {
            this.rightButtonText = rightButtonText;
            this.rightButtonClickListener = rightButtonClickListener;
            return this;
        }

        public Builder isSingleButton(boolean isSingleButton) {
            this.isSingle = isSingleButton;
            return this;
        }

        public Builder setSingleButton(String rightButtonText, View.OnClickListener rightButtonClickListener) {
            this.rightButtonText = rightButtonText;
            this.rightButtonClickListener = rightButtonClickListener;
            return this;
        }
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            dismiss();
        }
        return super.onKeyDown(keyCode, event);
    }
}

3、使用

private BukkaDialog.Builder deleteDialogBuilder;
private BukkaDialog deleteDialog;
 
deleteDialogBuilder = new BukkaDialog.Builder(this);
deleteDialog = deleteDialogBuilder
                .setTitle(getString(R.string.dialog_title))
                .setMessage(getString(R.string.dialog_content))
                .isSingleButton(false)
                .setRightButton(getString(R.string.ok), v1 -> {
                   //TODO something
                    deleteDialog.onDismiss();
                })
                .setLeftButton(getString(R.string.cancel), v12 -> deleteDialog.onDismiss())
                .createDialog();
        deleteDialog.show();

4、运行效果如下:


Android开发小知识3—自定义View_第2张图片
继承控件

自绘控件

自绘控件的内容都是自己绘制出来的,在View的onDraw方法中完成绘制。在自定义View中,难度最大,但是效果最好的一种方法,下面就实现一个简单圆圈的画法。

1、创建CounterView类,继承自View,同时可以实现OnClickListener等接口:

package com.monoqn.widgets;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.Display;
import android.view.View;
import android.view.WindowManager;

public class CounterView extends View {

    private Paint mPaint;
    private Context mContext;
    private int screenWidth;
    private int screenHeight;

    public CounterView(Context context) {
        super(context, null);
        init();
    }

    public CounterView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        init();
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.RED);

        mPaint.setStyle(Paint.Style.STROKE);

        mPaint.setStrokeWidth(20);

        WindowManager wm = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE);
        Display display = wm.getDefaultDisplay();
        screenWidth = display.getWidth();
        screenHeight = display.getHeight();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(screenWidth / 2, screenHeight / 2, 50, mPaint);
    }
}

2、在activity_main.xml中引入该自定义布局:




    

3、运行效果如下:


Android开发小知识3—自定义View_第3张图片
自绘控件

小结

自定义view的内容到这里就结束了,相信对于简单的自定义view大家都可以简单的应对了。当然学习是无止境的,希望大家可以不断地探索学习,其中还有很多东西值得大家学习。下一期我想和大家分享的是:深度探索Activity!

原文链接:
[http://www.jianshu.com/p/61d338b30c4d)

你可能感兴趣的:(Android开发小知识3—自定义View)