打造一个通用的TitleView

最新推荐文章于 2021-05-29 21:00:07 发布
最新推荐文章于 2021-05-29 21:00:07 发布
阅读量651 收藏 2
点赞数 1
分类专栏： android开发 文章标签： 布局 android 标题栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/code_legend/article/details/78698657
版权

在开发应用的过程中，大部分应用应该都是有标题栏的。通常情况下，我们所使用的标题栏的高度什么其他设置之类的基本上都是相同。so，为了节省开发的效率，今天我们共同打造一个通用的标题栏。

  • 一般刚开发的时候，我们会有好几种情况去写标题栏，感觉刚入行的话，可能会在每个布局里面都去复制重复的布局，升级一点的话，应该会用include去把这个同样的布局，引入的主布局中。但是我感觉上面的方法都麻烦了。现在用一个自定义布局，只需要在布局中设置自己想要的东西就可以。那现在就让我们一起开始吧。
  • 首先展示一下我们经常的使用布局的一个样式，一般情况下都是有三个主要部分组成，第一个是返回按钮，一般都是有的，然后中间是说明这个页面的大概描述，最后一个是点击这个按钮可以跳转其他的页面之类的。这里写图片描述
  • 自定义View的话，有很多种情况，在这里我们使用继承原有的View实现自定义(其实是很简单的自定义了)。首先需要写一个布局，其实这个布局很简单的，就是我们平常用xml写的布局，不作具体介绍了。代码如下
<?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="wrap_content"
              android:background="@color/main_color"
              android:orientation="vertical">


    <RelativeLayout
        android:id="@+id/ll_root"
        android:layout_width="match_parent"
        android:layout_height="@dimen/common_title_height"
        android:background="@color/main_color">

        <LinearLayout
            android:clickable="true"
            android:id="@+id/btn_left"
            android:layout_width="@dimen/common_title_height"
            android:layout_height="match_parent"
            android:background="@drawable/selector_btn_back"
            android:gravity="center"
            android:padding="10dp">

            <ImageView
                android:id="@+id/left_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_back_white"/>
        </LinearLayout>


        <TextView
            android:id="@+id/title_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:maxLength="20"
            android:maxLines="1"
            android:text="标题"
            android:textColor="@color/white"
            android:textSize="@dimen/title_text_size"/>

        <LinearLayout
            android:clickable="true"
            android:id="@+id/btn_right"
            android:layout_width="@dimen/common_title_height"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:background="@drawable/selector_btn_back"
            android:gravity="center"
            android:padding="10dp">

            <ImageView
                android:id="@+id/right_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/actionbar_menu"/>
        </LinearLayout>

    </RelativeLayout>

</LinearLayout>
  • 接下来就要自定义布局了，在这里我们继承LinearLayout来实现自定义View。只需要把下面属性复制到attrs.xml里面就行。这里面可能有点难的主要有两点吧，一个自定义属性，第二个就是点击事件之类的。
    1. 自定义属性：这里的话，我一共设置了九个自定义属性。其中要说的明的是最后两个属性里面有一个逻辑就是当左边的icon不显示的时候，不响应点击事件。同理右边的也是。
nameformat意义
title_colorcolor标题的背景颜色
title_text_sizedimension标题字体的大小
title_text_colorcolor标题字体的颜色
title_textstring标题字体的内容
title_left_iconreference标题左边的icon
title_right_iconreference标题右边的icon
title_highdimension标题栏的高度
left_isVisableboolean是否显示左边的icon
right_isVisableboolean是否显示右边的icon
<!--自定义标题栏-->
    <declare-styleable name="MyTitle">
        <attr name="title_color" format="color" />
        <attr name="title_text_size" format="dimension" />
        <attr name="title_text_color" format="color" />
        <attr name="title_text" format="string" />
        <attr name="title_left_icon" format="reference" />
        <attr name="title_right_icon" format="reference" />
        <attr name="title_high" format="dimension" />
        <attr name="left_isVisable" format="boolean" />
        <attr name="right_isVisable" format="boolean" />
    </declare-styleable>
  • 好了自定义属性设定好了，接下来就要写自定义view了。其实下面这段代码很简单，主要就是获取自定义属性，然后在代码里面设置就好了，感觉没什么好说的。
