android 搜索框UI

搜索框

做了个搜索框，很简单，先上图，看一下效果

给出两种方式：
1. xml
2. extends RelativeLayout

方式1.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="#ffffff"
    >

    <ImageView 
        android:id="@+id/img_search"
       android:layout_width="wrap_content"
       android:layout_height="match_parent"
       android:background="@drawable/search_blue_left"
       android:layout_alignParentLeft="true"
        />

    <LinearLayout 
        android:id="@+id/lin_search"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/search_blue_middle"
        android:layout_marginLeft="23dp"
        android:layout_marginRight="60dp"
        android:orientation="vertical"
        android:gravity="center_vertical"
        >

        <EditText
            android:id="@+id/et_c_aliasname"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="#00ffffff"
            android:hint="输入搜索信息"
            />

    </LinearLayout>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/search_blue_right"
        android:text="搜索"
        android:textColor="#ffffff" />

</RelativeLayout>

方式2.extends RelativeLayout

package com.example.searchview;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.Toast;

/**   
* @Title: SearchInfoView.java 
* @Package com.example.searchview 
* @Description: TODO
* @author 
* @date 
* @version V1.0   
*/
public class SearchInfoView extends RelativeLayout {

    /**
     * left_secrch段
     */
    private ImageView mImageView;
    /**
     * middle_search段
     */
    private EditText mSearchEdit;
    private LinearLayout mLinearLayout;
    /**
     * right_search段
     */
    private Button mSearchBut;

    /**
     * 元素布局
     */
    private LayoutParams mSearchLeft;
    private LayoutParams mSearchMiddle;
    private LayoutParams mSearchRight;

    private String mHintText="输入查找信息";
    private String mButText="查找";
    private int mButTextColor=Color.WHITE;

    private SearchButListener mSearchButListener;
    private SearchTextListener mSearchTextListener;

    /**
    * @author 
    * @date 2015年11月12日 上午11:15:02 
    * @param context
    * @param attrs    设定文件
     */
    public SearchInfoView(final Context context, AttributeSet attrs) {
        super(context, attrs);
        /*
         * 属性获取
         */
        TypedArray ta=context.obtainStyledAttributes(attrs, R.styleable.searchView);
        mHintText=ta.getString(R.styleable.searchView_search_hint);
        mButText=ta.getString(R.styleable.searchView_search_but_text);
        mButTextColor=ta.getColor(R.styleable.searchView_search_but_text_color, Color.WHITE);
        ta.recycle();

        initShow(context);

        mSearchBut.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                if(mSearchButListener!=null)
                {
                    if(mSearchEdit.getText().toString().trim().equals(""))
                    {
                        Toast.makeText(context, "搜索内容不能为空", Toast.LENGTH_SHORT).show();
                    }
                    else
                    {
                        mSearchButListener.setOnSearchButClick(mSearchEdit.getText().toString());
                    }
                }
            }
        });

        mSearchEdit.addTextChangedListener(new TextWatcher() {

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                // TODO Auto-generated method stub
                String key=mSearchEdit.getText().toString().trim();
                if(key!=null&&!key.equals(""))
                {
                    if(mSearchTextListener!=null)
                    {
                        mSearchTextListener.setOnSearchTextChanged(key);
                    }
                }
            }

            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
                // TODO Auto-generated method stub

            }

            @Override
            public void afterTextChanged(Editable s) {
                // TODO Auto-generated method stub

            }
        });

    }

    /*
     * 搜索框初始化
     */
    private void initShow(Context context) {
        mImageView=new ImageView(context);
        mSearchEdit=new EditText(context);
        mLinearLayout=new LinearLayout(context);
        mSearchBut=new Button(context);

        mImageView.setBackgroundResource(R.drawable.search_blue_left);

        mSearchEdit.setHeight(dp2px(context, 40));
        mSearchEdit.setBackgroundColor(Color.parseColor("#00ffffff"));
        mSearchEdit.setHint(mHintText);

        mLinearLayout.setBackgroundResource(R.drawable.search_blue_middle);
        mLinearLayout.setGravity(Gravity.CENTER_VERTICAL);
        mLinearLayout.setOrientation(LinearLayout.VERTICAL);
        mLinearLayout.addView(mSearchEdit);

        mSearchBut.setText(mButText);
        mSearchBut.setTextColor(mButTextColor);
        mSearchBut.setBackgroundResource(R.drawable.search_blue_right);

        mSearchLeft=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
        mSearchLeft.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
        this.addView(mImageView, mSearchLeft);

        mSearchMiddle=new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        mSearchMiddle.setMargins(dp2px(context, 23), 0, dp2px(context, 60), 0);
        this.addView(mLinearLayout, mSearchMiddle);

        mSearchRight=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
        mSearchRight.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
        this.addView(mSearchBut, mSearchRight);
    }

    public void setSearchButListener(SearchButListener searchButListener) {
        mSearchButListener=searchButListener;
    }

    public void setSearchTextListener(SearchTextListener searchTextListener) {
        mSearchTextListener=searchTextListener;
    }

    /*
     * 搜索按钮事件
     */
    public interface SearchButListener{
        /*
         * 搜索按钮点击事件
         */
        public void setOnSearchButClick(String content);
    }

    /*
     * text改变事件
     */
    public interface SearchTextListener{
        /*
         * edit中信息changed事件
         */
        public void setOnSearchTextChanged(String key);
    }

    public static int dp2px(Context context, float dipValue)
    {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int)(dipValue * scale +0.5f); 
    }
}

对应属性

<declare-styleable name="searchView">
    <attr name="search_hint" format="string"></attr>
    <attr name="search_but_text" format="string"></attr>
    <attr name="search_but_text_color" format="color"></attr>
</declare-styleable>

控件使用

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:yk="http://schemas.android.com/apk/res/com.example.searchview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

   <com.example.searchview.SearchInfoView
       android:id="@+id/search_id"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        yk:search_hint="输入搜索信息"
        yk:search_but_text="搜索"
        yk:search_but_text_color="#ffffff"
       />

</RelativeLayout>

对应的操作

public class MainActivity extends Activity {

    private SearchInfoView mSearchInfoView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initComponent();

        initOperate();
    }

    private void initOperate() {
        // TODO Auto-generated method stub
        mSearchInfoView.setSearchButListener(new SearchButListener() {

            @Override
            public void setOnSearchButClick(String content) {
                Toast.makeText(MainActivity.this, content, Toast.LENGTH_SHORT).show();
            }
        });

        mSearchInfoView.setSearchTextListener(new SearchTextListener() {

            @Override
            public void setOnSearchTextChanged(String key) {
                Toast.makeText(MainActivity.this, key, Toast.LENGTH_SHORT).show();
            }
        });
    }

    private void initComponent() {
        // TODO Auto-generated method stub
        mSearchInfoView=(SearchInfoView)findViewById(R.id.search_id);
    }

}

最后下载地址