簡單的自定義標題欄（不使用Toolbar）
阿新 • • 發佈：2018-12-12
比較簡單的自定義標題欄，這裡直接封裝成一個類似控制元件的樣子，先上效果圖：
我們可以先寫一個BaseView來，用來做標題欄的基礎佈局：
/** * 自定義View的基類 * @author */ public class BaseView extends FrameLayout implements OnClickListener { protected Activity mActivity; protected Context mContext; protected View mView; protected LayoutInflater mInflater; private TextView errorTV; private boolean isErrorViewShow; public BaseView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public BaseView(Context context, AttributeSet attrs) { super(context, attrs); } public BaseView(Context context) { super(context); } protected void setContentView(int layoutId) { mContext = getContext(); if (mContext instanceof Activity) { mActivity = (Activity) mContext; } mInflater = LayoutInflater.from(mContext); mView = mInflater.inflate(layoutId, null); addView(mView); } protected boolean setContentView(int layoutId,int color) { //這個方法用於後面完善操作 mContext = getContext(); if (mContext instanceof Activity) { mActivity = (Activity) mContext; } mInflater = LayoutInflater.from(mContext); mView = mInflater.inflate(layoutId, null); mView.setBackgroundColor(color); addView(mView); return true; } @Override public void onClick(View v) { // TODO Auto-generated method stub } public void addErrorView(Context context, String text){ if (null == errorTV) { FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams( LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); layoutParams.gravity = Gravity.CENTER; errorTV = new TextView(context); errorTV.setLayoutParams(layoutParams); errorTV.setVisibility(View.VISIBLE); errorTV.setTextSize(15); errorTV.setTextColor(Color.GRAY); } errorTV.setText(text); addView(errorTV); isErrorViewShow = true; } public void removeErrorView(){ if (null != errorTV) { removeView(errorTV); } isErrorViewShow = false; } public boolean isErrorViewShow(){ return isErrorViewShow; } }
然後讓真正的標題欄佈局繼承上面的類：
/** * Created by lan.zheng on 2016/9/19. */ public class CommonTitleView extends BaseView{ private ImageButton backIBtn; private TextView leftTV; private TextView titleTV; private ImageButton addIBtn; private TextView rightTV; public CommonTitleView(Context context, AttributeSet attrs) { super(context, attrs); setupViews(); } public CommonTitleView(Context context) { super(context); setupViews(); } private void setupViews() { setContentView(R.layout.title_view); if (isInEditMode()) { return; } } /* * 左邊的控制元件 */ public void setBackImageButtonEnable(boolean isEnable) { if (backIBtn == null) { backIBtn = (ImageButton) findViewById(R.id.topbar_back_ibtn); } if (isEnable) { backIBtn.setVisibility(View.VISIBLE); } else { backIBtn.setVisibility(View.GONE); backIBtn = null; } } public void setBackImageButtonOnClickListener(OnClickListener listener) { if (backIBtn != null) { backIBtn.setOnClickListener(listener); } } public void setLeftTextViewEnable(boolean isEnable) { if (leftTV == null) { leftTV = (TextView) findViewById(R.id.topbar_left_tv); } if (isEnable) { leftTV.setVisibility(View.VISIBLE); } else { leftTV.setVisibility(View.GONE); leftTV = null; } } public void setLeftTextViewText(String text) { if (leftTV != null) { leftTV.setText(text); } } public void setLeftTextViewOnClickListener(OnClickListener listener) { if (leftTV != null) { leftTV.setOnClickListener(listener); } } // 中間 public void setTitleTextViewEnable(boolean isEnable) { if (titleTV == null) { titleTV = (TextView) findViewById(R.id.topbar_title_tv); } if (isEnable) { titleTV.setVisibility(View.VISIBLE); } else { titleTV.setVisibility(View.GONE); titleTV = null; } } public void setTitleTextViewText(String text) { if (titleTV != null) { titleTV.setText(text); } } // 右邊 public void setAddImageButtonEnable(boolean isEnable,OnClickListener listener) { if (addIBtn == null) { addIBtn = (ImageButton) findViewById(R.id.topbar_add_ibtn); } if (isEnable) { addIBtn.setVisibility(View.VISIBLE); addIBtn.setOnClickListener(listener); } else { addIBtn.setVisibility(View.GONE); addIBtn = null; } } public void setRightTextViewEnable(boolean isEnable) { if (rightTV == null) { rightTV = (TextView) findViewById(R.id.topbar_right_tv); } if (isEnable) { rightTV.setVisibility(View.VISIBLE); } else { rightTV.setVisibility(View.GONE); rightTV = null; } } public void setRightTextViewOnClickListener(OnClickListener listener) { if (rightTV != null) { rightTV.setOnClickListener(listener); } } public void setRightTextViewText(String text) { if (rightTV != null) { rightTV.setText(text); } } }
title_view.xml佈局省略，之後我們就可以直接在xml中使用該佈局：
<com.zl.commontitle.CommonTitleView android:id="@+id/main_top_view2" android:layout_width="match_parent" android:layout_height="65dp" android:layout_alignParentTop="true"> </com.zl.commontitle.CommonTitleView>
最後在Activity中使用，下面只使用了圖示的：
private void initTitle(){
commonTitleView = (CommonTitleView) findViewById(R.id.main_top_view);
commonTitleView.setBackImageButtonEnable(true);
commonTitleView.setBackImageButtonOnClickListener(this);
commonTitleView.setAddImageButtonEnable(true,this);
commonTitleView.setTitleTextViewEnable(true);
commonTitleView.setTitleTextViewText("多執行緒測試");
}如果想要變化圖示的圖片，或者新增更多的操作，都可以自己加上一些方法在。
下面我升級了一下，讓這個佈局能適配更多的title需要，左邊和右邊都放置了三個預留控制元件，我們看title_view.xml佈局：
<?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="wrap_content"
android:id="@+id/title_bar_layout"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:background="@null"
android:gravity="center_vertical">
<!-- 中：僅有一個TextView -->
<TextView
android:id="@+id/title_bar_title_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:text="Title"
android:textSize="18dp"
android:visibility="visible"
android:textColor="#ffffff"/>
<!-- 左：ImageButton\TextView\TextView -->
<ImageButton
android:layout_marginRight="10dp"
android:id="@+id/title_bar_back_ibtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="@null"
android:scaleType="fitXY"
android:visibility="visible" />
<TextView
android:layout_marginRight="10dp"
android:layout_toRightOf="@+id/title_bar_back_ibtn"
android:id="@+id/title_bar_left_tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="center"
android:text=""
android:textColor="#ffffff"
android:visibility="visible"/>
<TextView
android:layout_toRightOf="@+id/title_bar_left_tv1"
android:id="@+id/title_bar_left_tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="center"
android:text=""
android:textColor="#ffffff"
android:visibility="gone"/>
<!-- 右: ImageBotton\TextView\TextView -->
<ImageButton
android:layout_marginLeft="10dp"
android:padding="5dp"
android:id="@+id/title_bar_right_ibtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="@null"
android:visibility="gone" />
<TextView
android:layout_marginLeft="10dp"
android:layout_toLeftOf="@+id/title_bar_right_ibtn"
android:id="@+id/title_bar_right_tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="center"
android:text="rtv1"
android:textColor="#ffffff"
android:visibility="gone" />
<TextView
android:layout_toLeftOf="@+id/title_bar_right_tv1"
android:id="@+id/title_bar_right_tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="center"
android:text="rtv2"
android:textColor="#ffffff"
android:visibility="gone" />
</RelativeLayout>
在BaseView中還有一個setContentView(int layoutId,int color) 方法，這次我們用這個方法，可以隨意的改變背景底色，新的佈局叫CommonTitleViewUp:
public class CommonTitleViewUp extends BaseView implements Serializable{
private static String TAG = CommonTitleView.class.getSimpleName();
private boolean haveSetupView = false;
private int textViewColorRes = 0;
private TextView titleTV;
private ImageButton backIBtn;
private TextView leftOneTV;
private TextView leftTwoTV;
private ImageButton rightIBtn;
private TextView rightOneTV;
private TextView rightTwoTV;
public CommonTitleView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CommonTitleView(Context context) {
super(context);
}
/**
* 設定View
* @param context 下面兩個引數傳入“0”時，即預設顯示“藍底白字”
* @param backgroundColor R.color.red_color
* @param allTextViewColor R.color.red_color
* @return
*/
public CommonTitleView setupViews(Context context,int backgroundColor,int allTextViewColor) {
int color = Color.parseColor("#85c0ff"); //預設背景顏色為藍色
if(backgroundColor != 0 ){ //有需要時
color = context.getResources().getColor(backgroundColor);
}
haveSetupView = setContentView(R.layout.title_view, color);
textViewColorRes = allTextViewColor;
titleTV = (TextView) findViewById(R.id.title_bar_title_tv); //預設標題欄初始化
backIBtn = (ImageButton) findViewById(R.id.title_bar_back_ibtn); //左邊的返回按鈕預設初始化
return this;
}
//其他方法請看demo
}有興趣的可以下載我上傳的demo看看升級後的方法功能，title的功能還是不錯的，demo連結稍後放在評論處。
之前還有一個使用自定義Toolbar控制元件的，有興趣可以看http://blog.csdn.net/nzzl54/article/details/52181864