您的位置:首页 > 产品设计 > UI/UE

android 使用Builder模式 构建自定义title

2016-10-25 10:53 330 查看

1.简介

android开发中,每个页面中都有一些特定或者通用的title样式。如果我们分别跟每个页面去设置布局再进行逻辑处理。会很冗余,而且开发的效率也会大大降低。今天就跟大家介绍一种使用Builder模式来构建自定义title的方法。

2.定义布局

首先我们应该大致写一下我们需要的title的通用布局。下面就以我项目中用到的为例。贴出代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rl_titlebar"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@color/bg_agray"
android:fitsSystemWindows="true"
android:orientation="horizontal" >

<ImageView
android:id="@+id/titlebar_iv_left"
android:layout_width="48dp"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:padding="12dp"
android:visibility="gone" />

<TextView
android:id="@+id/titlebar_tv_left"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:textColor="@drawable/txtcolor_oran2alpha_sel"
android:textSize="16sp"
android:visibility="gone" />

<TextView
android:id="@+id/titlebar_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:textSize="16sp"
android:textColor="@color/txt_black"
android:marqueeRepeatLimit="marquee_forever"
android:ellipsize="marquee"
android:layout_centerInParent="true"
android:gravity="center"
android:maxWidth="224dp" />

<ImageView
android:id="@+id/titlebar_iv_right"
android:layout_width="48dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:padding="12dp"
android:visibility="gone" />

<TextView
android:id="@+id/titlebar_tv_right"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:gravity="center_vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:textColor="@drawable/txtcolor_oran2alpha_sel"
android:textSize="16sp"
android:visibility="gone" />

</RelativeLayout>


我的项目中title会有左右两边显示图片或者文字和显示中间的标题的需求。

3.构建TitleBuilder类

使用Builder设计模式构建TitleBuilder类,声明上述布局中的View。

public class TitleBuilder {

private View viewTitle;
private TextView tvTitle;
private ImageView ivLeft;
private ImageView ivRight;
private TextView tvLeft;
private TextView tvRight;

public TitleBuilder(Activity context) {
viewTitle = context.findViewById(R.id.rl_titlebar);
tvTitle = (TextView) viewTitle.findViewById(R.id.titlebar_tv);
ivLeft = (ImageView) viewTitle.findViewById(R.id.titlebar_iv_left);
ivRight = (ImageView) viewTitle.findViewById(R.id.titlebar_iv_right);
tvLeft = (TextView) viewTitle.findViewById(R.id.titlebar_tv_left);
tvRight = (TextView) viewTitle.findViewById(R.id.titlebar_tv_right);
}

public TitleBuilder(View context) {
viewTitle = context.findViewById(R.id.rl_titlebar);
tvTitle = (TextView) viewTitle.findViewById(R.id.titlebar_tv);
ivLeft = (ImageView) viewTitle.findViewById(R.id.titlebar_iv_left);
ivRight = (ImageView) viewTitle.findViewById(R.id.titlebar_iv_right);
tvLeft = (TextView) viewTitle.findViewById(R.id.titlebar_tv_left);
tvRight = (TextView) viewTitle.findViewById(R.id.titlebar_tv_right);
}

//title
public TitleBuilder setTitleBgRes(int resId) {
viewTitle.setBackgroundResource(resId);
return this;
}

public TitleBuilder setTitleText(String text) {
tvTitle.setVisibility(TextUtils.isEmpty(text) ? View.GONE : View.VISIBLE);
tvTitle.setText(text);
return this;
}

//left
public TitleBuilder setLeftImage(int resId) {
ivLeft.setVisibility(resId > 0 ? View.VISIBLE : View.GONE);
ivLeft.setImageResource(resId);
return this;
}

public TitleBuilder setLeftText(String text) {
tvLeft.setVisibility(TextUtils.isEmpty(text) ? View.GONE : View.VISIBLE);
tvLeft.setText(text);
return this;
}

public TitleBuilder setLeftClickListener(OnClickListener listener) {
if (ivLeft.getVisibility() == View.VISIBLE) {
ivLeft.setOnClickListener(listener);
} else if (tvLeft.getVisibility() == View.VISIBLE) {
tvLeft.setOnClickListener(listener);
}
return this;
}

//right
public TitleBuilder setRightImage(int resId) {
ivRight.setVisibility(resId > 0 ? View.VISIBLE : View.GONE);
ivRight.setImageResource(resId);
return this;
}

public TitleBuilder setRightText(String text) {
tvRight.setVisibility(TextUtils.isEmpty(text) ? View.GONE : View.VISIBLE);
tvRight.setText(text);
return this;
}

public TitleBuilder setRightOnclickListener(OnClickListener listener) {
if (ivRight.getVisibility() == View.VISIBLE) {
ivRight.setOnClickListener(listener);
} else if (tvRight.getVisibility() == View.VISIBLE) {
tvRight.setOnClickListener(listener);
}
return this;
}

public View build() {
return viewTitle;
}
}


4.如何使用

到了这里准备工作已经完成,下面就该演示如何使用:

首先在要加入title的布局中include上述布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<include layout="@layout/titlebar"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Set TitleBar"/>

</LinearLayout>


然后在代码中就可以直接使用了:

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_title);
initView();
}

private void initView() {
new TitleBuilder(this).setTitleText("Title").setLeftText("Left").setRightText("Right").setLeftClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {

}
}).setRightOnclickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {

}
}).build();
}


根据页面的需求可以动态的设置左右两边显示文字图片,或者隐藏,非常的方便。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息