学习笔记之———RadioButton + Framgment制作简单框架（一）

RadioButton:单选按钮，多个按钮中选择一个

Fragment：碎片，可以简单理解成一个小视图，放在Activity里面去实现，具体解释可以在百度

这里用运用这两个技术来实现一个类似底部导航栏，先看一下效果图：

接下来开始一步一步的实现这个效果

一：建一个项目EasyActivityDemo，自动生成布局文件及配置

二：整个界面是在我们的主布局中写个，所以接下来先写主布局的内容activity_main.xml

主布局中主要是两个控件FrameLayout和RadioGroup(里面包含RadioButton)   我们先简单看一下控件的 一些属性设置

最外层我们用RelativeLayout(相对布局)

FrameLayou:      

<FrameLayout
     android:id="@+id/frameLayout"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:layout_above="@id/radioGroup"//在相对布局中所使用，表示在某个控件上方，后面根据id所指定控件
/>

RadioGroup(如果点击这个组件的代码可以看到这么一行  RadioGroup extends LinearLayout  由此可以看出RadioGroup中包含有LinearLyout的属性):

<RadioGroup
    android:id="@+id/radioGroup"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"  //设置RadioGroup中的组件RadioButton的排列方式为横向排列
    android:layout_alignParentBottom="true"//相对布局中使用，表示在整个布局的最下方
>

RadioButton:单选按钮，在RadioGroup中使用

<RadioButton
            android:id="@+id/radioButton_homepage"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:button="@null"//将button中自带的小圆圈隐藏
            //在控件上方放入一个图片，利用图片选择器来切换图片
            android:drawableTop="@drawable/tab_icon_homepage_selector"
            android:text="主页"
            //gravity表示让自身控件中的内容居中 
            //和它相似的还有android:layout_gravity="center"表示根据上一个布局来确定自身的位置
            android:gravity="center"
            android:checked="true"//设置默认选中这个按钮
            //颜色选择器
            android:textColor="@drawable/tab_textcolor_selector"/>

控件的属性大概就这些，4个按钮基本都是这么写，上面提到选择器，用到图片选择器和一个颜色选择器，接下来看看是怎么写的：

            颜色选择器：1.在资源文件中添加我们想要使用的颜色values/colors.xml   

<resources>
    <color name="colorPrimary">#008577</color>//标题栏的颜色
    <color name="colorPrimaryDark">#00574B</color>//手机顶部状态栏的颜色
    <color name="colorAccent">#D81B60</color>
    <color name="white">#ffffff</color><!--白色-->
    <color name="red">#ff0000</color><!--红色-->//文字选中时的颜色
    <color name="black">#000000</color><!--黑色-->//文字没有选中时的颜色
</resources>

在drawable文件下建一个资源图片选择器tab_icon_homepage_selector.xml   

这样的东西，我们多少个不同的按钮就要建多少个  在这里我建了4个图片选择器对应我的4个按钮   还建了有个颜色选择器

接下来就看看选择器中怎么去写

<!--这是一个图片选择器-->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@mipmap/ic_homepage_checked"/>
    <item android:state_checked="false" android:drawable="@mipmap/ic_homepage_unchecked"/>
</selector>

state_checked:表示是否选中，true  选中    flase  没选中 

android:drawable="@mipmap/ic_homepage_checked"   表示选中时用的图片资源  这里我们事先将图片放入图片资源文件夹（mipmap_mdpi）中，应该是放到drawable_xhdpi中的，可是我放进去之后找不到图片，所以就放到这里面，什么原因后面再了解一下

颜色选择器：

<!--这是一个颜色选择器-->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@color/red"/>
    <item android:state_checked="false" android:color="@color/black"/>
</selector>

相同的属性就不说了，这里说一下后面的android:color="@color/red"   这表示选择时文字所展现的颜色，可以看到@color/red，这就是我在资源文件colors.xml里面所添加的颜色

选择器基本上这样就可以了，里面还有其他，没用到就不说了，以后再了解，

 

现在我们在回过头来看看我们RadioButton中的代码，

一个按钮我们最基本写下了需要10行左右，但是其中有6行都是重复的，那么在这里我们就用到一个 style资源

为什么要用style呢？

用它自然就是为了简化我们的代码，我们不用做哪些没有意义的事，这样可以提高代码的可读性和代码简介，一个Radio写下了最少10行，4个就是40行，但简化之后就只有10多行，看着就舒服多了，而且方便我们二次书写代码

在哪里写呢：

刚才我们写colors.xml的时候可能没注意，values文件下有一个styles.xml文件    没错，就是在这个里面写。那么问题来了，怎么写呢？  想想我们为什么要用style，因为它能把我们重复的代码集合在一起，共同使用一段代码。看下面的代码就知道怎么写：

<style name="RadioButton_style">
        <item name="android:layout_weight">1</item>
        <item name="android:gravity">center</item><!--文字居中-->
        <item name="android:textColor">@drawable/tab_textcolor_selector</item><!--颜色选择器也可以-->
        <item name="android:button">@null</item><!--隐藏自图案-->
        <item name="android:layout_height">wrap_content</item><!--高度自适应-->
        <item name="android:layout_width">0dp</item><!--宽为0dp，因为有权重-->
        <item name="android:textSize">14sp</item><!--文字大小-->
        <item name="android:drawablePadding">2dp</item><!--调整图片与文字的间距-->
    </style>

然后我们来看看用style之后的RadioButton

<RadioButton
            android:id="@+id/radioButton_homepage"
            android:drawableTop="@drawable/tab_icon_homepage_selector"
            android:text="主页"
            android:checked="true"
            style="@style/RadioButton_style" />

由之前的十几行变为5行，简化了我们的代码量，但却能准确的表达我们想展现的！！！

 

布局就这些，然后剩下的就是java代码中去实现按钮点击切换页面，关于Fragment的知识，下篇再见！！！