Android通用标题栏

    标题栏在Android中很常用，实现起来也是很简单的，无非就是一个相对布局或者线性布局，然后在布局中加上返回按钮，标题，右边再放个按钮等等。但是我们的app中需要用到的标题栏的地方很多，几乎每个页面都会用到，但每个标题栏可能不会完全一样，可能会有一些小的变化，有人说，我写一个layout，在布局中include进去，然后再根据实际情况修改内容或者按钮。这样是一种方式，但是我还是觉得这种方式很麻烦，也不够通用。

   今天我们通过自定义控件的方式，教大家一个更加简单，更通用的方法。

   我们看一下效果图：

   废话不多说，上代码。

  

/**
 * 自定义title，包含绝大部分title的适用
 * 
 */
public class TitleView extends LinearLayout {
   public TitleView(Context context) {
      super(context);
      init(context, null);
   }

   public TitleView(Context context, AttributeSet attrs) {
      super(context, attrs);
      init(context, attrs);
   }

   @SuppressLint("NewApi")
   public TitleView(Context context, AttributeSet attrs, int defStyleAttr) {
      super(context, attrs, defStyleAttr);
      init(context, attrs);
   }

   @SuppressLint("NewApi")
   public TitleView(Context context, AttributeSet attrs, int defStyleAttr,
         int defStyleRes) {
      super(context, attrs, defStyleAttr, defStyleRes);
      init(context, attrs);
   }

   /** 最左边title是否显示 */
   private boolean titleLeftImgVisiable = true;
   /** 右边第二个边title是否显示 */
   private boolean titleRightImg2Visiable = false;
   /** 最又边title是否显示 */
   private boolean titleRightImgVisiable = false;
   /** 最右边title 文字是否显示 */
   private boolean titleRightTextVisiable = false;

   /** 中间文字是否显示 */
   private boolean titleVisiable = true;

   /** 最左边title img */
   private int titleLeftImgRes = R.drawable.arrow_left_2;
   /** 右二边title img */
   private int titleRightImg2Res = R.drawable.arrow_left_2;
   /** 最右边title img */
   private int titleRightImgRes = R.drawable.img_1;

   /** title背景色 */
   private int titleBbgColor = -1;
   /** 右边文字title色 */
   private int titleRightTextColor = 0xff475c;

   /** 右边文字 */
   private String titleRight_Text = "";

   /** 中间文字title色 */
   private int titleTextColor = 0xff000000;
   /** 中间文字 */
   private String titleText = "";

   @SuppressLint("Recycle")
   private void init(Context context, AttributeSet attrs) {
      if (attrs != null) {
         TypedArray a = context.obtainStyledAttributes(attrs,
               R.styleable.title);

         titleLeftImgVisiable = a.getBoolean(
               R.styleable.title_left_img_visiable, true);
         titleRightImg2Visiable = a.getBoolean(
               R.styleable.title_right_img2_visiable, false);
         titleRightImgVisiable = a.getBoolean(
               R.styleable.title_right_img_visiable, false);
         titleRightTextVisiable = a.getBoolean(
               R.styleable.title_right_text_visiable, false);
         titleVisiable = a
               .getBoolean(R.styleable.title_title_visiable, true);

         titleLeftImgRes = a.getResourceId(R.styleable.title_left_img,
               R.drawable.arrow_left_2);
         titleRightImg2Res = a.getResourceId(R.styleable.title_right_img2,
               R.drawable.img_1);
         titleRightImgRes = a.getResourceId(R.styleable.title_right_img,
               R.drawable.img_1);

         titleBbgColor = a.getColor(R.styleable.title_bg_color, -1);
         titleRightTextColor = a.getColor(
               R.styleable.title_right_text_color, 0xff475c);
         titleRight_Text = a.getString(R.styleable.title_right_text);

         titleTextColor = a.getColor(R.styleable.title_title_text_color,
               0xff000000);
         titleText = a.getString(R.styleable.title_title_text);

         a.recycle();
      }
      LayoutInflater.from(context).inflate(R.layout.public_title, this, true);
      title_bg = (RelativeLayout) findViewById(R.id.title_bg);
      title_back = (ImageView) findViewById(R.id.title_back);
      title_right_img = (ImageView) findViewById(R.id.title_right_img);
      title_right2_img = (ImageView) findViewById(R.id.title_right2_img);
      title = (CustomFontTextView) findViewById(R.id.title);
      title_right_text = (CustomFontTextView) findViewById(R.id.title_right_text);

      setAttrs();

      setListener();

   }

