android自定义View之复合控件

复合控件可以很好地创建出具有重用功能的控件集合。

很多的APP都有一些共通的UI界面,为了统一应用程序的风格,下面我们就以一个Topbar为实例讲解复合控件。
实现效果如图:

第一步:定义属性

在res资源目录的values目录下创建一个attrs.xml属性定义文件,为一个View提供可自定义的属性。
代码中,通过标签声明了自定义属性,并通过name属性来确定引用的名称。

<?xml version="1.0" encoding="utf-8"?> <resources>
    <declare-styleable name="TopBar">
        <attr name="titleText" format="string"/>
        <attr name="titleSize" format="dimension"/>
        <attr name="titleTextColor2" format="color"/>
        <attr name="leftTextColor" format="color"/>
        <attr name="leftBackground" format="reference|color"/>
       <!--按钮的背景可以指定为具体颜色,也可以一张图片,所以使用“|”来分隔不同的属性-->
        <attr name="leftText" format="string"/>
        <attr name="rightTextColor" format="color"/>
        <attr name="rightBackground" format="reference|color"/>
        <attr name="rightText" format="string"/>
</declare-styleable> </resources>

第二步:创建自定义控件—-创建类CompositControlDemo01,并让其继承RelativeLayout

package com.wjc.customwidget_0502;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;

/**
 * Created by admin on 2016/5/2.
 */
public class CompositControlDemo01 extends RelativeLayout {

    //定义与attrs.xml中的自定义属性对应的属性
    private int mLeftTextColor;
    private String mLeftText;
    private Drawable mLeftBackground;
    private int mRightTextColor;
    private String mRightText;
    private Drawable mRightBackgound;
    private String mTitle;
    private float mTitleTextSize;
    private int mTitleTextColor;
    //布局参数
    private LayoutParams mLeftParame;
    private LayoutParams mRightParame;
    private LayoutParams mTitleParame;
    //定义显示的布局
    private Button mLeftButton;
    private Button mRightButton;
    private TextView mTitleView;
    //定义一个公共接口
    private topbarClickListener mListener;

    //构造函数,attrs就是布局文件传过来的对应的属性
    public CompositControlDemo01(Context context, AttributeSet attrs) {
        super(context, attrs);
        initAttrs(context, attrs);
        initView(context);
    }

    //将attrs.xml中定义的属性值存入typedArray中
    public void initAttrs(Context context, AttributeSet attrs) {
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TopBar);
        mLeftTextColor = ta.getColor(R.styleable.TopBar_leftTextColor, 0);
        mLeftText = ta.getString(R.styleable.TopBar_leftText);
        mLeftBackground = ta.getDrawable(R.styleable.TopBar_leftBackground);

        mRightTextColor = ta.getColor(R.styleable.TopBar_rightTextColor, 0);
        mRightText = ta.getString(R.styleable.TopBar_rightText);
        mRightBackgound = ta.getDrawable(R.styleable.TopBar_rightBackground);

