在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