   private void setAttrs() {
      if(titleBbgColor==-1){
         title_bg.setBackgroundColor(this.getResources().getColor(R.color.bg_light));
      }else{
         title_bg.setBackgroundColor(titleBbgColor);
      }
      
      if (titleVisiable) {
         title.setText(titleText);
         title.setTextColor(titleTextColor);
      } else {
         title.setVisibility(View.GONE);
      }

      if (titleLeftImgVisiable) {
         title_back.setVisibility(View.VISIBLE);
         title_back.setImageResource(titleLeftImgRes);
      } else {
         title_back.setVisibility(View.GONE);
      }
      if (titleRightImg2Visiable) {
         title_right2_img.setVisibility(View.VISIBLE);
         title_right2_img.setImageResource(titleRightImg2Res);
      } else {
         title_right2_img.setVisibility(View.GONE);
      }

      if (titleRightImgVisiable) {
         title_right_img.setVisibility(View.VISIBLE);
         title_right_img.setImageResource(titleRightImgRes);
      } else {
         title_right_img.setVisibility(View.GONE);
      }

      if (titleRightTextVisiable) {
         title_right_text.setVisibility(View.VISIBLE);
         title_right_text.setText(titleRight_Text);
         title_right_text.setTextColor(titleRightTextColor);
      } else {
         title_right_text.setVisibility(View.GONE);
      }

   }

   private void setListener() {
      title_back.setOnClickListener(new OnClick());
      title_right_img.setOnClickListener(new OnClick());
      title_right2_img.setOnClickListener(new OnClick());
      title_right_text.setOnClickListener(new OnClick());
   }

   private RelativeLayout title_bg;
   private ImageView title_back;
   private ImageView title_right_img;
   private ImageView title_right2_img;

   private CustomFontTextView title;
   private CustomFontTextView title_right_text;

   private class OnClick implements View.OnClickListener {
      @Override
      public void onClick(View v) {
         switch (v.getId()) {
         case R.id.title_back:
            if (leftImgeOnClickListener != null) {
               leftImgeOnClickListener.onLeftImgeOnClick();
            }
            break;
         case R.id.title_right_img:
            if (rigthImgeOnClickListener != null)
               rigthImgeOnClickListener.onRigthImgeOnClick();
            break;
         case R.id.title_right2_img:
            if (rigthImge2OnClickListener != null)
               rigthImge2OnClickListener.onRigthImge2OnClick();
            break;
         case R.id.title_right_text:
            if (rigthTitleOnClickListener != null)
               rigthTitleOnClickListener.onRigthTextOnClick();
            break;
         default:
            break;
         }
      }
   }

   private onLeftImgeOnClickListener leftImgeOnClickListener;

   public interface onLeftImgeOnClickListener {
      void onLeftImgeOnClick();
   }

   private onRigthImgeOnClickListener rigthImgeOnClickListener;

   public interface onRigthImgeOnClickListener {
      void onRigthImgeOnClick();
   }

   private onRigthImge2OnClickListener rigthImge2OnClickListener;

   public interface onRigthImge2OnClickListener {
      void onRigthImge2OnClick();
   }

   private onRigthTitleOnClickListener rigthTitleOnClickListener;

   public interface onRigthTitleOnClickListener {
      void onRigthTextOnClick();
   }

   public void setLeftImgeOnClickListener(
         onLeftImgeOnClickListener leftImgeOnClickListener) {
      this.leftImgeOnClickListener = leftImgeOnClickListener;
   }

   public void setRigthImgeOnClickListener(
         onRigthImgeOnClickListener rigthImgeOnClickListener) {
      this.rigthImgeOnClickListener = rigthImgeOnClickListener;
   }

   public void setRigthImge2OnClickListener(
         onRigthImge2OnClickListener rigthImge2OnClickListener) {
      this.rigthImge2OnClickListener = rigthImge2OnClickListener;
   }

   public void setRigthTitleOnClickListener(
         onRigthTitleOnClickListener rigthTitleOnClickListener) {
      this.rigthTitleOnClickListener = rigthTitleOnClickListener;
   }

   public void setTitleText(String str) {
      if (!StringUtils.isEmpty(str)) {
         title.setText(str);
      }
   }

   public void setRightImg(int rightImg) {
      title_right_img.setImageResource(rightImg);
   }

   public View getRightImg() {
      return title_right_img;
   }

