RadioButton使用(一)实现底部带指示条的Tab选项卡

在对之前的项目中做重构时候发现一个界面的tab选项卡，之前一直 用着看是不能滑动的，但是在代码中发现是用viewpager实现的后面强制把滑动给禁掉了，代码显示有点多也很乱。既然问了领导需求没有滑动只能点击，那么就没有必要再用viewpager去实现了。重构后采用RadioButton，主要利用RadioButton的“互斥”特性实现这样代码量少，逻辑清晰，也便于其他开发阅读理解。 由于这个demo是直接临时从项目中抽出来的，所以稍微有点乱，不过代码量不多，有需要的可以自己回头再整理下，废话不多说看看最后实现的效果图：

直接上代码

package com.radiobuttontab; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentTransaction; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.util.DisplayMetrics; import android.view.View; import android.widget.FrameLayout; import android.widget.RadioButton; /** * Created by nanfeilong on 2017/8/6 * RadioButton 选项卡 */ public class MainActivity extends AppCompatActivity implements View.OnClickListener { private RadioButton tab1, tab2, tab3; private View mViewPagerLine;//选项卡下面的红色线条控件 private Fragment1 fragment1; private Fragment2 fragment2; private Fragment3 fragment3; private int width; private FrameLayout.LayoutParams params; private DisplayMetrics metric; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tab1 = (RadioButton) findViewById(R.id.tab1); tab2 = (RadioButton)findViewById(R.id.tab2); tab3 = (RadioButton) findViewById(R.id.tab3); mViewPagerLine = findViewById(R.id.imformation_viewpager_line);//选项卡下面的红色线条 params = (android.widget.FrameLayout.LayoutParams) mViewPagerLine.getLayoutParams(); initFragment(); } private void initFragment() { fragment1 = new Fragment1(); fragment2 = new Fragment2(); fragment3 = new Fragment3(); width=getScreenWidth()/3; setMetric(); tab1.setOnClickListener(this); tab2.setOnClickListener(this); tab3.setOnClickListener(this); } /** * 初始选项卡红色线条位置 */ private void setMetric() { tab1.setChecked(true); selectedTab(0); } /** * 切换fragment * @param type */ private void selectedTab(int type){ setLine(type); FragmentManager fragmentManager = getSupportFragmentManager(); FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); switch (type){ case 0: fragmentTransaction.replace(R.id.tips_content,fragment1); break; case 1: fragmentTransaction.replace(R.id.tips_content,fragment2); break; case 2: fragmentTransaction.replace(R.id.tips_content,fragment3); break; default: break; } fragmentTransaction.commit(); } /** * 点击选项卡 对应下面的红色线条位置 * @param i */ private void setLine(int i) { switch (i){ case 0: params.setMargins(width * 0, 0, 0, 0); break; case 1: params.setMargins(width* 1, 0, 0, 0); break; case 2: params.setMargins(width * 2, 0, 0, 0); break; } params.width = width; mViewPagerLine.setLayoutParams(params); } private int getScreenWidth(){ if(metric==null) metric = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(metric); return metric.widthPixels; } @Override public void onClick(View view) { switch (view.getId()) { case R.id.tab1: selectedTab(0); break; case R.id.tab2: selectedTab(1); break; case R.id.tab3: selectedTab(2); break; } } }

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" android:background="#ffffff" tools:context="com.radiobuttontab.MainActivity"> <FrameLayout android:layout_width="match_parent" android:layout_height="48dp"> <RadioGroup android:id="@+id/tab_rg" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="horizontal"> <RadioButton android:id="@+id/tab1" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:button="@null" android:checked="true" android:gravity="center" android:text="tab1" android:textColor="#333333" android:textSize="16sp" /> <View android:layout_width="0.5dp" android:layout_height="match_parent" android:background="#cccccc" /> <RadioButton android:id="@+id/tab2" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:button="@null" android:gravity="center" android:text="tab2" android:textColor="#333333" android:textSize="16sp" /> <View android:layout_width="0.5dp" android:layout_height="match_parent" android:background="#cccccc" /> <RadioButton android:id="@+id/tab3" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:button="@null" android:gravity="center" android:text="tab3" android:textColor="#333333" android:textSize="16sp" /> </RadioGroup> <View android:id="@+id/imformation_viewpager_line" android:layout_width="0dp" android:layout_height="3dp" android:layout_gravity="bottom" android:background="#ff944d" android:gravity="center_horizontal" /> </FrameLayout> <View android:layout_width="match_parent" android:layout_height="0.5dp" android:background="#cccccc" android:gravity="center_horizontal" /> <RelativeLayout android:id="@+id/tips_content" android:layout_width="match_parent" android:layout_weight="1" android:layout_height="wrap_content" > </RelativeLayout> </LinearLayout>

需要注意的是这里的点击事件我直接用的是onClick，其实RadioButton也有专门的事件监听可以去实现CompoundButton.OnCheckedChangeListener接口，然后重写onCheckedChanged(CompoundButton buttonView, boolean isChecked)方法，其中第一个参数很好理解，就是点击的那个view，至于第二个则是当点击此radiobutton，是否是选中状态传一个boolean，true表示点击后为选中状态。至于用哪个根据自己实际需求，这里为了简单我才用了onClick。效果是一样的。

然后是里面的三个对应的Fragment，由于都是差不多一样的这里我给出一个和对应的xml布局

package com.radiobuttontab; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; /** * Created by nanfeilong on 2017/6/27 0027. * 秘籍下的 教育资讯 */ public class Fragment1 extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_tips1,container,false); return rootView; } }

fragment_tips1.xml 中测试只放了一个button

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical"> <Button android:id="@+id/button3" android:layout_width="match_parent" android:layout_gravity="center" android:layout_height="wrap_content" android:text="1111" /> </LinearLayout>

好了，到这里就完了，其实从此demo也可以通过稍微修改下可以变成只有两个的tab选项卡，或者是四个的tab选项卡。至于怎么修改有兴趣的宝宝们可以下去自己研究。这里上传下

源码

里面除了本demo中的三个tab选项卡还有两个tab选项卡的实现。