第二章 第三節 Android高級組件 - ListView


1. AdapterView

1.1. AdapterView簡介

AdapterView:容器控件,其整體效果由每一個子元素 內容決定,子元素的形式由Adapter(適配器)決定。
在這裏插入圖片描述

AdapterView的子視圖對象:
  • ListView:以垂直滑動列表形式顯示一組數據。 –
  • GridView:以網格形式顯示一組數據。 –
  • Spinner:以下拉列表形式顯示一組數據。 –
  • Gallery:以水平滑動列表形式顯示一組數據。(已棄用)
待顯示的數據如何傳遞給AdapterView中的Item?
  • 準備數據(數據來源於哪裏?數據是什麼格式?數據格 式和AdapterView視圖項匹配嗎?)

  • 藉助Adapter來實現數據與View之間的數據傳遞。

  • Adapter:數據和視圖之間交互的中介。

作用

Adapter:數據和視圖之間交互的中介。

  • 數據改變時,不需要修改視圖組件,只需更新Adapter。

• 對於同一視圖組件(AdapterView子對象),數據源可能來 自不同形式。

  • 視圖組件變化時,不需要修改數據,綁定相同Adapter。

• 對於同一組數據,可以顯示爲不同的視圖形式(如ListView、 GridView或其它)。

快捷鍵 ctrl + H 可以打開類的繼承關係窗口

常用的Adapter
  • ArrayAdapter:最簡單的適配器,數據源爲文本字符 串數組。
  • SimpleAdapter:簡單適配器,數據源結構比較複雜, 一般爲List類型對象。
  • SimpleCursorAdapter:遊標適配器,數據源一般爲 數據庫中的數據。
  • 自定義適配器:更靈活的適配器,數據源不定(由用戶 自行指定),需要繼承BaseAdapter抽象類。

AdapterView使用的基本流程:

  1. 準備數據源(現在爲本地數據源,今後擴展爲網絡)。
  2. 準備AdapterView每一個子項的視圖佈局。(item佈局方式)
  3. 創建Adapter(連接數據源和視圖佈局)。
  4. 爲指定AdapterView視圖組件綁定適配器。
  5. 爲AdapterView綁定事件監聽器

2. ListView

ListView:以垂直可滑動列表形式顯示子項目的視圖容器, 是一種AdapterView

ListView使用的基本流程(同AdapterView):
  1. 準備ListView每一個子項的視圖佈局。 • 可以使用內置的佈局,也可以用戶自定義佈局。
  2. 創建Adapter(連接數據源和視圖佈局)。
  3. 爲ListView綁定Adapter。
  4. 爲ListView綁定事件監聽器。

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);//引用默認外界佈局文件
        //ListView使用步驟
        //1.準備數據
        String[] list={"手機","電腦","平板"};
        //2.準備item文件(sdk自帶)

        //3.選擇  Adapter  並綁定
        ArrayAdapter<String> myadapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,list);
        //參數分別是 環境上下文,item佈局文件,數據源
        //上面連數據庫,下面連視圖
        ListView mylistview=findViewById(R.id.listview1);
        mylistview.setAdapter(myadapter);
        //4.給綁定子項item點擊事件
        mylistview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                //parent->listview對象   view->item的視圖對象     position->從0開始,一般與id同數值
                Log.e("position",position+"條");
                Log.e("id",id+"條");
                view.setBackgroundColor(getResources().getColor(android.R.color.holo_green_light));
            }
        });
<?xml version="1.0" encoding="utf-8"?>


<ListView
    android:id="@+id/listview1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android" />



在這裏插入圖片描述

在這裏插入圖片描述

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);//引用默認外界佈局文件
        準備數據源
        解決問題快捷鍵  alt + enter
        List<Map<String,String>> students=new ArrayList<>();
        Map<String,String> stu1=new HashMap<>();
        stu1.put("name","zhangsan1");
        stu1.put("stuNo","2018011710");
        Map<String,String> stu2=new HashMap<>();
        stu2.put("name","lisi");
        stu2.put("stuNo","2021810454");

        students.add(stu1);
        students.add(stu2);
        準備item佈局文件(自帶)
        創建adapter   ,綁定adapter
        SimpleAdapter myadapter=new SimpleAdapter(this,//環境上下文
                students,//數據源
                android.R.layout.simple_expandable_list_item_2,//item佈局文件
                new String[]{"name","stuNo"},//數據源中Map的Key值
                new int[]{android.R.id.text1,android.R.id.text2});
        iten中顯示的內容的控件ID,在simple_expandable_list_item_2裏面

        創建ListView監聽器
        ListView studentListView=findViewById(R.id.student);
        studentListView.setAdapter(myadapter);
    }
}



在這裏插入圖片描述




自定義ListView

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

#1

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android" >

    <ListView
        android:id="@+id/sss"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>
 

--------------------------------------------






#2

package com.example.xueli;

public class BuyCar {
    private String name;     //名字
    private String  message; //信息
    private String money;    //價格
    private int photoId;     //照片
    private String counter;  //數量

