使用RadioButton+Fragment實(shí)現(xiàn)底部導(dǎo)航欄效果
底部導(dǎo)航欄,在我們App項(xiàng)目中是非常常用!而且實(shí)現(xiàn)它的方式很多,今天我們就來使用RadioButton+Fragment實(shí)現(xiàn)底部導(dǎo)航欄!
下面就讓我們動(dòng)手吧,首先我們打開RadioButtonDemo這個(gè)項(xiàng)目,首先修改activity_main.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" tools:context="com.example.jackhu.radiobuttondemo.MainActivity"> <FrameLayout android:id="@+id/mFragment" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"></FrameLayout> <RadioGroup android:layout_marginBottom="2dp" android:id="@+id/mRadioGroup" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="48dp"> <RadioButton android:drawableTop="@drawable/rbhome" android:button="@null" android:checked="true" android:textColor="@color/colorRadioButtonP" android:id="@+id/mRb_home" android:gravity="center" android:layout_width="0dp" android:text="Home" android:layout_weight="1" android:layout_height="match_parent" /> <RadioButton android:drawableTop="@drawable/rb_message" android:button="@null" android:textColor="@color/colorRadioButtonN" android:id="@+id/mRb_message" android:gravity="center" android:layout_width="0dp" android:text="Message" android:layout_weight="1" android:layout_height="match_parent" /> <RadioButton android:drawableTop="@drawable/rbfind" android:button="@null" android:textColor="@color/colorRadioButtonN" android:id="@+id/mRb_find" android:gravity="center" android:layout_width="0dp" android:text="Find" android:layout_weight="1" android:layout_height="match_parent" /> <RadioButton android:drawableTop="@drawable/rbmy" android:button="@null" android:textColor="@color/colorRadioButtonN" android:id="@+id/mRb_my" android:gravity="center" android:layout_width="0dp" android:text="My" android:layout_weight="1" android:layout_height="match_parent" /> </RadioGroup> </LinearLayout>
這里我們?cè)诓季治募﨔ragment控件:用于顯示界面的切換。
RadioGroup控件包含了4個(gè)RadioButton:用于顯示按鈕。我們給第一個(gè)按鈕check為true默認(rèn)選中。其中android:button=”@null” 取消圓點(diǎn)。
drawableTop屬性:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:drawable="@drawable/home_p"/> <item android:drawable="@drawable/home_n"/> </selector>
顯示選擇和未選中的狀態(tài)的圖標(biāo)
創(chuàng)建Fragment,加載Fragment布局文件,類代碼如下:
package com.example.jackhu.radiobuttondemo.fragment; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import com.example.jackhu.radiobuttondemo.R; /** * A simple {@link Fragment} subclass. */ public class HomeFragment extends Fragment { public HomeFragment() { // Required empty public constructor } //單例模式 public static HomeFragment newInstance(){ HomeFragment homeFragment=new HomeFragment(); return homeFragment; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_home, container, false); } }
接下來我們來修改MainActivity.class中的代碼,在這里實(shí)現(xiàn)點(diǎn)擊按鈕切換Fragment的具體功能,代碼如下:
package com.example.jackhu.radiobuttondemo; import android.support.annotation.IdRes; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentTransaction; import android.support.v4.content.ContextCompat; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.widget.RadioButton; import android.widget.RadioGroup; import android.widget.Toast; import com.example.jackhu.radiobuttondemo.fragment.FindFragment; import com.example.jackhu.radiobuttondemo.fragment.HomeFragment; import com.example.jackhu.radiobuttondemo.fragment.MessageFragment; import com.example.jackhu.radiobuttondemo.fragment.MyFragment; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener { private RadioGroup mRadioGroup; private List<Fragment> fragments = new ArrayList<>(); private Fragment fragment; private FragmentManager fm; private FragmentTransaction transaction; private RadioButton rb_Home,rb_Message,rb_Find,rb_My; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); //初始化組件 mRadioGroup.setOnCheckedChangeListener(this); //點(diǎn)擊事件 fragments = getFragments(); //添加布局 //添加默認(rèn)布局 normalFragment(); } //默認(rèn)布局 private void normalFragment() { fm=getSupportFragmentManager(); transaction=fm.beginTransaction(); fragment=fragments.get(0); transaction.replace(R.id.mFragment,fragment); transaction.commit(); } private void initView() { mRadioGroup = (RadioGroup) findViewById(R.id.mRadioGroup); rb_Home= (RadioButton) findViewById(R.id.mRb_home); rb_Message= (RadioButton) findViewById(R.id.mRb_message); rb_Find= (RadioButton) findViewById(R.id.mRb_find); rb_My= (RadioButton) findViewById(R.id.mRb_my); } @Override public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) { fm=getSupportFragmentManager(); transaction=fm.beginTransaction(); switch (checkedId){ case R.id.mRb_home: fragment=fragments.get(0); transaction.replace(R.id.mFragment,fragment); Toast.makeText(this, "Home", Toast.LENGTH_SHORT).show(); break; case R.id.mRb_message: fragment=fragments.get(1); transaction.replace(R.id.mFragment,fragment); Toast.makeText(this, "Message", Toast.LENGTH_SHORT).show(); break; case R.id.mRb_find: fragment=fragments.get(2); transaction.replace(R.id.mFragment,fragment); Toast.makeText(this, "Find", Toast.LENGTH_SHORT).show(); break; case R.id.mRb_my: fragment=fragments.get(3); transaction.replace(R.id.mFragment,fragment); Toast.makeText(this, "My", Toast.LENGTH_SHORT).show(); break; } setTabState(); transaction.commit(); } //設(shè)置選中和未選擇的狀態(tài) private void setTabState() { setHomeState(); setMessageState(); setFindState(); setMyState(); } private void setMyState() { if (rb_My.isChecked()){ rb_My.setTextColor(ContextCompat.getColor(this,R.color.colorRadioButtonP)); }else{ rb_My.setTextColor(ContextCompat.getColor(this,R.color.colorRadioButtonN)); } } private void setFindState() { if (rb_Find.isChecked()){ rb_Find.setTextColor(ContextCompat.getColor(this,R.color.colorRadioButtonP)); }else{ rb_Find.setTextColor(ContextCompat.getColor(this,R.color.colorRadioButtonN)); } } private void setMessageState() { if (rb_Message.isChecked()){ rb_Message.setTextColor(ContextCompat.getColor(this,R.color.colorRadioButtonP)); }else{ rb_Message.setTextColor(ContextCompat.getColor(this,R.color.colorRadioButtonN)); } } private void setHomeState() { if (rb_Home.isChecked()){ rb_Home.setTextColor(ContextCompat.getColor(this,R.color.colorRadioButtonP)); }else{ rb_Home.setTextColor(ContextCompat.getColor(this,R.color.colorRadioButtonN)); } } public List<Fragment> getFragments() { fragments.add(new HomeFragment()); fragments.add(new MessageFragment()); fragments.add(new FindFragment()); fragments.add(new MyFragment()); return fragments; } }
好了,這樣的話,所有的代碼就已經(jīng)完成了,可以運(yùn)行一下看看完整的效果了最終效果圖:
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android實(shí)現(xiàn)底部導(dǎo)航欄功能
- android實(shí)現(xiàn)底部導(dǎo)航欄
- Android程序開發(fā)之Fragment實(shí)現(xiàn)底部導(dǎo)航欄實(shí)例代碼
- Android實(shí)現(xiàn)底部導(dǎo)航欄功能(選項(xiàng)卡)
- Android中TabLayout+ViewPager 簡單實(shí)現(xiàn)app底部Tab導(dǎo)航欄
- Android design包自定義tablayout的底部導(dǎo)航欄的實(shí)現(xiàn)方法
- android中Fragment+RadioButton實(shí)現(xiàn)底部導(dǎo)航欄
- Android實(shí)現(xiàn)簡單底部導(dǎo)航欄 Android仿微信滑動(dòng)切換效果
- 性能分析:指如何快速定位SQL問題
- Android用Scroller實(shí)現(xiàn)一個(gè)可向上滑動(dòng)的底部導(dǎo)航欄
相關(guān)文章
Android自定義可拖拽的懸浮按鈕DragFloatingActionButton
這篇文章主要介紹了Android自定義可拖拽的懸浮按鈕DragFloatingActionButton,需要的朋友可以參考下2017-06-06Android中使用TextView實(shí)現(xiàn)圖文混排的方法
向TextView或EditText中添加圖像比直接添加文本復(fù)雜一點(diǎn)點(diǎn),需要用到<img>標(biāo)簽。接下來通過本文給大家介紹Android中使用TextView實(shí)現(xiàn)圖文混排的方法,希望對(duì)大家有所幫助2016-02-02仿餓了嗎點(diǎn)餐界面兩個(gè)ListView聯(lián)動(dòng)效果
這篇文章主要介紹了仿餓了點(diǎn)餐界面2個(gè)ListView聯(lián)動(dòng)效果的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09Android實(shí)現(xiàn)底部導(dǎo)航欄的主界面
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)底部導(dǎo)航欄的主界面 ,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09Android使用ViewPager實(shí)現(xiàn)屏幕滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了Android使用ViewPager實(shí)現(xiàn)屏幕滑動(dòng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10Kotlin語言使用BroadcastReceiver示例介紹
Android開發(fā)的四大組件分別是:活動(dòng)(activity),用于表現(xiàn)功能;服務(wù)(service),后臺(tái)運(yùn)行服務(wù),不提供界面呈現(xiàn);廣播接受者(Broadcast Receive),勇于接收廣播;內(nèi)容提供者(Content Provider),支持多個(gè)應(yīng)用中存儲(chǔ)和讀取數(shù)據(jù),相當(dāng)于數(shù)據(jù)庫,本篇著重介紹廣播組件2022-09-09Android圖片翻轉(zhuǎn)動(dòng)畫簡易實(shí)現(xiàn)代碼
Android圖片翻轉(zhuǎn)動(dòng)畫效果如何實(shí)現(xiàn),本文將給你一個(gè)驚喜,實(shí)現(xiàn)代碼已經(jīng)列出,需要的朋友可以參考下2012-11-11Android 使用Vitamio打造自己的萬能播放器(9)—— 在線播放 (在線電視)
本文主要介紹Android 使用Vitamio開發(fā)播放器,實(shí)現(xiàn)在線電視播放,這里提供效果圖和實(shí)例代碼以便大家參考,2016-07-07