ProgressBar根據(jù)焦點(diǎn)變化來改變視覺效果

在通常的開發(fā)中,會(huì)給按鈕設(shè)計(jì)按下效果,不可用狀態(tài),給用戶最直觀的體驗(yàn),但是在按鍵機(jī)或者是TV開發(fā)中,用戶只能通過按鍵或者遙控器(帶觸摸屏的電視除外)來進(jìn)行操作,也就是只能通過焦點(diǎn)的變化來告訴用戶當(dāng)前選中的是什么。

視覺給出的效果如下:

progressBar視覺變化.gif

文字和背景都比較簡(jiǎn)單,通過一個(gè)selector即可實(shí)現(xiàn),就不再說了。

ProgressBar沒有focused的屬性,也沒有selected屬性,因此不能通過一個(gè)selector來解決問題。

解決方案:

1.定義progressBar四種狀態(tài)文件(在color文件夾里)

progress_color_focus.xml

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

    <item android:color="#35BAF3"/>

</selector>

progress_color_normal.xml

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

    <item android:color="#005178"/>

</selector>

progress_bg_color_focus.xml

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

    <item android:color="#FFFFFF"/>

</selector>

progress_bg_color_normal.xml

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

    <item android:color="#A9A9A9"/>

</selector>

ProgressBar的部分布局文件如下:

...
<LinearLayout
            android:id="@+id/progress_bar_parent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:background="@drawable/item_background"
            android:padding="10dp"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/app_name"
                android:textSize="20sp"
                android:duplicateParentState="true"/>

            <ProgressBar
                android:id="@+id/progress_bar"
                android:layout_width="match_parent"
                android:layout_height="15dp"
                android:layout_margin="15dp"
                style="@android:style/Widget.ProgressBar.Horizontal"
                android:progress="40"
                android:progressTint="@color/progress_color_normal"
                android:max="100"
                android:progressBackgroundTint="@color/progress_bg_color_normal"
                />
</LinearLayout>
...

注意點(diǎn):

  1. TextView要添加android:duplicateParentState="true"屬性,
  2. ProgressBar要使用style="@android:style/Widget.ProgressBar.Horizontal",我試過源碼里的style會(huì)沒有效果
  3. 父布局要根據(jù)情況來設(shè)置android:focusable="true"android:focusableInTouchMode="true"屬性

接下來就是關(guān)鍵時(shí)刻,因?yàn)镻rogressBar無法獲取焦點(diǎn),所以考慮使用父布局來進(jìn)行操作,核心代碼如下:

        mLinearLayout.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {
                if (hasFocus) {


                    mProgressBar.setProgressTintList(getResources().getColorStateList(R.color.progress_color_focus,null));
                    mProgressBar.setProgressBackgroundTintList(getResources().getColorStateList(R.color.progress_bg_color_focus, null));

                }
                else {

                    mProgressBar.setProgressTintList(getResources().getColorStateList(R.color.progress_color_normal,
                            null));
                    mProgressBar.setProgressBackgroundTintList(getResources().getColorStateList(R.color.progress_bg_color_normal, null));


                }
            }
        });

通過上面的代碼,就完成了視覺的要求,完活。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容