        mTitle = ta.getString(R.styleable.TopBar_titleText);
        mTitleTextSize = ta.getDimension(R.styleable.TopBar_titleSize, 10);
        mTitleTextColor = ta.getColor(R.styleable.TopBar_titleTextColor2, 0);
        ta.recycle();//避免重新创建时的错误
    }

    //组合控件,并将属性分配给他们,并设置监听事件
    public void initView(Context context) {
        mLeftButton = new Button(context);
        mRightButton = new Button(context);
        mTitleView = new TextView(context);

        mLeftButton.setTextColor(mLeftTextColor);
        mLeftButton.setText(mLeftText);
        mLeftButton.setBackground(mLeftBackground);

        mRightButton.setTextColor(mRightTextColor);
        mRightButton.setText(mRightText);
        mRightButton.setBackground(mRightBackgound);

        mTitleView.setTextColor(mTitleTextColor);
        mTitleView.setText(mTitle);
        mTitleView.setTextSize(mTitleTextSize);
        mTitleView.setGravity(Gravity.CENTER);

        //为元素设定相应的布局参数
        mLeftParame = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        mLeftParame.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
        addView(mLeftButton, mLeftParame);

        mRightParame = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        mRightParame.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
        addView(mRightButton, mRightParame);

        mTitleParame = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        mTitleParame.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);
        addView(mTitleView, mTitleParame);

        //按钮的点击事件,不需要具体的实现
        //只需调用者接口的方法,回调的时候,会有具体的实现
        mLeftButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                mListener.leftClick();
            }
        });
        mRightButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                mListener.rightClick();
            }
        });
    }

    //定义接口
    //接口对象,实现回调机制,在回调方法中,通过映射的接口对象调用接口的方法
    //而不用去考虑如何实现,具体的实现由调用者去创建
    public interface topbarClickListener {
        void leftClick();
        void rightClick();
    }

    //暴露一个方法给调用者来注册接口回调
    //通过接口来获取回调者对接口方法的实现
    public void setOnTopbarClickListener(topbarClickListener mListener) {
        this.mListener = mListener;
    }

    /**
     * 设置按钮的显示与否通过id区分按钮,flag区分是否显示
     *
     * @param id   id
     * @param flag is Visable?
     */
    public void setButtonVisable(int id, boolean flag) {
        if (flag) {
            if (id == 0) {
                mLeftButton.setVisibility(View.VISIBLE);
            } else {
                mRightButton.setVisibility(View.VISIBLE);
            }
        } else {
            if (id == 0) {
                mLeftButton.setVisibility(View.GONE);
            } else {
                mRightButton.setVisibility(View.GONE);
            }
        }
    }
}

第三步:引用UI模板—创建topbar.xml文件

<?xml version="1.0" encoding="utf-8"?>
   <com.wjc.customwidget_0502.CompositControlDemo01
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:custom="http://schemas.android.com/apk/res-auto"
       android:id="@+id/topBar"
       android:layout_width="wrap_content"
       android:layout_height="50dp"
       android:padding="5dp"
      android:background="#3F7EA4"

       custom:leftBackground="@drawable/chevron_left"
       custom:leftTextColor="#ff00"
       custom:leftText="返回"

        custom:rightText="更多"
        custom:rightTextColor="#ff00"
        custom:rightBackground="#ffccff"

        custom:titleText="自定义标题"
        custom:titleTextColor2="#555555"
        custom:titleSize="10sp"
       >
</com.wjc.customwidget_0502.CompositControlDemo01>

注:代码中

xmlns:android=http://schemas.android.com/apk/res/android

表示:引用android系统的属性,而

xmlns:custom=http://schemas.android.com/apk/res-auto

表示:引用第三方控件的属性,即引用自定义的属性

通过如上的代码,我们就可以在其他的布局文件中,直接带调用标签来引用这个UI模板View,代码如下

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

第四步:实现接口回调——即写一个activity引用此布局

package com.wjc.customwidget_0502;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    CompositControlDemo01 mTopbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTopbar=(CompositControlDemo01)findViewById(R.id.topBar);//初始化组合控件
        //为topBar中的按钮注册监听事件
        mTopbar.setOnTopbarClickListener(new CompositControlDemo01.topbarClickListener() {
            @Override
            public void leftClick() {
                Toast.makeText(MainActivity.this, "back", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void rightClick() {
                Toast.makeText(MainActivity.this,"more",Toast.LENGTH_LONG).show();
            }
        });
        /*  //是否显示相应的按钮
        mTopbar.setButtonVisable(0,true);//只显示左边按钮*/
    }

}

这是本人的第一篇博客,如有错漏,请留言指教!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2021-06-07

Android自定义复合控件实现通用标题栏

本文实例为大家分享了Android复合控件实现通用标题栏的具体代码,供大家参考,具体内容如下 效果图 估计大家应该和我一样,每次去看别人博客的时候,都喜欢一拉到底,先看看有没有效果图,符不符合自己的需求,符合咱就继续看,不符合免得浪费表情,所以效果图先上为敬 写在前面的一点儿废话 作为Android的菜鸟一枚,一直觉得能够写自定义控件是一个很炫酷的技能,最近看了徐宜生老师的群英传之后,感觉收获还是挺多的.这篇文章就主要记录的是学习自定义控件中最简单的复合控件的过程.虽然现在MD中Toolbar已

Android自定义Dialog实现通用圆角对话框

