自定義控制元件之組合式控制元件 下拉選擇框
阿新 • • 發佈：2018-12-23
自定義控制元件之組合式控制元件 下拉選擇框
文章目錄
- 自定義控制元件之組合式控制元件 下拉選擇框
- 零 組合控制元件下載
- 一 自定義控制元件思路
- 二 MainActivity核心程式碼
- 三 activity_main.xml核心程式碼
- 四 SpinnerView核心程式碼
- 五 view_spinner.xml核心程式碼
- 六 list_item.xml核心程式碼
- 七 控制元件背景edit_bg.xml
- 八 組合式自定義控制元件優點：
- 九 本文原始碼下載
- 十 尾言
零 組合控制元件下載
一 自定義控制元件思路
- 點選下拉按鈕，彈出下拉列表（PopupWindow + ListView）
- 點選列表選項，在編輯框中顯示內容
- 點選刪除按鈕，刪除列表選項
二 MainActivity核心程式碼
public class MainActivity extends AppCompatActivity { private SpinnerView mSpinnerView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mSpinnerView = findViewById(R.id.spinnerView); List<String> mDataList = new ArrayList<String>(); for (int i = 0; i < 30; i++) { mDataList.add("傳入資料"+String.valueOf(i)); } mSpinnerView.setData(mDataList); } }
三 activity_main.xml核心程式碼
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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" android:orientation="vertical" tools:context="com.vistatecah.myspinnerview.MainActivity"> <com.vistatecah.myspinnerview.SpinnerView android:id="@+id/spinnerView" android:layout_width="match_parent" android:layout_height="wrap_content"/> </LinearLayout>
四 SpinnerView核心程式碼
package com.vistatecah.myspinnerview;
import android.content.Context;
import android.graphics.drawable.ColorDrawable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
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.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;
import java.util.List;
/*
* 建立者: KX
* 建立時間: 2018/12/8 17:16
* 描述： TODO
*/
public class SpinnerView extends RelativeLayout {
/** 右側三角箭頭 */
private ImageView mArrow;
/** 輸入框 */
private EditText mEdit;
/** 點選三角箭頭後彈出的PopupWindow */
private PopupWindow mPopupWindow;
/** 存放下拉選擇框資料的集合 */
private List<String> mDataList;
public SpinnerView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
//填充佈局
LayoutInflater.from(getContext()).inflate(R.layout.view_spinner, this);
//初始化集合，向集合裡新增資料
//找出佈局裡的控制元件
initView();
//初始化事件
initEvent();
}
/**向集合裡新增0~29共30個數據*/
protected void setData(List dataList) {
mDataList = dataList;
/* mDataList = new ArrayList<String>();
for (int i = 0; i < 30; i++) {
mDataList.add("測試資料"+String.valueOf(i));
}*/
}
/**初始化控制元件*/
private void initView() {
mArrow = (ImageView) findViewById(R.id.arrow);
mEdit = (EditText) findViewById(R.id.edit);
}
/**對三角按鈕做點選監聽，點選後呼叫showPopupWindow()方法*/
private void initEvent() {
mArrow.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
showPopupWindow();
}
});
}
/**顯示下拉選擇框的PopupWindow*/
protected void showPopupWindow() {
//只建立一次popupwindow
if (mPopupWindow == null) {
int width = mEdit.getWidth();
int height = 800;
mPopupWindow = new PopupWindow(width, height);
//構造popupWindow的內容控制元件：一個ListView
ListView listView = new ListView(getContext());
listView.setAdapter(mAdapter);
listView.setBackgroundResource(R.drawable.listview_background);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
//2. 點選列表選項，在編輯框中顯示內容
String data = mDataList.get(position);
mEdit.setText(data);
//設定游標到末尾
mEdit.setSelection(data.length());
mPopupWindow.dismiss();
}
});
//把ListView設定成為popupWindow的內容控制元件
mPopupWindow.setContentView(listView);
//以下三行是固定寫法，為了實現點選popupWindow外部關閉popupWindow的功能
mPopupWindow.setOutsideTouchable(true);
mPopupWindow.setBackgroundDrawable(new ColorDrawable());
mPopupWindow.setFocusable(true);
}
//彈出PopupWindow並且顯示在mEdit下方
mPopupWindow.showAsDropDown(mEdit);
}
/**ListView的Adapter*/
private BaseAdapter mAdapter = new BaseAdapter() {
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
ViewHolder vh = null;
if (convertView == null) {
convertView = LayoutInflater.from(getContext())
.inflate(R.layout.list_item, null);
vh = new ViewHolder(convertView);
convertView.setTag(vh);
} else {
vh = (ViewHolder) convertView.getTag();
}
final String data = mDataList.get(position);
vh.mId.setText(data);
vh.mDelete.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
//將點選位置的資料移除，並且重新整理列表
mDataList.remove(data);
notifyDataSetChanged();
Toast.makeText(getContext(),"刪除資料"+position,Toast.LENGTH_SHORT).show();
}
});
return convertView;
}
@Override
public long getItemId(int position) {
return 0;
}
@Override
public Object getItem(int position) {
return null;
}
@Override
public int getCount() {
return mDataList.size();
}
};
public class ViewHolder {
TextView mId;
ImageView mDelete;
public ViewHolder(View root) {
mId = (TextView) root.findViewById(R.id.user_id);
mDelete = (ImageView) root.findViewById(R.id.delete);
}
}
}
五 view_spinner.xml核心程式碼
<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="wrap_content"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<EditText
android:id="@+id/edit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/edit_bg" />
<ImageView
android:id="@+id/arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/down_arrow"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
六 list_item.xml核心程式碼
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp" >
<ImageView
android:id="@+id/icon_user"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@mipmap/ic_launcher_round"/>
<TextView
android:id="@+id/user_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/icon_user"
android:layout_centerVertical="true"
android:paddingLeft="8dp"
android:text="110"/>
<ImageView
android:id="@+id/delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/delete"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:paddingRight="8dp"/>
</RelativeLayout>
七 控制元件背景edit_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="8dp"/>
<stroke android:color="@color/colorAccent"
android:width="1dp"/>
<padding android:left="8dp"
android:top="8dp"
android:right="8dp"
android:bottom="8dp"/>
</shape>
八 組合式自定義控制元件優點：
- 繼承layout
- 實現佈局和功能
- 自定義控制元件優點:模組化思想，提高程式碼的複用率（M處呼叫）
九 本文原始碼下載
十 尾言
本文如有錯誤或不當之處,歡迎讀者留言斧正,互相交流學習,博主不勝感激.聯絡郵箱[email protected]