顯示具有 spinner 標籤的文章。 顯示所有文章
顯示具有 spinner 標籤的文章。 顯示所有文章

2015年8月5日 星期三

iOS Swift Multiple PickerView Spinner 多重 關聯 連動 滾輪

2017.06.18 update Android的下拉選項為Spinner
相對應的iOS的為滾輪PickerView

1.首先在Main.storyboard拖拉一個Picker View元件
並點選右方Show the Connections inspector
將dataSource與delegate拉致上方圖片上三個小圖的最左邊小圖關聯
2.將storyboard元件拉至ViewController

3.ViewController繼承UIPickerViewDelegate, UIPickerViewDataSource

4.ViewController.swift

//
//  ThreePickerViewController.swift
//  MultiplePickerViewTest
//
//  Created by Terry Yang on 2017/6/18.
//  Copyright © 2017年 terryyamg. All rights reserved.
//

import UIKit

class ThreePickerViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
    
    @IBOutlet weak var picker3: UIPickerView!
    
    //第一輪
    var list1  = ["亞洲","歐洲"]
    //第二輪
    var list21 = ["日本","台灣"]
    var list22 = ["英國","德國","義大利"]
    //第三輪
    var list211 = ["東京","沖繩","北海道"]
    var list212 = ["台北","台中","台南","高雄","台東"]
    var list221 = ["倫敦"]
    var list222 = ["柏林"]
    var list223 = ["羅馬"]
    
    //init
    var island : String = "亞洲"
    var country : String = "日本"
    var city : String = ""
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        picker3.delegate = self
        picker3.dataSource = self
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    //幾個滾輪
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 3
    }
    
    //確認各個滾輪有幾筆
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        //component - 第幾個滾輪
        switch(component){
        case 0:
            return list1.count
        case 1:
            return island == "亞洲" ? list21.count : list22.count
        case 2:
            switch country {
            case "日本":
                return list211.count
            case "台灣":
                return list212.count
            case "英國":
                return list221.count
            case "德國":
                return list222.count
            case "義大利":
                return list223.count
            default:
                return 0
            }
        default:
            return 0
        }
    }
    
    //放入內容
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        switch(component){
        case 0:
            return list1[row]
        case 1:
            //true: 回傳第二輪的亞洲內容 false: 回傳第二輪的歐洲內容
            return island == "亞洲" ? list21[row] : list22[row]
        case 2:
            switch country {
            case "日本":
                return list211[row]
            case "台灣":
                return list212[row]
            case "英國":
                return list221[row]
            case "德國":
                return list222[row]
            case "義大利":
                return list223[row]
            default:
                return nil
            }
        default:
            return nil
        }
    }
    
    //回傳選擇的字串
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        switch component {
        case 0:
            island = list1[row]
            updateCountry(0)
            updateCity(0)
            print("洲: \(island)")
            //選擇第一個滾輪後-重新載入
            pickerView.reloadAllComponents()
            //第二個與第三個滾輪回到第一個項目
            pickerView.selectRow(0, inComponent: 1, animated: true)
            pickerView.selectRow(0, inComponent: 2, animated: true)
        case 1:
            updateCountry(row)
            updateCity(0)
            print("國: \(country)")
            //選擇第二個滾輪後-重新載入
            pickerView.reloadAllComponents()
            //第三個滾輪回到第一個項目
            pickerView.selectRow(0, inComponent: 2, animated: true)

        case 2:
            updateCity(row)
            print("城: \(city)")
        default:
            print("無")
        }
        
    }
    
    func updateCountry(_ row: Int){
        if island == "亞洲" {
            country = list21[row]
        } else {
            country = list22[row]
        }
    }
    
    func updateCity(_ row: Int){
        switch country {
        case "日本":
            city = list211[row]
        case "台灣":
            city = list212[row]
        case "英國":
            city = list221[row]
        case "德國":
            city = list222[row]
        case "義大利":
            city = list223[row]
        default:
            print("無")
        }
        
    }
    
}


檔案下載:
 https://github.com/terryyamg/MultiplePickerViewTest
參考來源:
http://stackoverflow.com/questions/30832489/reload-component-in-ui-picker-view-swift
https://stackoverflow.com/questions/11191062/how-to-reset-uipickerview-to-index0-iphone

