1. 程式人生 > >Android進度條、自動提示框、下拉框動態資料載入

Android進度條、自動提示框、下拉框動態資料載入

1.進度條實現

佈局檔案:

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="60dp">
        <TextView
            android:id="@+id/text1"
            android:layout_width="60dp"
            android:layout_height="match_parent" />

        <ProgressBar
            android:id="@+id/pb"
            android:layout_width="match_parent"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_height="60dp"
            android:max="100"
            />
    </FrameLayout>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="載入"
        android:onClick="setProgress"/>

</LinearLayout>

style="?android:attr/progressBarStyleHorizontal" 設定進度條的樣式,不設定預設為橢圓狀的進度條

實現:

package com.study.t212_05;

import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    private ProgressBar pb;//進度條
    private int progressBar;//進度值
    private TextView tv;//顯示進度值的文字框
    private int code = 1;
    private MyHandler mh = new MyHandler();//非同步處理UI元件
    private class MyHandler extends Handler{
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            if (code == msg.what){
                progressBar++;
                pb.setProgress(progressBar);
                tv.setText(progressBar + "%");
            }
        }
    }

    public void setProgressBar(int progressBar) {
        this.progressBar = progressBar;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        pb = findViewById(R.id.pb);
        tv = findViewById(R.id.text1);
    }

    //進度條
    public void setProgress(View view) {
        if (progressBar == 0){
            new MyThread().start();
        }
    }

    //子執行緒
    private class MyThread extends  Thread{
        @Override
        public void run() {
            super.run();

            while (true) {
                try {
                    Thread.sleep(100);//0.1秒延遲   注:該耗時操作不能放在主執行緒中!!!
                } catch (Exception e) {
                    e.printStackTrace();
                }

                if (progressBar == 100) {//進度滿100時,要清0
                    progressBar = 0;
                    break;
                }

                Message mg = new Message();
                mg.what = 1;
                mh.sendMessage(mg);//因為子執行緒無法操控UI元件(進度條元件除外),所以將任務交由Handler進行非同步處理
            }
        }
    }
}

效果圖:點選載入按鈕,進度條就會載入

執行緒注意事項:       不能在主執行緒中執行耗時的操作,只能在子執行緒中操作       另外,在子執行緒中不能操作主執行緒中的控制元件(ProgressBar除外)

2.自動提示框

佈局檔案:

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <AutoCompleteTextView
        android:id="@+id/alert"
        android:layout_width="match_parent"
        android:layout_height="60dp" />

</LinearLayout>

實體類:

package com.study.t212_06;

public class Book {

    private Integer id;
    private String name;
    private Integer image;

    public Book() {
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

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

    public Integer getImage() {
        return image;
    }

    public void setImage(Integer image) {
        this.image = image;
    }
}

資料準備:

package com.study.t212_06;

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

public class BookDAO {
    public List<Book> list() {
        List<Book> bookList = new ArrayList<Book>();

        String[] names = {"憤怒的小鳥", "湯姆貓", "落湯雞", "牛牛", "哈巴狗", "神龍", "烤鴨",
                "小象", "美人魚", "九尾狐"};
        int[] images = {R.drawable.bird, R.drawable.cat, R.drawable.chicken,
                R.drawable.cow, R.drawable.dog, R.drawable.dragon,
                R.drawable.duck, R.drawable.elephant, R.drawable.fish,
                R.drawable.fox};

        Book b = null;
        for (int i = 0; i < names.length; i++) {
            b = new Book();
            b.setId(i + 1);
            b.setName(names[i]);
            b.setImage(images[i]);

            bookList.add(b);
        }

        return bookList;
    }
}

展示資料的佈局檔案:

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

實現:

package com.study.t212_06;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.MultiAutoCompleteTextView;
import android.widget.SimpleAdapter;
import android.widget.Spinner;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class MainActivity extends AppCompatActivity {
    private String[] data1;
    private ArrayAdapter<String> adapter1;
    private AutoCompleteTextView act;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            act = findViewById(R.id.alert);

        //1.準備資料
        data1 = new String[]{ "憤怒的小鳥", "湯姆貓", "落湯雞", "牛牛", "哈巴狗", "神龍", "烤鴨", "小象", "美人魚", "九尾狐" };

        //2.建立介面卡
        adapter1 = new ArrayAdapter<String>(this,R.layout.adapter_text1,data1);

        //3.繫結介面卡
        act.setAdapter(adapter1);
    }
}

效果圖:自動提示框中輸入'憤怒',會顯示憤怒的小鳥

注:自動提示框使用的是陣列介面卡,通過介面卡將資料繫結到要顯示的佈局檔案中,最後為自動提示框設定介面卡

3.帶圖示的下拉框

佈局檔案:

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Spinner
        android:id="@+id/sp_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></Spinner>

</LinearLayout>

資料採用的與上個案例一樣,如果不記得了,可以往上翻一翻

上一個案例的資料是有圖片資源的

注:這裡有一點需要注意,存放圖片時必須存放到這個檔案中,如下圖,否則資料載入時將無法訪問到對應的圖片資源

展示資料的佈局檔案:

<?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="60dp"
    >

    <!--圖示-->
    <ImageView
        android:id="@+id/iv1"
        android:layout_width="60dp"
        android:layout_height="match_parent" />

    <!--下拉選項-->
    <TextView
        android:id="@+id/tv1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

實現:

package com.study.t212_06;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.MultiAutoCompleteTextView;
import android.widget.SimpleAdapter;
import android.widget.Spinner;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class MainActivity extends AppCompatActivity {
    //圖片下拉框
    private List<Map<String,Object>> data3;
    private SimpleAdapter adapter3;//簡易介面卡
    private Spinner sp1;//下拉框元件

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        sp1 = findViewById(R.id.sp_2);

        //1.資料準備
        data3 = loadData3();
        //2.建立簡易介面卡
        adapter3 = new SimpleAdapter(this,data3,R.layout.adapter_text2,new String[]{"name","image"},new int[]{R.id.tv1,R.id.iv1});
        //3.為下拉框繫結介面卡
        sp1.setAdapter(adapter3);
    }

    private List<Map<String,Object>> loadData3() {
        List<Book> list = new BookDAO().list();
        List<Map<String,Object>> mapList = new ArrayList<Map<String, Object>>();
        Map<String,Object> map = null;
        for (Book book : list) {
            map = new HashMap<>();
            map.put("name",book.getName());
            map.put("image",book.getImage());
            mapList.add(map);
        }
        return mapList;
    }
}

效果圖: