1. 程式人生 > >ListView的簡單應用(一)

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。