Android项目中利用组合控件自定义全局的顶部标题栏-阿里云开发者社区

开发者社区> 1454689744399364> 正文

Android项目中利用组合控件自定义全局的顶部标题栏

简介: Android项目中利用组合控件自定义全局的顶部标题栏
+关注继续查看


实现功能:

1)自定义View标题栏布局;

2)灵活的可以自己传入类型,选择所需要的控件来显示隐藏

3)相对于我之前写过的一篇,免继承,可直接在布局里使用

4)直接可以在布局控件里设置属性

老规矩,效果图:
20190109174841171.png

由效果图可见,这个是可以根据传入封装好的变量来控制,比较灵活的

下面就来实现以下步骤

1.创建一个布局文件,命名,layout_titlebar,来部署我们的标题栏样式,可以自定义更改,图片文件可暂时用自己的替代

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="50dp">
 
    <ImageView
        android:id="@+id/iv_back"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_marginLeft="20dp"
        android:src="@drawable/icon_back"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="标题"
        android:textColor="#000"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
    <TextView
        android:id="@+id/tv_more"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="更多"
        android:textColor="#000"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
    <ImageView
        android:id="@+id/iv_more"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@drawable/icon_more"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
</android.support.constraint.ConstraintLayout>

image.gif

2.自定义View,继承自RelativeLayout,第3步贴上attr文件

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
 
/**
 * @Author : 张
 * @Email : manitozhang@foxmail.com
 * @Date : 2018/9/19
 *
 * 一个简单的自定义标题栏
 */
 
public class CustomTitleBar extends RelativeLayout {
 
    private ImageView ivBack;
    private TextView tvTitle;
    private TextView tvMore;
    private ImageView ivMore;
 
    public CustomTitleBar(Context context, AttributeSet attrs) {
        super(context, attrs);
 
        initView(context,attrs);
    }
 
    //初始化视图
    private void initView(final Context context, AttributeSet attributeSet) {
        View inflate = LayoutInflater.from(context).inflate(R.layout.layout_titlebar, this);
        ivBack = inflate.findViewById(R.id.iv_back);
        tvTitle = inflate.findViewById(R.id.tv_title);
        tvMore = inflate.findViewById(R.id.tv_more);
        ivMore = inflate.findViewById(R.id.iv_more);
 
        init(context,attributeSet);
    }
 
    //初始化资源文件
    public void init(Context context, AttributeSet attributeSet){
        TypedArray typedArray = context.obtainStyledAttributes(attributeSet, R.styleable.CustomTitleBar);
        String title = typedArray.getString(R.styleable.CustomTitleBar_title);//标题
        int leftIcon = typedArray.getResourceId(R.styleable.CustomTitleBar_left_icon, R.drawable.icon_back);//左边图片
        int rightIcon = typedArray.getResourceId(R.styleable.CustomTitleBar_right_icon, R.drawable.icon_more);//右边图片
        String rightText = typedArray.getString(R.styleable.CustomTitleBar_right_text);//右边文字
        int titleBarType = typedArray.getInt(R.styleable.CustomTitleBar_titlebar_type, 10);//标题栏类型,默认为10
 
        //赋值进去我们的标题栏
        tvTitle.setText(title);
        ivBack.setImageResource(leftIcon);
        tvMore.setText(rightText);
        ivMore.setImageResource(rightIcon);
 
        //可以传入type值,可自定义判断值
        if(titleBarType == 10){//不传入,默认为10,显示更多 文字,隐藏更多图标按钮
            ivMore.setVisibility(View.GONE);
            tvMore.setVisibility(View.VISIBLE);
        }else if(titleBarType == 11){//传入11,显示更多图标按钮,隐藏更多 文字
            tvMore.setVisibility(View.GONE);
            ivMore.setVisibility(View.VISIBLE);
        }
    }
 
    //左边图片点击事件
    public void setLeftIconOnClickListener(OnClickListener l){
        ivBack.setOnClickListener(l);
    }
 
    //右边图片点击事件
    public void setRightIconOnClickListener(OnClickListener l){
        ivMore.setOnClickListener(l);
    }
 
    //右边文字点击事件
    public void setRightTextOnClickListener(OnClickListener l){
        tvMore.setOnClickListener(l);
    }
}

image.gif

3.在res下的values下创建attr文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
 
    <declare-styleable name="CustomTitleBar">
        <attr name="title" format="string"/>
        <attr name="left_icon" format="reference"/>
        <attr name="right_icon" format="reference"/>
        <attr name="right_text" format="string"/>
        <attr name="titlebar_type" format="integer"/>
    </declare-styleable>
 
</resources>

image.gif

String是文字类型,references是图片类型,integer是数字类型

4.需要用到我们的这个顶部标题栏的话,就在当前布局引入

可以根据type传入的值来改变右边显示文字还是图片,可在自定义View自定义该type值

<com.titlebar.CustomTitleBar
        android:id="@+id/titlebar"
        android:background="#DCDCDC"
        app:right_icon="@drawable/icon_more"
        app:right_text="更多"
        app:titlebar_type="11"
        app:left_icon="@drawable/icon_back"
        app:title="我是标题"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></com.titlebar.CustomTitleBar>

image.gif

5.可以获取它的id,来调用它的点击事件

CustomTitleBar titleBar = findViewById(R.id.titlebar);
        titleBar.setLeftIconOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "左边", Toast.LENGTH_SHORT).show();
            }
        });

image.gif

6.就这么多了,在这里贴上源码,小伙伴可以试试

Android 灵活的自定义顶部标题栏


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《圣殿祭司的ASP.NET4.0专家技术手册》---- 1-14 项目同时使用C# 与VB语言及多组件的技巧
早期VS.NET 2002及VS.NET 2003的Visual Studio工具不支持多个组件文件(Assembly),也就是项目编译后只会产生一个dll组件,而一个组件只允许包含一种语言(因为系统会调用对应C#或VB编译程序进行编译),因此在同一个项目中要使用两种语言是办不到的;但在VS 2010中,因为项目支持多个组件,所以利用这个特性就可以同时使用两种以上的语言(如C#与VB),因此.cs或.vb的类别在项目中就可以直接拿来使用,直接就可以new instance,不需要先编译成dll文件再加以引用。
1418 0
Android开发学习之使用Toolbar实现不同的Fragment使用不同颜色的标题栏与状态栏
Android开发学习之使用Toolbar实现不同的Fragment使用不同颜色的标题栏与状态栏                                            先看效果图。
2307 0
Android去掉状态栏和标题栏的两种方式
方式一: 在AndroidManifest.xml配置文件中为对应的Activity设置 android:theme="@android:style/Theme.
998 0
Silverlight项目中"自定义控件开发/Style"学习笔记
本文不涉及高深的设计模式(比如mvc,mvvm之类),也没有太多的编程技巧,只是记录自己做为asp.net开发者学习silverlight中自定义控件开发的一些过程,高手请绕过。  先推荐一篇不错的文章http://www.cnblogs.com/carysun/articles/1259025.html 写得很全面,只不过图片讲解不够丰富,初学者可能有些感到跳跃性大了一些。
835 0
【Android】Android自定义带board的圆角控件
介绍 圆角控件常用于头像,按钮,图标等,用途十分广泛,而且常常配合board使用。 在IOS中,UIVIew的CALayer层已经提供了圆角和board的方法,所以圆角控件的制作非常简单,只需要类似以下简单代码即可实现: view.layer.cornerRadius = 20; view.layer.borderColor = [UIColor yellow
2279 0
+关注
1454689744399364
只有变秃,才能变强
6
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载