从html radio到android RadioButton

Radio是表单元素，特性是：

• 提供ui组件给用户从多个选项中选中其中一个，选中一个其他的都会被取消掉
• 开发人员不需要手动绑定点击事件以及不需要手动取消用户没有选中的其他选项的【选中状态】

html radio

Html代码如下，通过同样的name来划分为同一组radio，value就是各自组建所代表的值

<input type="radio" id="html" name="fav_language" value="HTML">
 
<input type="radio" id="css" name="fav_language" value="CSS">

获取选中的值

//步骤一，得到所有的标签
 
//步骤二，便利所有标签
 
for (var i = 0; i < radios.length; i++) {
 
//步骤三，获取选中的标签
 
             if (radios[i].checked == true) {
 
                     value = radios[i].value;
 
             }
 
}
 
//打印选中的值
 
console.log("value", value)

html模拟

如果不用radio呢？用div模拟呢？

那会多好多个步骤

html代码

<div class=“radio”>html</div>
<div class=“radio”>css</div>

javascript

//步骤1，获取所有的标签
 
var radios=document.querySelectorAll(“.radio”);
//取消
 
function cancelSelect(i){
radios[I].classList.remove(“select”);
}
 
//步骤二，便利所有标签
for(let I=0;i<radios.length;i++){
 
//步骤3，手动添加点击事件
radios[I]. addEventListener(“click”,function(){
 
           //步骤四 移除所有的选中class
 
              cancelSelect(i);
//步骤五，手动实现选中
 
this.classList.add(“select”);
        })
}
 
//步骤6，获取选中的标签的值
 
var value=document.querySelectorAll(“.radio.select”).innerHtml

模拟会比radio组建多三个步骤

• 添加点击事件，
• 移除选中效果
• 实现选中效果

样式

还有一个css的代码，不管radio还是div模拟，如果为了好看都有必要添加个自定义的样式,下面以div模拟的样式为例

.radio{
    background:grey;
}
.radio.select{
    background:red;
}

Html的内容到此为止，上做了这么多铺垫，其实都是为了更好的讲述android的TextView和RadioGroup&& RadioButton，android上实现与web的思路基本类同，不过实现的方式不一样

TextView模拟RadioButton

布局标签

<TextView
…省略部分
 
            android:background="@drawable/tab_menu_bg"
 
            android:drawableTop="@drawable/tab_menu_channel"
 
            android:text=“文字” />
<TextView
…省略部分
 
            android:background="@drawable/tab_menu_bg"
 
            android:drawableTop="@drawable/tab_menu_channel"
 
            android:text=“文字” />

样式

选中和非选中的顶部图标样式

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

 

Activity实现View.OnClickListener的点击方法

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private TextView txt_channel;
 
 
 
@Override
 
    protected void onCreate(Bundle savedInstanceState) {
 
        super.onCreate(savedInstanceState);
 
        //省略….
 
//获取viewtext
 
       txt_channel = (TextView) findViewById(R.id.txt_channel);
 
//添加点击事件
 
        txt_channel.setOnClickListener(this);
 
        txt_channel.performClick();   //模拟一次点击，既进去后选择第一项
 
//省略其他项。。。。
 
    }
 
 
   @Override
 
    public void onClick(View v) {
// 根据点击的view的id来让对应的TextView选中
 
       FragmentTransaction fTransaction = fManager.beginTransaction();
 
//隐藏
 
        hideAllFragment(fTransaction);
 
        switch (v.getId()){
 
            case R.id.txt_channel:
 
//让所有viewtext 都不被选中
 
                setSelected();
 
//让当前点击中的viewtext选中
 
                txt_channel.setSelected(true);
 
//省略…..
 
                break;
 
        }
 
    }
}

RadioGroup&& RadioButton

android的radio没有像html那样通过name来分组，而是更加直观的用RadioGroup包括的就为一组

xml标签

<RadioGroup
 
        android:id="@+id/rg_tab_bar"
 
        android:layout_width="match_parent"
 
        android:layout_height="56dp"
 
        android:layout_alignParentBottom="true"
 
        android:background="@color/bg_white"
 
        android:orientation="horizontal">
 
 
 
        <RadioButton
 
            android:id="@+id/rb_channel"
 
            style="@style/tab_menu_item"
 
            android:drawableTop="@drawable/tab_menu_channel"
 
            android:text="@string/tab_menu_alert" />
 
 
 
        <RadioButton
 
            android:id="@+id/rb_message"
 
            style="@style/tab_menu_item"
 
            android:drawableTop="@drawable/tab_menu_message"
 
            android:text="@string/tab_menu_profile" />
 
    </RadioGroup>

因为radiobutton有相同的样式，所以都抽到了@type/tab_men.xml了

radiobutton的样式和viewtext的几乎一样不过需要把selected 状态修改成checked，这里就不再展示修改后的样式

Activity实现RadioGroup.OnCheckedChangeListener

public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener{
   private RadioGroup rg_tab_bar;
 
    private RadioButton rb_channel;
 
   
 
@Override
 
    protected void onCreate(Bundle savedInstanceState) {
 
        //省略。。。。。
 
//获取radiogroup
 
        rg_tab_bar = (RadioGroup) findViewById(R.id.rg_tab_bar);
 
//监听radiogroup的变化事件
 
        rg_tab_bar.setOnCheckedChangeListener(this);
 
        //获取第一个单选按钮，并设置其为选中状态
 
        rb_channel = (RadioButton) findViewById(R.id.rb_channel);
 
        rb_channel.setChecked(true);
 
    }
 
 
   @Override
 
    public void onCheckedChanged(RadioGroup group, int checkedId) {
 
        switch (checkedId){
 
            case R.id.rb_channel:
 
                //dosomething
 
                break;
 
     }
 
}

到此本篇结束。本篇笔记主要从web前端的角度出发对比radio组建和模拟radio的区别以及在web和android上面分别实现