這篇文章給大家分享的是有關(guān)Android開發(fā)之如何實(shí)現(xiàn)ProgressBar字體隨著進(jìn)度條的加載而滾動(dòng)的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比平?jīng)鼍W(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式平?jīng)鼍W(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋平?jīng)龅貐^(qū)。費(fèi)用合理售后完善,十多年實(shí)體公司更值得信賴。
先看下最終效果效果圖
我這里用的是LICEcap軟件錄制的gif圖,效果有點(diǎn)掉幀,哪位仁兄有比較好的錄制gif的軟件煩請(qǐng)相告,小弟在此先行謝過。
首先看下xml代碼,只有兩個(gè)系統(tǒng)控件,一個(gè)TextView和一個(gè)ProgressBar,Button只是為了方便觸發(fā)進(jìn)度條的效果,實(shí)際項(xiàng)目中可以根據(jù)需求來做。首先看下xml中的代碼:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:layout_margin="5dp"> <TextView android:layout_marginTop="50dp" android:id="@+id/progress_precent" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="0%" android:textColor="#ff00" android:textSize="12sp" android:padding="3dp"/> <ProgressBar android:id="@+id/pb_progressbar" android:layout_width="match_parent" android:layout_height="5dp" android:max="100" android:progress="0" android:progressDrawable="@drawable/progressbar_color" /> <Button android:id="@+id/btn_start" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="30dp" android:text="start" /> </LinearLayout>
樣式:progressbar_color.xml
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 背景 gradient是漸變,corners定義的是圓角 --> <item android:id="@android:id/background"> <shape> <corners android:radius="5dp" /> <solid android:color="#9a9a9a" /> </shape> </item> <!-- 進(jìn)度條 --> <item android:id="@android:id/progress"> <clip> <shape> <corners android:radius="5dp" /> <solid android:color="#E14f50" /> </shape> </clip> </item> </layer-list>
在onCreate()方法中得到控件的寬度,代碼如下:
// 得到progressBar控件的寬度 ViewTreeObserver vto2 = pbProgressbar.getViewTreeObserver(); vto2.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout() { pbProgressbar.getViewTreeObserver().removeGlobalOnLayoutListener(this); width = pbProgressbar.getWidth(); Log.i("TAG", "MainActivity onCreate()=="+pbProgressbar.getWidth()); } });
先說下具體實(shí)現(xiàn)思路,再貼上最終代碼
實(shí)現(xiàn)思路是我們需要ProgressBar達(dá)到最大值時(shí),TextView的位置移動(dòng)到最遠(yuǎn)處。要想得到progressBar的任意百分比可以移動(dòng)到對(duì)應(yīng)百分比的位置,咱們就需要知道每一個(gè)百分比移動(dòng)的距離。說的還不夠明白的話咱們看看下面的公式,可以更好的理解。
// 進(jìn)度條的最小單位,默認(rèn)是1,你也可以是其他數(shù)值,我在demo中為了方便使用了1:
進(jìn)度條的最小單位 / 進(jìn)度條的最大值 = 每一個(gè)百分比移動(dòng)的距離/總的距離(控件的總寬度)
可以推導(dǎo)出:
每一個(gè)百分比要移動(dòng)距離 = (進(jìn)度條的最小單位 / 進(jìn)度條的最大值)*總的距離(控件的總寬度)
因?yàn)橐鲆苿?dòng)動(dòng)畫效果,咱們?yōu)榱吮苊釧NR,直接開一個(gè)分線程來控制界面,主要代碼如下
//開啟分線程 new Thread(new Runnable() { @Override public void run() { //每一段要移動(dòng)的距離 scrollDistance = (float) ((1.0 / pbProgressbar.getMax()) * width); for (int i = 1; i <= status; i++) { runOnUiThread(new Runnable() { @Override public void run() { currentStatue++; currentPosition += scrollDistance; pbProgressbar.incrementProgressBy(1); //做一個(gè)平移動(dòng)畫的效果 progressPrecent.setTranslationX(currentPosition); progressPrecent.setText(currentStatue + "%"); } }); try { Thread.sleep(80); } catch (InterruptedException e) { e.printStackTrace(); } } } }).start();
大功告成,但是當(dāng)我們運(yùn)行起來的時(shí)候發(fā)現(xiàn),當(dāng)ProgressBar達(dá)到最大值時(shí),上面的字體超出了屏幕范圍而看不到了。效果如圖所示:
這給使用者造成了很大的困惑,靜下心來分析一下,可以知道TextView一直在對(duì)應(yīng)ProgressBar數(shù)據(jù)的右面,語(yǔ)言功底不太好,咱們上圖看:
可以看出,當(dāng)數(shù)據(jù)為0%時(shí)就在progressBar對(duì)應(yīng)數(shù)據(jù)的右方,當(dāng)數(shù)據(jù)為最大值時(shí),超出屏幕顯示不了就不足為其了。咱們現(xiàn)在如果想讓progressBar是最大值時(shí)還能顯示,就需要當(dāng)偏移的距離加上字體的寬度和字體右面的Padding值大于progressBar寬度的時(shí)候不偏移。接著修改代碼如下:
//開啟分線程 new Thread(new Runnable() { @Override public void run() { //每一段要移動(dòng)的距離 scrollDistance = (float) ((1.0 / pbProgressbar.getMax()) * width); for (int i = 0; i < status; i++) { runOnUiThread(new Runnable() { @Override public void run() { // 控制進(jìn)度條的增長(zhǎng)進(jìn)度 pbProgressbar.incrementProgressBy(1); currentStatue++; tvPrecent.setText(currentStatue + "%"); // 得到字體的寬度 tvWidth = tvPrecent.getWidth(); currentPosition += scrollDistance; //做一個(gè)平移動(dòng)畫的效果 // 這里加入條件判斷 if (tvWidth + currentPosition <= width - tvPrecent.getPaddingRight()) { tvPrecent.setTranslationX(currentPosition); } } }); try { Thread.sleep(80); } catch (InterruptedException e) { e.printStackTrace(); } } } }).start();
我們運(yùn)行起來,再來看下效果:
到這里咱們就完成了,有不清楚或者寫錯(cuò)的地方歡迎留言指正,我會(huì)第一時(shí)間答復(fù)。需要源碼的朋友可以去github上下載,雙手奉上github地址:字體隨著ProgressBar的加載而滾動(dòng) 。
感謝各位的閱讀!關(guān)于“Android開發(fā)之如何實(shí)現(xiàn)ProgressBar字體隨著進(jìn)度條的加載而滾動(dòng)”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
文章標(biāo)題:Android開發(fā)之如何實(shí)現(xiàn)ProgressBar字體隨著進(jìn)度條的加載而滾動(dòng)
URL地址:http://redsoil1982.com.cn/article6/ghhcig.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供服務(wù)器托管、小程序開發(fā)、品牌網(wǎng)站制作、做網(wǎng)站、面包屑導(dǎo)航、虛擬主機(jī)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)