安卓学习笔记(18)-fragment与RadioGroup配合构建微信UI界面

0. 引言

​ 在上一篇博文中提到，微信的界面也是通过fragment的构成。微信除了四页的fragment，还有底部的四个按钮，点击按钮就可以跳转到对应的界面。同时滑动界面时，底部的按钮也会跟着变化。

微信底部的四个按钮就是RadioGroup中的四个RadioButton。

1. 在activity_main.xml中设置RadioGroup

欲构建类似于微信UI，首先需要在上一个博文的前提下，再在主layout中添加RadioGroup，并添加四个RadioButton。xml文件如下：

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_width="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        >

    </android.support.v4.view.ViewPager>

    <RadioGroup

        android:id="@+id/rg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="#ffffff"
        >
        <RadioButton
            android:id="@+id/rb_weixin"
            style="@style/botton_tab"
            android:drawableTop="@drawable/set_weixin"
            android:text="微信"/>

        <RadioButton
            android:id="@+id/rb_tongxinlu"
            style="@style/botton_tab"
            android:drawableTop="@drawable/set_tongxinlu"
            android:text="通信录"/>

        <RadioButton
            android:id="@+id/rb_faxian"
            style="@style/botton_tab"
            android:drawableTop="@drawable/set_faxian"
            android:text="发现"/>

        <RadioButton
            android:id="@+id/rb_wo"
            style="@style/botton_tab"
            android:drawableTop="@drawable/set_wo"
            android:text="我"/>

    </RadioGroup>
</LinearLayout>

xml中的几点说明：

1.1 style="@style/botton_tab"

:这在res/styles.xml中添加：

    <style name="bottom_tab">
        <item name="android:layout_width" >0dp</item>
        <item name="android:layout_height" >wrap_content</item>
        <item name="android:layout_weight" >1</item>
        <item name="android:text" >0dp</item>
        <item name="android:gravity" >center</item>
        <item name="android:textColor" >@drawable/set_button_tab_text</item>
        <item name="android:padding" >8dp</item>
        <item name="android:button" >@null</item>
    </style>

其中：

8dp是设置内边框，详见android:padding和android:margin的区别。

@null是用于去掉RadioButton中的原点。

@drawable/set_button_tab_text是需要在drawable中新建一个set_button_tab_text.xml文件，用于存放按钮在不同状态下的文字颜色。set_button_tab_text.xml如下：

set_button_tab_text.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#1296db" android:state_checked="true"/>
    <item android:color="#1296db" android:state_focused="true"/>
    <item android:color="#1296db" android:state_pressed="true"/>
    <item android:color="#272636"/>
</selector>

这个xml中的内容使用存放在RadioButton不同状态下的颜色状态，其中在android:state_checked/ android:state_focused/ android:state_pressed状态下的颜色为一致，分别代表RadioButton处于被选中/被点击/非触摸模式下获得焦点并单击。更多的资料见博客：Android Selector全解。

1.2 android:drawableTop

android:drawableTop是设置图片的在控件内的显示位置，与此对应的还有android:drawableLeft，android:drawableRight，android:drawableButtom。

通过android:drawableTop，我们把图片设置在文字的上方。同时，我们的图片资源以应该跟着RadioButton的状体一起变化，如被选中时图片应该高亮，没有被选中的时候应该灰暗。所以与set_button_tab_text.xml类似，我为每一个RadioButton的图片资源设置一个xml文件如下：

set_weixin.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/weixin"/>
    <item android:state_pressed="true" android:drawable="@drawable/weixin"/>
    <item android:state_focused="true" android:drawable="@drawable/weixin"/>
    <item  android:state_checked="false" android:drawable="@drawable/weixin_gray"/>
</selector>

set_tongxinlu.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/tongxinlu"/>
    <item android:state_pressed="true" android:drawable="@drawable/tongxinlu"/>
    <item android:state_focused="true" android:drawable="@drawable/tongxinlu"/>
    <item  android:state_checked="false" android:drawable="@drawable/tongxinlu_gray"/>
</selector>

set_faxian.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/faxian"/>
    <item android:state_pressed="true" android:drawable="@drawable/faxian"/>
    <item android:state_focused="true" android:drawable="@drawable/faxian"/>
    <item  android:state_checked="false" android:drawable="@drawable/faxian_gray"/>
</selector>

set_wo.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/wo"/>
    <item android:state_pressed="true" android:drawable="@drawable/wo"/>
    <item android:state_focused="true" android:drawable="@drawable/wo"/>
    <item  android:state_checked="false" android:drawable="@drawable/wo_gray"/>
</selector>

以上，我们就将界面设置好了，接下来我们要添加四个fragment。

2. 添加4个fragment

在这里我就只贴出一个fragment的xml与java文件，其余三个跟这个完全一样，只是改个名称就好。

fragment1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_width="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

<TextView
    android:text="第一个界面"
    android:textSize="30dp"
    android:layout_gravity="center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

</LinearLayout>

fragment1.java

package cn.edu.xidian.fragmenttest;

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 kabuto on 2018/1/17.
 */

public class fragment1 extends Fragment {

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

        View view= inflater.inflate(R.layout.fragment1, container, false);

       //对控件进行操作

        return view;
    }

}

3. 在Mainactivity.java中添加这四个fragment

Mainactivity.java

package cn.edu.xidian.fragmenttest;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.widget.RadioButton;
import android.widget.RadioGroup;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {


    private List<Fragment> mFragments;
    private ViewPager mViewPager;
    private RadioGroup mRg;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mViewPager = findViewById(R.id.viewPager);
        mRg = findViewById(R.id.rg);

        //添加fragmment
        mFragments = new ArrayList<Fragment>();
        mFragments.add(new fragment1());
        mFragments.add(new fragment2());

      /*=====================以下为上一篇博客新加之内容==================*/
        mFragments.add(new fragment3());
        mFragments.add(new fragment4());
      /*==============================================================*/

        //获取FragmentPagerAdapter
        FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public int getCount() {
                return mFragments.size();
            }

            @Override
            public Fragment getItem(int position) {
                return mFragments.get(position);
            }
        };

        mViewPager.setAdapter(adapter);
        mViewPager.setOffscreenPageLimit(adapter.getCount() - 1);//设置fragment显示数量
        mViewPager.setCurrentItem(0);                            //设置初始显示页面

      /*=====================以下为上一篇博客新加之内容==================*/
        RadioButton radioButton = (RadioButton) mRg.getChildAt(0);
        radioButton.setChecked(true);
      /*==============================================================*/

        //监听mViewPager滑动事件
        mViewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){
            @Override
            public void onPageSelected(int position) {
               /*=====================以下为上一篇博客新加之内容==================*/
                RadioButton radioButton = (RadioButton) mRg.getChildAt(position);
                radioButton.setChecked(true);
              /*==============================================================*/

                mFragments.get(position).onAttach(MainActivity.this);
            }
        });

      /*=====================以下为上一篇博客新加之内容==================*/
       mRg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                RadioButton rb = (RadioButton) group.findViewById(checkedId);
                if (!rb.isChecked()) {
                    return;
                }
                switch (checkedId) {
                    case R.id.rb_weixin:
                        position = 0;
                        break;

                    case R.id.rb_tongxinlu:
                        position = 1;
                        break;

                    case R.id.rb_faxian:
                        position = 2;
                        break;

                    case R.id.rb_wo:
                        position = 3;
                        break;

                    default:
                        position = 0;
                        break;

                }
                mViewPager.setCurrentItem(position);
            }
        });
      /*==============================================================*/
    }
}

4.结果呈现

​

程序见github,欢迎交流~~~