Android 進度條（ProgressBar）和拖動條（Seekbar）補充“自定義組件”（總結）

這周結束了，我也碼了一周的字，感覺還是很有種腳踏實地的感覺的，有時間就可以看看自己的總結再查漏補缺，一步一個腳印，做出自己最理想的項目。

　　今天我們講兩點：

1.ProgressBar：

　　其實前面也稍微提到過，但是只是稍微提一下，不全面，就提了進度條有兩種，圈和線，都是加載，圈的話比較容易實現，一般是搞個監聽器，某個控件結束就給它隱藏（這是暫時學的體會），圈的前面提過，今天主要就說水平的進度條。

前面也提到過，就加個

style="@style/Widget.AppCompat.ProgressBar.Horizontal"
它就變成水平的了。

今天實現下常用的進度條，那種從0加載到100的，這邊學長們提的時候牽扯到許多新的知識，總之今天的任務還是比較重的。

<ProgressBar
    android:id="@+id/pb1"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal" 后面的文字都是解釋，這個是變成水平的進度條
    android:layout_width="match_parent" 布局的寬度
    android:layout_height="wrap_content" 布局的長度
    android:layout_marginStart="10dp"　　邊距開始，相當於左，end結束就相當於右嘛
    android:progress="10"　　這個是初始化，指的是剛開始進度為多少
    android:secondaryProgress="30"　　這個是二級進度，就像看電視一邊看一邊緩存，這就是緩存的那部分
    android:max="100" 這指的是最大進度取值
    android:progressDrawable="@drawable/progress" 調用進度條的樣式，這個是自己寫的樣式
    android:layout_marginTop="20dp" 
    android:layout_marginEnd="10dp" />

下面的就是那個圓角矩形的樣式：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 這個是列表布局嘛
    <item android:id="@android:id/background"> 列表，這是個相當於背景色的樣式
        <shape android:shape="rectangle"> 形狀控件為矩形
            <solid android:color="@android:color/white"/> 填充的顏色
            <stroke android:width="3dp" 這邊是邊框有多粗
android:color="@android:color/holo_blue_bright"/> 這是邊框顏色
            <corners android:radius="25dp"/> 這是圓角偏移量，h5學過應該也懂，就是四個角的弧度，25dp指的是這條弧是取自半徑為這么多的圓
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress"> 這個是二級進度的樣式列表
        <clip>
            <shape android:shape="rectangle"> 也是矩形
                <solid android:color="@android:color/holo_orange_dark"/> 鋪上顏色
                <corners android:radius="25dp"/> 和背景樣式一樣這三個控件有點像幀布局，一層一層鋪上去，
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress"> 這個是進度條進度顯示（最頂層顯示）
        <clip>
            <shape android:shape="rectangle"> 矩形
                <solid android:color="@android:color/holo_green_dark"/> 為了突出，顏色肯定得不一樣
                <corners android:radius="25dp"/> 同上
            </shape>
        </clip>
    </item>
</layer-list>

在主活動中寫入新的 句柄這個概念，好像是線程的知識，為的就是讓它隨機的加載，模仿加載數據時的進度條；

final ProgressBar pb1=findViewById(R.id.pb1); //連接進度條
handler =new Handler();//創建一個句柄，我就把它當做循環來看的，但是1秒循環一次
handler.post(new Runnable() {//new一個runnable線程，因為Runnable是接口，所以得實現run方法。這都是java的
    @Override
    public void run() {//實現run方法
        Random r=new Random();//new一個隨機類
        pb1.setProgress(pb1.getProgress()+r.nextInt(10));//把當前進度取出來，加上隨機的0-9，再放進去，實現加載進度的樣式。
        if(pb1.getProgress()<pb1.getMax()){//如果沒超出，就一直調用線程
            handler.postDelayed(this,1000);//延遲一秒，這個應該很簡單
        }
        System.out.println("進入"+pb1.getProgress());//每次輸出當前進度
    }
});

大概就這些了，其實學長還補充了自定義組件，我就最后再補充吧。

