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

概述本文实例为大家分享了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,55,55); //设置icon的大小mleftbutton.setCompoundDrawables(null,mleft_icon,null,null); //添加iconmleftbutton.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,55);LayoutParams rightParams = new LayoutParams(80,150);mRightbutton.setCompoundDrawables(null,mRight_icon,null);mRightbutton.setGravity(Gravity.CENTER);addVIEw(mRightbutton,rightParams);

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

mCenterTextVIEw = new TextVIEw(getContext());//初始化TextVIEwmCenterTextVIEw.setText(mCenterText);//设置文字mCenterTextVIEw.setTextSize(center_text_size);//设置文字大小mCenterTextVIEw.setTextcolor(text_color);//设置文字颜色mCenterTextVIEw.setGravity(Gravity.CENTER_VERTICAL | Gravity.left);//设置文字靠左mCenter_icon.setBounds(0,50,50);//设置icon大小mCenterTextVIEw.setCompoundDrawables(mCenter_icon,null);//添加iconLayoutParams params = new LayoutParams(0,70);//创建布局属性  mCenterTextVIEw.setBackground(getResources().getDrawable(R.drawable.bg_search));//设置背景params.weight = 1;//设置权重params.gravity = Gravity.CENTER;//设置居中params.setmargins(10,10,0);//设置边界addVIEw(mCenterTextVIEw,params);//添加

处理高度的wrap_content属性：

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

@OverrIDeprotected 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软件编程有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android自定义View之组合控件实现类似电商app顶部栏全部内容，希望文章能够帮你解决Android自定义View之组合控件实现类似电商app顶部栏所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。