Android控件之–發送郵件時的,收件人列表,可以自動匹配,可以刪除,可以添加的

 先不管,截幾個圖:添加瞭2個Item  ,後面那個是自動匹配聯想。
 

 
根據每個Item的寬度,動態計算,一行到底放多少個Item.不夠放,就換行(其實不是文本編輯器裡的那種換行,是新建一個LinearLayout.嘿嘿)
 

 
每個Item的初始狀態是沒有那個叉叉的,當click一下它,它就變成黃色背景,並且那個白色的叉叉出現瞭。
 

 
click那個叉叉,就把它刪除瞭,而且後面的那些要自動往前排(其實這裡,目前的一種方式是很粗糙的方式,直接removeAll,然後再一個個的add進去)

 

 

 
 
廢話少說,直接帖代碼:如下————》
  1。先看主界面佈局文件:
 

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:orientation="vertical" > 
 
    <com.test.demo.MyScrollView 
        android:id="@+id/mScrollView" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:background="@color/color_white"/> 
 
</LinearLayout> 
 
  單個Item的佈局文件: 
    <pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal" 
    android:background="@color/color_light" 
    android:gravity="center"> 
 
    <TextView 
         android:id="@+id/itemTv" 
         android:layout_width="wrap_content" 
             android:layout_height="wrap_content"> 
    </TextView> 
 
    <ImageView 
        android:id="@+id/delete_iv" 
        android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:background="@drawable/email_delete"> 
    </ImageView> 
 
</LinearLayout> 

3.color.xml
[html]
<?xml version="1.0" encoding="utf-8"?> 
<resources> 
    <drawable name="darkgray">#808080FF</drawable> 
    <drawable name="white">#FFFFFFFF</drawable> 
    <drawable name="black">#000000</drawable> 
    <drawable name="silver">#00ffffff</drawable>  
    <drawable name="text_yellow">#FFFF71</drawable> 
     
    <color name="blue">#7F0000FF</color>  
    <color name="transparent">#00000000</color> 
     
     <!– Colors –> 
    <color name="color_black">#000000</color> 
    <color name="color_white">#FFFFFF</color> 
    <color name="color_violet">#9900FF</color> 
      <color name="color_orange">#fd810a</color> 
         
    <color name="color_gray">#736F6E</color> 
    <color name="color_dark">#161C27</color> 
    <color name="color_light">#4D6288</color> 
       <color name="color_middle">#F17EAB</color> 
   
        
</resources> 

 

 2.再看Activity:
         
[java]
package com.test.demo; 
 
 
import android.app.Activity; 
import android.content.Context; 
import android.os.Bundle; 
import android.text.Editable; 
import android.text.TextWatcher; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.View.OnClickListener; 
import android.widget.AdapterView; 
import android.widget.AdapterView.OnItemClickListener; 
import android.widget.AdapterView.OnItemSelectedListener; 
import android.widget.ArrayAdapter; 
import android.widget.AutoCompleteTextView; 
import android.widget.LinearLayout; 
import android.widget.TextView; 
 
public class EditTextDemoActivity extends Activity { 
 
    private MyScrollView mSrollView; 
 
    /** Called when the activity is first created. */ 
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.main); 
            findViews(); 
    } 
 
    private void findViews(){ 
 
            mSrollView = (MyScrollView)findViewById(R.id.mScrollView); 
 
            mSrollView.setItemLayout(R.layout.email_item); 
 
            String[] userNameList = new String[]{"Jacky","Jacky2","Jacky3", 
                    "Jacky4","Jacky5","Jacky6","Jacky7","Jacky8"}; 
            mSrollView.initAutoCompleteTextView(userNameList); 
    } 
 
 

3.核心類———>
  

[java]
package com.test.demo; 
 
import android.content.Context; 
import android.util.AttributeSet; 
import android.util.Log; 
import android.view.Gravity; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.widget.AdapterView; 
import android.widget.AdapterView.OnItemClickListener; 
import android.widget.ArrayAdapter; 
import android.widget.AutoCompleteTextView; 
import android.widget.ImageView; 
import android.widget.LinearLayout; 
import android.widget.ScrollView; 
import android.widget.TextView; 
 
import java.util.ArrayList; 
import java.util.List; 
 
public class MyScrollView extends ScrollView implements OnItemClickListener{ 
 
    private Context mContext; 
    private LayoutInflater mInflater; 
 
    private LinearLayout mainLayout;                    //ScrollView下的主LinearLayout 
    private LinearLayout lastLinearLayout;          //記錄最後一個LinearLayout 
    private List<LinearLayout> subLayoutList = new ArrayList<LinearLayout>();  //LinearLayout數組(mainLayout除外) 
 
    private AutoCompleteTextView autoCompleteTv;        //自動匹配輸入框 
    private int autoCompleteTvWidth = 30; 
 
    private int lineLayoutIndex = -1;                   //主LinaerLayout下的子LinearLayout總數:也就是總行數 
    private int lineWidth; 
 