    public BuyCar(String name, String message, String money, int photoId, String counter) {
        this.name = name;
        this.message = message;
        this.money = money;
        this.photoId = photoId;
        this.counter = counter;
    }

    public String getCounter() {
        return counter;
    }

    public void setCounter(String counter) {
        this.counter = counter;
    }

    public BuyCar() {
    }



    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public String getMoney() {
        return money;
    }

    public void setMoney(String money) {
        this.money = money;
    }

    public int getPhotoId() {
        return photoId;
    }

    public void setPhotoId(int photoId) {
        this.photoId = photoId;
    }
}
 







#3



public class MainActivity extends AppCompatActivity {
    private List<BuyCar> goods=new ArrayList<>();
    private BuyCarAdapter customAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //準備數據
        initData();
        //定義item'文件
        //常見adapter,綁定adapter
        customAdapter=new BuyCarAdapter(this,goods,R.layout.newbuycar);

        ListView listview=findViewById(R.id.sss);
        listview.setAdapter(customAdapter);

        //設置監聽器
    }
    public void initData(){
        BuyCar car1=new BuyCar("華爲旗艦店","正品Huawei/華爲 Mate 9\n全網通4G雙卡雙待指紋徠\n卡雙攝智能4G手機","2000.0",R.drawable.phone,"3");
        BuyCar car2=new BuyCar("創意良品","iWALK三合一充電線移動\n電源一拖二可愛迷你充電\n寶蘋果安卓充電線","88.0",R.drawable.erji,"9");
        goods.add(car1);
        goods.add(car2);
    }



}
------------------------------------------







#4
public class BuyCarAdapter extends BaseAdapter {
    private Context mContext;//環境上下文
    private List<BuyCar> buycars = new ArrayList<>();//數據源
    private int itemLayoutRes;//佈局文件

    public BuyCarAdapter(Context mContext, List<BuyCar> buycars, int itemLayoutRes) {
        this.mContext = mContext;
        this.buycars = buycars;
        this.itemLayoutRes = itemLayoutRes;
    }

    @Override
    public int getCount() {//數據條數
        if(null != buycars){
            return buycars.size();
        }
        return 0;
    }

    @Override
    public Object getItem(int position) {//item對象
        if(null != buycars){
            return buycars.get(position);
        }
        return null;
    }

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

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {


        final int[] btn_situation = {0,0};


        //獲取item的視圖對象,生成對象,賦值於convertView。
        if (convertView == null) {
            LayoutInflater inflater = LayoutInflater.from(mContext);//佈局填充器,參數環境上下文
            convertView = inflater.inflate(itemLayoutRes, null);//負責加載文件
        }


        //現在有了視圖對象
        //獲取item中控件的引用
        TextView name = convertView.findViewById(R.id.text1);   //店鋪名字
        ImageView photo=convertView.findViewById(R.id.img2);    //寶貝圖片
        TextView message = convertView.findViewById(R.id.text2);//寶貝文字介紹
        TextView price = convertView.findViewById(R.id.text3);  //價格
        Button btnMore = convertView.findViewById(R.id.bt_more);//更多
        TextView number = convertView.findViewById(R.id.text4); //數量



        final RadioGroup btn1_farther= convertView.findViewById(R.id.btn1_farther);
        final RadioGroup btn4_farther= convertView.findViewById(R.id.btn4_farther);
        final RadioButton btn1 = convertView.findViewById(R.id.btn1);   //全選
        final RadioButton btn4 = convertView.findViewById(R.id.btn4);   //部分
        Button btn11 = convertView.findViewById(R.id.btn5);             //number--
        Button btn22 = convertView.findViewById(R.id.btn6);              //number++



        //設置控件內容
        photo.setImageResource(buycars.get(position).getPhotoId());
        name.setText(buycars.get(position).getName());
        message.setText(buycars.get(position).getMessage());
        price.setText(buycars.get(position).getMoney());
        number.setText(buycars.get(position).getCounter());



        //設置事件監聽器
        btn11.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                notifyDataSetChanged();
                String message=buycars.get(position).getCounter();
                int num = Integer.valueOf(Short.valueOf(message));
                if(num>1){
                    num--;
                    buycars.get(position).setCounter(num+"");
                }else{
                    buycars.get(position).setCounter("1");
                }
                notifyDataSetChanged();
            }
        });


        btn22.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                notifyDataSetChanged();
                String message=buycars.get(position).getCounter();
                int num = Integer.valueOf(Short.valueOf(message));
                if(num>=1){
                    num++;
                    buycars.get(position).setCounter(num+"");
                }
                Log.e("按鈕1","22222222222222222");
                notifyDataSetChanged();
            }
        });


//-------------------------------------------商品按鈕點擊選中與取消效果
        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(btn_situation[0]==0){
                    btn1.setChecked(true);
                    btn4.setChecked(true);
                    btn_situation[0] =1;
                    btn_situation[1] =1;
                }else{
                    btn1.setChecked(false);
                    btn4.setChecked(false);
                    btn_situation[0] =0;
                    btn_situation[1] =0;
                    btn1_farther.clearCheck();
                    btn4_farther.clearCheck();
                }
            }
        });

        btn4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(btn_situation[1]==0){
                    btn4.setChecked(true);
                    btn_situation[1] =1;
                }else{
                    btn4.setChecked(false);
                    btn_situation[1] =0;
                    btn4_farther.clearCheck();
                }
            }
        });


        return convertView;
    }
}
--------------------------------------------------------








