登录 立即注册
安币:

查看: 332|回复: 4

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

[复制链接]

429

主题

944

帖子

1920

安币

手工艺人

发表于 2018-1-9 12:22:37 | 显示全部楼层 |阅读模式

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

        效果图:

        

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

        

        参数列表:

        

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

[Java] 查看源文件 复制代码
<

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

[Java] 查看源文件 复制代码
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);

        添加按钮:

[Java] 查看源文件 复制代码
//设置内容
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的添加应该是在两个按钮中间的):

[Java] 查看源文件 复制代码
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设置一个指定值

[Java] 查看源文件 复制代码
@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);//设置宽高属性
  }

        添加点击事件:

        需要自定义一个回调

[Java] 查看源文件 复制代码
public interface onclick {
    void onleftbuttonclick();

    void oncenterbuttonclick();

    void onrightbuttonclick();
  }

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

[Java] 查看源文件 复制代码
private onclick onclick;

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

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

[Java] 查看源文件 复制代码
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();
        }
      }
    });

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

        布局文件:

[Java] 查看源文件 复制代码
  <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>

        代码设置:

[Java] 查看源文件 复制代码
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();

      }
    });

        最终效果:

        


0

主题

1万

帖子

2418

安币

Android大神

Rank: 6Rank: 6

发表于 2018-1-10 04:14:24 | 显示全部楼层
帮帮顶顶!!

1

主题

9232

帖子

2565

安币

Android大神

Rank: 6Rank: 6

发表于 2018-1-10 19:51:00 | 显示全部楼层
每次我都积极回帖的,想要安币~

9

主题

9408

帖子

1794

安币

Android大神

Rank: 6Rank: 6

发表于 2018-1-11 17:56:32 | 显示全部楼层
楼主威武,以后多发干货,多办活动~!

465

主题

9768

帖子

827

安币

代码手工艺人

Rank: 4

发表于 2018-1-13 05:06:46 | 显示全部楼层
支持楼主,支持安卓巴士!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站长推荐

通过邮件订阅最新安卓weekly信息
上一条 /4 下一条

下载安卓巴士客户端

全国最大的安卓开发者社区

联系我们
关闭
合作电话:
15618560077
Email:
805941275@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| 下载客户端|申请友链|手机版|站点统计|安卓巴士 ( 粤ICP备15117877号 )

快速回复 返回顶部 返回列表