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

}

最后下载地址