自定义View 之 创建复合控件

创建复合控件以很好的创建出具有重用功能的控件集合。这种方式通常需要继承一个合适的ViewGroup，再给他添加指定功能的控件从而组合成新的复合控件。

1.自定义的TopBar的属性集合

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="TopBar">
        <attr name="title" format="string"/>
        <attr name="titleTextSize" format="dimension"/>
        <attr name="titleTextColor" format="color" />
        <attr name="leftTextColor"  format="color" />
        <attr name="leftBackground" format="reference|color"/>
        <attr name="leftText" format="string"/>
        <attr name="rightTextColor" format="color" />
        <attr name="rightBackground" format="reference|color"/>
        <attr name="rightText" format="string"/>
    </declare-styleable>
</resources>

2.TopBar的实现代码
get到的知识点
1.对Java接口理解更深了
2.public TopBar(Context context, AttributeSet attrs) 得传属性集进去
3.setBackgroundColor(0xFFF59563);设置整个View的背景
4.各种get（）从xml文件中get到属性值
5.context.obtainStyledAttributes 用来解析参数

package com.example.administrator.youku_animi.MyView;

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

import com.example.administrator.youku_animi.R;

import java.text.AttributedCharacterIterator;

import static com.example.administrator.youku_animi.R.styleable.TopBar;


/**
 * Created by Administrator on 2017/7/23 0023.
 */
//定义一个置顶栏控件，左右各一个按钮，中间一个TextView
public class TopBar extends RelativeLayout
{
    private int mLeftTextColor;
    private Drawable mLeftBackground;
    private String mLeftText;

    private int mRightTextColor;
    private Drawable mRightBackground;
    private String mRightText;

    private float mTitleTextSize;
    private int mTitleTextColor;
    private String mTitle;

    private Button mLeftButton;
    private Button mRightButton;
    private TextView mTitleView;

    private RelativeLayout.LayoutParams mLeftParams;
    private RelativeLayout.LayoutParams mRightParams;
    private RelativeLayout.LayoutParams mTitleParams;

    private topbarClickListener mListener;

    public TopBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public TopBar(Context context) {
        super(context);
    }

    //忘记重写构造方法
    public TopBar(Context context, AttributeSet attrs)
    {
        //启动超类的构造方法
        super(context, attrs);
//        int attrs = R.styleable.TopBar;
        //整个TopBar的背景颜色
        setBackgroundColor(0xFFF59563);
        //
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TopBar);

        mLeftTextColor = ta.getColor(R.styleable.TopBar_leftTextColor, 0);
        mLeftBackground = ta.getDrawable(R.styleable.TopBar_leftBackground);
        mLeftText = ta.getString(R.styleable.TopBar_leftText);

        mRightTextColor = ta.getColor(R.styleable.TopBar_rightTextColor, 0);
        mRightBackground = ta.getDrawable(R.styleable.TopBar_rightBackground);
        mRightText = ta.getString(R.styleable.TopBar_rightText);

        mTitleTextSize = ta.getDimension(R.styleable.TopBar_titleTextSize, 10);
        mTitleTextColor = ta.getColor(R.styleable.TopBar_titleTextColor, 0);
        mTitle = ta.getString(R.styleable.TopBar_title);

        ta.recycle();

        mLeftButton = new Button(context);
        mRightButton = new Button(context);
        mTitleView = new TextView(context);

        mLeftButton.setTextColor(mLeftTextColor);
        mLeftButton.setBackground(getResources().getDrawable(R.drawable.ic_chat_bubble_black_24dp));
        mLeftButton.setText(mLeftText);

        mRightButton.setTextColor(mRightTextColor);
        mRightButton.setBackground(mRightBackground);
        mRightButton.setText(mRightText);

        mTitleView.setText(mTitle);
        mTitleView.setTextColor(mTitleTextColor);
        mTitleView.setTextSize(mTitleTextSize);
        mTitleView.setGravity(Gravity.CENTER);

        //设置控件的参数个，设置宽高
        mLeftParams = new LayoutParams(
                LayoutParams.WRAP_CONTENT,
                LayoutParams.MATCH_PARENT
        );
        //        设置布局方式
        mLeftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
        //添加到ViewGroup
        addView(mLeftButton, mLeftParams);

        //向右对其的组件的宽高
        mRightParams = new LayoutParams(
                LayoutParams.WRAP_CONTENT,
                LayoutParams.MATCH_PARENT
        );
        mRightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
        //添加到ViewGroup
        addView(mRightButton, mRightParams);



        //Title
        mTitleParams = new LayoutParams(
                LayoutParams.WRAP_CONTENT,
                LayoutParams.MATCH_PARENT
        );
        mTitleParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);
        //添加到ViewGroup
        addView(mTitleView, mTitleParams);

        mRightButton.setOnClickListener(new OnClickListener()
        {
            @Override
            public void onClick(View view)
            {
                mListener.rightClick();
            }
        });

        mLeftButton.setOnClickListener(new OnClickListener()
        {
            @Override
            public void onClick(View view)
            {
                mListener.leftClick();
            }
        });


    }
    public void setOnTopbarClickListener(topbarClickListener mListener)
    {
        this.mListener = mListener;
    }
    //设置按钮是否可见
    public void setButtonVisable(int id, boolean flag)
    {
        if (flag)
        {
            if (id == 0)
            {
                mLeftButton.setVisibility(View.VISIBLE);
            }
            else
            {
                mRightButton.setVisibility(View.VISIBLE);
            }
        }
        else
        {
            if (id == 0)
            {
                mLeftButton.setVisibility(View.GONE);
            }
            else
            {
                mRightButton.setVisibility(View.GONE);
            }
        }
    }

    //定义左右按钮点击事件的接口
    public interface topbarClickListener
    {
        void leftClick();

        void rightClick();

    }
}

TopBar的使用代码

package com.example.administrator.youku_animi;

import android.app.Activity;
import android.os.Bundle;
import android.widget.Toast;

import com.example.administrator.youku_animi.MyView.TopBar;


/**
 * Created by Administrator on 2017/7/23 0023.
 */

public class TopBarTest extends Activity
{
    TopBar mTopBar;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_topbar_test);
        mTopBar = (TopBar) findViewById(R.id.topbar_test);
        mTopBar.setOnTopbarClickListener(new TopBar.topbarClickListener()
        {
            @Override
            public void leftClick()
            {
                Toast.makeText(TopBarTest.this, "this is left button", Toast.LENGTH_SHORT).show();
                mTopBar.setButtonVisable(0, true);
            }

            @Override
            public void rightClick()
            {
                Toast.makeText(TopBarTest.this, "this is right button", Toast.LENGTH_SHORT).show();
                mTopBar.setButtonVisable(1, false);
            }
        });
    }
}

get 到的知识点
1.xmlns:xlm命名空间
自定义View时得定义自己的命名空间，指定完整的包名。
引用自定义的属性是，需要使用自定义的xmlns名字

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

    <com.example.administrator.youku_animi.MyView.TopBar
        android:id="@+id/topbar_test"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        custom:leftBackground="@color/colorAccent"
        custom:leftText="back"
        custom:leftTextColor="#FFFFFF"
        custom:rightText="More"
        custom:rightTextColor="#FFFFFF"
        custom:rightBackground="@color/colorPrimaryDark"
        custom:title="组合控件Test_one"
        custom:titleTextColor="#123412"
        custom:titleTextSize="10sp">

    </com.example.administrator.youku_animi.MyView.TopBar>

</LinearLayout>

2017.7.23