    private int itemLayoutResourceId;               //每行的LinearLayout的佈局文件id 
    private int currLineWidth = 0; 
    private boolean haveNewLine = true; 
 
    public MyScrollView(Context context, AttributeSet attrs, int defStyle) { 
        super(context, attrs, defStyle); 
        init(context); 
    } 
 
    public MyScrollView(Context context, AttributeSet attrs) { 
        super(context, attrs); 
        init(context); 
    } 
 
    public MyScrollView(Context context) { 
        super(context); 
        init(context); 
    } 
 
    /**
     * 初始化ScrollView下的主LinearLayout,第一個LinearLayout,和AutoCompleteTextView
     * @param context
     */ 
    private void init(Context context){ 
        mContext = context; 
        mInflater = LayoutInflater.from(context); 
 
        mainLayout  = new LinearLayout(mContext); 
        mainLayout.setOrientation(LinearLayout.VERTICAL); 
        mainLayout.setLayoutParams( new LinearLayout.LayoutParams( 
                        LinearLayout.LayoutParams.FILL_PARENT, 
                        LinearLayout.LayoutParams.WRAP_CONTENT 
                )); 
 
        this.addView(mainLayout); 
 
        //創建第一個horizontal 的 LinaerLayout 
        LinearLayout firstLayout = newSubLinearLayout(); 
        subLayoutList.add(firstLayout); 
        lastLinearLayout = firstLayout; 
        lastLinearLayout.setBackgroundColor(mContext.getResources().getColor(R.color.color_gray)); 
 
        //將AutoCompleteTextView加入到第一個LinearLayout 
        autoCompleteTv = new AutoCompleteTextView(mContext); 
        autoCompleteTv.setOnItemClickListener(this); 
        autoCompleteTv.setWidth(autoCompleteTvWidth); 
        firstLayout.addView(autoCompleteTv); 
 
        //將創建的第一個linearLayout 加入到mainLayout中 
        mainLayout.addView(firstLayout); 
    } 
 
    /**
     * 新建一行:新建一個LinearLayout
     * @return
     */ 
    private LinearLayout newSubLinearLayout(){ 
        LinearLayout layout = new LinearLayout(mContext); 
        LinearLayout.LayoutParams lp1 = new LinearLayout.LayoutParams( 
                LinearLayout.LayoutParams.FILL_PARENT, 
                LinearLayout.LayoutParams.WRAP_CONTENT); 
        layout.setOrientation(LinearLayout.HORIZONTAL); 
        layout.setLayoutParams(lp1); 
        layout.setGravity(Gravity.CENTER_VERTICAL); 
 
        lineLayoutIndex++; 
        return layout; 
    } 
 
    public void setHeight(int height){ 
 
    } 
 
    /**
     * 設置Item佈局資源id
     * @param resourceId
     */ 
    public void setItemLayout(int resourceId){ 
        this.itemLayoutResourceId = resourceId; 
    } 
 
 
    /**
     * 初始化AutoCompleteTextView的數據源
     * @param data
     */ 
    public void initAutoCompleteTextView(String[] data){ 
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(mContext, 
                android.R.layout.simple_dropdown_item_1line, data); 
        autoCompleteTv.setAdapter(adapter); 
    } 
 
    /**
     *
     * 重新添加所有的Item
     *
     * @param itemList
     */ 
    private void reAddAllItem(List<View> itemList){ 
        LinearLayout firstLayout = newSubLinearLayout(); 
        subLayoutList.add(firstLayout); 
        lastLinearLayout = firstLayout; 
        mainLayout.addView(firstLayout); 
        currLineWidth = 0; 
        for(View item:itemList){ 
            int childCount = lastLinearLayout.getChildCount(); 
            int itemWidth = item.getWidth(); 
            if(childCount==0){ 
                    lastLinearLayout.addView(item, 0); 
                    item.setTag(lastLinearLayout); 
                    currLineWidth += itemWidth+10; 
            }else{ 
                    if(lineWidth-currLineWidth<itemWidth+10){  //如果當前行不足以顯示該Item,要做換行處理 
                            lastLinearLayout = newSubLinearLayout(); 
                            lastLinearLayout.addView(item); 
                            item.setTag(lastLinearLayout); 
 
                            mainLayout.addView(lastLinearLayout); 
                            subLayoutList.add(lastLinearLayout); 
 
                            currLineWidth = itemWidth+10; 
                            haveNewLine = true; 
                    }else{ 
 
                            lastLinearLayout.addView(item, childCount); 
                            item.setTag(lastLinearLayout); 
                            currLineWidth += itemWidth+10; 
                            haveNewLine = false; 
                    } 
            } 
        } 
 
        //最後添加autocompleteTextView 
        lastLinearLayout.addView(autoCompleteTv); 
    } 
 
