自定义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链接