ListView的簡單應用(一)
猶豫了幾天,覺得還是把這個教程寫一下吧。雖然在網上已經一大堆了,但是這是我學習的歷程我覺得我還是該記錄下來,以後也可以溫故而知新。
ListView在Android眾多控制元件中佔有比較重要的地位,也是面試官熱愛提問的控制元件之一,特別是關於它的效能優化。這一塊我想著把它留到最後再說,我們先來談談ListView的簡單應用,畢竟什麼東西都是由淺入深的嘛。
首先我們要先建立一個專案,開啟Android studio點選File—New—New Project建立一個名為ListViewTest的專案。接著找到res—layout資料夾下的activity_main.xml,開啟它並且在裡面新增ListView控制元件如下:
<ListView
android:id="@+id/listview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
此時你如果執行專案你會發現裡面什麼都沒有,和剛開始建立的這個專案時沒多大區別,因為我們還沒有往裡面新增資料並且在View中實現它。所以我們回到MainActivity這個類裡面通過findViewById()這個方法找到這個控制元件並且實現。我們先定義一個名為data的一維字串陣列,用來存放我們的假資料。然後通過新建一個ArrayAdapter並根據要求配置它,再Adapte通過setAdapter給ListView,程式碼如下:
private String data[] = {"aa","bb","cc","dd","aa","bb","cc","dd","aa","bb","cc","dd","aa","bb","cc","dd"};//假資料 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ListView listView = (ListView) findViewById(R.id.listview);//在檢視中找到ListView ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,data);//新建並配置ArrayAapeter listView.setAdapter(adapter); }
點選執行專案你就能看到一個簡單的ListView:
現在看到了介面了但是離我們的預想還是有點差距,我們希望的是除了能看還能點選響應某些事件,因此我們再為它新增一個監聽點選的方法。程式碼如下:
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
switch (i){
case 0:
Toast.makeText(MainActivity.this,"你點選了"+i+"按鈕",Toast.LENGTH_SHORT).show();
break;//當我們點選某一項就能吐司我們點了哪一項
case 1:
Toast.makeText(MainActivity.this,"你點選了"+i+"按鈕",Toast.LENGTH_SHORT).show();
break;
case 2:
Toast.makeText(MainActivity.this,"你點選了"+i+"按鈕",Toast.LENGTH_SHORT).show();
break;
case 3:
Toast.makeText(MainActivity.this,"你點選了"+i+"按鈕",Toast.LENGTH_SHORT).show();
break;
case 4:
Toast.makeText(MainActivity.this,"你點選了"+i+"按鈕",Toast.LENGTH_SHORT).show();
break;
}
}
});
這裡我就給了5項Item做了響應,當然也可以讓每一項都有響應的,有興趣自己可以去嘗試。這樣一個非常簡單的ListView就完成了,接下來我們來深入一點點。
現在我們要定製一個有圖片有文字有選擇框的ListView,怎麼做呢?第一個我們肯定要把資料改一下,但是我們肯定不可能說把陣列data改成二維資料就可以的,因為圖片不是字串的形式啊。那要包含字串又能包含圖片的資料格式有什麼呢?這時Bean類就出現了,我們可以把這些資料封裝到一個Bean類裡面啊,當我們需要的時候就直接拿出來就好。說做就做然後我們定義一個myBean類,程式碼如下:
public class myBean {
private String text;//用來放文字的
private int ImageID;//用來放圖片的
public myBean(String text,int imageID){
this.ImageID = imageID;
this.text = text;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public int getImageID() {
return ImageID;
}
public void setImageID(int imageID) {
ImageID = imageID;
}
}
然後我們就可以通過初始化不斷的New一個一個的資料了,但是我們怎麼放進ListView裡面呢?因為我們剛才用的是系統的ArrayAdapter來適配到ListView的,我們甚至連要適配的XML的介面都沒。那我們先去做個我們要適配的介面去看看,於是:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/ll_view"
android:gravity="center"
android:layout_margin="10dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:background="@mipmap/ic_launcher"
android:id="@+id/headimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_marginLeft="20dp"
android:layout_weight="1"
android:text="你是SB"
android:id="@+id/headtext"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<RadioGroup
android:id="@+id/radioBtn"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RadioButton
android:text="打他"
android:id="@+id/radio2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<RadioButton
android:text="不打"
android:id="@+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RadioGroup>
</LinearLayout>
</LinearLayout>
於是我們把之前的R.layout.simple_list_item_1這XML換成我們直接做的,執行程式你就會發現程式崩了。哈哈,不要緊這是正常的因為我們傳入的資料都沒用適配到我們的介面上。所以我們就只能自己寫過一個介面卡來適配我們自己的資料。
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,data);
介面卡程式碼如下:
public class myAdapter extends ArrayAdapter {
private final int ImageId;
private String radiotext;
public myAdapter(Context context, int headImage, List<myBean> obj){
super(context,headImage,obj);
ImageId = headImage;//這個是傳入我們自己定義的介面
}
@NonNull
@Override
public View getView(final int position, @Nullable View convertView, @NonNull ViewGroup parent) {
myBean myBean = (myBean) getItem(position);
View view = LayoutInflater.from(getContext()).inflate(ImageId,parent,null);//這個是例項化一個我們自己寫的介面Item
LinearLayout linearLayout = view.findViewById(R.id.ll_view);
ImageView headImage = view.findViewById(R.id.headimage);
TextView headText = view.findViewById(R.id.headtext);
RadioGroup radio = view.findViewById(R.id.radioBtn);
headImage.setImageResource(myBean.getImageID());
headText.setText(myBean.getText());
radio.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {//檢查Radio Button那個被點選了
@Override
public void onCheckedChanged(RadioGroup radioGroup, @IdRes int i) {
switch (i){
case R.id.radio1:
radiotext = "不打";
break;
case R.id.radio2:
radiotext = "打他";
break;
}
}
});
linearLayout.setOnClickListener(new View.OnClickListener() {//檢查哪一項被點選了
@Override
public void onClick(View view) {
Toast.makeText(getContext(),"你點選了第"+position+"項"+"你選擇"+radiotext,Toast.LENGTH_SHORT).show();
}
});
return view;
}
}
現在介面卡也寫好了,你看定製ListView的2個步驟是不是就這樣就被我們解決了,然後我們就差適配了。接下來我們來做一下適配:
public class MainActivity extends AppCompatActivity {
private List<myBean> myBeanList = new ArrayList<>();//用來存放資料的陣列
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ListView listView = (ListView) findViewById(R.id.listview);
init();
myAdapter adapter = new myAdapter(MainActivity.this,R.layout.myitem,myBeanList);
listView.setAdapter(adapter);
}
private void init(){//初始化資料
myBean bean1 = new myBean("aa",R.mipmap.ic_launcher);
myBeanList.add(bean1);
myBean bean2 = new myBean("ss",R.mipmap.ic_launcher);
myBeanList.add(bean2);
myBean bean3 = new myBean("jj",R.mipmap.ic_launcher);
myBeanList.add(bean3);
myBean bean4 = new myBean("hh",R.mipmap.ic_launcher);
myBeanList.add(bean4);
myBean bean5 = new myBean("dd",R.mipmap.ic_launcher);
myBeanList.add(bean5);
myBean bean6 = new myBean("cc",R.mipmap.ic_launcher);
myBeanList.add(bean6);
myBean bean7 = new myBean("bb",R.mipmap.ic_launcher);
myBeanList.add(bean7);
myBean bean8 = new myBean("jj",R.mipmap.ic_launcher);
myBeanList.add(bean8);
myBean bean9 = new myBean("kk",R.mipmap.ic_launcher);
myBeanList.add(bean9);
}
做到這裡我想大家都幾乎初步掌握了怎麼定製ListView了吧?哦對了!我在寫介面卡的時候順便把監聽事件寫進去了,當然在主類寫也是可以的,但是不建議這樣做。至於為什麼?你自己試試就知道了,因為紙上得來終覺淺嘛。
最後上一張效果圖吧:
發現有好多BUG呢!不過那都不是事,畢竟沒有哪個APP是沒有BUG的是不是?各位如果有解決辦法歡迎留言我哈,一起探討探討哲學,哦不,是BUG。