Android 自定义标题栏-header

在android app开发中，自定义标题栏是非常常见，下面就是一个小例子，供刚入行的小伙伴参考，老司机请移步

java代码

public class CustomHeader extends LinearLayout {
  @Bind(R.id.tv_left)         TextView mTvLeft;//左侧textView  一般是作为返回键使用
  @Bind(R.id.tv_middle)       TextView mTvMiddle;//中间 textView 一般是作为标题使用
  @Bind(R.id.tv_right)        TextView mTvRight;//右侧textView 一般是作为提交，确定之类的

  public CustomHeader(Context context, AttributeSet attrs) {
    super(context, attrs);
    initView(context, attrs);
  }

  private void initView(Context context, AttributeSet attrs) {
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomHeader);
    String leftText = typedArray.getString(R.styleable.CustomHeader_leftText);
    int leftImg = typedArray.getResourceId(R.styleable.CustomHeader_leftImg, 0);
    String middleText = typedArray.getString(R.styleable.CustomHeader_middleText);
    int middleImg = typedArray.getResourceId(R.styleable.CustomHeader_middleImg, 0);
    String rightText = typedArray.getString(R.styleable.CustomHeader_rightText);
    int rightImg = typedArray.getResourceId(R.styleable.CustomHeader_rightImg, 0);
    typedArray.recycle();
    View view =
        LayoutInflater.from(context).inflate(R.layout.view_custom_header, this);//使用this，相当于使用null，在addView
    ButterKnife.bind(view);//这里使用了butterKnife注解，比较常见的一个库

    //规则：如果文字图片均不设置，则textView不显示；设置了文字，则不显示图片；设置了图片，没设置文字，则显示图片；可参考xml例子
    if (leftText == null || leftText.isEmpty()) {
      if (leftImg == 0) {
        mTvLeft.setVisibility(GONE);
      } else {
        mTvLeft.setBackgroundResource(leftImg);
      }
    } else {
      mTvLeft.setText(leftText);
    }

    if (middleText == null || middleText.isEmpty()) {
      if (middleImg == 0) {
        mTvMiddle.setVisibility(GONE);
      } else {
        mTvMiddle.setBackgroundResource(middleImg);
      }
    } else {
      mTvMiddle.setText(middleText);
    }

    if (rightText == null || rightText.isEmpty()) {
      if (rightImg == 0) {
        mTvRight.setVisibility(GONE);
      } else {
        mTvRight.setBackgroundResource(rightImg);
      }
    } else {
      mTvRight.setText(rightText);
    }
  }

  @OnClick(R.id.tv_left) public void onClickLeftTV(OnClickListener listener) {//设置左侧监听
    mTvLeft.setOnClickListener(listener);
  }

  @OnClick(R.id.tv_right) public void onClickRightTV(OnClickListener listener) {//设置右侧监听
    mTvRight.setOnClickListener(listener);
  }
}

布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="50dp"
  android:layout_gravity="center"
  android:background="#FFA2BCE6"
  android:orientation="horizontal">

  <TextView
    android:id="@+id/tv_left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:textSize="30sp"/>

  <TextView
    android:id="@+id/tv_middle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:textSize="30sp"/>

  <TextView
    android:id="@+id/tv_right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:textSize="30sp"/>

</RelativeLayout>

attrs文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <declare-styleable name="CustomHeader">
    <attr format="string" name="leftText"/>
    <attr format="string" name="middleText"/>
    <attr format="string" name="rightText"/>
    <attr format="reference" name="leftImg"/>
    <attr format="reference" name="middleImg"/>
    <attr format="reference" name="rightImg"/>
  </declare-styleable>
</resources>

在xml中的使用

  <com.payne.demo.CustomHeader
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:leftImg="@mipmap/ic_launcher"
    app:middleImg="@mipmap/ic_launcher"
    app:rightText="确定"/>

效果图

Paste_Image.png