2014年7月9日 星期三

Android google map 結合 spinner 下拉式選單

利用下拉式選單選定某個項目後,直接在google map上移到定點
1.activity_main.xml 在地圖下方加入下拉式選單




2.MainActivity.java 以基隆市、台北市85度c為例
private float coordinate[][][] = {
   { { 0, (float) 25.1288160, (float) 121.7404860 },
     { 0, (float) 25.1286310, (float) 121.7594120 },
     { 0, (float) 25.0972380, (float) 121.7122780 } },
   { { 1, (float) 25.0574640, (float) 121.5554840 },
     { 1, (float) 24.9836380, (float) 121.5673320 },
     { 1, (float) 25.0310780, (float) 121.5522090 } },
    }; //設定定點座標
private String[] type = new String[] { "基隆市", "台北市" }; //第一個選單
 private String[] locationName = new String[] { "85度c基隆孝一店", "85度c基隆東信店","85度c七堵明德店" }; //初始選單
 private String[][] type2 = new String[][] {
   { "85度c基隆孝一店", "85度c基隆東信店", "85度c七堵明德店" },
   { "85度c台北光復北店", "85度c木柵木新店", "85度c台北安和店" } };//第二個選單
 private Spinner sp1;// 第一個下拉選單
 private Spinner sp2;// 第二個下拉選單
 private Context context;
 ArrayAdapter adapter;
 ArrayAdapter adapter2;
@Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  context = this;
  // 程式剛啟動時載入第一個下拉選單
  adapter = new ArrayAdapter(this,
    android.R.layout.simple_spinner_item, type);
  adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
  sp1 = (Spinner) findViewById(R.id.type);
  sp1.setAdapter(adapter); //將adapter加入sp1選單
  sp1.setOnItemSelectedListener(selectListener); //第一個選單監聽動作

  // 程式剛啟動時載入第一個下拉選單,所以第二選單要載入第一個選單的子項目
  adapter2 = new ArrayAdapter(this,
    android.R.layout.simple_spinner_item, locationName);
  adapter2.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
  sp2 = (Spinner) findViewById(R.id.type2);
  sp2.setAdapter(adapter2); //將adapter加入sp2選單
  sp2.setOnItemSelectedListener(selectListener2); //第二個選單監聽動作
 }

 // 第一個下拉選單監聽動作
 private OnItemSelectedListener selectListener = new OnItemSelectedListener() {
  public void onItemSelected(AdapterView parent, View v, int position,
    long id) {
   // 讀取第一個下拉選單是選擇第幾個
   int pos = sp1.getSelectedItemPosition();
   // 重新產生新的Adapter,用的是二維陣列type2[pos]
   adapter2 = new ArrayAdapter(context,
     android.R.layout.simple_spinner_item, type2[pos]);
   // 載入第二個下拉選單Spinner
   sp2.setAdapter(adapter2);

  }

  public void onNothingSelected(AdapterView arg0) {

  }

 };

 // 第二個下拉選單監聽動作
 private OnItemSelectedListener selectListener2 = new OnItemSelectedListener() {
  public void onItemSelected(AdapterView parent, View v, int position,
    long id) {
   setMapLocation(); //移動到選定項目位置的動作
  }

  public void onNothingSelected(AdapterView arg0) {

  }

 };

 public void setMapLocation() {
  try {
   int iSelect1 = sp1.getSelectedItemPosition(); //第一個下拉選單被選到的第幾個項目
   int iSelect2 = sp2.getSelectedItemPosition(); //第二個下拉選單被選到的第幾個項目
   double dLat = coordinate[iSelect1][iSelect2][1]; // 抓取座標,南北緯
   double dLon = coordinate[iSelect1][iSelect2][2]; // 抓取座標,東西經
   LatLng gg = new LatLng(dLat, dLon); //將座標位置輸入設定
   map.moveCamera(CameraUpdateFactory.newLatLng(gg)); //移動到定點
   map.animateCamera(CameraUpdateFactory.zoomTo(15)); //縮放
  } catch (NullPointerException e) {
   Log.i("myLocation", "NullPointException");
  }
 }
參考來源: http://jim690701.blogspot.tw/2012/07/androidspinner_15.html