学步园

今天的第二篇ui练习贴，先看UI看

看布局可以知道 一个Edittext 输入数据，后右侧的一个Imageview 点击会出现一个，popwindow 可以点击赋值给Edittext 或者点击删除数据，很明显用安卓自带的spinner 是无法实现这个功能的

主布局 ： Edittext 和ImageView 没什么难度

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <EditText
        android:id="@+id/input"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:text="@string/hello_world" />

    
    <ImageView 
        android:id="@+id/down_arrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/down_arrow"
        android:layout_alignRight="@id/input"
        android:clickable="true"
        android:layout_marginTop="20dp"
        />
</RelativeLayout>

然后就是popwindow的布局，填充一个listview 里面有一个条目布局  popwindow 和listview皆在代码中定义生成

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    tools:context=".MainActivity" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/user" />

    <TextView
        android:id="@+id/tv_list_item"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_horizontal"
        android:text="@string/hello_world" />

    <ImageView
        android:id="@+id/delete"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/delete" />

</LinearLayout>

这篇博客没什么难度，就简单说下吧

看java代码

-----------------------------------------实例化组件---------------------------------

	private EditText input;
	
	private ImageView downArrow;
	
	//填充假数据的集合
	private List<String> msgList;
	
	private PopupWindow popWin;

	private ListView listView;

	/**
	 * 初始化控件
	 */
	private void initView() {
		input = (EditText) findViewById(R.id.input);
		downArrow = (ImageView) findViewById(R.id.down_arrow);
	}
	

----------------------------------点击Imageview在下方出现popwindow-----------------------

		downArrow.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				
				//定义 popupWindow
				popWin = new PopupWindow(MainActivity.this);
				popWin.setWidth(input.getWidth()); //设置宽度
				popWin.setHeight(200);	//设置popWin 高度
				
				popWin.setContentView(listView); //为popWindow填充内容
				popWin.setOutsideTouchable(true); // 点击popWin 以处的区域，自动关闭 popWin
//				view的左下角进行偏移，xoff正的向左，负的向右. yoff没测，也应该是正的向下，负的向上
				popWin.showAsDropDown(input, 0, 0);//设置 弹出窗口，显示的位置
				
			}
		});

-----------------------------------------得到一个listview 为popwindow填充-------------------

    private void initListView() {
        listView = new ListView(this);
        listView.setBackgroundResource(R.drawable.listview_background); //设置listView 背景
        listView.setDivider(null);    //设置条目之间的分隔线为null
        listView.setVerticalScrollBarEnabled(false); //隐藏listView的滚动条
        listView.setAdapter(new MyListAdapter());
    }

---------------------------------------------为listview填充假数据准备一个集合-----------------------------------

	/**
	 * 填充listview数据
	 */
	private void initData() {
		msgList = new ArrayList<String>();
		
		for (int i = 0; i < 20; i++) {
			msgList.add("1000000000"+i);
		}
	}

---------------------------------准备一个adapter 进行给listview填充数据-------------------------------------

private class MyListAdapter extends BaseAdapter{

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

		@Override
		public Object getItem(int position) {
			return position;
		}

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

		@Override
		public View getView(final int position, View convertView, ViewGroup parent) {
			ViewHolder holder;
			if(convertView == null){
				convertView = View.inflate(getApplicationContext(), R.layout.list_item, null);
				holder = new ViewHolder();
				
				holder.delete = (ImageView) convertView.findViewById(R.id.delete);
				holder.tv_msg =(TextView) convertView.findViewById(R.id.tv_list_item);
				convertView.setTag(holder);
			}else{
				holder = (ViewHolder) convertView.getTag();
			}
			
			holder.tv_msg.setText(msgList.get(position));
			//点击事件处理
			holder.delete.setOnClickListener(new OnClickListener() {
				
				@Override
				public void onClick(View v) {
				//删除对应的条目
					msgList.remove(position);
					
					//刷新listView
					MyListAdapter.this.notifyDataSetChanged();
				}
			});
			convertView.setOnClickListener(new OnClickListener() {
				
				@Override
				public void onClick(View v) {
					//设置输入框 
					input.setText(msgList.get(position));
					
					popWin.dismiss();
				}
			});
			
			return convertView;
		}
	}
//-----------------------------adapter开始添加数据-------------
//---------------------listview的优化-----------------------
	private class ViewHolder{
		TextView tv_msg;
		ImageView delete;
	}

OK  搞定  因为我是复习UI 关于java代码不懂的可以提问

点击下载源码