仿QQ底部切换(Fragment + Radio)

 第一步: activity_main.xml  布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >   //activity_main.xml

    <FrameLayout
        android:id="@+id/frame_container"    //主内容的区域
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/div_view" >
    </FrameLayout>

    <View
        android:id="@+id/div_view"
        android:layout_width="fill_parent"
        android:layout_height="1.0px"
        android:layout_above="@+id/main_radiogroup"    //横线 在radiogroup的上面
        android:layout_marginBottom="2dip"
        android:background="#ffc9cacb" />

    <RadioGroup
        android:id="@+id/main_radiogroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" //在父布局 的下面
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/tab_rbo_question"
            style="@style/tab_textview"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"     //占 一
             android:background="@null"
            android:button="@null"
            android:checked="true"     // 默认选中
             android:drawableTop="@drawable/selector_tab_question"    //"问他" 图片的选择器
             android:text="问他"
            android:textColor="@color/tv_checked_bg" />

        <RadioButton
            android:id="@+id/tab_rbo_message"
            style="@style/tab_textview"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:drawableTop="@drawable/selector_tab_message"   // "消息" 图片选择器
             android:gravity="center_horizontal"     //居中
             android:text="消息" />

        <RadioButton
            android:id="@+id/tab_rbo_answer"
            style="@style/tab_textview"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:drawableTop="@drawable/selector_tab_answer"  //"我要回答"  图片选择器器
              android:gravity="center_horizontal"
            android:text="我要回答" />

        <RadioButton
            android:id="@+id/tab_rbo_discover"
            style="@style/tab_textview"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:drawableTop="@drawable/selector_tab_discover"    //"发现" 图片选择器
              android:gravity="center_horizontal"
            android:text="发现" />

        <RadioButton
            android:id="@+id/tab_rbo_user"
            style="@style/tab_textview"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:drawableTop="@drawable/selector_tab_user"   //"我" 图片选择器
              android:gravity="center_horizontal"
            android:text="我" />
    </RadioGroup>

</RelativeLayout>

drawable目录下 selector_tab_question.xml(" 问他"选择器)

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

.... 其他几个选择器 也一样

style.xml 下 name ="tab_textview"

    <style name="tab_textview">
        <item name="android:textSize">11sp</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:drawablePadding">2dip</item>
    </style>

第二步 MainActivity.java

public class MainActivity extends FragmentActivity {
    /** 底部导航 */
    private RadioGroup main_radiogroup;
    private Fragment mCurrent; // 当前的mCurrent
    private TabFragment faxian; // 发现
    private TabFragment huida; // 回答
    private TabFragment denglu; // 登陆
    private TabFragment xiaoxi; // 消息
    private TabFragment wenta; // 问他