這邊再講拖動條，拖動條應該很常見，調亮度，調聲音，調透明度。。。

SeekBar 各位，了解一下。

<SeekBar
    android:id="@+id/sb1" 這些和進度條的都差不多
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:progress="10" 
    android:max="100"
    android:splitTrack="false"這個東西 只可意味不可言傳，就是那個拖的按鈕的占據位置的邊框，一般最好不要吧，不然看着怪，false就好
    android:secondaryProgress="50" 這個也是同進度條
    android:thumb="@drawable/my_thumb" 這個意思是那個拖動的按鈕，中文翻譯是拇指，就是指那個拖的東西的樣式，可以插入圖片，但是進來小點30dp以內就不錯。
    android:progressDrawable="@drawable/progress"這個是那中間進度的樣式，和進度條一樣
    android:layout_marginStart="10dp" 
    android:layout_marginTop="20dp"
    android:layout_marginEnd="10dp"/>

這邊把樣式也弄過來介紹吧，新鮮東西挺多的。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/my_thumb_true"/>
    <item android:state_pressed="false" android:drawable="@drawable/my_thumb_false"/>
</selector>
這是個選擇器，顧名思義，看當前是否按下按鈕state_pressed=""
根據判斷去那個樣式，這種嵌套應該好理解。

這邊就是按下的另一個xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" 這里指的是一個oval的形狀。
    xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:width="25dp" android:height="25dp"/>這邊指的是大小
    <solid android:color="@android:color/holo_red_dark"/>這邊是填充的顏色。
</shape>

兩個其實差不多

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:width="20dp" android:height="20dp"/>
    <solid android:color="@android:color/holo_blue_bright"/>
</shape>

為了好區別，一個就小一點。

主活動里：
這邊sb是全局變量，SeekBar了解一下，哈哈

sb = findViewById(R.id.sb1);
//這邊主要介紹下它的監聽器，這個跟那個文本 的輸入檢測那個監聽器很像，三部分組成，更改前。更改時，更改后。
sb.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        System.out.println("進度" + progress);
        pb1.setProgress(progress);這兩個是為了和進度條連接起來，拖動拖動條的按鈕，進度條的數據也變。
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
        System.out.println("按下去");
    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        System.out.println("松開");
    }
});

第一條只是演示，請忽略。這測試，就是假設這是個看視頻的軟件通道
綠色的是當前數據，橙色的是那個二級進度，就是給視頻緩存的，應該能理解吧。

 

 

 

 

最后就介紹下那個自定義組件。

自己理解的有點模糊，如果有錯，請指正（輕點打臉，饒命！！！）

我認為自定義組件就相當於給它搞個快捷 的布局，比如這份，就是如果想導入一個進度條就直接調用這個組件就好了。

 

public class MyLayout extends LinearLayout { 自定義的布局，繼承線性布局

    private ProgressBar pb;把那個進度條拿過來
    private TextView tv;//搞個文本

    public MyLayout(Context context) { //寫自己的構造器。
        this(context, null);
    }

    public MyLayout(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs ,0);
    }

    public MyLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        View view = View.inflate(context, R.layout.my_layout, this);
//這邊給視圖實例化當前的布局對象。
        pb = view.findViewById(R.id.pb1);//連接當前布局里的控件
        tv = view.findViewById(R.id.tv1);
    }

    /**設置文字*/
    public void setProgressText(String text) {//這邊是自己定義的一些方法，給組件中的控件使用
        tv.setText(text);
    }

    public void setProgress(int progress) {//這是進度條的寫入，
        pb.setProgress(progress);
    }

    public int getProgress() {//進度條的獲取
        return pb.getProgress();
    }

    public int getMax() {//最大值的獲取
        return pb.getMax();
    }

其實這個很像我們上節課學的那個自定義對話框。
就是完全自己寫，可塑性很強，相當於重新創作一個屬於自己的組件，或者布局。
用起來也十分的方便。

好，今天的總結就到這了，東西是有點多，中途也耽誤了會，所以搞得有點晚，加油，周末結束，明天繼續。