Android 自定义View 实例

Android 相关自定义View基本知识可以参考 Android View 自定义属性， 本篇博客博主将和大家一起实践Android自定义View，我们知道，在应用中最常见的就是TitleBar，他们形式上保持一致，一般均是左边回退按钮，中间说明文本，右边功能按钮。所以很适合抽取作为自定义View模板，废话少说，直接上干货。

自定义View-attrs

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="TitleBarCustom">
        <attr name="center_text" format="string"/>
        <attr name="center_size" format="dimension"/>
        <attr name="center_color" format="color"/>
        <attr name="center_ground" format="reference|color"/>
        <attr name="left_text" format="string"/>
        <attr name="left_size" format="dimension"/>
        <attr name="left_color" format="color"/>
        <attr name="left_ground" format="reference|color"/>
        <attr name="right_text" format="string"/>
        <attr name="right_size" format="dimension"/>
        <attr name="right_color" format="color"/>
        <attr name="right_ground" format="reference|color"/>
    </declare-styleable>
</resources>

自定义View类

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class TitleBar extends RelativeLayout
{
    private Button mRightButton, mLeftButton;
    private TextView mCenterTextView;
    private int mCenterColor, mRightColor, mLeftColor;
    private Drawable mCenterBackground, mRightBackground, mLeftBackground;
    private float mCenterSize, mRightSize, mLeftSize;
    private String mCenterText, mRightText, mLeftText;

    public void setOnTitleBarClickListener(OnTitleBarClickListener mOnTitleBarClickListener)
    {
        this.mOnTitleBarClickListener = mOnTitleBarClickListener;
    }

    private OnTitleBarClickListener mOnTitleBarClickListener;

    public TitleBar(Context context, AttributeSet attrs)
    {
        super(context, attrs);

        final TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.TitleBarCustom);

        final int N = a.getIndexCount();

        for (int i = 0; i < N; i++)
        {
            int attr = a.getIndex(i);

            switch (attr)
            {
                case R.styleable.TitleBarCustom_center_color:

                    mCenterColor = a.getColor(attr, -1);
                    break;

                case R.styleable.TitleBarCustom_center_size:

                    mCenterSize = a.getDimension(attr, 0);
                    break;

                case R.styleable.TitleBarCustom_center_text:

                    mCenterText = a.getString(attr);
                    break;

                case R.styleable.TitleBarCustom_center_ground:

                    mCenterBackground = a.getDrawable(attr);
                    break;

                case R.styleable.TitleBarCustom_left_color:

                    mLeftColor = a.getColor(attr, -1);
                    break;

                case R.styleable.TitleBarCustom_left_size:

                    mLeftSize = a.getDimension(attr, 0);
                    break;

                case R.styleable.TitleBarCustom_left_text:

                    mLeftText = a.getString(attr);
                    break;

                case R.styleable.TitleBarCustom_left_ground:

                    mLeftBackground = a.getDrawable(attr);
                    break;

                case R.styleable.TitleBarCustom_right_color:

                    mRightColor = a.getColor(attr, -1);
                    break;

                case R.styleable.TitleBarCustom_right_size:

                    mRightSize = a.getDimension(attr, 0);
                    break;

                case R.styleable.TitleBarCustom_right_text:

                    mRightText = a.getString(attr);
                    break;

                case R.styleable.TitleBarCustom_right_ground:

                    mRightBackground = a.getDrawable(attr);
                    break;
            }
        }

        mRightButton = new Button(context);
        mRightButton.setText(mRightText);
        mRightButton.setTextSize(mRightSize);
        mRightButton.setTextColor(mRightColor);
        mRightButton.setBackgroundDrawable(mRightBackground);
        RelativeLayout.LayoutParams rightParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        rightParams.addRule(ALIGN_PARENT_RIGHT, TRUE);
        rightParams.addRule(CENTER_VERTICAL, TRUE);
        rightParams.setMargins(0, 0, 10, 0);
        mRightButton.setLayoutParams(rightParams);
        addView(mRightButton);
        mRightButton.setOnClickListener(new OnClickListener()
        {
            @Override
            public void onClick(View v)
            {
                if (mOnTitleBarClickListener != null)
                {
                    mOnTitleBarClickListener.rightButtonClick();
                }

            }
        });


        mLeftButton = new Button(context);
        mLeftButton.setText(mLeftText);
        mLeftButton.setTextSize(mLeftSize);
        mLeftButton.setTextColor(mLeftColor);
        mLeftButton.setBackgroundDrawable(mLeftBackground);
        RelativeLayout.LayoutParams leftParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        leftParams.addRule(ALIGN_PARENT_LEFT, TRUE);
        leftParams.addRule(CENTER_VERTICAL, TRUE);
        leftParams.setMargins(10, 0, 0, 0);
        mLeftButton.setLayoutParams(leftParams);
        addView(mLeftButton);

        mLeftButton.setOnClickListener(new OnClickListener()
        {
            @Override
            public void onClick(View v)
            {
                if (mOnTitleBarClickListener != null)
                {
                    mOnTitleBarClickListener.leftButtonClick();
                }

            }
        });

        mCenterTextView = new TextView(context);
        mCenterTextView.setText(mCenterText);
        mCenterTextView.setTextSize(mCenterSize);
        mCenterTextView.setTextColor(mCenterColor);
        mCenterTextView.setBackgroundDrawable(mCenterBackground);
        RelativeLayout.LayoutParams centerParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        centerParams.addRule(CENTER_IN_PARENT, TRUE);
        leftParams.setMargins(10, 0, 10, 0);
        mCenterTextView.setLayoutParams(centerParams);
        addView(mCenterTextView);

        a.recycle();
    }

    @SuppressWarnings("unused")
    public void setRightButtonVisiablity(boolean isVisiable)
    {
        if (mRightButton == null) return;

        if (isVisiable)
        {
            mRightButton.setVisibility(View.VISIBLE);
        }
        else
        {
            mRightButton.setVisibility(View.GONE);
        }
    }

    @SuppressWarnings("unused")
    public void setLeftButtonVisiablity(boolean isVisiable)
    {
        if (mLeftButton == null) return;

        if (isVisiable)
        {
            mLeftButton.setVisibility(View.VISIBLE);
        }
        else
        {
            mLeftButton.setVisibility(View.GONE);
        }
    }

    @SuppressWarnings("unused")
    public void setCenterTextVisiablity(boolean isVisiable)
    {
        if (mCenterTextView == null) return;

        if (isVisiable)
        {
            mCenterTextView.setVisibility(View.VISIBLE);
        }
        else
        {
            mCenterTextView.setVisibility(View.GONE);
        }
    }

    public interface OnTitleBarClickListener
    {
        void leftButtonClick();

        void rightButtonClick();
    }
}

