Android自定義View之組合控件實現類似電商app頂部欄

2019-12-12 06:20:50

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了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); //添加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, 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());//初始化TextViewmCenterTextView.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);//添加iconLayoutParams 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設置一個指定值

@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();      }    });

最終效果：

這里寫圖片描述