自定义Titlebar的实现

项目中基本上每一个界面都配有相关标题栏，而且雷同到无可救药，于是为了不重复的在每个xml布局里写上冗长的代码，有必要自定义一番，来简化每个界面xml的代码。
先看下效果图

开始实现
首先我们创建title_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@drawable/shape_bg"
    android:gravity="center_vertical" >

    <RelativeLayout
        android:id="@+id/left_layout"
        android:layout_width="50dip"
        android:layout_height="match_parent"
        android:clickable="true" >

        <ImageView
            android:id="@+id/left_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:scaleType="centerInside" />
    </RelativeLayout>

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="#ffffff"
        android:textSize="20sp" />

    <RelativeLayout
        android:id="@+id/right_layout"
        android:layout_width="50dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true">

        <ImageView
            android:id="@+id/right_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:scaleType="centerInside" />
    </RelativeLayout>

</RelativeLayout>

跟布局用到的drawable背景shape_bg.xml实现如下

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient.
        android:angle="270"
        android:startColor="@color/colorPrimary"
        android:endColor="#ff000000"/>
    <padding
        android:bottom="3dp"
        android:left="5dp"
        android:right="5dp"
        android:top="3dp" />

</shape>

这里的gradient（渐变）的angle为270必须为45的整数倍，意味着围绕中心旋转270度来渲染。
接下来实现TitleBar继承RelativeLayout：

public class TitleBar extends RelativeLayout {
//    标题栏左侧布局
    private RelativeLayout leftlayout;
//    标题栏左侧图片
    private ImageView leftImage;
//    标题栏右侧布局
    private RelativeLayout rightLayout;
//    标题栏右侧图片
    private ImageView rightImage;
//    标题栏标题
    private TextView titleView;
//    标题栏跟布局
    private RelativeLayout rootLayout;

    public TitleBar(Context context) {
        this(context,null);

    }

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

    public TitleBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context,attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        LayoutInflater.from(context).inflate(R.layout.title_bar,this);
        leftlayout = (RelativeLayout) findViewById(R.id.left_layout);
        leftImage = (ImageView) findViewById(R.id.left_image);
        rightLayout = (RelativeLayout) findViewById(R.id.right_layout);
        rightImage = (ImageView) findViewById(R.id.right_image);
        titleView = (TextView) findViewById(R.id.title);
        rootLayout = (RelativeLayout) findViewById(R.id.root);
//        通过attrs设置相关属性
        setStyle(context,attrs);
    }

    private void setStyle(Context context, AttributeSet attrs) {
        if (attrs != null){
            TypedArray array = context.obtainStyledAttributes(attrs,R.styleable.TitleBar);
//            获取title
            String title = array.getString(R.styleable.TitleBar_titleBar_title);
            titleView.setText(title);
//            获取左侧图片
            Drawable lDrawable = array.getDrawable(R.styleable.TitleBar_titleBar_left_image);
            if (lDrawable != null){
                leftImage.setImageDrawable(lDrawable);
            }
//            获取右侧图片
            Drawable rDrawable = array.getDrawable(R.styleable.TitleBar_titleBar_right_image);
            if (rDrawable != null){
                rightImage.setImageDrawable(rDrawable);
            }
//            获取背景图片
            Drawable bgDrawable = array.getDrawable(R.styleable.TitleBar_titleBar_background);
            if (bgDrawable != null){
                rootLayout.setBackgroundDrawable(bgDrawable);
            }

            array.recycle();
        }
    }

//    左侧布局监听
    public void setLeftlayoutClickListener(OnClickListener listener) {
        leftlayout.setOnClickListener(listener);
    }
//   通过资源id设置左侧图片样式
    public void setLeftImageResource(int resId) {
        leftImage.setImageResource(resId);
    }

//   右侧布局监听
    public void setRightLayoutClickListener(OnClickListener listener) {
        rightLayout.setOnClickListener(listener);
    }

//   通过资源id设置右侧图片样式
    public void setRightImageResource(int resId) {
        rightImage.setImageResource(resId);
    }

//    设置title
    public void setTitle(String title) {
        titleView.setText(title);
    }

//    设置跟布局背景颜色
    public void setBackgroundColor(int color){
        rootLayout.setBackgroundColor(color);
    }
}

这里用到了attrs文件如下

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="TitleBar">
        <attr name="titleBar_title" format="string"/>
        <attr name="titleBar_left_image" format="reference"/>
        <attr name="titleBar_right_image" format="reference"/>
        <attr name="titleBar_background" format="reference|color"/>
    </declare-styleable>
</resources>

然后在activity_main.xml实现

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:gao="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.customview.ui.MainActivity">

   <com.example.customview.weight.TitleBar
       android:id="@+id/title_bar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       gao:titleBar_left_image="@mipmap/left_icon"
       gao:titleBar_right_image="@mipmap/right_icon"
       gao:titleBar_title="@string/app_name"/>
</RelativeLayout>

最后就是MainActivity啦

public class MainActivity extends AppCompatActivity {

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

        titleBar = (TitleBar) findViewById(R.id.title_bar);
//        titleBar的左监听
        titleBar.setLeftlayoutClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
//                设置标题
                titleBar.setTitle("Change Title");
                Toast.makeText(MainActivity.this,"left...",Toast.LENGTH_SHORT).show();
            }
        });
//        titleBar的右监听
        titleBar.setRightLayoutClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                titleBar.setTitle("Change Title Again");
                Toast.makeText(MainActivity.this,"right...",Toast.LENGTH_SHORT).show();
            }
        });
    }
}

总结：通过继承RelativeLayout来添加相关布局以及设置相关背景，图片和标题。从而实现自定义Titlebar,并在demo上复习了attrs的使用。
Demo链接