#Android项目# ——day01 Fragment搭配RadioGroup创建导航栏

需求：

1. 底部导航栏中部按钮突出可以选择
2. 点击中部按钮弹出悬浮框选择功能

分析：

• 制作一个四个 RadioButton 按钮的导航栏，中间使用一个 View去占位 。再利用 RelativeLayout 的特性把中间需要突出的按钮用 ImageView 去覆盖在 View 上面
• 在后端代码绑定中间突出的 ImageView 设置它的点击事件，实现使用 Dialog 显示弹窗

效果：

今天的收获：

• 使用AndroidStudio自带的 BottomNavigationView 控件item多于3个时文字不显示的解决方案

转载：在升级API28之前，该解决方案主要是通过反射的方式实现的，参考https://www.jianshu.com/p/5e3b9f59a936，
升级到API28后，只要设置属性就可以解决，
如下
<android.support.design.widget.BottomNavigationView
app:labelVisibilityMode=“labeled” />

• 绑定的Fragment自动生成只需要留下 onCreateView、onStart（）方法，在继承 Fragment 的类中实例化等操作要在onStart方法里面实现不同于在Activity的 onCreate 方法实现实例化。

• 创建颜色选择器去设置点击切换颜色（具体代码在下面）

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">

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/tabs_rg" />
        <!--above :相对于xx控件的上面-->
    <RadioGroup
        android:id="@+id/tabs_rg"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:background="#00000000"
        android:orientation="horizontal">
        <!--android:layout_alignParentBottom="true" 置于界面的底层-->
        <RadioButton
            android:id="@+id/home"
            style="@style/Custom.TabRadioButton"
            android:checked="true"
            android:drawableTop="@drawable/ic_home"
            android:text="首页" />
        <!--  android:drawableTop="@drawable/ic_home" 顶部插入图片-->
        <RadioButton
            android:id="@+id/find"
            style="@style/Custom.TabRadioButton"
            android:drawableTop="@drawable/bottom_find"
            android:text="发现" />

        <View style="@style/Custom.TabRadioButton" />
        <!--  View 用来占一个位置 -->
       
        <RadioButton
            android:id="@+id/recruit"
            style="@style/Custom.TabRadioButton"
            android:drawableTop="@drawable/bottom__recruit"
            android:text="招聘" />

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


    <!-- 利用RelativeLayout的特性去让控件至于布局底部中间
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        盖住用来占位的view
     -->
    <ImageView
        android:id="@+id/send"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/bottom_send" />
    
</RelativeLayout>

自定义RadioButton样式：

<style name="Custom.TabRadioButton">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:layout_height">wrap_content</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>
         <!-- @color/tab_text_color_selector 创建颜色选择器，点击事件切换颜色-->
    </style>

按钮的颜色选择器：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--android:state_checked="true" 选中事件-->
    <item android:color="#F15454" android:state_checked="true" />
    <item android:color="#012742" />
</selector>

