Android自定义View之组合控件实现类似电商app顶部栏

本文实例为大家分享了android自定义view之组合控件，仿电商app顶部栏的相关代码，供大家参考，具体内容如下

效果图：

分析:左右两边可以是textview和button,设置drawabletop即可,中间的看着像是edittext,但是用过淘宝天猫等类似app的话会发现点击搜索不是在当前activit进行搜索的,是跳转到另外的页面进行的,所以用textview然后设置背景即可. 实现流程

参数列表：

设置属性文件:values下建立attrs.xml文件,添加需要自定义的属性.

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <declare-styleable name="topbar">
    <attr name="left_text" format="string" />// 左边文字
    <attr name="right_text" format="string" /> // 右边文字
    <attr name="center_text" format="string" />// 中间文字
    <attr name="side_text_size" format="dimension" />//边界按钮大小
    <attr name="center_text_size" format="dimension" />//中间文字大小
    <attr name="text_color" format="color" />//文字颜色
    <attr name="back_color" format="color" />//背景颜色
    <attr name="left_icon" format="reference" />//左边的icon
    <attr name="right_icon" format="reference" />//右边的icon
    <attr name="center_icon" format="reference" />//中间的icon
  </declare-styleable>
</resources>

代码中获取布局文件中设置的属性:

typedarray array = getcontext().obtainstyledattributes(attrs, r.styleable.topbar);
    mlefttext = array.getstring(r.styleable.topbar_left_text);
    mrighttext = array.getstring(r.styleable.topbar_right_text);
    mcentertext = array.getstring(r.styleable.topbar_center_text);
    side_text_size = (int) array.getdimension(r.styleable.topbar_side_text_size, 10);
    center_text_size = (int) array.getdimension(r.styleable.topbar_center_text_size, 15);
    mleft_icon = array.getdrawable(r.styleable.topbar_left_icon);
    mright_icon = array.getdrawable(r.styleable.topbar_right_icon);
    mcenter_icon = array.getdrawable(r.styleable.topbar_center_icon);
    text_color = array.getcolor(r.styleable.topbar_text_color, getresources().getcolor(r.color.coloraccent));
    back_color = array.getcolor(r.styleable.topbar_back_color, getresources().getcolor(r.color.colorprimary));
    array.recycle();

设置背景颜色：

setbackgroundcolor(back_color);

添加按钮：

//设置内容
mleftbutton = new button(getcontext());//创建按钮
mleftbutton.settext(mlefttext);//设置文字
mleftbutton.settextsize(side_text_size);//设置文字大小
mleftbutton.settextcolor(text_color);//设置文字颜色
mleftbutton.setbackgroundcolor(color.transparent);//设置按钮的背景为透明
layoutparams leftparams = new layoutparams(80, 150);//设置布局
mleft_icon.setbounds(0, 0, 55, 55); //设置icon的大小
mleftbutton.setcompounddrawables(null, mleft_icon, null, null); //添加icon
mleftbutton.setgravity(gravity.center);//设置置中
addview(mleftbutton, leftparams);//添加按钮
//右按钮类似,就不加注释了
mrightbutton = new button(getcontext());
mrightbutton.settext(mrighttext);
mrightbutton.settextsize(side_text_size);
mrightbutton.settextcolor(text_color);
mrightbutton.setbackgroundcolor(color.transparent);
mright_icon.setbounds(0, 0, 55, 55);
layoutparams rightparams = new layoutparams(80, 150);
mrightbutton.setcompounddrawables(null, mright_icon, null, null);
mrightbutton.setgravity(gravity.center);
addview(mrightbutton, rightparams);

添加中间的textview:(布局的排列是按添加顺序的,所以中间textview的添加应该是在两个按钮中间的)：

mcentertextview = new textview(getcontext());//初始化textview
mcentertextview.settext(mcentertext);//设置文字
mcentertextview.settextsize(center_text_size);//设置文字大小
mcentertextview.settextcolor(text_color);//设置文字颜色
mcentertextview.setgravity(gravity.center_vertical | gravity.left);//设置文字靠左
mcenter_icon.setbounds(0, 0, 50, 50);//设置icon大小
mcentertextview.setcompounddrawables(mcenter_icon, null, null, null);//添加icon
layoutparams params = new layoutparams(0, 70);//创建布局属性  mcentertextview.setbackground(getresources().getdrawable(r.drawable.bg_search));//设置背景
params.weight = 1;//设置权重
params.gravity = gravity.center;//设置居中
params.setmargins(10, 0, 10, 0);//设置边界
addview(mcentertextview, params);//添加

处理高度的wrap_content属性：

重写onmeasure属性,对wrap_content设置一个指定值

@override
protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
    super.onmeasure(widthmeasurespec, heightmeasurespec);
    int specwidth = measurespec.getsize(widthmeasurespec);//获取宽度
    int specheight = measurespec.getsize(heightmeasurespec);//获取高度
    int heightmode = measurespec.getmode(heightmeasurespec);//获取高度的测量模式

    int height = 0;//初始化要设置的高度
    if (heightmode == measurespec.exactly) {//如果是确定的值,包括match_parent
      height = specheight; //最终的值即为测量值
    } else {
      height = 120; //如果不是确定的值就设置为指定的高度
      if (heightmode == measurespec.at_most) {//如果是wrap_content就取测量值和指定值得最小值作为最终的值
        height = math.min(specheight, 120);
      }
    }
    setmeasureddimension(specwidth, height);//设置宽高属性
  }

添加点击事件：

需要自定义一个回调

public interface onclick {
    void onleftbuttonclick();

    void oncenterbuttonclick();

    void onrightbuttonclick();
  }

创建一个回调并创建setx方法

private onclick onclick;

  public void setonclick(topbar.onclick onclick) {
    this.onclick = onclick;
  }

在添加按钮的时候添加点击事件

mleftbutton.setonclicklistener(new onclicklistener() {
      @override
      public void onclick(view v) {
        if (onclick != null) {
          onclick.onleftbuttonclick();
        }
      }
    });
mcentertextview.setonclicklistener(new onclicklistener() {
      @override
      public void onclick(view v) {
        if (onclick != null) {
          onclick.oncenterbuttonclick();
        }
      }
    });
 mrightbutton.setonclicklistener(new onclicklistener() {
      @override
      public void onclick(view v) {
        if (onclick != null) {
          onclick.onrightbuttonclick();
        }
      }
    });

至此自定义的组合控件就完成了,下面贴一下使用的方法：

布局文件：

  <com.brioa.diyviewtest.view.topbar xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/topbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignparenttop="true"
    app:center_icon="@mipmap/ic_search"
    app:center_text="输入关键字检索"
    app:center_text_size="10sp"
    app:left_icon="@mipmap/ic_scan"
    app:left_text="扫一扫"
    app:right_icon="@mipmap/ic_msg"
    app:right_text="消息"
    app:side_text_size="6sp"
    app:text_color="#ffff">

  </com.brioa.diyviewtest.view.topbar>

代码设置：

mtopbar = (topbar) findviewbyid(r.id.topbar);
    mtopbar.setonclick(new topbar.onclick() {
      @override
      public void onleftbuttonclick() {
        toast.maketext(mcontext, "leftclick", toast.length_short).show();
      }

      @override
      public void oncenterbuttonclick() {
        toast.maketext(mcontext, "centerclick", toast.length_short).show();

      }

      @override
      public void onrightbuttonclick() {
        toast.maketext(mcontext, "rightclick", toast.length_short).show();

      }
    });

最终效果：

以上就是本文的全部内容，希望对大家学习android软件编程有所帮助，也希望大家多多支持。