Android進階之繪製-自定義View完全掌握(三)
- 2020 年 1 月 20 日
- 筆記
自定義View系列的第三篇部落格，我們來學習如何實現自定義下拉框。 今天的程式，我們來實現這樣的一個效果。
布局非常簡單，我們直接開始編碼。 修改activity_main.xml文件的程式碼。
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.itcast.test0430.MainActivity"> <EditText android:id="@+id/et_input" android:layout_width="match_parent" android:layout_height="wrap_content" android:ellipsize="middle" android:hint="請輸入內容..." android:paddingRight="40dp" android:singleLine="true" /> <ImageView android:id="@+id/iv_down_arrow" android:layout_width="30dp" android:layout_height="30dp" android:layout_alignRight="@id/et_input" android:layout_alignTop="@id/et_input" android:padding="5dp" android:src="@drawable/down_arrow" /> </RelativeLayout>
布局程式碼非常簡單，就是兩個控制項。 接下來修改MainActivity的程式碼。
package com.itcast.test0430; import android.graphics.Color; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.view.ViewGroup; import android.widget.AdapterView; import android.widget.BaseAdapter; import android.widget.EditText; import android.widget.ImageView; import android.widget.ListView; import android.widget.PopupWindow; import android.widget.TextView; import java.util.ArrayList; import butterknife.BindView; import butterknife.ButterKnife; import butterknife.OnClick; public class MainActivity extends AppCompatActivity { @BindView(R.id.et_input) EditText etInput; @BindView(R.id.iv_down_arrow) ImageView ivDownArrow; /** * */ private PopupWindow popupWindow; private ListView listView; private ArrayList<String> msgs; private MyAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind(this); listView = new ListView(this); listView.setBackgroundColor(Color.WHITE); //準備數據 msgs = new ArrayList<>(); for(int i = 0;i < 500;i++) { msgs.add(i + "--aaaaaa---" + i); } adapter = new MyAdapter(); listView.setAdapter(adapter); listView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { //1、得到數據 String msg = msgs.get(position); //2、設置到輸入框 etInput.setText(msg); if(popupWindow != null && popupWindow.isShowing()){ popupWindow.dismiss(); popupWindow = null; } } }); } @OnClick(R.id.et_input) public void onViewClick(View view){ if(popupWindow == null){ popupWindow = new PopupWindow(this); popupWindow.setWidth(etInput.getWidth()); popupWindow.setHeight(400); popupWindow.setContentView(listView); popupWindow.setFocusable(true);//設置焦點 } popupWindow.showAsDropDown(etInput,0,0); } class MyAdapter extends BaseAdapter{ @Override public int getCount() { return msgs.size(); } @Override public Object getItem(int position) { return null; } @Override public long getItemId(int position) { return 0; } @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder viewHolder; if(convertView == null){ convertView = View.inflate(MainActivity.this,R.layout.item_main,null); viewHolder = new ViewHolder(); viewHolder.tv_msg = convertView.findViewById(R.id.tv_msg); viewHolder.iv_delete = convertView.findViewById(R.id.iv_delete); convertView.setTag(viewHolder); }else{ viewHolder = (ViewHolder) convertView.getTag(); } //根據位置得到數據 final String msg = msgs.get(position); viewHolder.tv_msg.setText(msg); //設置刪除 viewHolder.iv_delete.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //1、從集合刪除 msgs.remove(msg); //2、刷新UI---也就是 刷新適配器 adapter.notifyDataSetChanged(); } }); return convertView; } } static class ViewHolder{ TextView tv_msg; ImageView iv_delete; } }
item_main.xml文件的程式碼如下。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="50dp" android:gravity="center_vertical" android:orientation="horizontal" android:padding="5dp"> <ImageView android:layout_width="50dp" android:layout_height="50dp" android:layout_gravity="center_vertical" android:layout_margin="5dp" android:padding="3dp" android:src="@drawable/user" /> <TextView android:id="@+id/tv_msg" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_margin="5dp" android:layout_weight="1" android:gravity="center" android:padding="3dp" android:text="三個火槍手" android:textColor="#000" /> <ImageView android:id="@+id/iv_delete" android:layout_width="30dp" android:layout_height="30dp" android:layout_gravity="center_vertical" android:layout_margin="5dp" android:padding="3dp" android:src="@drawable/delete" /> </LinearLayout>
這裡的程式碼也很簡單，所以不作過多解釋，程式碼的每個地方都有注釋。唯一需要注意的地方就是，因為我們的PopupWindow類是設置了寬為200，而只要是在程式碼中設置的控制項屬性，它的單位均為px(像素)，而像素是沒有適配功能的，所以為了使我們的程式能夠在任意解析度的手機上正確運行，我們應該把像素轉換為dp。 提供給大家一個工具類，用於dp與px之間的轉換。
package com.itcast.test0430; import android.content.Context; public class DensityUtil { /** * 根據手機的解析度從dip的單位轉換為px(像素) */ public static int dipToPx(Context context,float dpValue){ final float scale = context.getResources().getDisplayMetrics().density; return (int) (dpValue * scale + 0.5f); } /** * 根據手機的解析度從px(像素)的單位轉換為dip */ public static int pxToDip(Context context,float pxValue){ final float scale = context.getResources().getDisplayMetrics().density; return (int) (pxValue * scale + 0.5f); } }
所以，我們把popupWindow.setHeight(400);改為
int height = DensityUtil.dipToPx(this,400); popupWindow.setHeight(height);
即可。 現在運行項目，預覽一下效果。
這樣，我們的下拉框也就實現了。現在有了dp和px之間轉換的工具類，我們就可以在需要螢幕適配的地方使用它了，包括我們之前練習的一些項目。
