Android通用标题栏

来源：互联网发布：linux终端中文问号编辑：程序博客网时间：2024/05/22 03:28

标题栏在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() {      //你要做的逻辑   }});}

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

0 0