安卓自动完成控件的样式设计

7

我有一个AutoCompleteTextView,我想对它应用一些样式。代码功能正常,基本的样式也好,但有一些更高级的东西需要改变。具体来说:

自定义字体

我的搜索栏使用了应用程序的自定义字体,但预测行使用系统默认的字体类型显示。这是我设置搜索结果字体的方法:

mSearchTextView.setTypeface(font.mAvenirLTStandardLight);

去除下拉菜单的阴影

默认的下拉菜单选项带有阴影效果,而我的应用程序使用了更加扁平化的设计。如果可能的话,我想要去掉这个阴影效果。

向下拉菜单添加圆角

我已经成功地将每个结果行的半径进行了调整,但我无法弄清如何将曲线应用于整个下拉框。

以下是相关的代码部分:

private void setAutoCompleteListener() {
    AutoCompleteAdapter adapter = new AutoCompleteAdapter(mContext,
            R.layout.autocomplete_list_item, mLatLng);

    mSearchTextView.setAdapter(adapter);

    mSearchTextView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
            String str = (String) adapterView.getItemAtPosition(i);
            initiateSearch();
            hideKeyboard();
        }
    });
}

activity_map.xml

<AutoCompleteTextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/actvSearch"
    android:hint="@string/search_or_enter_address"
    android:background="@color/transparent_white"
    android:textSize="14sp"
    android:textColor="@color/black"
    android:layout_centerVertical="true"
    android:layout_toEndOf="@id/ibLogoImage"
    android:layout_toStartOf="@id/ibSearch"
    android:dropDownAnchor="@id/search_bar"
    android:dropDownVerticalOffset="0dp" />

autocomplete_list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:textColor="@color/black"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:paddingStart="25dp"
    android:paddingEnd="25dp"/>

AutoCompleteAdapter.java

public class AutoCompleteAdapter extends ArrayAdapter<String> implements Filterable {
    private static String TAG = "AutoComplete";

    /*
     * The lat/lng of the current location.
     */
    private LatLng mLatLng;

    /*
     * A list of the autocomplete results.
     */
    private ArrayList<String> mResults;

    public AutoCompleteAdapter(Context context, int textViewResourceId, LatLng latLng) {
        super(context, textViewResourceId);
        Log.d(TAG, "Center of Screen: " + latLng.toString());
        mLatLng = latLng;
    }

    @Override
    public int getCount() {
        return mResults.size();
    }

    @Override
    public String getItem(int index) {
        return mResults.get(index);
    }

    @Override
    public Filter getFilter() {
        Filter filter = new Filter() {
            @Override
            protected FilterResults performFiltering(CharSequence constraint) {
                FilterResults filterResults = new FilterResults();
                if (constraint != null) {
                    // Retrieve the AutocompleteHelper results.

                    mResults = AutoCompleteHelper.getAutoCompletePredictions(
                            constraint.toString(),
                            mLatLng);

                    // Assign the data to the FilterResults
                    filterResults.values = mResults;
                    filterResults.count = mResults.size();
                }
                return filterResults;
            }

            @Override
            protected void publishResults(CharSequence constraint, FilterResults results) {
                if (results != null && results.count > 0) {
                    notifyDataSetChanged();
                }
                else {
                    notifyDataSetInvalidated();
                }
            }};
        return filter;
    }
}

我也在尝试去掉下拉菜单的阴影,你找到解决方案了吗? - Silvia H
1个回答

5
我实际上已经理解了一切 :) 这是我使用的相关代码。
自定义字体
这个技巧的关键是,我必须在我的 Activity 中将我的字体设置为 mAutoCompleteTextView 和 tvAutocompleteListItem。
去除阴影
我将 mAutoCompleteTextView 的背景设置为 R.drawable.autocomplete_dropdown。在这个 drawable 中,重要的一行是
<stroke
    android:width="0dip"
    android:color="@color/cp_green" />

半径

半径设置在R.drawable.autocomplete_dropdown中,如下所示:

    <corners
        android:radius="20dip"/>

MapActivity.java

