RadioGroup+Fragment 实现简单选项卡切换

开发过程中,类似新浪,淘宝,实现底部选项卡简单切换,简单的了解下。 



1.首先是 XML  style drawable

1.首先是 Main.xml 
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@id/fragment"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:background="@color/white"
        android:layout_weight="1">
    </FrameLayout>

    <RadioGroup
        android:id="@id/radioGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <RadioButton
            style="@style/MTabStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="首页"
            android:checked="true"
            android:drawableTop="@drawable/ic_home"
            android:id="@id/tab_one" />
        <RadioButton
            style="@style/MTabStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="附近运力"
            android:drawableTop="@drawable/ic_yunli"
            android:id="@id/tab_two" />
        <RadioButton
            style="@style/MTabStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="末端网点"
            android:drawableTop="@drawable/ic_nearby"
            android:id="@id/tab_three" />
        <RadioButton
            style="@style/MTabStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="个人中心"
            android:drawableTop="@drawable/ic_info"
            android:id="@id/tab_four" />
    </RadioGroup>
</LinearLayout>
</pre><pre>

<style name="MTabStyle">
        <item name="android:button">@null</item>
        <item name="android:gravity">center</item>
        <item name="android:layout_weight">1</item>
        <item name="android:textSize">14sp</item>
        <item name="android:minHeight">48dp</item>
        <item name="android:drawablePadding">1dp</item>
        <item name="android:paddingTop">5dp</item>
        <item name="android:paddingBottom">5dp</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:background">@drawable/btn_main_tab_selector</item>
    </style>

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

2.MainActivity。 replace实现替换,当然也可以使用show,hide等,看开发者个人爱好。

public class MainActivity extends FragmentActivity implements RadioGroup.OnCheckedChangeListener{


    private static final int RESULT_LOGIN = 1;

    @ViewInject(R.id.radioGroup)
    RadioGroup radioGroup;

    Fragment fragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(1);
        setContentView(R.layout.main);
        ViewUtils.inject(this);

        radioGroup.setOnCheckedChangeListener(this);
        fragment = getSupportFragmentManager().findFragmentById(R.id.fragment);

        if (fragment == null) {
            fragment = WaggonFragment.newInstance();
            getSupportFragmentManager().beginTransaction().add(R.id.fragment, HomeFragment.newInstance()).commit();
        }
    }


    @Override
    public void onCheckedChanged(RadioGroup radioGroup, int i) {
        switch (i){
            case R.id.tab_one:{
                fragment = ContentFragment.newInstance();
            }
            break;
            case R.id.tab_two:{
                fragment = ContentFragment.newInstance();
            }
            break;
            case R.id.tab_three:{
                fragment = ContentFragment.newInstance();
            }
            break;
            case R.id.tab_four:{
                fragment = ContentFragment.newInstance();
            }
            break;
        }
        if(fragment != null){
            getSupportFragmentManager().beginTransaction().replace(R.id.fragment, fragment).commit();
        }
    }
}

3. ContentFragment,里面布局 main_content自己随意写个。

public class ContentFragment extends Fragment {

    public static Fragment newInstance() {
        ContentFragment f = new ContentFragment();
        return f;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {


        View v = inflater.inflate(R.layout.main_content, container, false);
        ViewUtils.inject(this, v);

        return v;
    }
}

以后只是实现选项卡简单的切换。如果实现动画,或者滑动,重写Fragment实现想要的功能即可。

猜你喜欢

转载自blog.csdn.net/u010090644/article/details/47396201