#5

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/bigget"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:descendantFocusability="blocksDescendants">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:orientation="horizontal">



    <RadioGroup
        android:id="@+id/btn1_farther"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">


        <RadioButton
            android:id="@+id/btn1"
            android:layout_width="30dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="25dp" />
    </RadioGroup>








    <ImageView
        android:id="@+id/img1"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginLeft="55dp"
        android:layout_marginTop="22dp"
        android:src="@drawable/dianpu" />

    <TextView
        android:id="@+id/text1"
        android:textSize="20sp"
        android:layout_width="wrap_content"
        android:layout_marginTop="30dp"
        android:layout_toRightOf="@id/img1"
        android:layout_height="wrap_content"/>


    <Button
        android:id="@+id/bt_more"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginLeft="-10dp"
        android:layout_marginTop="22dp"
        android:layout_toRightOf="@id/text1"
        android:background="@drawable/jiantou" />

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="領劵"
            android:layout_marginLeft="350dp"
            android:layout_marginTop="30dp"
            android:textSize="20sp"/>
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/btn3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="70dp">





        <RadioGroup
            android:id="@+id/btn4_farther"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <RadioButton
                android:id="@+id/btn4"
                android:layout_width="30dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="50dp" />


        </RadioGroup>





        <ImageView
            android:id="@+id/img2"
            android:layout_width="130dp"
            android:layout_marginLeft="5dp"
            android:layout_height="125dp" />

        <TextView
            android:id="@+id/text2"
            android:textSize="20sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>





        <ImageView
            android:id="@+id/img3"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_marginTop="105dp"
            android:layout_marginLeft="-225dp"
            android:src="@drawable/yuan" />


        <TextView
            android:id="@+id/text3"
            android:textSize="20sp"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="100dp" />






        <Button
            android:id="@+id/btn5"
            android:layout_toRightOf="@id/img3"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:background="@drawable/fangkuai"
            android:text="--"
            android:layout_marginLeft="40dp"
            android:layout_marginTop="100dp" />
        <TextView
            android:id="@+id/text4"
            android:layout_width="25dp"
            android:layout_height="20dp"
            android:textColor="#000000"
            android:background="@drawable/fangkuai"
            android:paddingLeft="6dp"
            android:layout_marginTop="99dp"/>
        <Button
            android:id="@+id/btn6"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:text="+"
            android:background="@drawable/fangkuai"
            android:layout_marginTop="100dp"/>

    </LinearLayout>
</RelativeLayout>
 


 

解決按鈕事件導致頁面原始的item事件覆蓋的方法

  1. 在佈局文件的根頁面添加
    在這裏插入圖片描述
  2. 在按鈕處添加
    在這裏插入圖片描述

添加增添按鈕

  1. 先在activity_main裏添加Button屬性,設置id。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android" >

    <ListView
        android:id="@+id/sss"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />




    <Button
        android:id="@+id/tianjia"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="添加"
        android:layout_alignParentBottom="true"/>
</RelativeLayout>
  1. 因爲MainActivity引用的上述文件,所以添加的具體實現要在裏面寫
package com.example.xueli;

import androidx.appcompat.app.AppCompatActivity;

import android.media.session.PlaybackState;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Button;
import android.widget.ListView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private List<BuyCar> goods=new ArrayList<>();
    private BuyCarAdapter customAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        準備數據
        initData();
        定義item'文件    //常見adapter,綁定adapter
        customAdapter=new BuyCarAdapter(this,goods,R.layout.newbuycar);
        ListView listview=findViewById(R.id.sss);
        listview.setAdapter(customAdapter);
        //這裏也可以設計事件點擊效果
        listview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                //打印商品名稱
                Log.e("商品的名字",goods.get(position).getName());
            }
        });

       

        設置添加按鈕
        addButton();
    }
    public void initData(){
        BuyCar car1=new BuyCar("華爲旗艦店","正品Huawei/華爲 Mate 9\n全網通4G雙卡雙待指紋徠\n卡雙攝智能4G手機","2000.0",R.drawable.phone,"3");
        BuyCar car2=new BuyCar("創意良品","iWALK三合一充電線移動\n電源一拖二可愛迷你充電\n寶蘋果安卓充電線","88.0",R.drawable.erji,"9");
        goods.add(car1);
        goods.add(car2);
    }






    public void addButton(){
        Button addbtn=findViewById(R.id.tianjia);
        addbtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //添加信息
                BuyCar car3=new BuyCar("店鋪名","店鋪信息","商品價格",R.drawable.erji,"6");
                //修改數據源
                goods.add(car3);
                //更新adapter
                customAdapter.notifyDataSetChanged();
            }
        });
    }



}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章