山东大学项目实训-地图圈系统-APP（4）

安卓开发底部导航栏

使用RadioGroup + ViewPager + Fragment

布局文件 bottom_navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".MainActivity">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/fragment_vp"-->
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/tabs_rg" />

    <RadioGroup
        android:id="@+id/tabs_rg"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:background="#ffffff"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/today_tab"
            style="@style/Custom.TabRadioButton"
            android:checked="true"
            android:drawableTop="@drawable/tab_map_selector"
            android:text="地图" />

        <RadioButton
            android:id="@+id/record_tab"
            style="@style/Custom.TabRadioButton"
            android:drawableTop="@drawable/tab_social_selector"
            android:text="社区" />

        <RadioButton
            android:id="@+id/contact_tab"
            style="@style/Custom.TabRadioButton"
            android:drawableTop="@drawable/tab_my_selector"
            android:text="我的" />

    </RadioGroup>
</RelativeLayout>

drawable文件

//tab_map_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/map_selector" android:state_checked="true"/>
    <item android:drawable="@mipmap/map_no_selector" />
</selector>

style样式

<!-- 自定义控件风格-->
    <style name="Custom" />

    <style name="Custom.TabRadioButton">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:padding">5dp</item>
        <item name="android:gravity">center</item>
        <item name="android:button">@null</item>
        <item name="android:textSize">14sp</item>
        <item name="android:textColor">@color/tab_text_color_selector</item>
    </style>

Activity

public class Style2Activity extends AppCompatActivity {
 
    private ViewPager mViewPager;
    private RadioGroup mTabRadioGroup;
 
    private List<Fragment> mFragments;
    private FragmentPagerAdapter mAdapter;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_style2);
        initView();
    }
 
    private void initView() {
        // find view
        mViewPager = findViewById(R.id.fragment_vp);
        mTabRadioGroup = findViewById(R.id.tabs_rg);
        // init fragment
        mFragments = new ArrayList<>(4);
        mFragments.add(elseFragment.newInstance(""));
        mFragments.add(elseFragment.newInstance(""));
        mFragments.add(elseFragment.newInstance(""));
        mFragments.add(elseFragment.newInstance(""));
        // init view pager
        mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), mFragments);
        mViewPager.setAdapter(mAdapter);
        // register listener
        mViewPager.addOnPageChangeListener(mPageChangeListener);
        mTabRadioGroup.setOnCheckedChangeListener(mOnCheckedChangeListener);
    }
 
    @Override
    protected void onDestroy() {
        super.onDestroy();
        mViewPager.removeOnPageChangeListener(mPageChangeListener);
    }
 
    private ViewPager.OnPageChangeListener mPageChangeListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 
        }
 
        @Override
        public void onPageSelected(int position) {
            RadioButton radioButton = (RadioButton) mTabRadioGroup.getChildAt(position);
            radioButton.setChecked(true);
        }
 
        @Override
        public void onPageScrollStateChanged(int state) {
 
        }
    };
 
    private RadioGroup.OnCheckedChangeListener mOnCheckedChangeListener = new RadioGroup.OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {
            for (int i = 0; i < group.getChildCount(); i++) {
                if (group.getChildAt(i).getId() == checkedId) {
                    mViewPager.setCurrentItem(i);
                    return;
                }
            }
        }
    };
 
    private class MyFragmentPagerAdapter extends FragmentPagerAdapter {
 
        private List<Fragment> mList;
 
        public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> list) {
            super(fm);
            this.mList = list;
        }
 
        @Override
        public Fragment getItem(int position) {
            return this.mList == null ? null : this.mList.get(position);
        }
 
        @Override
        public int getCount() {
            return this.mList == null ? 0 : this.mList.size();
        }
    }
 
}

Fragment文件

public class elseFragment extends Fragment {
    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
    private static final String ARG_SHOW_TEXT = "text";

    private String mContentText;


    public elseFragment() {
        // Required empty public constructor
    }

    /**
     * Use this factory method to create a new instance of
     * this fragment using the provided parameters.
     *
     * @param param1 Parameter 1.
     * @return A new instance of fragment elseFragment.
     */
    public static elseFragment newInstance(String param1) {
        elseFragment fragment = new elseFragment();
        Bundle args = new Bundle();
        args.putString(ARG_SHOW_TEXT, param1);
        fragment.setArguments(args);
        // elseFragment fragment=new elseFragment();

        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mContentText = getArguments().getString(ARG_SHOW_TEXT);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View rootView = inflater.inflate(R.layout.fragment_blank, container, false);
       TextView contentTv = rootView.findViewById(R.id.content_tv);
        contentTv.setText(mContentText);
        return rootView;
    }

}

Fragment布局文件 fragment_blank.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=".BlankFragment">

    <TextView
        android:id="@+id/content_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="24sp"
        android:textColor="@android:color/black"
        android:text="@string/hello_blank_fragment" />
</FrameLayout>

效果图