UI控件之六

1 Spinner（列表選項框）

1.1 常用屬性

• dropDownHorizontalOffset：設置列表框的水平偏移距離
• dropDownVerticalOffset：設置列表框的水平豎直距離
• dropDownSelector：列表框被選中時的背景
• dropDownWidth：設置下拉列表框的寬度
• gravity：設置里面組件的對其方式
• popupBackground：設置列表框的背景
• prompt：設置對話框模式的列表框的提示信息(標題)，只能夠引用string.xml 中的資源id,而不能直接寫字符串
• spinnerMode：列表框的模式，有兩個可選值： dialog：對話框風格的窗口 dropdown：下拉菜單風格的窗口(默認)
• entries：使用數組資源設置下拉列表框的列表項目

1.2 實例

復用上一節的代碼

1. 新建布局spinner_item.xml

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

    <ImageView
            android:id="@+id/img_icon"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:src="@drawable/logo" />

    <TextView
            android:id="@+id/txt_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/img_icon"
            android:layout_marginTop="30dp"
            android:text="文本"
            android:textSize="18sp" />

</LinearLayout>

2. activity_main.xml加入spinner

	 <Spinner
	      android:id="@+id/spin"
	      android:layout_width="200dp"
	      android:layout_height="64dp" />

3. MainActivity.java

public class MainActivity extends AppCompatActivity {

    private Spinner spinner;
    private ArrayList<Icon> mData = null;
    private BaseAdapter myAdadpter = null;
    private Context mContext;

    //判斷是否為剛進去時觸發onItemSelected的標志
    private boolean selected = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mContext = MainActivity.this;
        mData = new ArrayList<>();
        bindViews();
    }

    private void bindViews() {
        spinner = findViewById(R.id.spin);

        mData.add(new Icon(R.drawable.chat,"聊天"));
        mData.add(new Icon(R.drawable.game,"游戲"));
        mData.add(new Icon(R.drawable.mike,"錄音"));
        mData.add(new Icon(R.drawable.music,"音樂"));
        mData.add(new Icon(R.drawable.printer,"打印機"));
        mData.add(new Icon(R.drawable.location,"定位"));
        mData.add(new Icon(R.drawable.torch,"手電筒"));

        myAdadpter = new MyAdapter<Icon>(mData, R.layout.spinner_item) {
            @Override
            public void bindView(ViewHolder holder, Icon obj) {
                holder.setImageResource(R.id.icon_img, obj.getiId());
                holder.setText(R.id.icon_text, obj.getiName());
            }
        };

        spinner.setAdapter(myAdadpter);
        spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
                //重復選不提示
                if(selected){
                    TextView txt_name = view.findViewById(R.id.icon_text);
                    Toast.makeText(mContext,"你選擇了：" + txt_name.getText().toString(),
                            Toast.LENGTH_SHORT).show();
                }else {
                    selected = true;
                }
            }

            @Override
            public void onNothingSelected(AdapterView<?> adapterView) {

            }
        });
    }
}

顯示：

2 AutoCompleteTextView（自動完成文本框）

2.1 常用屬性

• completionHint：設置下拉菜單中的提示標題
• completionHintView：定義提示視圖中顯示下拉菜單
• completionThreshold：指定用戶至少輸入多少個字符才會顯示提示
• dropDownAnchor：設置下拉菜單的定位"錨點"組件，如果沒有指定改屬性， 將使用該TextView作為定位"錨點"組件
• dropDownHeight：設置下拉菜單的高度
• dropDownWidth：設置下拉菜單的寬度
• dropDownHorizontalOffset：指定下拉菜單與文本之間的水平間距
• dropDownVerticalOffset：指定下拉菜單與文本之間的豎直間距
• dropDownSelector：設置下拉菜單點擊效果
• popupBackground：設置下拉菜單的背景

2.2 實例

1. 加入布局
   
2. values/arrays.xml定義字符串數組

    <string-array name="myArray">
        <item>who are you</item>
        <item>where are you</item>
        <item>when you go</item>
        <item>what are you doing</item>
        <item>how are you</item>
    </string-array>

3. MainActivity.java

public class MainActivity extends AppCompatActivity {

    private AutoCompleteTextView atv_content;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        atv_content = (AutoCompleteTextView) findViewById(R.id.atv_content);

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(MainActivity.
                this, android.R.layout.simple_dropdown_item_1line, getResources().getStringArray(R.array.myArray));
        atv_content.setAdapter(adapter);
    }
}

4. 輸入w，顯示4個文本，沒有how
   

3 MultiAutoCompleteTextView（多提示項的自動完成文本框）

3.1 基本屬性

與AutoCompleteTextView屬性相同

3.2 實例

復用AutoCompleteTextView的實例

1. 修改activity_main.xml，AutoCompleteTextView改為MultiAutoCompleteTextView

<MultiAutoCompleteTextView
            android:id="@+id/atv_content"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:completionHint="請輸入搜索內容"
            android:completionThreshold="1"/>

2. 修改MainActivity.java

public class MainActivity extends AppCompatActivity {

    private MultiAutoCompleteTextView atv_content;

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

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(MainActivity.
                this, android.R.layout.simple_dropdown_item_1line, getResources().getStringArray(R.array.myArray));
        atv_content.setAdapter(adapter);
        atv_content.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer());
    }
}

3. 逗號之后再輸入w，同樣會提示，AutoCompleteTextView不會