封装TitleBar

在项目开发过程中,会发现带有返回键、标b题和按钮的 TitleBar 总是出现在多个界面中,如下图。而且它们的界面和逻辑都一样。如果每个界面都写一次代码,就造成了重复代码,对开发效率和心情都有很大的影响。因此,应该对这样的重复 TitleBar 进行封装,一次编写到处使用

常用的 TitleBar 有两种,下面这是带返回键、标题的 TitleBar

封装TitleBar_第1张图片
返回键,标题

这是带返回键、标题、提交按钮就的 TitleBar

封装TitleBar_第2张图片
返回键,标题、按钮

自定义属性

标题的文字需要根据不同的界面显示不通过的内容,按钮的文字也是一样,所以就需要用到自定义属性。在 res/values 文件夹中创建 attrs.xml 文件,添加如下内容




    
        
        
    


注意一下自定义属性前面都带有 mtb_ 前缀(My Title Bar 的缩写),这是为了防止和其他自定义属性同名

预定义控件ID

定义一下返回键、标题、按钮的 ID



    
    
    
    


创建TitleBard的布局

创建 res/layout/titlebar_back_title_btn.xml 布局文件




    

    

    

相关的资源如下

颜色 color.xml



    #1f75c0
    #fff

尺寸 dimens.xml


    50dp
    16sp
    18sp

注意一下右边的按钮的布局

其中的

android:onClick="onTitleBarBtnClick"

这是为按钮设置了一个监听事件,等下会讲解

创建 MyTitleBar 类

public class MyTitleBar extends FrameLayout {

    // 左边的返回键
    private ImageButton mIvBtnBack;
    // 标题文字
    private TextView mTvTitle;
    // 右边的按钮
    private Button mBtnRight;

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

        LayoutInflater.from(context).inflate(R.layout.titlebar_back_title_btn, this);

        mIvBtnBack = (ImageButton) findViewById(R.id.titleBar_btn_back);
        mTvTitle = (TextView) findViewById(R.id.titleBar_title);
        mBtnRight = (Button) findViewById(R.id.titleBar_btn_ok);
        
        
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyTitleBar);
        try {
            
            String titleText = typedArray.getString(R.styleable.MyTitleBar_mtb_title);
            mTvTitle.setText(titleText);
            
            String btnText = typedArray.getString(R.styleable.MyTitleBar_mtb_btn_text);
            mBtnRight.setText(btnText);
        } finally {
            typedArray.recycle();
        }

        // 左边按钮的监听事件
        mIvBtnBack.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                ((Activity) getContext()).finish();
            }
        });
    }

    /**
     * 重新设置左边按钮的点击事件监听器
     */
    public void setBtnBckClickListener(View.OnClickListener listener) {
        mIvBtnBack.setOnClickListener(listener);
    }
}

使用

MainActivity.xml




    


MainActivity.java 中,别忘了创建 onTitleBarBtnClick(View v) 方法,否则点击按钮时会崩溃

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void onTitleBarBtnClick(View v) {
        Toast.makeText(this, "右边按钮被点击了", Toast.LENGTH_SHORT).show();
    }
}

效果图如下

![效果图]](http://upload-images.jianshu.io/upload_images/3617116-471594ef8d53d5ec.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

你可能感兴趣的:(封装TitleBar)