private void setAutoCompleteListener() {
    mAutoCompleteTextView.setDropDownBackgroundDrawable(
            mContext.getResources().getDrawable(R.drawable.autocomplete_dropdown));


    mAutoCompleteTextView.setAdapter(
            new AutoCompleteAdapter(mContext, R.layout.autocomplete_list_item, mLatLng));

    mAutoCompleteTextView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
            String autoCompleteText = (String) adapterView.getItemAtPosition(i);
            mAutoCompleteTextView.setText(autoCompleteText);
            initiateSearch();
            hideKeyboard();
        }
    });

    mAutoCompleteTextView.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i2, int i3) {

        }

        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i2, int i3) {

        }

        @Override
        public void afterTextChanged(Editable editable) {
            if (editable.length() > 0) {
                mClearTextIcon.setVisibility(View.VISIBLE);
            } else {
                mClearTextIcon.setVisibility(View.INVISIBLE);
            }
        }
    });
}


public void applyFonts() {
    Log.d(TAG, "Applying Fonts.");

    FontHelper.applyFont(findViewById(R.id.rlMap), mContext);
    font = Font.getInstance(getApplicationContext());

    mAutoCompleteTextView.setTypeface(font.mAvenirLTStandardLight);

    LayoutInflater inflater = (LayoutInflater) getBaseContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View view = inflater.inflate(R.layout.autocomplete_list_item, null);

    TextView tvAutocompleteListItem = (TextView) view.findViewById(R.id.tvAutocompleteListItem);
    tvAutocompleteListItem.setTypeface(font.mAvenirLTStandardLight);
}

autocomplete_dropdown.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="@color/white" />

    <stroke
        android:width="0dip"
        android:color="@color/cp_green" />

    <corners
        android:radius="20dip"/>

    <padding
        android:left="25dip"
        android:top="10dip"
        android:right="25dip"
        android:bottom="10dip" />
</shape>

autocomplete_list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:textColor="@color/gray_text"
    android:textSize="14sp"
    android:layout_marginStart="25dp"
    android:layout_marginEnd="25dp"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:id="@+id/tvAutocompleteListItem"/>

activity_map.xml

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/search"
    android:id="@+id/search"
    android:paddingTop="8dp"
    android:paddingBottom="8dp"
    android:paddingStart="10dp"
    android:paddingEnd="10dp">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="44dp"
    android:background="@drawable/search_bar"
    android:id="@+id/search_bar">

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/logo_image"
    android:layout_centerVertical="true"
    android:layout_marginStart="10dp"
    android:layout_marginEnd="0dp"
    android:id="@+id/ibLogoImage"
    android:contentDescription="@string/logo"/>

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/search_icon"
    android:layout_centerVertical="true"
    android:layout_marginStart="0dp"
    android:layout_marginEnd="15dp"
    android:layout_alignParentEnd="true"
    android:id="@+id/ibSearch"
    android:contentDescription="@string/search_hint"/>

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/ibClearText"
    android:layout_toStartOf="@id/ibSearch"
    android:background="@drawable/clear_text"
    android:visibility="invisible"
    android:layout_centerVertical="true"
    android:layout_marginStart="10dp"
    android:layout_marginEnd="20dp"
    android:contentDescription="@string/clear" />

<AutoCompleteTextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/actvSearch"
    android:hint="@string/search_or_enter_address"
    android:background="@color/transparent_white"
    android:textSize="14sp"
    android:textColor="@color/black"
    android:completionThreshold="3"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:layout_centerVertical="true"
    android:layout_toEndOf="@id/ibLogoImage"
    android:layout_toStartOf="@id/ibClearText"
    android:dropDownAnchor="@id/search_bar"
    android:dropDownVerticalOffset="10dp" />

    </RelativeLayout>
</RelativeLayout>

3
您可以使用XML样式设置AutoCompleteTextView的弹出框背景:在styles.xml中添加:<item name="android:autoCompleteTextViewStyle">@style/MyAutoCompleteTextViewTheme</item>,并添加以下内容:请注意,这将为AutoCompleteTextView应用名为"MyAutoCompleteTextViewTheme"的新样式,并将弹出框背景设置为名为"autocomplete_dropdown"的Drawable资源。 - Mr-IDE

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接