Android 功能最强的自定义标题栏控件

丁.鹏

已于 2023-02-23 10:53:29 修改

阅读量1.8k

点赞数 1

分类专栏： android 移动开发自定义标题栏文章标签： android 控件导航自定义标题栏控件

于 2016-09-04 04:35:34 首次发布

本文链接：https://blog.csdn.net/dingpeng3414/article/details/52429853

版权

android 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

移动开发

4 篇文章 0 订阅

订阅专栏

自定义标题栏

1 篇文章 0 订阅

订阅专栏

Android 功能最强的自定义标题栏控件

先上图片

1. 这里写图片描述
左右导航提示都是使用文字

2. 这里写图片描述
右边使用文字

3. 这里写图片描述
左右为空，只用标题

4. 这里写图片描述
左右都是使用图标作为导航提示

5. 这里写图片描述
只有一个导航图标

6. 这里写图片描述
既有图标又有文字的导航

以上都app开发过程中经常用的导航样式，当然还有其他很多这只是常见的几种

现在只要自定义一个控件就可以搞定这么多标题，是不是很激动

上代码
1.首先是要写自定义属性
编写自定义属性文件atts.xml，自定义属性中主要是文字和图片；
atts.xml是放在values文件下。

<?xml version="1.0" encoding="utf-8"?>
        <!--文字属性-->
        <attr name="tvLifeText" format="string" />
        <attr name="titleText" format="string" />
        <attr name="tvRightText" format="string" />
        <!--icon属性-->
        <attr name="imRightSrc" format="reference" />
        <attr name="imCenterSrc" format="reference" />
        <attr name="imLifeSrc" format="reference" />
    </declare-styleable>

2.自定义控件的布局文件title_bar.xml
这里主要注意LinearLayout也要有id，因为自定义控件的监听事件就是在LinearLayout上

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:background="#FFFFFF"
    tools:context="com.blog.pengding.ui.TitleBar">

    <LinearLayout
        android:id="@+id/li_life"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/iv_life_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <TextView
            android:id="@+id/tv_life_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_weight="1"
            android:textSize="15sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/li_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv_center_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="20sp" />

        <ImageView
            android:id="@+id/iv_center_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="5dp"
            android:layout_weight="1" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/li_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="10dp"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv_right_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textSize="15sp" />

        <ImageView
            android:id="@+id/iv_right_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_weight="1" />
    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0.1dp"
        android:layout_alignParentBottom="true"
        android:background="#fff000" />
</RelativeLayout>

3.自定义控件继承自RelativeLayout 要注意属性的获取和监听事件接口的编写

package com.blog.pengding.ui;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.blog.pengding.jijianblog.R;

public class TitleBar extends RelativeLayout {

    private OnTitleAndLeftAndRightClickListener listener;//监听点击事件

    private LinearLayout li_life, li_right, li_title;//布局控件，设置响应监听事件用

    private TextView tv_life, tv_right, tv_title;//左边文字，右边文字，标题；文本控件，设置标题，文字用

    private ImageView iv_life, iv_title, iv_right;//图片控件，设置图标用

    public TitleBar(Context context) {
        super(context);
    }

