TopBar

最近正在写一个项目，一开始写项目的时候，还不懂自定义控件是什么鬼，然后TopBar就是复制再复制，看到这么多的重复代码，

有种想吐吐不出的感觉，心情很不爽，后来学习了一下自定义控件，为了方便看效果，把三个TopBar放到同一个界面中了，效果如图：

先看看主布局文件：


    

    

    


然后是MainActivity.Java中的数据
public class MainActivity extends Activity implements View.OnClickListener {

    private Context mContext = this;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //这是第一个标题
        WidgetTopBar wtbOne = (WidgetTopBar) findViewById(R.id.wtb_one);
        wtbOne.getLeftBtnText().setOnClickListener(this);
        wtbOne.getRightBtnImage().setOnClickListener(this);
        //这是第二个标题
        WidgetTopBar wtbTwo = (WidgetTopBar) findViewById(R.id.wtb_two);
        wtbTwo.getLeftBtnImage().setOnClickListener(this);
        wtbTwo.getRightBtnText().setOnClickListener(this);
        //这是第三个标题
        WidgetTopBar wtbThree = (WidgetTopBar) findViewById(R.id.wtb_three);
        wtbThree.getLeftBtnImage().setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(mContext, "第三个标题 左边按钮", Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.ib_left_top_bar: {
                Toast.makeText(mContext, "第二个标题 左边按钮", Toast.LENGTH_SHORT).show();
                break;
            }
            case R.id.ib_right_top_bar: {
                Toast.makeText(mContext, "第一个标题 右边按钮", Toast.LENGTH_SHORT).show();
                break;
            }
            case R.id.btn_left_top_bar: {
                Toast.makeText(mContext, "第一个标题 左边按钮", Toast.LENGTH_SHORT).show();
                break;
            }
            case R.id.btn_right_top_bar: {
                Toast.makeText(mContext, "第二个标题 右边按钮", Toast.LENGTH_SHORT).show();
                break;
            }
        }
    }
}

现在的代码量，比没有用自定义控件的代码量要少很多了
下面我们来看看这个自定义控件是怎么实现的
先看看res/values/attr.xml中的属性设置（没有attr.xml文件的话，请自行新建）


    
    
        
        
        
        
        
    


再看看自定义控件的布局文件是怎么样的：



    

    

    

    

    

  ● 
其实这个布局文件的重复代码还是比较多的，大家可以用style简化代码了
接下来就是主菜了：WidgetTopBar.java
package cn.demo.topbardemo;

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.ImageButton;
import android.widget.RelativeLayout;
import android.widget.TextView;

/**
 * Created by Administrator on 2016/5/17.
 * Author jxc
 */
public class WidgetTopBar extends RelativeLayout {

    private ImageButton ibLeft;
    private ImageButton ibRight;
    private Button btnLeft;
    private Button btnRight;
    private TextView tvTitle;
    private String title;
    private String leftText;
    private String rightText;
    private Drawable leftDrawable;
    private Drawable rightDrawable;

    public WidgetTopBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        //初始化属性
        initAttrs(context, attrs);
        //填充视图
        View.inflate(context, R.layout.widget_top_bar, this);
        btnLeft = (Button) findViewById(R.id.btn_left_top_bar);
        ibLeft = (ImageButton) findViewById(R.id.ib_left_top_bar);
        tvTitle = (TextView) findViewById(R.id.tv_title_top_bar);
        btnRight = (Button) findViewById(R.id.btn_right_top_bar);
        ibRight = (ImageButton) findViewById(R.id.ib_right_top_bar);

        //如果属性有值的话，那我们就需要给控件初始化数据了
        initData();
    }

    //初始化属性
    private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.WidgetTopBar);
        // WidgetTopBar_m_left这个名字很奇怪，我们明明没有定义，
        // 这是因为系统自动把我们定义的m_title加到WidgetTopBar后面去了
        //标题
        title = typedArray.getString(R.styleable.WidgetTopBar_m_title);
        //左边按钮的文字
        leftText = typedArray.getString(R.styleable.WidgetTopBar_m_left_text);
        //左边按钮的图片
        rightText = typedArray.getString(R.styleable.WidgetTopBar_m_right_text);
        //右边按钮的文字
        leftDrawable = typedArray.getDrawable(R.styleable.WidgetTopBar_m_left_image);
        //右边按钮的图片
        rightDrawable = typedArray.getDrawable(R.styleable.WidgetTopBar_m_right_image);
    }

    // 初始化数据,因为每个按钮，我都在布局文件中将其显示状态设置为GONE 了
    // 所以在填充数据的时候，要显示一下
    private void initData() {
        if (title != null) {
            tvTitle.setText(title);
        }
        if (leftText != null) {
            btnLeft.setVisibility(VISIBLE);
            btnLeft.setText(leftText);
        }
        if (rightText != null) {
            btnRight.setVisibility(VISIBLE);
            btnRight.setText(rightText);
        }
        if (leftDrawable != null) {
            ibLeft.setVisibility(VISIBLE);
            ibLeft.setBackground(leftDrawable);
        }
        if (rightDrawable != null) {
            ibRight.setVisibility(VISIBLE);
            ibRight.setBackground(rightDrawable);
        }
    }

    //获取左边文字按钮
    public Button getLeftBtnText() {
        return btnLeft;
    }

    //获取右边文字按钮
    public Button getRightBtnText() {
        return btnRight;
    }

    //获取左边图片按钮
    public ImageButton getLeftBtnImage() {
        return ibLeft;
    }

    //获取右边图片按钮
    public ImageButton getRightBtnImage() {
        return ibRight;
    }
}