后端代码实现：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private RadioGroup mTabRadioGroup;
    private SparseArray<Fragment> mFragmentSparseArray;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //实例化控件
        initView();
    }

    private void initView() {
        mTabRadioGroup = findViewById(R.id.tabs_rg);
        /*
        一般我们使用TabLayout切换Fragment中展示内容，既然不销毁加载好的内容
        那就是不销毁Fragment就能实现了。不销毁Fragment就是对已经存在的Fragment进行缓存
        传统的java方法存储一个唯一的对象采用HashMap，但是Google用SparseArray替代HashMap来提高效率。
        */
        mFragmentSparseArray = new SparseArray<>();
        mFragmentSparseArray.append(R.id.home, new Home());
        mFragmentSparseArray.append(R.id.find, new Find());
        mFragmentSparseArray.append(R.id.recruit, new Recruit());
        mFragmentSparseArray.append(R.id.personal, new Personal());
        mTabRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                // 具体的fragment切换逻辑可以根据应用调整，例如使用show()/hide()
                getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container,
                        mFragmentSparseArray.get(checkedId)).commit();
            }
        });
        // 默认显示第一个是home
        getSupportFragmentManager().beginTransaction().add(R.id.fragment_container,
                mFragmentSparseArray.get(R.id.home)).commit();
        
        findViewById(R.id.send).setOnClickListener(this);
    }

    private void showBottomDialog() {
        //1、使用Dialog、设置style
        final Dialog dialog = new Dialog(this, R.style.DialogTheme);
        //2、设置布局
        View view = View.inflate(this, R.layout.dialog_send, null);
        dialog.setContentView(view);

        Window window = dialog.getWindow();
        //设置弹出位置
        window.setGravity(Gravity.BOTTOM);
        //设置弹出动画
        window.setWindowAnimations(R.style.main_menu_animStyle);

        //获得窗体的属性
        WindowManager.LayoutParams lp = window.getAttributes();
        //设置Dialog距离底部的距离
        lp.y = 235;
        //将属性设置给窗体
        window.setAttributes(lp);
        dialog.show();//显示对话框

        dialog.findViewById(R.id.dialog_dynamics).setOnClickListener(this);

        dialog.findViewById(R.id.dialog_photo).setOnClickListener(this);

        dialog.findViewById(R.id.dialog_video).setOnClickListener(this);

        dialog.findViewById(R.id.dialog_pictures).setOnClickListener(this);

        dialog.findViewById(R.id.dialog_notes).setOnClickListener(this);

    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.send:
                showBottomDialog();
                break;
            case R.id.dialog_dynamics:
                Toast.makeText(this, "点击了动态", Toast.LENGTH_SHORT).show();
                break;
            case R.id.dialog_photo:
                Toast.makeText(this, "点击了图片", Toast.LENGTH_SHORT).show();
                break;
            case R.id.dialog_video:
                Toast.makeText(this, "点击了视频", Toast.LENGTH_SHORT).show();
                break;
            case R.id.dialog_pictures:
                Toast.makeText(this, "点击了拍照", Toast.LENGTH_SHORT).show();
                break;
            case R.id.dialog_notes:
                Toast.makeText(this, "点击了游记", Toast.LENGTH_SHORT).show();
                break;
        }
    }
}

dialogxml布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="200dp"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:background="@drawable/drawable_round_edge"
        android:orientation="vertical">

        <TextView
            android:clickable="true"
            android:id="@+id/dialog_dynamics"
            android:layout_width="70dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:drawableLeft="@drawable/ic_home"
            android:gravity="center"
            android:text="动态"
            android:textColor="@android:color/background_dark"
            android:textSize="16dp" />

        <TextView
            android:clickable="true"
            android:id="@+id/dialog_photo"
            android:layout_width="70dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:drawableLeft="@drawable/ic_home"
            android:gravity="center"
            android:text="图片"
            android:textColor="@android:color/background_dark"
            android:textSize="16dp" />

        <TextView
            android:clickable="true"
            android:id="@+id/dialog_video"
            android:layout_width="70dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:drawableLeft="@drawable/ic_home"
            android:gravity="center"
            android:text="视频"
            android:textColor="@android:color/background_dark"
            android:textSize="16dp" />

        <TextView
            android:clickable="true"
            android:id="@+id/dialog_pictures"
            android:layout_width="70dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:drawableLeft="@drawable/ic_home"
            android:gravity="center"
            android:text="拍摄"
            android:textColor="@android:color/background_dark"
            android:textSize="16dp" />

        <TextView
            android:clickable="true"
            android:id="@+id/dialog_notes"
            android:layout_width="70dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:drawableLeft="@drawable/ic_home"
            android:gravity="center"
            android:text="游记"
            android:textColor="@android:color/background_dark"
            android:textSize="16dp" />
    </LinearLayout>
</LinearLayout>