安卓微信底部导航栏的实现

刚开始要实现这个功能时,我去谷歌搜了一下,谷歌的建议是不要模仿其他的平台底部导航栏的实现,而是推荐ActionBar来实现顶端导航栏的实现,但是既然很多App都是通过实现底部导航栏来引导用户,所以我搜了这个底部导航栏功能的实现,发现网上也有很多种版本,本人参考了http://www.cnblogs.com/xiaofeixiang/p/4156732.html博客,研究了其前辈的写实现,下面是自己对前辈的实现代码做一些了简化和更改。
代码:
values/activity_main_bottom_tab_rbstyle.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="activity_main_bottom_tab_rbstyle">
        <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:background">@drawable/activity_main_bottom_tab_bgstate</item>
        <item name="android:button">@null</item>
        <item name="android:gravity">center_horizontal|bottom</item>
        <item name="android:paddingTop">2dp</item>
        <item name="android:textColor">@color/activity_main_bottom_tab_tvstate</item>
        <item name="android:onClick">onClick</item>
    </style>
</resources>

drawable/activity_main_bottom_tab_bgstate.xml

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

layout/activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:id="@+id/title_bar_textView"
        android:gravity="center"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:text="@string/activity_main_bottom_tab_home"
        android:background="@color/material_blue_grey_800"
        android:layout_width="match_parent"
        android:layout_height="45dp" />
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </android.support.v4.view.ViewPager>
    <RadioGroup
        android:id="@+id/bottom_tab_radiogroup"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/darker_gray"
        android:orientation="horizontal">
        <RadioButton
            android:id="@+id/bottom_tab_home"
            android:checked="true"
            style="@style/activity_main_bottom_tab_rbstyle"
            android:drawableTop="@drawable/tab_home"
            android:text="@string/activity_main_bottom_tab_home"/>
        <RadioButton
            android:id="@+id/bottom_tab_letter"
            style="@style/activity_main_bottom_tab_rbstyle"
            android:drawableTop="@drawable/tab_letter"
            android:text="@string/activity_main_bottom_tab_letter"/>
        <RadioButton
            android:id="@+id/bottom_tab_reference"
            style="@style/activity_main_bottom_tab_rbstyle"
            android:drawableTop="@drawable/tab_reference"
            android:text="@string/activity_main_bottom_tab_reference"/>
        <RadioButton
            android:id="@+id/bottom_tab_setting"
            style="@style/activity_main_bottom_tab_rbstyle"
            android:drawableTop="@drawable/tab_setting"
            android:text="@string/activity_main_bottom_tab_setting"/>
    </RadioGroup>
</LinearLayout>

com.scau.beyondboy.weibo.MainActivity

/**
 * Author:beyondboy
 * Gmail:xuguoli.scau@gmail.com
 * Date: 2015-05-30
 * Time: 11:15
 */
package com.scau.beyondboy.weibo;
import android.os.Environment;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;


import java.util.ArrayList;
import java.util.List;
public class MainActivity extends ActionBarActivity
{
    private static final String TAG =MainActivity.class.getName();
    /**分别装载ViewPager主页,消息,搜索,我四个Fragment*/
    private static List<Fragment> sFragments=new ArrayList<Fragment>(4);
    /**标题栏的字符标题的ID*/
    private static final int[] STITLE_IDS =new int[]
            {R.string.activity_main_bottom_tab_home,
            R.string.activity_main_bottom_tab_letter,
            R.string.activity_main_bottom_tab_reference,
            R.string.activity_main_bottom_tab_setting};
    private RadioGroup mBottomTabRadioGroup;
    private ViewPager mViewPager;
    private TextView mtitleTextView;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPager=(ViewPager)findViewById(R.id.viewpager);
        mtitleTextView=(TextView)findViewById(R.id.title_bar_textView);
        mBottomTabRadioGroup=(RadioGroup)findViewById(R.id.bottom_tab_radiogroup);
        sFragments.add(new Fragment());
        sFragments.add(new Fragment());
        sFragments.add(new Fragment());
        sFragments.add(new Fragment());
        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager())
        {
            @Override
            public Fragment getItem(int position)
            {
                return sFragments.get(position);
            }
            @Override
            public int getCount()
            {
                return sFragments.size();
            }
        });
        /**监听页面的滑动,以改变标题栏的标题*/
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener()
        {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
            {
            }
            @Override
            public void onPageSelected(int position)
            {
                mtitleTextView.setText(STITLE_IDS[position]);
                ((RadioButton)mBottomTabRadioGroup.getChildAt(position)).setChecked(true);
            }
            @Override
            public void onPageScrollStateChanged(int state)
            {
            }
        });
//        HttpClientUtils.postText(this,"hafhla");
    }   
    /**
     * 监听底部导航栏那个选项被点击,以改变标题栏的标题
     */
    public void onClick(View view)
    {
        int id=mBottomTabRadioGroup.indexOfChild(view);
        mtitleTextView.setText(STITLE_IDS[id]);
    }    
}

运行结果:
底部导航栏的实现

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值