您的位置:首页 > 其它

[置顶] 简单的自定义标题栏(不使用Toolbar)

2016-09-20 10:22 435 查看
比较简单的自定义标题栏,这里直接封装成一个类似控件的样子,先上效果图:



我们可以先写一个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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: