**

類似底部導航欄的選單，點選圖示，文字和圖示都變顏色，Fragment切換介面詳解

** 先看效果圖 以下是全部完整程式碼，如果有問題歡迎留言

1. 圖示和文字佈局color_change.xml

 <?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:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center"
        android:background="#60c49e">
        <ImageView
            android:id="@+id/bottom_icon"
            android:layout_width="40dp"
            android:layout_height="40dp"/>
        <TextView
            android:id="@+id/bottom_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:textColor="#ffffff"/>
    </LinearLayout>
 

2. 設定點選後變化顏色的邏輯程式碼BottomLayout.java

public class BottomLayout extends LinearLayout{
    private int normalIcon;
    private int focusedIcon;
    private boolean isFocused = false;
    private ImageView ivIcon;
    private TextView tvText;
    public BottomLayout(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.color_change,this);
        ivIcon = findViewById(R.id.bottom_icon);
        tvText = findViewById(R.id.bottom_text);
    }
    public void setNormalIcon(int normalIcon){
        this.normalIcon = normalIcon;
        ivIcon.setImageResource(normalIcon);

    }
    public void setFocusedIcon(int focusedIcon){
        this.focusedIcon = focusedIcon;
    }
    public void setTvText(String text){
        tvText.setText(text);
    }
    public void setFocused(boolean isFocused){
            this.isFocused = isFocused;
            if(isFocused){
            //改變點選後圖標的狀態和文字顏色
                ivIcon.setImageResource(focusedIcon);
                tvText.setTextColor(Color.GREEN);
            }
            else {
                ivIcon.setImageResource(normalIcon);
                tvText.setTextColor(Color.BLUE);
            }
        }
    //}
}
 

3. 主頁面佈局activity_main.xml

<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:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
//注意改這裡的包名
        <com.example.atry.test.BottomLayout
            android:id="@+id/icon_kongzhi"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">
        </com.example.atry.test.BottomLayout>
        
        <com.example.atry.test.BottomLayout
            android:id="@+id/icon_dingshiqi"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            >
        </com.example.atry.test.BottomLayout>
    </LinearLayout>
    <FrameLayout
        android:id="@+id/kaiguan_fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
      />
</LinearLayout>
 

4. 在介面切換時使用Fragment,第一個fragment佈局fragment_kaiguan.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".KaiguanFragment"
   <Button
       android:id="@+id/kaiguan_Button"
       android:layout_width="60dp"
       android:layout_height="60dp"
        android:text="開關"
       android:layout_gravity="center"/>

</FrameLayout>

5. KaiguanFragment.java

public class KaiguanFragment extends Fragment {
    public KaiguanFragment() {
    }
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_kaiguan, container, false);
    }

6. 第二個fragment佈局，fragment_dingshiqi_.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".KaiguanFragment"
    >
    <Button
        android:id="@+id/kaiguan_Button"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:text="dingshiqi"/>

</FrameLayout>

7.Dingshiqi_Fragment.java

public class Dingshiqi_Fragment extends Fragment {
    public Dingshiqi_Fragment() {
    }
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_dingshiqi_, container, false);
    }
}

8. 主介面MainActivity.java

public class MainActivity extends FragmentActivity {
    TextView textView;
    BottomLayout kongzhi;
    BottomLayout dingshiqi;
    private KaiguanFragment kaiguanFragment;
    private Dingshiqi_Fragment dingshiqi_fragment;
    private FrameLayout kaiguan_frameLayout;
    private FrameLayout dingshiqi_frameLayout;
    private FragmentManager fragmentManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //隱藏標題（專案名稱）
        ActionBar actionBar = getActionBar();
        if(actionBar != null) {
            actionBar.hide();
        }
        initView();
    }

    private void initView() {
        initBottomLayout();
    }

   private void initBottomLayout() {
       kongzhi = findViewById(R.id.icon_kongzhi);
       dingshiqi = findViewById(R.id.icon_dingshiqi);
       kongzhi.setNormalIcon(R.drawable.tianjia);
       kongzhi.setFocusedIcon(R.drawable.back2);
       kongzhi.setTvText("控制");
       kongzhi.setFocused(true);
       kongzhi.setOnClickListener(new Click());
       //設定點選前後圖片的樣式，一般是同一張圖片的不同顏色，這裡我為了有更明顯的區分，選用了兩張不同的圖片。
        dingshiqi.setNormalIcon(R.drawable.tianjia);
        dingshiqi.setFocusedIcon(R.drawable.add2);
        dingshiqi.setTvText("定時器");
        dingshiqi.setFocused(false);
        dingshiqi.setOnClickListener(new Click());
        kaiguan_frameLayout=(FrameLayout) findViewById(R.id.kaiguan_fragment_container);
        fragmentManager = getSupportFragmentManager();
       FragmentTransaction transaction = fragmentManager.beginTransaction();
       kaiguanFragment = new KaiguanFragment();
       transaction.add(R.id.kaiguan_fragment_container,kaiguanFragment);
       transaction.commit();
    }

    private class Click implements View.OnClickListener {

        @Override
        public void onClick(View v) {
            fragmentManager = getSupportFragmentManager();
            FragmentTransaction transaction = fragmentManager.beginTransaction();
            switch (v.getId())
            {
                case R.id.icon_kongzhi:
                { kongzhi.setFocused(true);
                    dingshiqi.setFocused(false);
                    if(kaiguanFragment==null)
                    {
                        kaiguanFragment = new KaiguanFragment();
                   transaction.replace(R.id.kaiguan_fragment_container,kaiguanFragment);
                    }else {
                      
                        //transaction.show(kaiguanFragment);
                        transaction.replace(R.id.kaiguan_fragment_container,kaiguanFragment);

                    }
                    break;
                }
                case R.id.icon_dingshiqi: {
                    kongzhi.setFocused(false);

                    dingshiqi.setFocused(true);
                    if (dingshiqi_fragment == null) {
                        dingshiqi_fragment = new Dingshiqi_Fragment();
                        transaction.replace(R.id.kaiguan_fragment_container, dingshiqi_fragment);
                    } else {
                        transaction.replace(R.id.kaiguan_fragment_container, dingshiqi_fragment);
                    }
                    break;
                }
            }
            transaction.commit();
        }
    }
}