使用自定义View

首先在UI中定义

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:linroid="http://schemas.android.com/apk/res-auto"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <studio.neulion.com.tasktest.TitleBar
            android:layout_width="match_parent"
            android:layout_height="60dp"
            linroid:center_color="#FF0000"
            linroid:center_text="This is Title"
            linroid:center_size="12dp"
            linroid:center_ground="#00FF00"
            linroid:right_color="#00FF00"
            linroid:right_text="Click"
            linroid:right_size="10dp"
            linroid:right_ground="#0000FF"
            linroid:left_color="#0000FF"
            linroid:left_text="Back"
            linroid:left_size="10dp"
            linroid:left_ground="#FF0000"
            android:id="@+id/title_bar" />

</LinearLayout>

然后在代码中使用

public class SixActivity extends Activity
{
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_title);

        initView();
    }

    private void initView()
    {
        final TitleBar titleBar = (TitleBar) findViewById(R.id.title_bar);

        if (titleBar != null)
        {
            titleBar.setOnTitleBarClickListener(new OnTitleBarClickListener()
            {
                @Override
                public void leftButtonClick()
                {
                    Toast.makeText(SixActivity.this, "Left button click!", Toast.LENGTH_LONG).show();
                }

                @Override
                public void rightButtonClick()
                {
                    Toast.makeText(SixActivity.this, "Right button click!", Toast.LENGTH_LONG).show();
                }
            });
        }
    }
}

这样就完成了整个TitleBar的自定义View，虽然很粗糙，但是基本的模型已经出来了，这是个典型的组合自定义型View的例子，其他自定义型View后续会更新。