Spinner下拉外边框

时间:2016-04-11 10:15:57

标签: android android-layout android-spinner

如何为整个下拉菜单设置边框而不为项目本身设置边框?

期望

也许它没有清楚地看到,但我对整个下拉列表外的白色边界感兴趣。见红色注释

enter image description here

现实

enter image description here

spinner_item.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/primary_blue_dark">

    <TextView
        android:id="@+id/tv_spinner_item"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="12dp"
        android:gravity="center_vertical|start"
        style="@style/sp_squared_style"/>

    <ImageView
        android:id="@+id/iv_underline"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="12dp"
        android:layout_marginLeft="12dp"
        android:layout_marginBottom="6dp"
        android:background="@drawable/ic_underline"/>
</LinearLayout>

3 个答案:

答案 0 :(得分:1)

为此找到了解决方法。不确定,也许有更好的解决方案。无论如何:

1)spinner_item.xml - 在布局中包装内容

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/grey_stroke" //add white border
>

<LinearLayout
    android:id="@+id/ll_wrapper"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="1dp" //set margin left and right
    android:layout_marginRight="1dp" //add bottom and top margins dynamically in adapter
    android:orientation="vertical"
    android:background="@color/primary_blue_dark">
    <TextView
        android:id="@+id/tv_spinner_item"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="@dimen/activity_vertical_margin_small"
        android:gravity="center_vertical|start"
        style="@style/sp_squared_style"/>

    <ImageView
        android:id="@+id/iv_underline"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="@dimen/activity_vertical_margin_small"
        android:layout_marginLeft="@dimen/activity_vertical_margin_small"
        android:layout_marginBottom="6dp"
        android:background="@drawable/ic_underline"/>
</LinearLayout>

2)在适配器中为第一个元素和底部元素添加边距:

public class AmountAdapter extends ArrayAdapter<String> {

private TextView tvRow;
private TextView tvItem;
private LinearLayout llWrapper;
private Context context;
private ImageView ivUnderline;
private String[] values;

private int border;


public AmountAdapter(Context context, int textViewResourceId,
                         String[] values) {
    super(context, textViewResourceId, values);
    this.context = context;
    this.values = values;
    border = (int) context.getResources().getDimension(R.dimen.rounding_radius_dp_1);
}

public int getCount() {
    return values.length;
}

public String getItem(int position) {
    return values[position];
}

public String[] getItems() {
    return values;
}


public long getItemId(int position) {
    return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {

    LayoutInflater inflater = LayoutInflater.from(context);
    View row;

    row = inflater.inflate(R.layout.item_spinner_row, parent, false);
    tvRow = (TextView) row.findViewById(R.id.tv_spinner_row);
    return row;
}

@Override
public View getDropDownView(final int position, View convertView,
                            ViewGroup parent) {
    View row;

    row = View.inflate(context, R.layout.item_spinner_dropdown, null);
    llWrapper = (LinearLayout) row.findViewById(R.id.ll_wrapper);
    tvItem = (TextView) row.findViewById(R.id.tv_spinner_item);
    tvItem.setText(values[position]);

    ivUnderline = (ImageView) row.findViewById(R.id.iv_underline);

    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
            LinearLayout.LayoutParams.MATCH_PARENT,
            LinearLayout.LayoutParams.WRAP_CONTENT
    );


    if (position == values.length - 1){
        ivUnderline.setVisibility(View.GONE);
        int padding = (int)context.getResources().getDimension(R.dimen.activity_vertical_margin_small);
        int paddingTop = (int)context.getResources().getDimension(R.dimen.rounding_radius_dp);
        tvItem.setPadding(padding, paddingTop, 0, padding);

        params.setMargins(border, 0, border, border); //end part
        llWrapper.setLayoutParams(params);
    } else if(position == 0){
        params.setMargins(border, border, border, 0); //start part
        llWrapper.setLayoutParams(params);
    } else {
        params.setMargins(border, 0, border, 0); //middle part
        llWrapper.setLayoutParams(params);
    }

    return row;
}
}

3)结果:

enter image description here

答案 1 :(得分:1)

由于我花了很多时间才找到它,希望它可以帮助某人...

首先在 drawable 文件夹中创建一个新的 spinner_dropdown_border.xml 与所需的边框:

  <?xml version="1.0" encoding="UTF-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" >
        <solid android:color="@color/basic_color"/>
        <stroke
            android:width="2dp"
            android:color= "@color/border_color"/>
    </shape>

然后像这样将此边框应用于您的微调器:

   <Spinner
        android:id="@+id/spinner"
        android:layout_width="0dp"
        android:layout_height="50dp"
        ...
        android:spinnerMode="dropdown"
        android:popupBackground="@drawable/spinner_dropdown_border" />

这将只为边框完成工作,而不是单独为下拉菜单的每个项目完成:

android:popupBackground="@drawable/spinner_dropdown_border"

Spinner border image

答案 2 :(得分:0)

感谢 Ben-J 评论和http://stackoverflow.com/questions/33222207/how-to-add-padding-to-drop-down-list-that-we-get-by-clicking-on-spinner回答,我使用此代码使用ThemeOverlay.AppCompat.Light子样式创建边框。

这将为外部列表覆盖创建填充,以显示底层覆盖背景。此外,您还需要为列表项设置明确的背景,以使它们不透明。

<强>布局/ main_layout.xml:

<Spinner xmlns:app="http://schemas.android.com/apk/res-auto"
  app:popupTheme="@style/LangList_SpinnerPopupOverlay" />

<强>值/ styles.xml:

<style name="LangList_SpinnerPopupOverlay" parent="ThemeOverlay.AppCompat.Light">
  <!-- border width -->
  <item name="android:padding">1dp</item>
  <!-- border color -->
  <item name="android:background">#f00</item>
</style>

<强>布局/ spinner_list_item.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="horizontal"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <TextView
    android:id="@+id/itemText"
    android:background="#fff"/>
</LinearLayout>

<强>布局/ spinner_view.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="horizontal"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <TextView
    android:id="@+id/itemText"/>
</LinearLayout>

<强> CustomListAdapter.java:

import java.util.List;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.LinearLayout;
import android.widget.TextView;

public class CustomListAdapter extends ArrayAdapter<CustomListItem> {

  private Context context;

  public CustomListAdapter(Context context, List<CustomListItem> items) {
    super(context, R.layout.spinner_list_item, items);
    this.context = context;
  }

  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
    // spinner layout (when closed)
    int layoutId = R.layout.spinner_view;
    return createView(position, convertView, parent, layoutId);
  }

  @Override
  public View getDropDownView(int position, View convertView, ViewGroup parent) {
    // dropdown list layout
    int layoutId = R.layout.spinner_list_item;
    return createView(position, convertView, parent, layoutId);
  }

  private View createView(int position, View convertView, ViewGroup parent, int layoutId) {
    if (convertView == null) {
      LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
      convertView = inflater.inflate(layoutId, null);
    }

    TextView itemText = convertView.findViewById(R.id.itemText);

    CustomListItem item = getItem(position);
    if (item != null) {
      itemText.setText(item.getText());
    }

    return convertView;
  }

}

https://i.imgur.com/SKAW0Vw.png