UI的Title

原创 2015年07月08日 22:29:25

项目中,每个页面基本上都会有title,系统默认的actionbar一般都没人用,大部分时候是自己进行定义。这里写一个通用的Titile模块,方便以后在其他APP中使用。
首先,是布局,

<?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/white"
    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="@dimen/txtsize_subhead"
        android:visibility="gone" />

    <TextView
        android:id="@+id/titlebar_tv"
        style="@style/TextViewTitle"
        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_alignParentEnd="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:layout_alignParentEnd="true"
        android:gravity="center_vertical"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:textColor="@drawable/txtcolor_oran2alpha_sel"
        android:textSize="@dimen/txtsize_subhead"
        android:visibility="gone" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_alignParentBottom="true"
        android:background="@color/bg_agray" />

</RelativeLayout>

基本上就是中间是title文字,左边和右边也有文字或者按钮,默认都是gone状态,需要的时候再显示出来,在其他布局中,通过include标签加载进去即可:

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

最后,我们在代码中设置调用即可,这里我们进行设置的Util工具类进行封装,使用Builder模式,具体代码如下:

import android.app.Activity;
import android.text.TextUtils;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.TextView;

import com.fanxl.fwbo.R;

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);
        init();
    }

    public TitleBuilder(View context) {
        viewTitle = context.findViewById(R.id.rl_titlebar);
        init();
    }

    private void init(){
        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 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;
    }

    //设置左边图片
    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 setLeftOnClickListener(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;
    }
}

代码中使用:

new TitleBuilder(view)
.setTitleText("首页")
.setLeftText("左边")
.setLeftOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        ToastUtils.showToast(activity, "left onclick", Toast.LENGTH_SHORT);
    }
});

设置标题为首页,设置左边文字,并设置点击事件弹出吐司。
这样,在其他页面使用,只需要在xml中include一下布局,然后在代码中设置一下即可使用。

Viewpager Title 同步滑动

  • 2016年07月25日 16:49
  • 1.66MB
  • 下载

Matlab中给figure添加图例(legend),标题(title)和颜色(color)

在Matlab绘图过程中,尤其是需要将多个图绘制在相同的坐标轴中时,通常需要将不同的曲线设置成为不同的颜色。此外,为了直观,还需要给这张图标增添标题和图例。这篇文章展示了在Matlab的绘图窗口(fi...
  • shiyuan0
  • shiyuan0
  • 2015年01月20日 16:58
  • 25515

顶部title悬浮渐变

  • 2017年02月17日 09:40
  • 8.98MB
  • 下载

meta和title的顺序问题引起IE显示空白页

一个页面,在FF下显示正常,在IE下显示空白,完完全全的空白,没有报错,没有提示,本以为是服务器没开,结果查看空白页的源文件,又是可以看的,源文件完全正常,只能是IE解析的问题,那么是什么地方引起IE...

android 仿QQ好友动态 title滑动渐变

  • 2015年09月11日 15:16
  • 2.56MB
  • 下载

ajax.txt_title

  • 2015年12月07日 10:56
  • 2KB
  • 下载

android上使用RecyclerView实现顶部悬浮标题效果的Sticky Title View

目前很多的项目都在使用顶部悬浮标题的效果,很明显,这的确是一个比较人性化,用户体验效果比较好的UI交互效果,对于这个效果,有很多种实现方式,如果说要用RecyclerView来实现一个分类信息展示,并...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:UI的Title
举报原因:
原因补充:

(最多只允许输入30个字)