在項(xiàng)目開發(fā)過程中弧关，會(huì)發(fā)現(xiàn)帶有返回鍵盅安、標(biāo)b題和按鈕的 TitleBar 總是出現(xiàn)在多個(gè)界面中，如下圖世囊。而且它們的界面和邏輯都一樣别瞭。如果每個(gè)界面都寫一次代碼，就造成了重復(fù)代碼株憾，對(duì)開發(fā)效率和心情都有很大的影響蝙寨。因此，應(yīng)該對(duì)這樣的重復(fù) TitleBar 進(jìn)行封裝嗤瞎，一次編寫到處使用
常用的 TitleBar 有兩種墙歪，下面這是帶返回鍵、標(biāo)題的 TitleBar
返回鍵贝奇，標(biāo)題
這是帶返回鍵虹菲、標(biāo)題、提交按鈕就的 TitleBar
返回鍵掉瞳，標(biāo)題毕源、按鈕
自定義屬性
標(biāo)題的文字需要根據(jù)不同的界面顯示不通過的內(nèi)容，按鈕的文字也是一樣陕习，所以就需要用到自定義屬性霎褐。在 res/values 文件夾中創(chuàng)建 attrs.xml 文件，添加如下內(nèi)容
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="MyTitleBar">
<attr name="mtb_title" format="string"/>
<attr name="mtb_btn_text" format="string"/>
</declare-styleable>
</resources>
注意一下自定義屬性前面都帶有 mtb_ 前綴（My Title Bar 的縮寫）该镣，這是為了防止和其他自定義屬性同名
預(yù)定義控件ID
定義一下返回鍵冻璃、標(biāo)題、按鈕的 ID
<?xml version="1.0" encoding="utf-8"?>
<resources>
<item name="titleBar_btn_back" type="id"/><!-- 左邊的返回鍵 -->
<item name="titleBar_title" type="id"/><!-- 標(biāo)題 -->
<item name="titleBar_btn_ok" type="id"/><!-- 右邊的按鈕 -->
</resources>
創(chuàng)建TitleBard的布局
創(chuàng)建 res/layout/titlebar_back_title_btn.xml 布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="@dimen/titlebar_height"
android:background="@color/blue">
<ImageButton
android:id="@id/titleBar_btn_back"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@null"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:src="@drawable/mytitlebar_back_arrow"/>
<TextView
android:id="@id/titleBar_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:gravity="center"
android:textColor="#fff"
android:textSize="@dimen/text_size_large"
tools:text="明星教練"/>
<Button
android:id="@id/titleBar_btn_ok"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:background="@drawable/titlebar_btn_ok_selector"
android:minWidth="70dp"
android:onClick="onTitleBarBtnClick"
android:text="完成"
android:textColor="@color/white"
android:textSize="@dimen/text_size_normal"/>
</RelativeLayout>
相關(guān)的資源如下
顏色 color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="blue">#1f75c0</color>
<color name="white">#fff</color>
</resources>
尺寸 dimens.xml
<resources>
<dimen name="titlebar_height">50dp</dimen>
<dimen name="text_size_normal">16sp</dimen>
<dimen name="text_size_large">18sp</dimen>
</resources>
注意一下右邊的按鈕的布局
<Button
android:id="@id/titleBar_btn_ok"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:background="@drawable/titlebar_btn_ok_selector"
android:minWidth="70dp"
android:onClick="onTitleBarBtnClick"
android:text="完成"
android:textColor="@color/white"
android:textSize="@dimen/text_size_normal"/>
其中的
android:onClick="onTitleBarBtnClick"
這是為按鈕設(shè)置了一個(gè)監(jiān)聽事件，等下會(huì)講解
創(chuàng)建 MyTitleBar 類
public class MyTitleBar extends FrameLayout {
// 左邊的返回鍵
private ImageButton mIvBtnBack;
// 標(biāo)題文字
private TextView mTvTitle;
// 右邊的按鈕
private Button mBtnRight;
public MyTitleBar(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.titlebar_back_title_btn, this);
mIvBtnBack = (ImageButton) findViewById(R.id.titleBar_btn_back);
mTvTitle = (TextView) findViewById(R.id.titleBar_title);
mBtnRight = (Button) findViewById(R.id.titleBar_btn_ok);
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyTitleBar);
try {
String titleText = typedArray.getString(R.styleable.MyTitleBar_mtb_title);
mTvTitle.setText(titleText);
String btnText = typedArray.getString(R.styleable.MyTitleBar_mtb_btn_text);
mBtnRight.setText(btnText);
} finally {
typedArray.recycle();
}
// 左邊按鈕的監(jiān)聽事件
mIvBtnBack.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
((Activity) getContext()).finish();
}
});
}
/**
* 重新設(shè)置左邊按鈕的點(diǎn)擊事件監(jiān)聽器
*/
public void setBtnBckClickListener(View.OnClickListener listener) {
mIvBtnBack.setOnClickListener(listener);
}
}
使用
在 MainActivity.xml 中
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_title_bar"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.owen.dialogsample.views.MyTitleBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:mtb_btn_text="提交"
app:mtb_title="標(biāo)題"/>
</RelativeLayout>
在 MainActivity.java 中俱饿，別忘了創(chuàng)建 onTitleBarBtnClick(View v) 方法歌粥，否則點(diǎn)擊按鈕時(shí)會(huì)崩潰
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public void onTitleBarBtnClick(View v) {
Toast.makeText(this, "右邊按鈕被點(diǎn)擊了", Toast.LENGTH_SHORT).show();
}
}
效果圖如下