    // private FragmentManager fm;
    // private FragmentTransaction ft;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        main_radiogroup = (RadioGroup) this.findViewById(R.id.main_radiogroup);
        // fm = getSupportFragmentManager();
        // main_radiogroup 被选中 ,时候的监听器
        main_radiogroup
                .setOnCheckedChangeListener(new OnCheckedChangeListener() {

                    @SuppressLint("ResourceAsColor")
                    @Override
                    public void onCheckedChanged(RadioGroup group, int checkedId) {
                        /** 改变文字的颜色 */
                        int length = group.getChildCount();
                        for (int i = 0; i < length; i++) {
                            RadioButton radioButton = (RadioButton) group
                                    .getChildAt(i);
                            if (radioButton.getId() != checkedId) {
                                // 没有选中的 时候的文字颜色
                                radioButton.setTextColor(getResources()
                                        .getColor(R.color.tv_checked_nor));
                            } else { // 选中的时候的文字颜色
                                radioButton.setTextColor(getResources()
                                        .getColor(R.color.tv_checked_bg));
                            }
                        }
                        switch (checkedId) {
                        case R.id.tab_rbo_answer:
                            changeAnswer(); //切换回答
                            break;
                        case R.id.tab_rbo_discover:
                            changeDiscover(); //切换问他
                            break;
                        case R.id.tab_rbo_message:
                            changeMessage(); //消息
                            break;
                        case R.id.tab_rbo_question:
                            changeQuesion();
                            break;
                        case R.id.tab_rbo_user:  //用户
                            changeUser();
                            break;
                        }
                    }
                });        mCurrent = new TabFragment(); //起始时候 给个值 ,不然会 报异常
        /** 默认选择第一个 */
        changeQuesion();
       }

    /**
     * 切换问他
     */
    private void changeQuesion() {
        if (wenta == null) {
            wenta = new TabFragment();
            Bundle bundle = new Bundle();
            bundle.putString("name", "问他");
            wenta.setArguments(bundle);
        }
        switchContent(wenta);
        // ft.replace(R.id.frame_container, tab1);
        // ft.commit();

    }

    /**
     * 切换消息
     */
    private void changeMessage() {
        if (xiaoxi == null) {
            xiaoxi = new TabFragment();
            Bundle bundle = new Bundle();
            bundle.putString("name", "消息");
            xiaoxi.setArguments(bundle);
        }
        switchContent(xiaoxi);
        // ft.replace(R.id.frame_container, tab1);
        // ft.commit();
    }

    /***
     * 切换登录
     */
    private void changeUser() {
        if (denglu == null) {
            denglu = new TabFragment();
            Bundle bundle = new Bundle();
            bundle.putString("name", "用户");
            denglu.setArguments(bundle);
        }
        switchContent(denglu);
        // ft.replace(R.id.frame_container, tab1);
        // ft.commit();
    }

    /***
     * 切换回答
     */
    private void changeAnswer() {
        if (huida == null) {
            huida = new TabFragment();
            Bundle bundle = new Bundle();
            bundle.putString("name", "回答");
            huida.setArguments(bundle);
        }
        switchContent(huida);
        // ft.replace(R.id.frame_container, tab1);
        // ft.commit();
    }

    /***
     * 切换发现
     */
    private void changeDiscover() {
        if (faxian == null) {
            faxian = new TabFragment();
            Bundle bundle = new Bundle();
            bundle.putString("name", "发现");
            faxian.setArguments(bundle);
        }
        switchContent(faxian);
        // ft.replace(R.id.frame_container, tab1);
        // ft.commit();
    }

    /** 修改显示的内容 不会重新加载 **/
    public void switchContent(Fragment to) {
        if (mCurrent != to) {
            FragmentTransaction transaction = getSupportFragmentManager()
                    .beginTransaction();
            if (!to.isAdded()) { // 先判断是否被add过
                transaction.hide(mCurrent).add(R.id.frame_container, to)
                        .commit(); // 隐藏当前的fragment,add下一个到Activity中
            } else {
                transaction.hide(mCurrent).show(to).commit(); // 隐藏当前的fragment,显示下一个
            }
            mCurrent = to;
        }
        // showContent();
    }
}

  TabFragment.java

public class TabFragment extends Fragment {
    private String tab_name;
    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);
        //得到 activity 传来的 值
        tab_name=getArguments().getString("name");

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.fragment_tab, container, false);
        TextView tv=(TextView) view.findViewById(R.id.textview1);
        tv.setText(tab_name);
        return view;
    }
}

layout文件夹下 fragment_tab.xml

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

    <TextView
        android:id="@+id/textview1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="100sp"
        android:layout_centerInParent="true"   // 居 父中间
        />

</RelativeLayout>

 运行后效果:

时间: 2024-09-29 06:46:30

仿QQ底部切换(Fragment + Radio)的相关文章

【Android UI设计与开发】第09期:底部菜单栏(四)Fragment+PopupWindow仿QQ空间最新版底部菜单栏

转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9023451          在今天的这篇文章当中,我依然会以实战加理论结合的方式教大家如何设计出自己觉得很炫的UI界面.好的,话不多说,进入正题.今天的这篇文章主要是以仿QQ空间的底部菜单栏效果为主,实现的效果有: <1>实现了点击按钮时的切换图片效果: <2>实现了点击按钮时的切换界面效果: <3>实现了点击中间圆形按钮时弹出菜单以及按钮图片切

Fragment,仿QQ空间