    /**
     * 注意这个构造方法是Context context, AttributeSet attrs两个参数
     *
     * @param context
     * @param attrs
     */
    public TitleBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.title_bar, this);//获取布局xml
        //初始化LinearLayout控件
        li_life = (LinearLayout) findViewById(R.id.li_life);
        li_right = (LinearLayout) findViewById(R.id.li_right);
        li_title = (LinearLayout) findViewById(R.id.li_title);

        li_life.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                if (listener != null)
                    listener.onLeftLinearLayoutClick();
            }
        });
        li_right.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                if (listener != null)
                    listener.onRightLinearLayoutClick();
            }
        });
        li_title.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                if (listener != null)
                    listener.onTitleLinearLayoutClick();
            }
        });

        //通过context.obtainStyledAttributes方法，将AttributeSet和属性的类型传递过来
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TitleBar);

        //初始化TextView控件
        tv_life = (TextView) findViewById(R.id.tv_life_text);
        tv_right = (TextView) findViewById(R.id.tv_right_text);
        tv_title = (TextView) findViewById(R.id.tv_center_text);

        String title = typedArray.getString(R.styleable.TitleBar_titleText);//获得自定义属性并赋值
        tv_title.setText(title);
        tv_life.setText(typedArray.getString(R.styleable.TitleBar_tvLifeText));
        tv_right.setText(typedArray.getString(R.styleable.TitleBar_tvRightText));

        //初始化ImageView控件
        iv_right = (ImageView) findViewById(R.id.iv_right_image);
        iv_title = (ImageView) findViewById(R.id.iv_center_image);
        iv_life = (ImageView) findViewById(R.id.iv_life_image);

        Drawable drawable = typedArray.getDrawable(R.styleable.TitleBar_imRightSrc);//获得自定义属性并赋值
        iv_right.setImageDrawable(drawable);
        iv_life.setImageDrawable(typedArray.getDrawable(R.styleable.TitleBar_imLifeSrc));
        iv_title.setImageDrawable(typedArray.getDrawable(R.styleable.TitleBar_imCenterSrc));
    }

    //设置监听器
    public void setOnTitleAndLeftAndRightClickListener(OnTitleAndLeftAndRightClickListener listener) {
        this.listener = listener;
    }

    /**
     * 使用java代码设置标题
     *
     * @param titleString
     */
    public void setTitle(String titleString) {
        this.tv_title.setText(titleString);
    }

    /**
     * 使用java代码左面标题，中间标题，右边标题
     *
     * @param leftString
     * @param titleString
     * @param rightString
     */
    public void setLeftAndTitleAndRight(String leftString, String titleString, String rightString) {
        this.tv_life.setText(leftString);
        this.tv_title.setText(titleString);
        this.tv_right.setText(rightString);
    }

    /**
     * 回调接口
     */
    public interface OnTitleAndLeftAndRightClickListener {
        public void onLeftLinearLayoutClick();

        public void onRightLinearLayoutClick();

        public void onTitleLinearLayoutClick();
    }
}

4，好了自定义标题写好了下面看看如何使用这个新UI控件：
这里要在LinearLayout 布局中添加新的命名空间xmlns:app=“http://schemas.android.com/apk/res-auto”
命名空间，“app”可以替换成任意字母组合

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
    android:orientation="vertical"
    tools:context="com.blog.pengding.activity.UniversalInterfaceActivity">

    <com.blog.pengding.ui.TitleBar
        android:id="@id/title_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:imLifeSrc="@mipmap/discover_back_icon_pressed"
        app:imRightSrc="@mipmap/hotweibo_slide_add"
        app:titleText="好友动态"
        app:tvLifeText="动态" />

    <FrameLayout
        android:id="@+id/fl_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

5.布局中已经有了自定义标题栏，现在看看java文件中怎么设置吧！

package com.blog.pengding.activity;

import android.content.Intent;
import android.os.Bundle;

import com.blog.pengding.jijianblog.BaseActivity;
import com.blog.pengding.jijianblog.R;
import com.blog.pengding.ui.TitleBar;

/*
* 通用界面
* */
public class UniversalInterfaceActivity extends BaseActivity {
    private TitleBar titleBar;
    private String titleString;
    private Intent intent;

    /***
     * 初始化变量，包括Intent带的数据和Activity内变量
     */
    @Override
    protected void initVariables() {

    }

    /***
     * 加载layout布局文件，初始化控件，绑定事件
     */
    @SuppressWarnings("ResourceAsColor")
    @Override
    protected void initViews(Bundle savedInstanceState) {
        setContentView(R.layout.activity_universal_interface);
        titleBar = (TitleBar) findViewById(R.id.title_bar);
        titleBar.setTitle("这里是标题");//可以在java中设置标题
        //titleBar.setLeftAndTitleAndRight("左面导航文字","标题","右面导航文字");
        titleBar.setOnTitleAndLeftAndRightClickListener(new TitleBar.OnTitleAndLeftAndRightClickListener() {
            @Override
            public void onLeftLinearLayoutClick() {
                //设置左面导航事件
                finish();
            }

            @Override
            public void onRightLinearLayoutClick() {
                //设置右面导航事件
            }

            @Override
            public void onTitleLinearLayoutClick() {
                //设置标题导航事件
            }
        });

    }

    /***
     * 调用MobileAPI获取数据
     */
    @Override
    protected void loadData() {

    }
}

这样这个自定义的标题栏就做完了，是不是很简单。

6现在总结下自定义控件的一般步骤吧：

1.根据需求设计控件UI
2.根据UI，设置自定义控件的属性
3.根据UI，编写自定义控件布局文件
4.编写java代码，根据情况选择父类
5.使用自定义控件

我这个没有写更改字体颜色，字体大小，等属性，请各位同学自行扩能改造吧。

第一次写blog写的不好请谅解啊！