package com.mars.community.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.support.annotation.Nullable;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.mars.community.R;


/**
 * @date 创建时间: 2017/12/2  21:46
 * @author zh_legendd
 * @Description 自定义的titleView
 * @Email code_legend@163.com
 * @Version 1.0
 */

public class TitleView extends LinearLayout {

    //标题的颜色
    private int title_color;
    //字体的大小
    private float title_text_size;
    //字体的颜色
    private int title_text_color;
    //字体内容
    private String title_text;
    //标题左边的icon


    private int title_left_icon;
    //标题右边的icon
    private int title_right_icon;
    //标题栏的高度
    private float title_high;
    //是否显示左边的icon
    private boolean left_isvisalbe;
    //是否显示右边的icon
    private boolean right_isvisalbe;
    //标题
    private TextView titleName;
    // 返回按钮控件
    private LinearLayout btnLeft;
    // 更多按钮控件
    private LinearLayout btnRight;
    // 返回按钮图标
    private ImageView leftIcon;
    // 更多按钮图标
    private ImageView rightIcon;
    //设置背景颜色
    private RelativeLayout ll_root;

    public TitleView(Context context) {
        this(context, null);
    }

    public TitleView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TitleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.common_titile, this);
        //初始化视图
        initView();
        TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.MyTitle, defStyleAttr, 0);
        try {
            title_color = typedArray.getColor(R.styleable.MyTitle_title_color, ContextCompat.getColor(context, R.color.main_color));
            title_text_color = typedArray.getColor(R.styleable.MyTitle_title_text_color, ContextCompat.getColor(context, R.color.white));
            title_high = typedArray.getDimension(R.styleable.MyTitle_title_high, getResources().getDimension(R.dimen.common_title_height));
            title_text = typedArray.getString(R.styleable.MyTitle_title_text);
            title_left_icon = typedArray.getResourceId(R.styleable.MyTitle_title_left_icon, R.mipmap.ic_back_white);
            title_right_icon = typedArray.getResourceId(R.styleable.MyTitle_title_right_icon, 0);
//            title_text_size = typedArray.getDimension(R.styleable.MyTitle_title_text_size,getResources().getDimension(R.dimen.title_text_size));
            left_isvisalbe = typedArray.getBoolean(R.styleable.MyTitle_left_isVisable, true);
            right_isvisalbe = typedArray.getBoolean(R.styleable.MyTitle_right_isVisable, false);
            //设置内容
            titleName.setText(title_text);
//            titleName.setTextSize(dp2px(title_text_size));
            titleName.setTextColor(title_text_color);
            ll_root.setBackgroundColor(title_color);
            if (left_isvisalbe) {
                leftIcon.setVisibility(View.VISIBLE);
                leftIcon.setImageResource(title_left_icon);
            } else {
                leftIcon.setVisibility(View.GONE);
                btnLeft.setEnabled(false);
            }
            if (right_isvisalbe) {
                rightIcon.setImageResource(title_right_icon);
                rightIcon.setVisibility(View.VISIBLE);
            } else {
                rightIcon.setVisibility(View.GONE);
                btnRight.setEnabled(false);
            }
            LinearLayout.LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, (int) title_high);
            ll_root.setLayoutParams(params);


        } finally {
            typedArray.recycle();
        }

    }

    public void setLeftClickListener(OnClickListener listener) {
        btnLeft.setOnClickListener(listener);
    }

    public void setRightClickListener(OnClickListener listener) {
        btnRight.setOnClickListener(listener);
    }

    public int getTitle_color() {
        return title_color;
    }

    public void setTitle_color(int title_color) {
        this.title_color = title_color;
        ll_root.setBackgroundColor(title_color);
    }

    public float getTitle_text_size() {
        return title_text_size;
    }

    public void setTitle_text_size(float title_text_size) {
        this.title_text_size = title_text_size;
        titleName.setTextSize(title_text_size);
    }

    public int getTitle_text_color() {
        return title_text_color;
    }

    public void setTitle_text_color(int title_text_color) {
        this.title_text_color = title_text_color;
        titleName.setText(title_text_color);
    }

    public String getTitle_text() {
        return title_text;
    }

    public void setTitleName(String title_text) {
        this.title_text = title_text;
        titleName.setText(title_text);
    }

    public int getTitle_left_icon() {
        return title_left_icon;
    }

    public void setTitle_left_icon(int title_left_icon) {
        this.title_left_icon = title_left_icon;
        leftIcon.setImageResource(title_left_icon);
    }

    public int getTitle_right_icon() {
        return title_right_icon;
    }

    public void setTitle_right_icon(int title_right_icon) {
        this.title_right_icon = title_right_icon;
        rightIcon.setImageResource(title_right_icon);
    }

    public float getTitle_high() {
        return title_high;
    }

    public void setTitle_high(float title_high) {
        this.title_high = title_high;
        LinearLayout.LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, (int) title_high);
        ll_root.setLayoutParams(params);
    }

    private void initView() {
        titleName = (TextView) findViewById(R.id.title_name);
        btnLeft = (LinearLayout) findViewById(R.id.btn_left);
        btnRight = (LinearLayout) findViewById(R.id.btn_right);
        leftIcon = (ImageView) findViewById(R.id.left_icon);
        rightIcon = (ImageView) findViewById(R.id.right_icon);
        ll_root = (RelativeLayout) findViewById(R.id.ll_root);
    }
    protected int dp2px(float dp) {
        final float scale = getContext().getResources().getDisplayMetrics().density;
        return (int) (dp * scale + 0.5f);
    }

}
  • 接下了就是怎么使用了，使用的话真的很简单。根据自己的需求可以任意设定即可。需要在根布局中引入匿名约束即这一行代码xmlns:app=”http://schemas.android.com/apk/res-auto”。
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
<com.zh.connent.widget.TitleView
        android:id="@+id/tlv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:left_isVisable="false"
        app:right_isVisable="true"
        app:title_right_icon="@mipmap/discovery_right_icon"
        app:title_text="标题栏"
        />

