本博客主要讲以下两点知识点

图标改变颜色：Drawable的变色，让Android也能有iOS那么方便的图片色调转换，就像同一个图标，但是有多个地方使用，并且颜色不一样，就可以用这个方法了。

搜索框： 一般是EditText实现，本文 实现 TextView图片和文字居中，键盘搜索。

来看看效果图：

    

 

 图标改变颜色：第一个界面的左边（二维码）和右边（更多）两个实现，我放进去的图片是黑色的，显示出来是白色的。

           

搜索框：第一个界面的图片和文字居中，还可以设置间距，第二个见面搜索设置键盘搜索按钮，点击搜索监听事件，清除内容的图标。

搜索框布局：

 

  1. 　　　　<!--
  2.             搜索图标设置  左边
  3.             android:drawableLeft="@mipmap/icon_search"
  4.             android:drawablePadding="5dp"  图标和文字的间距
  5.             右边
  6.             android:drawableRight="@mipmap/round_close"
  7.             android:paddingRight="8dp"
  8.             android:imeOptions="actionSearch"  设置成搜索按钮
  9.         -->
  10.        <EditText
  11.             android:id="@+id/search_text"
  12.             android:layout_width="0dp"
  13.             android:layout_weight="1"
  14.             android:layout_height="30dp"
  15.             android:hint="输入要搜索的商品"
  16.             android:background="@drawable/search_gray"
  17.             android:layout_marginTop="10dp"
  18.             android:layout_marginLeft="9dp"
  19.             android:textSize="12sp"
  20.             android:drawableLeft="@mipmap/icon_search"
  21.             android:paddingLeft="9dp"
  22.             android:drawablePadding="5dp"
  23.             android:drawableRight="@mipmap/round_close"
  24.             android:paddingRight="8dp"
  25.             android:imeOptions="actionSearch"
  26.             android:maxLines="1"
  27.             android:singleLine="true"
  28.           />
  29.

 

 

键盘监听：

  1. searchText.setOnEditorActionListener(new TextView.OnEditorActionListener() {
  2.             @Override
  3.             public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
  4.                 if ((actionId == 0 || actionId == 3) && event != null) {
    　　　　　　　　　　　　　//提示搜索内容
  5.                     Toast.makeText(SearchActivity.this,searchText.getText().toString(),Toast.LENGTH_LONG).show();
  6.                     //可以跳转搜索页面
  7.                    /* Intent intent= new Intent(SearchActivity.this,SearchWebViewActivity.class);
  8.                     intent.putExtra("model",model);
  9.                     intent.putExtra("search",searchText.getText().toString());
  10.                     startActivity(intent);
  11.                     finish();*/
  12.                 }
  13.                 return false;
  14.             }
  15.         });

 

首页布局：

  1. <LinearLayout
  2.         android:layout_width="match_parent"
  3.         android:layout_height="wrap_content"
  4.         android:background="@color/colorPrimary"
  5.         android:minHeight="45dp"
  6.         android:orientation="horizontal"
  7.         android:gravity="center_vertical"
  8.         >
  9.         <ImageButton
  10.             android:id="@+id/home_left_scan"
  11.             android:layout_width="wrap_content"
  12.             android:layout_height="wrap_content"
  13.             android:paddingRight="19dp"
  14.             android:paddingTop="3dp"
  15.             android:paddingBottom="3dp"
  16.             android:paddingLeft="11dp"
  17.             android:layout_centerVertical="true"
  18.             android:background="#00000000"
  19.             />
  20.         <com.zhangqie.searchbox.view.DrawableTextView
  21.             android:id="@+id/home_search"
  22.             android:layout_width="match_parent"
  23.             android:layout_height="28dp"
  24.             android:layout_weight="1"
  25.             android:background="@drawable/search_view_background"
  26.             android:gravity="center_vertical"
  27.             android:maxLines="1"
  28.             android:text="输入搜索相关内容"
  29.             android:drawableLeft="@mipmap/icon_search"
  30.             android:textSize="12sp"
  31.             android:drawablePadding="11dp"
  32.             />
  33.         <ImageButton
  34.             android:id="@+id/home_right_more"
  35.             android:layout_width="wrap_content"
  36.             android:layout_height="wrap_content"
  37.             android:layout_centerVertical="true"
  38.             android:layout_alignParentRight="true"
  39.             android:paddingRight="15dp"
  40.             android:paddingTop="3dp"
  41.             android:paddingBottom="3dp"
  42.             android:paddingLeft="15dp"
  43.             android:background="#00000000"
  44.             />
  45.     </LinearLayout>

 

自定义DrawableTextView：（文字图标居中）

 

  1. public class DrawableTextView extends TextView {
  3.     public DrawableTextView(Context context, AttributeSet attrs,
  4.                             int defStyle) {
  5.         super(context, attrs, defStyle);
  6.     }
  8.     public DrawableTextView(Context context, AttributeSet attrs) {
  9.         super(context, attrs);
  10.     }
  12.     public DrawableTextView(Context context) {
  13.         super(context);
  14.     }
  16.     @Override
  17.     protected void onDraw(Canvas canvas) {
  18.         Drawable[] drawables = getCompoundDrawables();
  19.         // 得到drawableLeft设置的drawable对象
  20.         Drawable leftDrawable = drawables[0];
  21.         if (leftDrawable != null) {
  22.             // 得到leftDrawable的宽度
  23.             int leftDrawableWidth = leftDrawable.getIntrinsicWidth();
  24.             // 得到drawable与text之间的间距
  25.             int drawablePadding = getCompoundDrawablePadding();
  26.             // 得到文本的宽度
  27.             int textWidth = (int) getPaint().measureText(getText().toString().trim());
  28.             int bodyWidth = leftDrawableWidth + drawablePadding + textWidth;
  29.             canvas.save();
  30.             canvas.translate((getWidth() - bodyWidth) / 2, 0);
  31.         }
  32.         super.onDraw(canvas);
  33.     }
  34. }

 

 

 

  看似简单的效果，其实还是不简单的；加油吧！  有问题可以扫头像加新创建的群@我　

 

  源码下载

 

版权声明：本文为zhangqie原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zhangqie/p/7521365.html