    /**
     * 添加一個Item:自動去判斷是在當前lastLinearLayout中添加,還是要再new 一個LinearLayout
     * @param value
     */ 
    int currLayoutIndex = 0; 
    private void addItem(String value){ 
        lineWidth  = lastLinearLayout.getWidth(); 
        final LinearLayout item = (LinearLayout)mInflater.inflate(itemLayoutResourceId,null); 
 
        final ImageView deleteIv = (ImageView)item.findViewById(R.id.delete_iv); 
        deleteIv.setVisibility(View.GONE); 
        deleteIv.setOnClickListener(new OnClickListener() { 
            @Override 
            public void onClick(View v) { 
                LinearLayout layout = (LinearLayout)item.getTag(); 
                layout.removeView(item); 
                List<View> itemList =new ArrayList<View>(); 
                int mainLayoutChildCount = mainLayout.getChildCount(); 
                for(int i = 0 ;i< mainLayoutChildCount;i++){ 
                    LinearLayout linearLayout = (LinearLayout)mainLayout.getChildAt(i); 
                    int count = linearLayout.getChildCount(); 
                    for(int j =0;j<count;j++){ 
                        View itemLayout = (View)linearLayout.getChildAt(j); 
                        if(!(itemLayout instanceof AutoCompleteTextView)){ 
                            itemList.add(itemLayout); 
                        } 
                    } 
                    linearLayout.removeAllViews(); 
                } 
                mainLayout.removeAllViews(); 
                subLayoutList.clear(); 
                reAddAllItem(itemList); 
            } 
        }); 
 
 
        item.setOnClickListener(new OnClickListener(){ 
            @Override 
            public void onClick(View v) { 
                if(deleteIv.getVisibility() == View.GONE){ 
                    deleteIv.setVisibility(View.VISIBLE); 
                    item.setBackgroundColor(mContext.getResources().getColor(R.color.color_orange)); 
                }else{ 
                    deleteIv.setVisibility(View.GONE); 
                    item.setBackgroundColor(mContext.getResources().getColor(R.color.color_light)); 
                } 
            } 
        }); 
 
 
        TextView itemTv = (TextView)item.findViewById(R.id.itemTv); 
        int itemWidth = (int) LableCloudUtlis.getFontWidth(value, (int)itemTv.getTextSize(), mContext)+30; 
 
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(itemWidth, 
                LinearLayout.LayoutParams.WRAP_CONTENT); 
        params.setMargins(10, 10, 10, 10); 
 
        item.setLayoutParams(params); 
        itemTv.setText(value); 
 
        Log.i("test","autoCompleteTv.width="+autoCompleteTv.getWidth()); 
        int childCount = lastLinearLayout.getChildCount(); 
        if(childCount==1){ 
                lastLinearLayout.addView(item, 0); 
                currLineWidth += itemWidth+10; 
        }else{ 
                if(lineWidth-currLineWidth<itemWidth+10){  //如果當前行不足以顯示該Item,要做換行處理 
                    lastLinearLayout.removeView(autoCompleteTv); 
                        lastLinearLayout = newSubLinearLayout(); 
                        lastLinearLayout.addView(item); 
                        lastLinearLayout.addView(autoCompleteTv); 
                        mainLayout.addView(lastLinearLayout); 
                        subLayoutList.add(lastLinearLayout); 
                        currLineWidth = itemWidth+10; 
                        haveNewLine = true; 
                }else{ 
                        lastLinearLayout.addView(item, childCount-1); 
                        currLineWidth += itemWidth+10; 
                        haveNewLine = false; 
                } 
        } 
 
        lastLinearLayout.setTag(lineLayoutIndex); 
        item.setTag(lastLinearLayout); 
 
 
        //如果目前該行剩餘的寬度不足以顯示autoCompleteTextView就要做換行處理 
        if( !haveNewLine && lineWidth-currLineWidth<autoCompleteTv.getWidth()-100){ 
                //將autoCompleteTextView從lastLinearLayout中remove掉 
                lastLinearLayout.removeView(autoCompleteTv); 
                //新建一個LinearLayout,將autoCompleteTextView添加到此LinaerLayout 
                lastLinearLayout = newSubLinearLayout(); 
                lastLinearLayout.addView(autoCompleteTv); 
                mainLayout.addView(lastLinearLayout); 
 
                subLayoutList.add(lastLinearLayout); 
                currLineWidth = 0; 
        } 
    } 
 
    @Override 
    public void onItemClick(AdapterView<?> parent, View view, int position, 
            long id) { 
        //選中後,往當前lastLinearLayout中添加一個Item 
        String value = autoCompleteTv.getText().toString(); 
        addItem(value); 
        autoCompleteTv.setText(""); 
    } 
 

4. ok搞定!

5.說明: 之所以實現這個東西,是因為目前項目裡要提供一個這樣的功能:就是發消息給某些人,要一邊輸入一邊發輸入的前2個字符到服務器,然後用自動匹配,將服務器返回的東西顯示出來,讓用戶選擇。 而且,要能刪除,刪除呢,不管刪哪個,刪完後還要重排。不過,這個還要優化,集成到項目中去,還要改點東西,但是基本上搞定瞭。

 

 

摘自 liuxiIT的專欄

發佈留言