Android底部導航欄切換介面,點選選項時文字和圖示改變顏色
阿新 • • 發佈:2018-12-16
**
類似底部導航欄的選單,點選圖示,文字和圖示都變顏色,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();
}
}
}