使用EditText和Spinner创建导航向下的自定义搜索

时间:2015-10-04 03:48:29

标签: android xml eclipse

我正在尝试使用EditText创建自定义搜索,并使用Spinner向下导航。我想把它变成下图。

基本设计图片 - > enter image description here

但这里我现在拥有

完成设计 - >

enter image description here

这是我的xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:padding="10dp"
        android:background="@drawable/background_with_shadow">

        <EditText
            android:id="@+id/searchFilter"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:ems="10"
            android:maxLines="1"
            android:padding="10dp"
            android:hint="@string/search_hint"
            android:textColor="@color/grey_blue"
            android:singleLine="true"
            android:layout_gravity="center"
            android:textColorHint="#BDBDBD"
            android:ellipsize="start"
            android:background="@drawable/filter_bg"
            />

        <Spinner
            android:layout_width="50dp"
            android:layout_height="match_parent"
            android:id="@+id/spinner"
            android:padding="10dp"
            android:layout_alignBottom="@+id/searchFilter"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:background="@android:drawable/btn_dropdown"
            android:spinnerMode="dropdown"
            />
    </RelativeLayout>


</LinearLayout>

我的filter_bg.xml

<?xml version="1.0" encoding="utf-8" ?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:thickness="0dp">
    <stroke
        android:width="1dp"
        android:color="#b71c1c" />
    <corners android:radius="3dp" />
    <gradient
        android:angle="270"
        android:endColor="#FFFFFF"
        android:startColor="#C8C8C8"
        android:type="linear" />
</shape>

任何人都可以帮我把它变成第一张图片吗?谢谢!

1 个答案:

答案 0 :(得分:0)

改变你的布局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:background="@drawable/background_with_shadow"
        android:orientation="horizontal">

        <Spinner
            android:layout_width="50dp"
            android:layout_height="match_parent"
            android:id="@+id/spinner"
            android:padding="10dp"
            android:background="@android:drawable/btn_dropdown"
            android:spinnerMode="dropdown"
            />

        <EditText
            android:id="@+id/searchFilter"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:ems="10"
            android:maxLines="1"
            android:padding="10dp"
            android:hint="@string/search_hint"
            android:textColor="@color/grey_blue"
            android:singleLine="true"
            android:layout_gravity="center"
            android:textColorHint="#BDBDBD"
            android:ellipsize="start"
            android:background="@drawable/filter_bg"
            />


    </LinearLayout>


</LinearLayout>

使用相对布局而不是正确设置组件关系是个问题。这里很容易使用衬里布局。