转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9023451          在今天的这篇文章当中,我依然会以实战加理论结合的方式教大家如何设计出自己觉得很炫的UI界面.好的,话不多说,进入正题.今天的这篇文章主要是以仿QQ空间的底部菜单栏效果为主,实现的效果有: <1>实现了点击按钮时的切换图片效果: <2>实现了点击按钮时的切换界面效果: <3>实现了点击中间圆形按钮时弹出菜单以及按钮图片切

Android应用经典主界面框架之一:仿QQ (使用Fragment, 附源码)

最近反复研究日常经典必用的几个android app,从主界面带来的交互方式入手进行分析,我将其大致分为三类.今天记录第一种方式,即主界面下面有几个tab页,最上端是标题栏,tab页和tab页之间不是通过滑动切换的,而是通过点击切换tab页.早期这种架构一直是使用tabhost+activitygroup来使用,随着fragment的出现及google官方也大力推荐使用fragment,后者大有代替前者之势.本文也使用fragment进行搭建,标题中的"经典"指这种交互经典,非本文的代

Android仿小米商城底部导航栏之二(BottomNavigationBar、ViewPager和Fragment的联动使用)

简介 在前文<Android仿小米商城底部导航栏(基于BottomNavigationBar)>我们使用BottomNavigationBar控件模仿实现了小米商城底部导航栏效果.接下来更进一步的,我们将通过BottomNavigationBar控件和ViewPager空间的联动使用来实现主界面的滑动导航. 导航是移动应用最重要的方面之一,对用户体验是良好还是糟糕起着至关重要的作用.好的导航可以让一款应用更加易用并且让用户快速上手.相反,糟糕的应用导航很容易让人讨厌,并遭到用户的抛弃.为了打造

Android应用经典主界面框架之一:仿QQ (使用Fragment)

最近反复研究日常经典必用的几个android app,从主界面带来的交互方式入手进行分析,我将其大致分为三类.今天记录第一种方式,即主界面下面有几个tab页,最上端是标题栏,tab页和tab页之间不是通过滑动切换的,而是通过点击切换tab页.早期这种架构一直是使用tabhost+activitygroup来使用,随着fragment的出现及google官方也大力推荐使用fragment,后者大有代替前者之势.本文也使用fragment进行搭建,标题中的“经典”指这种交互经典,非本文的代码框架结构

仿QQ黑屏、锁屏、程序切换等手势密码

仿QQ黑屏.锁屏.程序切换等手势密码 仿九宫格绘制手势锁屏,设置手势时,两次一样才成功,黑屏后即锁屏,需绘制手势解锁 下载地址:http://www.devstore.cn/code/info/1056.html 运行截图:     版权声明:本文为博主原创文章,未经博主允许不得转载.

Activity内切换fragment实现底部菜单切换遇到的坑

1.一般说来,app底部导航都会设计为5个菜单,可以使用textView,也可使用radioButton,这里我选择用radioButton,给radioButton直接设置selector就可以实现背景变换. 2.接下来说说,fragment切换的实现方式.大家都知道切换fragment有两种方式: ① replace直接替换: fragmentManager.beginTransaction().replace(R.id.ll_container, fg_home).addToBackSta

android-改进&lt;&lt;仿QQ&gt;&gt;框架源码

该文章主要修改于CSDN某大神的一篇文章,本人觉得这篇文章的面向对象很透彻,下面分享如下可学习的几点: Android应用经典主界面框架之一:仿QQ (使用Fragment, 附源码) 1.通过&符号实现计算优化:(后来通过问同事,说是计算机通过位运算 效率比平时的switch效率高,并讲解了该算法的原理.) public class Constant { public static final int SIGN_FRAGMENT_MESSAGE=0x01 <<1; public st

底边栏Tab切换Fragment,带角标显示效果

类似于手机版qq的底边栏Tab效果有很多种实现方法,比如TabActivity.自定义RadioGroup等.由于高版本下TabActivity已经被废弃,而且Activity比较重量级,所以一般不使用TabActivity.这里分享一种我写的自定义底部Tab的方法,顺带加上底部标签的角标显示效果.效果如下: 关于Demo需要交代几点: 1.这个Demo中并没有对尺寸做适配,在不同机型的手机上运行需要调整代码中的尺寸相关代码. 2.角标效果只是个演示效果,逻辑可能并不合理,具体显示或者改变.隐藏