前言:圆角对话框在项目中用的越来越多,之前一篇文章有介绍过使用系统的AlertDialog+CardView(Android中使用CardView实现圆角对话框)实现了圆角对话框的样式,今天介绍自定义Dialog实现通用的圆角对话框. 效果图: 1.继承自AlertDialog,重写onCreat /** * Created by ruancw on 2018/6/7. * 自定义的带圆角的对话框 */ public class RoundCornerDialog extends AlertDi

Android自定义简单的顶部标题栏

本文实例为大家分享了Android实现简单顶部标题栏的具体代码,供大家参考,具体内容如下 实现功能: 1)自定义View标题栏布局: 2)灵活的可以自己传入类型,选择所需要的控件来显示隐藏 3)相对于我之前写过的一篇,免继承,可直接在布局里使用 4)直接可以在布局控件里设置属性 老规矩,上几张效果图: 由效果图可见,这个是可以根据传入type来控制,比较灵活的 下面就来实现以下步骤,最后我会贴上源码 1.创建一个布局文件,命名,layout_titlebar,来部署我们的标题栏样式,可以自定义更

Android自定义通用标题栏CustomTitleBar

本文实例为大家分享了Android自定义通用标题栏的具体代码,供大家参考,具体内容如下/p> 1自定义一个public_titlebar.xml文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/root

Android 自定义一套 Dialog通用提示框 (代码库)

做Android开发五年了,期间做做停停(去做后台开发,服务器管理),当回来做Android的时候,发现很生疏,好些控件以前写得很顺手,现在好像忘记些什么了,总要打开这个项目,打开那个项目,有时未必还找得到. 总结起来,还是源于没有好好做一个属于自己的代码库,把平时开发项目中一些自定义的控件,或一些耦合性很低的模块封装起来,或者平时比较少写博客.如果你是一个刚学会开发的程序猿,或者是有过好几年开发经验的大鸟,也该开始整理整理自己的代码,这也不枉此生敲代码的岁月,同时在面试中,也会给你带来不少印象

Android 自定义标题栏的实例详解

 Android 自定义标题栏的实例详解 开发 Android APP 经常会用到自定义标题栏,而有多级页面的情况下还需要给自定义标题栏传递数据. 本文要点: 自定义标题填充不完整 自定义标题栏返回按钮的点击事件 一.代码 这里先介绍一下流程: 1. 创建一个标题栏布局文件 mytitlebar.xml 2. 在style.xml中创建 mytitlestyle 主题 3. 创建类 CustomTitleBar 4. 在需要自定义标题栏的Activity的OnCreate方法中实例化 Custo

Android自定义顶部标题栏

本文实例为大家分享了Android自定义顶部标题栏展示的具体代码,供大家参考,具体内容如下 思路及实现步骤 1.定义标题栏布局 2.自定义TitleActivity控制标题栏按钮监听 3.在TitleActivity中实现标题栏以下内容切换 首先定义标题栏 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android

Android自定义TitleView标题开发实例

Android开发过程中,经常遇到一个项目需要重复的定义相同样式的标题栏,Android相继推出了actionBar, toolBar, 相信有用到的朋友也会遇到一些不如意的时候,比如标题栏居中时,需要自定义xml文件给toolBar等,不了解actionBar,toolBar的可以去找相应的文章了解,这里介绍自定义titleBar满足国内主题风格样式的情况. 为了提前看到效果,先上效果图: 前期准备 1.为标题栏titleView预定义id,在values下的ids.xml中 <?xml ve

Android自定义手机界面状态栏实例代码

前言 我们知道IOS上的应用,状态栏的颜色总能与应用标题栏颜色保持一致,用户体验很不错,那安卓是否可以呢?若是在安卓4.4之前,答案是否定的,但在4.4之后,谷歌允许开发者自定义状态栏背景颜色啦,这是个不错的体验!若你手机上安装有最新版的qq,并且你的安卓SDK版本是4.4及以上,你可以看下它的效果: 实现这个效果有两个方法: 1.在xml中设置主题或自定义style: Theme.Holo.Light.NoActionBar.TranslucentDecor Theme.Holo.NoActi

Android 自定义状态栏实例代码

一.目标:Android5.0以上 二.步骤 1.在res-values-colors.xml下新建一个RGB颜色 <?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#3