好了，就是这么简单，直接拿来用就好，有什么问题可以给我留言。

Code_legend
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android自定义标题TitleView
09-06 745
Android开发过程中，经常遇到一个项目需要重复的定义相同样式的标题栏，Android相继推出了actionBar, toolBar, 相信有用到的朋友也会遇到一些不如意的时候，比如标题栏居中时，需要自定义xml文件给toolBar等，不了解actionBar,toolBar的可以去找相应的文章了解，这里介绍自定义titleBar满足国内主题风格样式的情况。为了提前看到效果，先上效果图： 前期准备
Android开发从相册中选取照片
Code_legend的博客
08-27 1万+
最近项目在做一个功能：就是需要从用户选择头像跳转到相册选择图片，这应该是一个很简单的需求，但是在网上搜了一下有好多都讲的很乱，其实用几十行代码就可以实现的为什么要说的那么复杂呢，下面就简单说一下喽。下面说两种方法分别是直接选择相册返回，另外一种为选择相册之后进行裁剪。先上效果图 (1)直接选择相册后返回 第一步就是主要跳转的相册 //在这里跳转到手机系统相册里面 Intent i
自定义控件TitleView
热门推荐
zhu6201976的博客
03-02 7万+
<?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="wrap_content" andr
android view widget layout等的关系
xzx_kag的专栏
11-30 2785
View，Widget，ViewGroup和Layout同属一类； View是界面显示的基本单元，会draw()到Canvas上。 ViewGroup继承View，是个容器，内部有View[]数组； 有些Widget（如ImageView，TextView等）继承View； 有些Widget（如AdapterView，GridView等）继承ViewGroup； 所有Layout（如LinearL
IOS写一个可以支持全屏的WebView
baidu_nod的专栏
08-09 4393
先上效果图: 这样来写布局
导航栏 titleView 位置
si1279571489的博客
12-19 5013
今天新接到的界面的导航栏上面有一个搜索框（之前也有过，但之前没注意到） 按照设计给的图设置坐标。一 我的想法：为了好控制搜索框和客服按钮的位置，大小及两者距离，我决定将两者均放到titleView上面。二 我的做法： 1，先创建backView（UIView） UIView *backView = [[UIView alloc] initWithFrame:CGRectMake(0,
关于带布局的自定义View(自定义TitleView)
u013728021的博客
03-19 960
Android实现自定义TitleView
Android定义一个文本组件,GitHub - yipianfengye/android-titleview: 一个简单的文本显示控件...
weixin_42440934的博客
05-25 171
android-titleview在介绍具体的使用说明之前，我们先看一下简单的实现效果：使用说明当大title文案显示为一行的时候，大title和小title分行显示；当大title文案显示为两行且不满两行的时候，小title在大title第二行显示内容之后显示；当大title文案显示满两行的时候，小title在第二行末尾显示，大title第二行不占满全行，切末尾以...结束；支持对大title文...
Android用注解打造一个简易的TitleView
qq_36523667的博客
03-08 602
最近手上在同时做两个项目，有点疲于奔命，博客都无暇顾及；但是也得出一个心得：做一个项目，首先要审视UI给你的图和后台给你的需求，找到复用之处，这是快速开发的第一步。所以TitleView能不封装吗？我的A项目的title（仿微信的title）B项目的title所以只需要简单封装下返回的按键就可以了至于title name，可以采用注解，免去几行代码，进行优雅的声明，如下所示：全部代码javapub...
iOS中设置导航栏标题( titleView)的字体颜色和大小
iOS开发相关（OC）
03-02 1万+
在iOS中，经常会对一些导航栏titleView进行自定义，首先介绍一下对navgationBar 上的title设置的三种方法： self.title = @"我是title" ; 直接设置 self.navigationItem.title = @"我是title" ； 以上两种方法 title的显示跟调用顺序有关，谁后调用显示谁   UILabel * titleLabel =
android 标题栏的几种,Android标题栏的几种解决思路
weixin_29879697的博客
05-29 1058
第一种方式：标题栏写成控件第一步：定义标题栏用到的属性，在/values下新建attrs文件，添加属性，其中reference|color代表既可以用图片，也可以定义成一种颜色。第二步，自定义TopTitle，继承RelativeLayout(ViewGroup),获取attrs中的属性//获取typedarray里面的属性private void initAttrs(AttributeSet a...
Android自定义TitleView标题开发实例
09-01
主要介绍了Android自定义TitleView标题开发实例的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
Android 通用标题栏 简单封装实现
03-20
Android 通用标题栏 简单封装实现 http://blog.csdn.net/RichieZhu/article/details/50935918
Android-TopTitleView-自定义方便好用的标题栏可以添加标题右边标题
08-13
TopTitleView - 自定义方便好用的标题栏，可以添加标题，右边标题
可滑动的titleView
05-22
可滑动的titleView 支持pods pod 'RBTitleView', '~> 2.0.1'
TitleView控件
10-10
在Android应用当中一般都会有一个标题栏，标题左边和右边各一个按钮。 我这里做了一份源码，参考网上一哥们的例子，做了一点优化。
自定义UINavigationItem.titleView显示
04-05
作者bing900717，源码CenterTitleView，自定义UINavigationItem.titleView并居中显示。titleView会根据leftBarButtonItem和rightBarButtonItem调整自己的位置和大小。这就产生了居中显示的问题，当...
Winform GridControl转TitleView
12-15
Winform GirdControl转titleview卡片式看板，DevExpress +DevexpressMVVM
Android 6.0运行时获取权限详解
Code_legend的博客
12-04 6989
最近在工作过程中会遇到，明明已经在AndroidManifest.xml中配置了权限，但是就是没有作用，百度了之后才发现现在在应用系统大于等于6.0的手机上面，需要动态的获取权限。就是当你需要这个权限的时候，需要手机给用户一个提示选择是否同意开启这个权限。 看到网上有很多关于这方面的文章，但是大部分都是很随意的copy别人的，看起来好像很麻烦似的，其实动态获取权限就那几行代码就可以搞定。 接下来就举
写一个旋转木马自定义控件
最新发布
06-07
好的，我可以给您提供一个简单的旋转木马自定义控件的实现。这个控件可以显示一组图片，并支持手势滑动和点击事件。以下是实现步骤： 1. 定义 CarouselItem 类，用于表示旋转木马中的每个项目。该类应该包含一个 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值