14.TabHosty以及RadioGroup实现微博主页面切换

本文介绍如何使用TabHost和RadioGroup实现类似微博主页面的Tab切换功能。通过自定义样式和状态选择器,确保了底部导航栏的一致性和交互效果。
本文章主要是讲解TabHost的使用,以及RadioGroup的使用,功能的实现是:实现微博主页面各个活动的切换




1.新建layout文件tab_host_layout


    <RadioGroup
        android:id="@+id/rg_home_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/rg_bar"               //这里为背景图片
        android:layout_gravity="bottom"
        android:orientation="horizontal"              
        android:gravity="center"><!-- 里面的内容居中,hor水平-->
        <RadioButton
            android:id="@+id/rb_home"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="@string/home"
            style="@style/home_btn_style"                   //引用样式文件
            android:drawableTop="@drawable/home_icon"
            />                         <!--style的路径是固定的style/样式里面的名称,用于配置整个radiobutton文件的样式
                                            drawableTop属于在文字的上面输出一个图片,图片文字分离-->
        <RadioButton
            android:id="@+id/rb_sumbit"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="@string/submit"
            style="@style/home_btn_style"
            android:drawableTop="@drawable/rb_submit"


            />
        <RadioButton
            android:id="@+id/rb_msg"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="@string/msg"
            style="@style/home_btn_style"
            android:drawableTop="@drawable/rb_msg"
            />
        <RadioButton
            android:id="@+id/rb_more"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="@string/more"
            style="@style/home_btn_style"
            android:drawableTop="@drawable/rb_more"
            />




    </RadioGroup>




2.在values中新建rb_style文件,用于配置RadioButton的属性


<?xml version="1.0" encoding="utf-8"?>
<!--设置radio_button的样式-->
<resources>
    <style name="home_btn_style">
        <item name="android:button">@null</item><!-- 除去原来的图案,layout_width,layout_height是真个radio_button的大小-->
        <item name="android:textSize">15dp</item>
        <item name="android:textColor">#ffffff</item>
        <item name="android:gravity">center</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:drawablePadding">10dp</item><!--文字图片的距离-->
        <item name="android:layout_weight">1.0</item><!-- 因为是垂直的所以在整个垂直部分是占满的-->
        <item name="android:background">@drawable/bt_rb_selector</item><!-- 设置点击后的背景-->




    </style>
</resources>


3.还要设置点击后的背景,在drawable中新建文件
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/rb_selected_bg" /><!--这里是之后-->
<item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/rb_selected_bg" />


</selector>




4.完善后的tab_host_layout页面代码
(主要加入前面三个控件的代码,用于加载tabhost)


<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@android:id/tabhost">
    <!--主页面必须要的三个元素-->
    <TabWidget
        android:id="@android:id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="gone"/>
    <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_height="match_parent"
        android:layout_width="match_parent"


        />


    <RadioGroup
        android:id="@+id/rg_home_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/rg_bar"
        android:layout_gravity="bottom"
        android:orientation="horizontal"
        android:gravity="center"><!-- 里面的内容居中,hor水平-->
        <RadioButton
            android:id="@+id/rb_home"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="@string/home"
            style="@style/home_btn_style"
            android:drawableTop="@drawable/home_icon"
            />                         <!--style的路径是固定的style/样式里面的名称,用于配置整个radiobutton文件的样式
                                            drawableTop属于在文字的上面输出一个图片,图片文字分离-->
        <RadioButton
            android:id="@+id/rb_sumbit"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="@string/submit"
            style="@style/home_btn_style"
            android:drawableTop="@drawable/rb_submit"


            />
        <RadioButton
            android:id="@+id/rb_msg"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="@string/msg"
            style="@style/home_btn_style"
            android:drawableTop="@drawable/rb_msg"
            />
        <RadioButton
            android:id="@+id/rb_more"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="@string/more"
            style="@style/home_btn_style"
            android:drawableTop="@drawable/rb_more"
            />




    </RadioGroup>




</TabHost>




4.新建Activity叫TabHostActivity为TabHost页面,另外在新建四个活动用于点击切换的四个页面,以及相应的四个布局


5.TabHostActivity代码(用于加载之前的tab_host_layout页面,)




/**TabHost转载各个Activity活动的页面
 * Created by Administrator on 2016/8/23.
 */
public class TabhostActivity extends TabActivity {
    private static final String HOME_TAB="home";
    private static final String AT_TAB="at";
    private static final String MSG_TAB="msg";
    private  static final String MORE_TAB="more";
    private TabHost tabHost;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tabhost);
        tabHost=this.getTabHost();            //获取TabHost对象
        //加载绑定多个Activity页面
        TabHost.TabSpec homeSpec=tabHost.newTabSpec(HOME_TAB).setIndicator(HOME_TAB).setContent(new Intent(this,HomeActivity.class));
        TabHost.TabSpec atSpec=tabHost.newTabSpec(AT_TAB).setIndicator(AT_TAB).setContent(new Intent(this,AtActivity.class));
        TabHost.TabSpec msgSpec=tabHost.newTabSpec(MSG_TAB).setIndicator(MSG_TAB).setContent(new Intent(this,MsgActivity.class));
        TabHost.TabSpec moreSpec=tabHost.newTabSpec(MORE_TAB).setIndicator(MORE_TAB).setContent(new Intent(this,MoreActivity.class));
        tabHost.addTab(homeSpec);
        tabHost.addTab(atSpec);
        tabHost.addTab(msgSpec);
        tabHost.addTab(moreSpec);


        //点击每个RadioButton切换不同的Activity
        RadioGroup radioGroup=(RadioGroup)findViewById(R.id.rg_home_btn);
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId){
                    case R.id.rb_home:
                        tabHost.setCurrentTabByTag(HOME_TAB);                    //页面转换
                        break;
                    case R.id.rb_sumbit:
                        tabHost.setCurrentTabByTag(AT_TAB);
                        break;
                    case R.id.rb_msg:
                        tabHost.setCurrentTabByTag(MSG_TAB);
                        break;
                    case R.id.rb_more:
                        tabHost.setCurrentTabByTag(MORE_TAB);
                        break;
                    default:
                        break;
                }
            }
        });
    }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值