Android----- 改變表徵圖原有顏色 和 搜尋方塊

標籤：點擊   sla   top   save   style   attrs   cte   --   []   

本部落客要講以下兩點知識點

表徵圖改變顏色：Drawable的變色，讓Android也能有iOS那麼方便的圖片色調轉換，就像同一個表徵圖，但是有多個地方使用，並且顏色不一樣，就可以用這個方法了。

搜尋方塊： 一般是EditText實現，本文 實現 TextView圖片和文字置中，鍵盤搜尋。

來看看：

    

 

 表徵圖改變顏色：第一個介面的左邊（二維碼）和右邊（更多）兩個實現，我放進去的圖片是黑色的，顯示出來是白色的。

           

搜尋方塊：第一個介面的圖片和文字置中，還可以設定間距，第二個見面搜尋設定鍵盤搜尋按鈕，點擊搜尋監聽事件，清除內容的表徵圖。

搜尋方塊布局：

 

　　　　<!--            搜尋表徵圖設定  左邊            android:drawableLeft="@mipmap/icon_search"            android:drawablePadding="5dp"  表徵圖和文字的間距            右邊            android:drawableRight="@mipmap/round_close"            android:paddingRight="8dp"            android:imeOptions="actionSearch"  設定成搜尋按鈕        -->       <EditText            android:id="@+id/search_text"            android:layout_width="0dp"            android:layout_weight="1"            android:layout_height="30dp"            android:hint="輸入要搜尋的商品"            android:background="@drawable/search_gray"            android:layout_marginTop="10dp"            android:layout_marginLeft="9dp"            android:textSize="12sp"            android:drawableLeft="@mipmap/icon_search"            android:paddingLeft="9dp"            android:drawablePadding="5dp"            android:drawableRight="@mipmap/round_close"            android:paddingRight="8dp"            android:imeOptions="actionSearch"            android:maxLines="1"            android:singleLine="true"          />              

 

 

鍵盤監聽：

searchText.setOnEditorActionListener(new TextView.OnEditorActionListener() {            @Override            public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {                if ((actionId == 0 || actionId == 3) && event != null) {
　　　　　　　　　　　　　//提示搜尋內容                    Toast.makeText(SearchActivity.this,searchText.getText().toString(),Toast.LENGTH_LONG).show();                    //可以跳轉搜尋網頁面                   /* Intent intent= new Intent(SearchActivity.this,SearchWebViewActivity.class);                    intent.putExtra("model",model);                    intent.putExtra("search",searchText.getText().toString());                    startActivity(intent);                    finish();*/                }                return false;            }        });

 

首頁布局：

<LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@color/colorPrimary"        android:minHeight="45dp"        android:orientation="horizontal"        android:gravity="center_vertical"        >        <ImageButton            android:id="@+id/home_left_scan"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:paddingRight="19dp"            android:paddingTop="3dp"            android:paddingBottom="3dp"            android:paddingLeft="11dp"            android:layout_centerVertical="true"            android:background="#00000000"            />        <com.zhangqie.searchbox.view.DrawableTextView            android:id="@+id/home_search"            android:layout_width="match_parent"            android:layout_height="28dp"            android:layout_weight="1"            android:background="@drawable/search_view_background"            android:gravity="center_vertical"            android:maxLines="1"            android:text="輸入搜尋相關內容"            android:drawableLeft="@mipmap/icon_search"            android:textSize="12sp"            android:drawablePadding="11dp"            />        <ImageButton            android:id="@+id/home_right_more"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerVertical="true"            android:layout_alignParentRight="true"            android:paddingRight="15dp"            android:paddingTop="3dp"            android:paddingBottom="3dp"            android:paddingLeft="15dp"            android:background="#00000000"            />    </LinearLayout>

 

自訂DrawableTextView：（文字表徵圖置中）

 

public class DrawableTextView extends TextView {    public DrawableTextView(Context context, AttributeSet attrs,                            int defStyle) {        super(context, attrs, defStyle);    }    public DrawableTextView(Context context, AttributeSet attrs) {        super(context, attrs);    }    public DrawableTextView(Context context) {        super(context);    }    @Override    protected void onDraw(Canvas canvas) {        Drawable[] drawables = getCompoundDrawables();        // 得到drawableLeft設定的drawable對象        Drawable leftDrawable = drawables[0];        if (leftDrawable != null) {            // 得到leftDrawable的寬度            int leftDrawableWidth = leftDrawable.getIntrinsicWidth();            // 得到drawable與text之間的間距            int drawablePadding = getCompoundDrawablePadding();            // 得到文本的寬度            int textWidth = (int) getPaint().measureText(getText().toString().trim());            int bodyWidth = leftDrawableWidth + drawablePadding + textWidth;            canvas.save();            canvas.translate((getWidth() - bodyWidth) / 2, 0);        }        super.onDraw(canvas);    }}

 

 

 

  看似簡單的效果，其實還是不簡單的；加油吧！  有問題可以掃頭像加新建立的群@我　

 

  源碼下載

 

Android----- 改變表徵圖原有顏色 和 搜尋方塊