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

时间：2021-01-22 06:25:41

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

直接上代码

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选项卡的实现。
标签：

相关文章