欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-03-03 15:01:40
本文实例为大家分享了android自定义view之组合控件,仿电商app顶部栏的相关代码,供大家参考,具体内容如下 效果图: 分析:左右两边可以是textview和...

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

效果图:

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

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

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

参数列表:

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

设置属性文件: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自定义View之组合控件实现类似电商app顶部栏

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