Android底部导航栏切换界面，点击选项时文字和图标改变颜色
**
类似底部导航栏的菜单，点击图标，文字和图标都变颜色，Fragment切换界面详解
**
先看效果图
以下是全部完整代码，如果有问题欢迎留言
- 图标和文字布局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>
- 设置点击后变化颜色的逻辑代码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);
}
}
//}
}
- 主页面布局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>
- 在界面切换时使用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>
- 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);
}
- 第二个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);
}
}
- 主界面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();
}
}
}
项目解释/问题解答(https://blog.csdn.net/qll766/article/details/83243968)
[3]: https://mermaidjs.github.io/
[4]: http://adrai.github.io/flowchart.js/