   public View getRightImage(){
      return title_right_img ;
   }
   
   
   public void setRightTextVis(boolean show){
      if(show){
         title_right_text.setVisibility(View.VISIBLE);
      }else{
         title_right_text.setVisibility(View.GONE);
      }
   }
   public void setLeftImgVis(boolean show){
      if(show){
         title_back.setVisibility(View.VISIBLE);
      }else{
         title_back.setVisibility(View.GONE);
      }
   }

   public void setRight2ImgVis(boolean show) {
      if (show) {
         title_right2_img.setVisibility(View.VISIBLE);
      } else {
         title_right2_img.setVisibility(View.GONE);
      }
   }

}

在init方法中，通过TypeArray这个类，把我们在attr文件中自定义的title属性读取进来，然后把attr中自定义的属性跟TitleView中的变量对应起来，建立关联关系，并设置默认的属性，接着，我们实例化一个title的布局文件，并把布局里的属性跟我们自己定义的控件简历起一一对应的关系，最后别忘了要把TypeArray释放掉。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="title">

        <!-- 左右图片的可见和图片设置属性 -->
        <attr name="left_img" format="reference" />
        <attr name="right_img" format="reference" />
        <attr name="right_img2" format="reference" />
        <attr name="left_img_visiable" format="boolean" />
        <attr name="right_img_visiable" format="boolean" />
        <attr name="right_img2_visiable" format="boolean" />
        <attr name="title_visiable" format="boolean" />
        <!-- 整个title的背景属性 -->
        <attr name="bg_color" format="color" />
        <!-- 右侧的文字颜色 -->
        <attr name="right_text_visiable" format="boolean" />
        <attr name="right_text_color" format="color" />
        <attr name="right_text" format="string" />
        <attr name="title_text_color" format="color" />
        <attr name="title_text" format="string" />
    </declare-styleable>
    <declare-styleable name="NumberProgressBar">
        <attr name="progress" format="integer" />
        <attr name="max" format="integer" />
        <attr name="progress_unreached_color" format="color" />
        <attr name="progress_reached_color" format="color" />
        <attr name="progress_reached_bar_height" format="dimension" />
        <attr name="progress_unreached_bar_height" format="dimension" />
        <attr name="progress_text_size" format="dimension" />
        <attr name="progress_text_color" format="color" />
        <attr name="progress_text_offset" format="dimension" />
        <attr name="progress_text_visibility" format="enum">
            <enum name="visible" value="0" />
            <enum name="invisible" value="1" />
        </attr>
    </declare-styleable>
    <declare-styleable name="Themes">
        <attr name="numberProgressBarStyle" format="reference" />
    </declare-styleable>
 

</resources>

这个是attr文件，就不多解释了。

接下来看一下布局文件，也是非常简单的。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/title_bg"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/bg_light"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/title_back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:paddingBottom="8dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:paddingTop="8dp"
        android:scaleType="matrix"
        android:src="@drawable/arrow_left_2" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:ellipsize="middle"
        android:maxLength="10"
        android:singleLine="true"
        android:text=""
        android:textColor="@color/black"
        android:textSize="18sp" />

    <ImageView
        android:id="@+id/title_right_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="5dp"
        android:padding="10dp"
        android:scaleType="matrix"
        android:src="@drawable/img_1"
        android:visibility="gone" />

    <TextView
        android:id="@+id/title_right_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="10dp"
        android:padding="10dp"
        android:text="右边选项"
        android:textColor="@color/textcolor_red"
        android:textSize="15sp"
        android:visibility="gone" />

    <ImageView
        android:id="@+id/title_right2_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="45dp"
        android:padding="10dp"
        android:scaleType="matrix"
        android:src="@drawable/img_1"
        android:visibility="gone" />

</RelativeLayout>

经过以上的步骤，标题栏控件就写完了，下面我们来看一下怎么用。

这里只贴出关键的代码了。

protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   super.setContentView(R.layout.activity_main);
   TitleView titleView = (TitleView) findViewById(R.id.titleview);
   
titleView.setLeftImgeOnClickListener(new onLeftImgeOnClickListener() {
   @Override
   public void onLeftImgeOnClick() {
      finish();
   }
});
titleView.setRigthImgeOnClickListener(new onRigthImgeOnClickListener() {
   @Override
   public void onRigthImgeOnClick() {
      //你要做的逻辑
   }
});
}

当然了，你还可以设置图标的显示或者隐藏，设置图片，设置相应的点击事件。