Android開發學習之使用Toolbar實現不同的Fragment使用不同顏色的標題欄與狀態欄

Android開發學習之使用Toolbar實現不同的Fragment使用不同顏色的標題欄與狀態欄

                                          

先看效果圖。就像上面兩幅圖片一樣,當我們點擊下面的導航欄按鈕時,APP會切換Fragment,且會更改標題欄和狀態欄的顏色。這篇文章主要便是記錄該效果的實現過程。

activity的佈局如下

<?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:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <FrameLayout
        android:id="@+id/frame"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
    </FrameLayout>
 
    <TextView
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000000"/>
 
    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:background="#fff"
        android:layout_height="50dp">
 
        <LinearLayout
            android:id="@+id/one_lin"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:gravity="center"
            android:layout_height="match_parent">
            <ImageView
                android:id="@+id/one_img"
                android:layout_width="30dp"
                android:src="@drawable/fk"
                android:layout_height="30dp" />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/two_lin"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:gravity="center"
            android:layout_height="match_parent">
            <ImageView
                android:id="@+id/two_img"
                android:layout_width="30dp"
                android:src="@drawable/fl"
                android:layout_height="30dp" />
        </LinearLayout>
        <!--<LinearLayout-->
            <!--android:id="@+id/three_lin"-->
            <!--android:layout_weight="1"-->
            <!--android:layout_width="match_parent"-->
            <!--android:gravity="center"-->
            <!--android:layout_height="match_parent">-->
            <!--<ImageView-->
                <!--android:id="@+id/three_img"-->
                <!--android:layout_width="30dp"-->
                <!--android:src="@drawable/bg_three"-->
                <!--android:layout_height="30dp" />-->
        <!--</LinearLayout>-->
 
    </LinearLayout>
 
</LinearLayout>
設置one_lin和two_lin的監聽事件,當點擊時顯示對應的fragment,其中setWindowStatusBarColor爲控制狀態欄顏色的函數,ScanFragment和MyFragment兩個類是我們繼承Fragment實現的兩個類,將在後面詳細介紹。

public void onClick(View v) {
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        switch (v.getId()){
            case R.id.one_lin:
                setWindowStatusBarColor(0);
                if (myFragment != null)
                    transaction.hide(myFragment);
                if (scanFragment == null){
                    scanFragment = new ScanFragment();
                    transaction.add(R.id.frame, scanFragment);
                    transaction.show(scanFragment);
 
                }else{
                    transaction.show(scanFragment);
                }
                break;
            case R.id.two_lin:
                setWindowStatusBarColor(1);
                if (scanFragment != null)
                    transaction.hide(scanFragment);
                if (myFragment == null){
                    myFragment = new MyFragment();
                    transaction.add(R.id.frame, myFragment);
                    transaction.show(myFragment);
                }else{
                    transaction.show(myFragment);
                }
                break;
        }
        transaction.commit();
    }
狀態欄顏色的修改在4.4和5.x環境下分別有不同的方式,低於4.4以下是不能修改的。而且對於不同定製系統也要做不同的適配,這裏我暫時使用的是一個已經封裝好的庫(待測試適配性),只需在build.gradle文件的dependencies{}中添加

implementation 'com.githang:status-bar-compat:latest.integration'
setWindowStatusBarColor函數如下

 private void setWindowStatusBarColor(int i) {
        switch (i){
            case 0:
                StatusBarCompat.setStatusBarColor(this,  getResources().getColor(R.color.gray), true);
                break;
            case 1:
                StatusBarCompat.setStatusBarColor(this,  getResources().getColor(R.color.green), true);
                break;
        }
    }
接下來修改標題欄,默認的標題欄設置我們可以在res->values->styles.xml中看到,默認採用的是ActionBar。

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
我們採用ToolBar代替ActionBar,首先修改parent屬性爲Theme.AppCompat.Light.NoActionBar,然後添加

<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
兩個item,修改後代碼如下

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
</style>
這裏我們拿MyFragment作示例,MyFragment對應的佈局文件如下

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/toolbar_me"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        app:titleTextColor="@android:color/black"
        android:background="@color/green"
        android:minHeight="?android:attr/actionBarSize">  <!-- 最小高度 -->
    </android.support.v7.widget.Toolbar>
</FrameLayout>
在xml文件中添加 android.support.v7.widget.Toolbar,這裏需要注意的是我們需要使用android.support.v7.widget.Toolbar,否則過低版本則不可用。

MyFragment代碼如下

public class MyFragment extends Fragment {
    @Nullable
    private AppCompatActivity mActivity;
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = View.inflate(getActivity(), R.layout.me_layout, null);
        return view;
    }
 
    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        mActivity = (AppCompatActivity) getActivity();
    }
 
    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
 
    }
 
    @Override
    public void onResume() {
        super.onResume();
        Toolbar mToolbar = mActivity.findViewById(R.id.toolbar_me);
        mActivity.setSupportActionBar(mToolbar);
    }
}
需要在onCreateView返回佈局的view;onAttach是fragment與activity綁定後調用的函數,之前是獲取不到綁定的Activity的;onActivityCreated函數調用時,activity的onCreate函數已經執行完畢,此時我們可以進行ui操作;onResume函數執行時用戶可以與fragment進行交互。因此我們在onResume函數裏通過

Toolbar mToolbar = mActivity.findViewById(R.id.toolbar_me);
mActivity.setSupportActionBar(mToolbar);
獲取我們在xml文件中所寫的Toolbar,然後通過setSupportActionBar將Toolbar轉爲ActionBar。

這樣,我們就實現了當點擊底部導航欄時,變換狀態欄和標題欄的顏色。此外,我們還可以在Toolbar佈局下添加其他控件實現自定義標題欄。
--------------------- 
作者:Magic1an 
來源:CSDN 
原文:https://blog.csdn.net/Magic1an/article/details/87723359 
版權聲明:本文爲博主原創文章,轉載請附上博文鏈接!
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章